feat(modal): api 增加 close 方法和 key 参数 (#2709)

XiaoMi · Jan 10, 2024 · 1a061e4 · 1a061e4
1 parent aba4b72
commit 1a061e4
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 5 deletions.
diff --git a/.changeset/chilly-cherries-float.md b/.changeset/chilly-cherries-float.md
@@ -0,0 +1,5 @@
+---
+"@hi-ui/modal": minor
+---
+
+feat: api 增加 close 方法和 key 参数
diff --git a/.changeset/mighty-peaches-deliver.md b/.changeset/mighty-peaches-deliver.md
@@ -0,0 +1,5 @@
+---
+"@hi-ui/hiui": patch
+---
+
+feat(modal): api 增加 close 方法和 key 参数
diff --git a/packages/ui/modal/hi-docs.config.mdx b/packages/ui/modal/hi-docs.config.mdx
@@ -24,11 +24,18 @@
 | ----------- | -------------------- | ---------- | -------------------------------------------------------- | --------- |
 | onConfirm   | 确认事件触发时的回调 | () => void | -                                                        | -         |
 | onCancel    | 取消事件触发时的回调 | () => void | -                                                        | -         |
-| title       | 确认弹窗的标题       | string     | -                                                        | string    |
+| key         | 组件实例唯一标识     | string     | -                                                        | -    |
+| title       | 确认弹窗的标题       | string     | -                                                        | -    |
 | content     | 确认弹窗的内容       | ReactNode     | -                                                        | -         |
 | type        | confirm 的类型       | string     | 'default' \| 'success' \| 'error' \| 'warning' \| 'info' | 'default' |
 | cancelText  | 取消按钮文案         | string     | -                                                        | '取消'    |
 | confirmText | 确认按钮文案         | string     | -                                                        | '确定'    |
 | showHeaderDivider | 展示 header 与内容的分割线   | boolean     | -                                          |    -    |
 | closeOnEsc | 开启 Esc 快捷键关闭   | boolean     | -                                                       |   true    |
 | maskClosable | 开启点击蒙层时关闭   | boolean     | -                                                       |   true    |
+
+### Modal.close(key)
+
+| 参数 | 说明                                 | 类型   | 可选值 | 默认值 |
+| ---- | ------------------------------------ | ------ | ------ | ------ |
+| key  | Modal 实例唯一标识                     | string | -      | -      |
diff --git a/packages/ui/modal/src/with-api.tsx b/packages/ui/modal/src/with-api.tsx
@@ -8,10 +8,17 @@ import { modalPrefix, Modal, ModalProps } from './Modal'
 const prefixCls = modalPrefix
 const selector = `.${prefixCls}-wrapper`
 
+const modalInstanceCache: {
+  [key: string]: () => void
+} = {}
+
 // TODO： 抽离合并到 Toast API
-const open = ({ onConfirm, onCancel, content, ...rest }: ModalApiProps = {}) => {
-  // 支持多个 Modal 共存
-  const selectorId = `${selector}__${uuid()}`
+const open = ({ key, onConfirm, onCancel, content, ...rest }: ModalApiProps = {}) => {
+  if (!key) {
+    key = uuid()
+  }
+
+  const selectorId = `${selector}__${key}`
   let container: any = Container.getContainer(selectorId)
 
   const toastManagerRef = createRef<any>()
@@ -47,6 +54,24 @@ const open = ({ onConfirm, onCancel, content, ...rest }: ModalApiProps = {}) =>
   requestAnimationFrame(() => {
     render(ClonedModal, container)
   })
+
+  const close = () => {
+    toastManagerRef.current?.close()
+  }
+
+  if (key) {
+    modalInstanceCache[key] = close
+  }
+
+  return key
+}
+
+const close = (key: string) => {
+  if (typeof modalInstanceCache[key] === 'function') {
+    modalInstanceCache[key]()
+  }
+
+  delete modalInstanceCache[key]
 }
 
 export interface ModalApiProps
@@ -69,8 +94,12 @@ export interface ModalApiProps
    * 	confirm 的内容
    */
   content?: React.ReactNode
+  /**
+   * 组件实例唯一标识
+   */
+  key?: string
 }
 
 export function withModal(instance: typeof Modal) {
-  return Object.assign(instance, { confirm: open })
+  return Object.assign(instance, { confirm: open, close })
 }