promise-modal

1.1.0 • Public • Published

promise-modal

version size license

介绍

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

安装

npm i promise-modal

使用

你的 Modal 组件这样写,我们会传入 callbackResolvecallbackReject 两个 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.

Readme

Keywords

Package Sidebar

Install

npm i promise-modal

Weekly Downloads

0

Version

1.1.0

License

MIT

Unpacked Size

7.51 kB

Total Files

4

Last publish

Collaborators

  • liruifengv