對antd的Modal改造

chinawzc發表於2018-11-05

直接傳入API和原來Modal的children,而不傳入visible,讓Modal處理自己的資料

import React from `react`;
import ReactDOM from `react-dom`;
import { Modal } from `antd`;


export function newModal(options = {}, children) {
  const destroy = (node) => {
    ReactDOM.unmountComponentAtNode(node);
    const unmountResult = ReactDOM.unmountComponentAtNode(node);
    if (unmountResult && node.parentNode) { // ReactDOM.unmountComponentAtNode就可以刪除
      node.parentNode.removeChild(node);
    }
  };
  const modalHas = document.getElementsByClassName(`smart-modal`)[0];
  if (modalHas) {
    destroy(modalHas);
  }
  const div = document.createElement(`div`);
  div.setAttribute(`class`, `smart-modal`);
  const { onOk = () => { }, onCancel = () => { }, ...rest } = options;
  const handleOk = () => {
    onOk && onOk(); // eslint-disable-line
    destroy(div);
  };
  const handleCancel = () => {
    onCancel && onCancel(); // eslint-disable-line
    destroy(div);
  };
  const smModal = (
    <Modal
      onOk={handleOk}
      onCancel={handleCancel}
      {...rest}
      visible
    >
      {children}
    </Modal>
  );
  document.body.appendChild(div);
  ReactDOM.render(smModal, div);
}

相關文章