index.js

import React from 'react'
import ReactDOM from 'react-dom'
import './index.scss'
import classnames from 'classnames'

const re = /(https?|ftp):\/\/[-A-Za-z0-9+&@#/%?=~_|!:,.;]+[-A-Za-z0-9+&@#/%=~_|]/

function ClosablePopup({
                         title,
                         content,
                         className,
                         closable = true,
                         close = function () {
                         },
                         clickMaskClose = true,
                         closeIcon = 'iconiconfront-2',
                         afterClose = function () {
                         },
                         remove = function () {

                         }
                       } = {}) {


  function unmountComponent() {
    ReactDOM.unmountComponentAtNode(div)
    if (div && div.parentNode) {
      div.parentNode.removeChild(div)
    }
  }

  function _close() {
    let _c = close()
    if (_c && _c.then) {
      _c.then(() => {
        unmountComponent()
        afterClose()
      })
    } else {
      unmountComponent()
      afterClose()
    }
  }

  function clickMask() {
    if (closable) {
      return
    }
    if (!clickMaskClose) {
      return
    }
    _close()
  }

  const closablePopup = (
    <div className={'closable-popup-mask'} onClick={clickMask}>
      <div className={classnames(['popup-container', className])}>
        <div className="title">{title}</div>
        <div className="content">
          {content}
        </div>
        {
          closable &&
          (re.test(closeIcon)
            ? <img src={closeIcon} alt="" className={'close-icon'} onClick={_close}/>
            : <i className={`close iconfont ${closeIcon}`} onClick={_close}/>)
        }
      </div>
    </div>
  )
  const div = document.createElement('div')
  document.body.appendChild(div)


  ReactDOM.render(closablePopup, div)

  return {
    close: _close,
    remove: unmountComponent
  }
}

export default ClosablePopup