feat(comp:drawer,modal): add onBeforeClose event (#647)

BREAKING CHANGE: onBeforeClose is used instead of onClose fix #645
IDuxFE · Dec 22, 2021 · a45e450 · a45e450
1 parent 9eced60
commit a45e450
Show file tree

Hide file tree

Showing 8 changed files with 39 additions and 30 deletions.
diff --git a/packages/components/drawer/__tests__/drawer.spec.ts b/packages/components/drawer/__tests__/drawer.spec.ts
@@ -311,51 +311,53 @@ describe('Drawer', () => {
   })
 
   describe('Events', () => {
-    test('onClose work', async () => {
+    test('onClose and onBeforeClose work', async () => {
       const onClose = jest.fn()
+      const onBeforeClose = jest.fn()
       const onUpdateVisible = jest.fn()
-      const wrapper = DrawerMount({ props: { onClose, 'onUpdate:visible': onUpdateVisible } })
+      const wrapper = DrawerMount({ props: { onClose, onBeforeClose, 'onUpdate:visible': onUpdateVisible } })
 
       wrapper.vm.close()
       await flushPromises()
 
       expect(onClose).toBeCalled()
+      expect(onBeforeClose).toBeCalled()
       expect(onUpdateVisible).toBeCalledWith(false)
     })
 
-    test('onClose with result work', async () => {
-      const onClose = jest.fn().mockImplementation((evt: unknown) => evt === 'close')
+    test('onBeforeClose with result work', async () => {
+      const onBeforeClose = jest.fn().mockImplementation((evt: unknown) => evt === 'close')
       const onUpdateVisible = jest.fn()
-      const wrapper = DrawerMount({ props: { onClose, 'onUpdate:visible': onUpdateVisible } })
+      const wrapper = DrawerMount({ props: { onBeforeClose, 'onUpdate:visible': onUpdateVisible } })
 
       wrapper.vm.close(1)
       await flushPromises()
 
-      expect(onClose).toBeCalledWith(1)
+      expect(onBeforeClose).toBeCalledWith(1)
       expect(onUpdateVisible).not.toBeCalled()
 
       wrapper.vm.close('close')
       await flushPromises()
 
-      expect(onClose).toBeCalledWith('close')
+      expect(onBeforeClose).toBeCalledWith('close')
       expect(onUpdateVisible).toBeCalledWith(false)
     })
 
-    test('onClose with promise work', async () => {
-      const onClose = jest.fn().mockImplementation((evt: unknown) => Promise.resolve(evt === 'close'))
+    test('onBeforeClose with promise work', async () => {
+      const onBeforeClose = jest.fn().mockImplementation((evt: unknown) => Promise.resolve(evt === 'close'))
       const onUpdateVisible = jest.fn()
-      const wrapper = DrawerMount({ props: { onClose, 'onUpdate:visible': onUpdateVisible } })
+      const wrapper = DrawerMount({ props: { onBeforeClose, 'onUpdate:visible': onUpdateVisible } })
 
       wrapper.vm.close(1)
       await flushPromises()
 
-      expect(onClose).toBeCalledWith(1)
+      expect(onBeforeClose).toBeCalledWith(1)
       expect(onUpdateVisible).not.toBeCalled()
 
       wrapper.vm.close('close')
       await flushPromises()
 
-      expect(onClose).toBeCalledWith('close')
+      expect(onBeforeClose).toBeCalledWith('close')
       expect(onUpdateVisible).toBeCalledWith(false)
     })
   })

diff --git a/packages/components/drawer/docs/Index.zh.md b/packages/components/drawer/docs/Index.zh.md
@@ -32,7 +32,8 @@ order: 0
 | `zIndex` | 设置抽屉的 `z-index` | `number` | `1000` | ✅ | - |
 | `onAfterOpen` | 打开后的回调 | `() => void` | - | - | - |
 | `onAfterClose` | 关闭后的回调 | `() => void` | - | - | - |
-| `onClose` | 点击蒙层或关闭图标的回调 | `(evt?: Event \| unknown) => unknown` | - | - | 返回 `false` 的时候，将阻止关闭 |
+| `onBeforeClose` | 蒙层关闭前的回调 | `(evt?: Event \| unknown) => void \| boolean \| Promise<boolean>` | - | - | 返回 `false` 的时候，将阻止关闭 |
+| `onClose` | 点击蒙层或关闭图标的回调 | `(evt?: Event \| unknown) => void` | - | - | - |
 
 ```ts
 export interface DrawerButtonProps extends ButtonProps {

diff --git a/packages/components/drawer/src/Drawer.tsx b/packages/components/drawer/src/Drawer.tsx
@@ -120,11 +120,12 @@ function useTrigger(props: DrawerProps, setVisible: (visible: boolean) => void)
   const open = () => setVisible(true)
 
   const close = async (evt?: Event | unknown) => {
-    const result = await callEmit(props.onClose, evt)
+    const result = await callEmit(props.onBeforeClose, evt)
     if (result === false) {
       return
     }
     setVisible(false)
+    callEmit(props.onClose, evt)
   }
 
   return { open, close }

diff --git a/packages/components/drawer/src/types.ts b/packages/components/drawer/src/types.ts
@@ -51,9 +51,10 @@ export const drawerProps = {
 
   // events
   'onUpdate:visible': IxPropTypes.emit<(visible: boolean) => void>(),
-  onClose: IxPropTypes.emit<(evt?: Event | unknown) => unknown>(),
   onAfterOpen: IxPropTypes.emit<() => void>(),
   onAfterClose: IxPropTypes.emit<() => void>(),
+  onBeforeClose: IxPropTypes.emit<(evt?: Event | unknown) => void | boolean | Promise<boolean>>(),
+  onClose: IxPropTypes.emit<(evt?: Event | unknown) => void>(),
 }
 
 export type DrawerProps = IxInnerPropTypes<typeof drawerProps>

diff --git a/packages/components/modal/__tests__/modal.spec.ts b/packages/components/modal/__tests__/modal.spec.ts
@@ -400,10 +400,11 @@ describe('Modal', () => {
   })
 
   describe('Events', () => {
-    test('onClose work', async () => {
+    test('onClose and onBeforeClose work', async () => {
       const onClose = jest.fn()
+      const onBeforeClose = jest.fn()
       const onUpdateVisible = jest.fn()
-      const wrapper = ModalMount({ props: { onClose, 'onUpdate:visible': onUpdateVisible } })
+      const wrapper = ModalMount({ props: { onClose, onBeforeClose, 'onUpdate:visible': onUpdateVisible } })
 
       wrapper.vm.close()
       await flushPromises()
@@ -412,39 +413,39 @@ describe('Modal', () => {
       expect(onUpdateVisible).toBeCalledWith(false)
     })
 
-    test('onClose with result work', async () => {
-      const onClose = jest.fn().mockImplementation((evt: unknown) => evt === 'close')
+    test('onBeforeClose with result work', async () => {
+      const onBeforeClose = jest.fn().mockImplementation((evt: unknown) => evt === 'close')
       const onUpdateVisible = jest.fn()
-      const wrapper = ModalMount({ props: { onClose, 'onUpdate:visible': onUpdateVisible } })
+      const wrapper = ModalMount({ props: { onBeforeClose, 'onUpdate:visible': onUpdateVisible } })
 
       wrapper.vm.close(1)
       await flushPromises()
 
-      expect(onClose).toBeCalledWith(1)
+      expect(onBeforeClose).toBeCalledWith(1)
       expect(onUpdateVisible).not.toBeCalled()
 
       wrapper.vm.close('close')
       await flushPromises()
 
-      expect(onClose).toBeCalledWith('close')
+      expect(onBeforeClose).toBeCalledWith('close')
       expect(onUpdateVisible).toBeCalledWith(false)
     })
 
-    test('onClose with promise work', async () => {
-      const onClose = jest.fn().mockImplementation((evt: unknown) => Promise.resolve(evt === 'close'))
+    test('onBeforeClose with promise work', async () => {
+      const onBeforeClose = jest.fn().mockImplementation((evt: unknown) => Promise.resolve(evt === 'close'))
       const onUpdateVisible = jest.fn()
-      const wrapper = ModalMount({ props: { onClose, 'onUpdate:visible': onUpdateVisible } })
+      const wrapper = ModalMount({ props: { onBeforeClose, 'onUpdate:visible': onUpdateVisible } })
 
       wrapper.vm.close(1)
       await flushPromises()
 
-      expect(onClose).toBeCalledWith(1)
+      expect(onBeforeClose).toBeCalledWith(1)
       expect(onUpdateVisible).not.toBeCalled()
 
       wrapper.vm.close('close')
       await flushPromises()
 
-      expect(onClose).toBeCalledWith('close')
+      expect(onBeforeClose).toBeCalledWith('close')
       expect(onUpdateVisible).toBeCalledWith(false)
     })
 

diff --git a/packages/components/modal/docs/Index.zh.md b/packages/components/modal/docs/Index.zh.md
@@ -38,7 +38,8 @@ order: 0
 | `zIndex` | 设置对话框的 `z-index` | `number` | `1000` | ✅ | - |
 | `onAfterOpen` | 打开后的回调 | `() => void` | - | - | - |
 | `onAfterClose` | 关闭后的回调 | `() => void` | - | - | - |
-| `onClose` | 点击蒙层或关闭图标的回调 | `(evt?: Event \| unknown) => unknown` | - | - | 返回 `false` 的时候，将阻止关闭 |
+| `onBeforeClose` | 蒙层关闭前的回调 | `(evt?: Event \| unknown) => void \| boolean \| Promise<boolean>` | - | - | 返回 `false` 的时候，将阻止关闭 |
+| `onClose` | 点击蒙层或关闭图标的回调 | `(evt?: Event \| unknown) => void` | - | - | - |
 | `onCancel` | 点击取消按钮的回调 | `(evt?: Event \| unknown) => unknown` | - | - | 执行完回调后，默认会关闭对话框，返回 `false` 的时候，将阻止关闭 |
 | `onOk` | 点击确认按钮的回调 | `(evt?: Event \| unknown) => unknown` | - | - | 执行完回调后，默认会关闭对话框，返回 `false` 的时候，将阻止关闭 |
 

diff --git a/packages/components/modal/src/Modal.tsx b/packages/components/modal/src/Modal.tsx
@@ -119,11 +119,12 @@ function useTrigger(props: ModalProps, setVisible: (value: boolean) => void) {
   const open = () => setVisible(true)
 
   const close = async (evt?: Event | unknown) => {
-    const result = await callEmit(props.onClose, evt)
+    const result = await callEmit(props.onBeforeClose, evt)
     if (result === false) {
       return
     }
     setVisible(false)
+    callEmit(props.onClose, evt)
   }
 
   const cancelLoading = ref(false)

diff --git a/packages/components/modal/src/types.ts b/packages/components/modal/src/types.ts
@@ -58,7 +58,8 @@ export const modalProps = {
   'onUpdate:visible': IxPropTypes.emit<(visible: boolean) => void>(),
   onAfterOpen: IxPropTypes.emit<() => void>(),
   onAfterClose: IxPropTypes.emit<() => void>(),
-  onClose: IxPropTypes.emit<(evt?: Event | unknown) => unknown>(),
+  onBeforeClose: IxPropTypes.emit<(evt?: Event | unknown) => void | boolean | Promise<boolean>>(),
+  onClose: IxPropTypes.emit<(evt?: Event | unknown) => void>(),
   onCancel: IxPropTypes.emit<(evt?: Event | unknown) => unknown>(),
   onOk: IxPropTypes.emit<(evt?: Event | unknown) => unknown>(),
 }