promise-modal

介绍

promise-modal 是一个把 React Modal 组件创建到 body 根目录并且 Promise 函数式调用的库

安装

npm i promise-modal

使用

你的 Modal 组件这样写，我们会传入 callbackResolve和 callbackReject 两个 props 到你的组件中，你需要在关闭 Modal 的时候调用它们。

import React, { useState } from 'react'
import { Modal, Button } from 'antd'
import PropTypes from 'prop-types'

const TestModal = props => {
  const { title, callbackResolve, callbackReject } = props
  const [isModalVisible, setIsModalVisible] = useState(true)

  const handleOk = () => {
    setIsModalVisible(false)
    callbackResolve(true)
  }

  const handleCancel = () => {
    setIsModalVisible(false)
    callbackReject(false)
  }

  return (
    <Modal
      destroyOnClose
      title={title}
      visible={isModalVisible}
      onOk={handleOk}
      onCancel={handleCancel}
    >
      <p>Some contents...</p>
      <p>Some contents...</p>
    </Modal>
  )
}

TestModal.propTypes = {
  title: PropTypes.string.isRequired,
  callbackResolve: PropTypes.func.isRequired,
  callbackReject: PropTypes.func.isRequired,
}
export default TestModal

把你的 Modal 组件传入 create 函数

import { create } from 'promise-modal'
import TestModal from './TestModal'

// 如果你使用 Class 组件
export default (data) => create(TestModal, data)

// 如果你使用函数式组件和 hooks，你必须创建一个自定义 hooks 返回
export const useTestModal = () => {
  const showTestModal = (data) => create(TestModal, data)
  return showTestModal
}

业务代码中使用 Modal

import { useTestModal } from './modals/TestModal'

const showTestModal = useTestModal()

showTestModal({
  title: 'Test Modal'
})
.then((response) => {
  console.log('response: ', response)
}).catch((error) => {
  console.log('error: ', error)
})

自定义 Container

// your app.js
import { initPromiseModal } from 'promise-modal'

const CustomContainer = ({ children }) => (
  <Provider store={store}>
    <ConfigProvider locale={getAntLocale()}>{children}</ConfigProvider>
  </Provider>
)

CustomContainer.propTypes = {
  children: PropTypes.element.isRequired,
}

useEffect(() => {
  initPromiseModal({
    CustomContainer,
  })
}, [])

API

create 方法

| 参数 | 说明 | 类型 | 可选值 | 默认值 | 是否必传 | | --- | --- | --- | --- | --- | --- | | template | Modal 组件 | ReactComponent | -| - | 是 | | data | 组件 props | Object |- | {} | 否 | | options | 配置项 | Object |- | {} | 否 | | options.unmountDelay | 延迟销毁时长(毫秒) | Number |- | 0 | 否 |

initPromiseModal

| 参数 | 说明 | 类型 | 可选值 | 默认值 | 是否必传 | | --- | --- | --- | --- | --- | --- | | CustomContainer | 自定义 Container | ReactComponent | -| - | 是 |

License

promise-modal is released under the MIT License. See the bundled LICENSE file for details.