feat/support use modal hooks

src/components/modal/index.ts

@@ -12,6 +12,7 @@ export type { ModalShowProps, ModalShowHandler } from './show'
 export type { ModalAlertProps } from './alert'
 export type { ModalConfirmProps } from './confirm'
 
+export { useModal } from './use-modal'
 export default attachPropertiesToComponent(Modal, {
   show,
   alert,

src/components/modal/use-modal.tsx

@@ -0,0 +1,115 @@
+import { useMemoizedFn } from 'ahooks'
+import React from 'react'
+import { mergeProps } from '../../utils/with-default-props'
+import { getDefaultConfig } from '../config-provider'
+import { usePortal } from '../portal-provider'
+import { ModalAlertProps } from './alert'
+import { ModalConfirmProps } from './confirm'
+import { Modal } from './modal'
+import { ModalShowProps } from './show'
+
+export const closeFnSet = new Set<() => void>()
+
+export const useModal = () => {
+  const { renderModalInPortal } = usePortal()
+
+  /**
+   * @description refer to Modal.show
+   * @see https://github.com/ant-design/ant-design-mobile/blob/master/src/components/modal/show.tsx
+   */
+  const show = useMemoizedFn((props: ModalShowProps) => {
+    const handler = renderModalInPortal(
+      <Modal
+        {...props}
+        afterClose={() => {
+          closeFnSet.delete(handler.close)
+          props.afterClose?.()
+        }}
+      />
+    )
+    closeFnSet.add(handler.close)
+    return handler
+  })
+
+  /**
+   * @description refer to Modal.confirm
+   * @see https://github.com/ant-design/ant-design-mobile/blob/master/src/components/modal/confirm.tsx
+   */
+  const confirm = useMemoizedFn((p: ModalConfirmProps) => {
+    const defaultProps = {
+      confirmText: getDefaultConfig().locale.Modal.ok,
+      cancelText: getDefaultConfig().locale.common.cancel,
+    }
+    const props = mergeProps(defaultProps, p)
+
+    return new Promise<boolean>(resolve => {
+      show({
+        ...props,
+        closeOnAction: true,
+        onClose: () => {
+          props.onClose?.()
+          resolve(false)
+        },
+        actions: [
+          {
+            key: 'confirm',
+            text: props.confirmText,
+            primary: true,
+            onClick: async () => {
+              await props.onConfirm?.()
+              resolve(true)
+            },
+          },
+          {
+            key: 'cancel',
+            text: props.cancelText,
+            onClick: async () => {
+              await props.onCancel?.()
+              resolve(false)
+            },
+          },
+        ],
+      })
+    })
+  })
+
+  /**
+   * @description refer to Modal.alert
+   * @see https://github.com/ant-design/ant-design-mobile/blob/master/src/components/modal/alert.tsx
+   */
+  const alert = useMemoizedFn((p: ModalAlertProps) => {
+    const defaultProps = {
+      confirmText: getDefaultConfig().locale.Modal.ok,
+    }
+    const props = mergeProps(defaultProps, p)
+    return new Promise<void>(resolve => {
+      show({
+        ...props,
+        closeOnAction: true,
+        actions: [
+          {
+            key: 'confirm',
+            text: props.confirmText,
+            primary: true,
+          },
+        ],
+        onAction: props.onConfirm,
+        onClose: () => {
+          props.onClose?.()
+          resolve()
+        },
+      })
+    })
+  })
+
+  const clear = useMemoizedFn(() => {
+    closeFnSet.forEach(close => close())
+  })
+
+  return {
+    show,
+    clear,
+    confirm,
+    alert,
+  }
+}

src/components/portal-provider/demos/demo1.tsx

@@ -0,0 +1,92 @@
+import {
+  Button,
+  ConfigProvider,
+  PortalProvider,
+  Space,
+  useModal,
+} from 'antd-mobile'
+import enUS from 'antd-mobile/es/locales/en-US'
+import { DemoBlock } from 'demos'
+import React from 'react'
+
+export default () => {
+  return (
+    <>
+      <DemoBlock title='中文'>
+        <ConfigProvider locale={enUS}>
+          {/* should be wrapped with `<PortalProvider />` */}
+          <PortalProvider>
+            <ComponentWantsToUseModal />
+          </PortalProvider>
+        </ConfigProvider>
+      </DemoBlock>
+    </>
+  )
+}
+
+const ComponentWantsToUseModal = () => {
+  const { show, confirm, alert, clear } = useModal()
+  return (
+    <Space direction='vertical'>
+      <Button
+        block
+        shape='rounded'
+        color='primary'
+        size='large'
+        onClick={() => {
+          show({
+            title: 'useModal show',
+            content: '🚀 LFG!',
+            closeOnAction: true,
+            showCloseButton: true,
+            onClose: () => console.log('❎ onClose'),
+            actions: [
+              {
+                key: 'confirm',
+                text: 'I get it',
+              },
+            ],
+          })
+        }}
+      >
+        useModal show
+      </Button>
+      <Button
+        block
+        shape='rounded'
+        color='primary'
+        size='large'
+        onClick={() => {
+          confirm({
+            title: 'useModal confirm',
+            content: '🚀 LFG!',
+            showCloseButton: true,
+            onConfirm: () => console.log('🛫 confirm'),
+            onCancel: () => console.log('🫸 cancel'),
+            onClose: () => console.log('❎ onClose'),
+          })
+        }}
+      >
+        useModal confirm
+      </Button>
+      <Button
+        block
+        shape='rounded'
+        color='primary'
+        size='large'
+        onClick={() => {
+          alert({
+            title: 'useModal alert',
+            content: '🚀 LFG!',
+            showCloseButton: true,
+            confirmText: `Clear Modals`,
+            onConfirm: () => clear(),
+            onClose: () => console.log('❎ onClose'),
+          })
+        }}
+      >
+        useModal alert
+      </Button>
+    </Space>
+  )
+}

src/components/portal-provider/index.en.md

@@ -0,0 +1,19 @@
+# PortalProvider
+
+Use `Modal` or `Popup` component imperatively with `hooks` style globally.
+
+## When to use
+
+- If you want to use `useModal` from `Modal` or `usePopup` `Popup` (`WIP 🚧 `) components
+
+## Demos
+
+<code src="./demos/demo1.tsx" ></code>
+
+## PortalProvider
+
+### Props
+
+| Name     | Description                           | Type        | Default |
+| -------- | ------------------------------------- | ----------- | ------- |
+| children | Component who wants to use `useModal` | `ReactNode` | -       |

src/components/portal-provider/index.tsx

@@ -0,0 +1,7 @@
+import { PortalProvider } from './portal-provider'
+
+export type { PortalProviderProps } from './portal-provider'
+
+export { usePortal } from './portal-provider'
+
+export default PortalProvider

src/components/portal-provider/index.zh.md

@@ -0,0 +1,19 @@
+# PortalProvider 配置
+
+让你能够像风一般自由地以 `hooks` 形式指令式调用 `Modal` 或者 `Popup` 等组件。
+
+## 何时使用
+
+- 假设您想试用 `useModal` 或者 `usePopup` (`🚧 假设本PR通过时`) 时需要 `PortalProvider`
+
+## 示例
+
+<code src="./demos/demo1.tsx" ></code>
+
+## PortalProvider
+
+### 属性
+
+| 属性 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- | --- |
+| children | 需要用到 `useModal` 的子组件 (一般是应用入口) | `Locale` | [zh-CN] | - |

src/components/portal-provider/portal-provider.tsx

@@ -0,0 +1,127 @@
+import { useMemoizedFn } from 'ahooks'
+import React, {
+  createContext,
+  createRef,
+  PropsWithChildren,
+  useContext,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+  useState,
+} from 'react'
+import type { ImperativeHandler } from '../../utils/render-imperatively'
+
+const PortalContext = createContext<PortalContextType | undefined>(undefined)
+
+type ImperativeProps = {
+  visible?: boolean
+  onClose?: () => void
+  afterClose?: () => void
+}
+
+type TargetElement = React.ReactElement<ImperativeProps>
+
+interface PortalContextType {
+  renderModalInPortal: (element: TargetElement) => ImperativeHandler
+}
+
+interface WrapperProps {
+  element: TargetElement
+  unmount: () => void
+}
+
+const Wrapper = React.forwardRef<ImperativeHandler, WrapperProps>(
+  ({ element, unmount }, ref) => {
+    const [visible, setVisible] = useState(false)
+    const closedRef = useRef(false)
+    const [elementToRender, setElementToRender] = useState(element)
+    const keyRef = useRef(0)
+    useEffect(() => {
+      if (!closedRef.current) {
+        setVisible(true)
+      } else {
+        afterClose()
+      }
+    }, [])
+    function onClose() {
+      closedRef.current = true
+      setVisible(false)
+      elementToRender.props.onClose?.()
+    }
+    function afterClose() {
+      unmount()
+      elementToRender.props.afterClose?.()
+    }
+    useImperativeHandle(ref, () => ({
+      close: onClose,
+      replace: element => {
+        keyRef.current++
+        elementToRender.props.afterClose?.()
+        setElementToRender(element)
+      },
+    }))
+    return React.cloneElement(elementToRender, {
+      ...elementToRender.props,
+      key: keyRef.current,
+      visible,
+      onClose,
+      afterClose,
+    })
+  }
+)
+
+export type PortalProviderProps = PropsWithChildren & {}
+
+let wrapperId = 0
+
+export const PortalProvider: React.FC<PortalProviderProps> = ({ children }) => {
+  const [portalElements, setPortalElements] = useState<TargetElement[]>([])
+  const wrapperRef = createRef<ImperativeHandler>()
+
+  const renderModalInPortal = useMemoizedFn((element: TargetElement) => {
+    const unmount = () => {
+      setPortalElements(elements =>
+        elements.filter(el => el.key !== wrappedElement.key)
+      )
+    }
+    const wrappedElement = (
+      <Wrapper
+        key={wrapperId++}
+        ref={wrapperRef}
+        element={element}
+        unmount={unmount}
+      />
+    )
+    setPortalElements(elements => [...elements, wrappedElement])
+    return {
+      close: async () => {
+        if (!wrapperRef.current) {
+          // it means the wrapper is not mounted yet, call `unmount` directly
+          unmount()
+          // call `afterClose` to make sure the callback is called
+          element.props.afterClose?.()
+        } else {
+          wrapperRef.current?.close()
+        }
+      },
+      replace: element => {
+        wrapperRef.current?.replace(element)
+      },
+      isRendered: () => !!wrapperRef.current,
+    } as ImperativeHandler
+  })
+  return (
+    <PortalContext.Provider value={{ renderModalInPortal }}>
+      {children}
+      {portalElements}
+    </PortalContext.Provider>
+  )
+}
+
+export const usePortal = () => {
+  const context = useContext(PortalContext)
+  if (!context) {
+    throw new Error('usePortal must be used within a PortalProvider')
+  }
+  return context
+}

src/components/portal-provider/tests/portal-provider.test.tsx

@@ -0,0 +1,5 @@
+describe('PortalProvider', () => {
+  test('WIP 🚧', () => {
+    expect(true)
+  })
+})