ych-pumpkin/src/components/modal/index.js

pumpkin的npm包

import React, { Component } from 'react';
/* eslint-disable */
import ReactDOM from 'react-dom';
/* eslint-disable */
import TemplateOne from './templates/templateOne';
import TemplateTwo from './templates/templateTwo';
import './index.less';

// modal 弹窗组件
export default class Modal extends Component {
  constructor(props) {
    super(props);
    this.state = {
    };
  }
  // 操作modal方法集合
  static modalFun = () => {
    const div = document.createElement('div');
    div.className = 'pandora-modal-page';
    // 打开modal
    function open(parameter) {
      const {
        customDom, zzcClick, cancelFun, title, confirmFun, templateType, cancelName, confirmName,
      } = parameter;
      document.body.appendChild(div);
      ReactDOM.render(<Modal
        customDom={customDom}
        zzcClick={zzcClick}
        title={title || '默认标题'}
        templateType={templateType || 1}
        cancelFun={cancelFun || Modal.modalFun().close}
        confirmFun={confirmFun || Modal.modalFun().close}
        cancelName={cancelName || '取消'}
        confirmName={confirmName || '确定'}
      />, div);
    }
    // 删除modal
    function close() {
      const pandoraModalPage = document.getElementsByClassName('pandora-modal-page');
      const pandoraModal = document.getElementsByClassName('pandora-modal');
      pandoraModal[0].className = 'pandora-modal fade-out';
      setTimeout(() => {
        pandoraModalPage[0].remove();
      }, 300);
    }
    return { open, close };
  }
  // close
  close=() => {
    if (this.props.zzcClick) {
      Modal.modalFun().close();
    }
  }
  templateFun=() => {
    const {
      customDom, templateType, title, cancelFun, confirmFun, cancelName, confirmName,
    } = this.props;
    if (customDom) {
      return customDom;
    }
    if (templateType === 1) {
      return (<TemplateOne
        title={title}
        cancelFun={cancelFun}
        confirmFun={confirmFun}
        cancelName={cancelName}
        confirmName={confirmName}
      />);
    }
    return (<TemplateTwo
      title={title}
      confirmFun={confirmFun}
      confirmName={confirmName}
    />);
  }
  render() {
    return (
      <div className="pandora-modal">
        <div className="zzc" onClick={this.close} />
        <div className="content">
          { this.templateFun()}
        </div>
      </div>
    );
  }
}