feat(dialog): close和cancel各司其职 (#3282)

* feat(dialog): close和cancel各司其职

* fix(dialog): 修复test

* fix: 在 overlay点击时只暴露cancel回调

Author: xiaoyatong

src/packages/dialog/__test__/dialog.spec.tsx

@@ -4,9 +4,9 @@ import '@testing-library/jest-dom'
 import { Dialog } from '../dialog'
 
 test('show dialog base info display ', async () => {
-  const onClose = vi.fn()
+  const onCancel = vi.fn()
   const { container } = render(
-    <Dialog title="title" data-testid="test" visible onClose={onClose}>
+    <Dialog title="title" data-testid="test" visible onCancel={onCancel}>
       <div>content</div>
     </Dialog>
   )
@@ -28,7 +28,7 @@ test('show dialog base info display ', async () => {
 
   expect(wrapEle).toBeNull()
   fireEvent.click(footerCancelEle)
-  expect(onClose).toBeCalled()
+  expect(onCancel).toBeCalled()
 })
 
 test('show dialog custom footer-direction ', async () => {
@@ -116,7 +116,6 @@ test('dialog close icon  position adjustment', async () => {
   expect(closeBtn).toBeInTheDocument()
   fireEvent.click(closeBtn)
   expect(onClose).toBeCalled()
-  expect(onCancel).toBeCalled()
 })
 
 test('should display loading when onConfirm returns a promise', async () => {

src/packages/dialog/demos/h5/demo2.tsx

@@ -10,7 +10,9 @@ const Demo2 = () => {
         title="基础弹框"
         visible={visible}
         onConfirm={() => setVisible(false)}
-        onCancel={() => setVisible(false)}
+        onCancel={() => {
+          setVisible(false)
+        }}
       >
         支持函数调用和组件调用两种方式。
       </Dialog>

src/packages/dialog/demos/h5/demo6.tsx

@@ -22,7 +22,14 @@ const Demo6 = () => {
           '--nutui-dialog-close-color': '#888B94',
         }}
         onConfirm={() => setVisible1(false)}
-        onCancel={() => setVisible1(false)}
+        onClose={() => {
+          setVisible1(false)
+          console.log('onClose')
+        }}
+        onCancel={() => {
+          // do sth else
+          console.log('onCancel')
+        }}
       >
         支持函数调用和组件调用两种方式。
       </Dialog>

src/packages/dialog/dialog.taro.tsx

@@ -101,8 +101,6 @@ export const BaseDialog: FunctionComponent<Partial<TaroDialogProps>> & {
     const handleCancel = (e: ITouchEvent | MouseEvent<HTMLButtonElement>) => {
       e.stopPropagation()
       if (!beforeCancel?.()) return
-      if (!beforeClose?.()) return
-      onClose()
       onCancel()
     }
 
@@ -189,19 +187,17 @@ export const BaseDialog: FunctionComponent<Partial<TaroDialogProps>> & {
 
   const renderCloseIcon = () => {
     if (!closeIcon) return null
-    const handleCancel = () => {
-      if (!beforeCancel?.()) return
+    const handleClose = () => {
       if (!beforeClose?.()) return
       onClose()
-      onCancel()
     }
     const closeClasses = classNames({
       [`${classPrefix}-close`]: true,
       [`${classPrefix}-close-${closeIconPosition}`]: true,
     })
     const systomIcon = closeIconPosition !== 'bottom' ? <Close /> : <Failure />
     return (
-      <View className={closeClasses} onClick={handleCancel}>
+      <View className={closeClasses} onClick={handleClose}>
         {React.isValidElement(closeIcon) ? closeIcon : systomIcon}
       </View>
     )
@@ -210,7 +206,6 @@ export const BaseDialog: FunctionComponent<Partial<TaroDialogProps>> & {
   const onHandleClickOverlay = (e: ITouchEvent) => {
     if (closeOnOverlayClick && visible && e.target === e.currentTarget) {
       const closed = onOverlayClick && onOverlayClick(e)
-      closed && onClose()
       closed && onCancel()
     }
   }

src/packages/dialog/dialog.tsx

@@ -90,8 +90,6 @@ const BaseDialog: ForwardRefRenderFunction<unknown, Partial<WebDialogProps>> = (
     ) => {
       e.stopPropagation()
       if (!beforeCancel?.()) return
-      if (!beforeClose?.()) return
-      onClose()
       onCancel()
     }
 
@@ -179,19 +177,17 @@ const BaseDialog: ForwardRefRenderFunction<unknown, Partial<WebDialogProps>> = (
 
   const renderCloseIcon = () => {
     if (!closeIcon) return null
-    const handleCancel = () => {
-      if (!beforeCancel?.()) return
+    const handleClose = () => {
       if (!beforeClose?.()) return
       onClose()
-      onCancel()
     }
     const closeClasses = classNames({
       [`${classPrefix}-close`]: true,
       [`${classPrefix}-close-${closeIconPosition}`]: true,
     })
     const systomIcon = closeIconPosition !== 'bottom' ? <Close /> : <Failure />
     return (
-      <div className={closeClasses} onClick={handleCancel}>
+      <div className={closeClasses} onClick={handleClose}>
         {React.isValidElement(closeIcon) ? closeIcon : systomIcon}
       </div>
     )
@@ -200,7 +196,6 @@ const BaseDialog: ForwardRefRenderFunction<unknown, Partial<WebDialogProps>> = (
   const onHandleClickOverlay = (e: MouseEvent) => {
     if (closeOnOverlayClick && visible && e.target === e.currentTarget) {
       const closed = onOverlayClick && onOverlayClick(e)
-      closed && onClose()
       closed && onCancel()
     }
   }