feat: 弹框增加onClickSelf事件 (#172)

src/packages/dialog/Content.tsx

@@ -5,14 +5,23 @@ interface ContentProps {
   visible?: boolean
   title?: ReactNode
   footer?: ReactNode
-  textAlign?: any
+  textAlign?: string
   footerDirection?: string
+  onClickSelf?: () => void
 }
 
 export const Content: FunctionComponent<
   Partial<ContentProps> & HTMLAttributes<HTMLDivElement>
 > = (props) => {
-  const { visible, title, footer, textAlign, footerDirection, children } = props
+  const {
+    visible,
+    title,
+    footer,
+    textAlign,
+    footerDirection,
+    onClickSelf,
+    children,
+  } = props
 
   let headerNode: ReactNode
   if (title) {
@@ -32,14 +41,21 @@ export const Content: FunctionComponent<
     )
   }
 
+  const handleClick = () => {
+    onClickSelf && onClickSelf()
+  }
+
   return (
-    <div className="nut-dialog__outer">
+    <div className="nut-dialog__outer" onClick={handleClick}>
       <div
         className="nut-dialog"
         style={{ display: visible ? 'flex' : 'none' }}
       >
         {headerNode}
-        <div className="nut-dialog__content" style={{ textAlign }}>
+        <div
+          className="nut-dialog__content"
+          style={{ textAlign } as React.CSSProperties}
+        >
           <div>{children}</div>
         </div>
         {footerNode}

src/packages/dialog/DialogWrap.tsx

@@ -11,6 +11,7 @@ interface DialogWrapProps {
   closeOnClickOverlay?: boolean
   onCancel?: () => void
   onClosed?: () => void
+  onClickSelf?: () => void
 }
 
 export const DialogWrap: FunctionComponent<

src/packages/dialog/config.ts

@@ -26,16 +26,20 @@ export interface DialogProps {
   noFooter?: boolean
   closeOnClickOverlay?: boolean
   cancelAutoClose?: boolean
-  textAlign?: any
+  textAlign?: string
   footerDirection?: string
   lockScroll?: boolean
   onClosed?: () => void
-  onOk?: (e?: MouseEvent) => Promise<any> | void
+  onOk?: (e?: MouseEvent) => Promise<() => void> | void
   onCancel?: () => void
-  onConfirm?: (e?: MouseEvent) => Promise<any> | void
+  onClickSelf?: () => void
+  onConfirm?: (e?: MouseEvent) => Promise<() => void> | void
 }
 
-export type DialogReturnProps = { update: Function; close: Function }
+export type DialogReturnProps = {
+  update: (newConfig: ConfirmProps) => void
+  close: () => void
+}
 
 export interface ConfirmProps extends DialogProps {
   content?: ReactNode
@@ -52,4 +56,4 @@ export interface DialogComponent
   destroyAll: () => void
 }
 
-export const destroyList: Array<Function> = []
+export const destroyList: Array<() => void> = []

src/packages/dialog/dialog.tsx

@@ -51,10 +51,11 @@ const BaseDialog: ForwardRefRenderFunction<
     ...restProps
   } = props
 
-  const renderFooter = () => {
-    if (footer === null) return
+  const renderFooter = function () {
+    if (footer === null) return ''
 
-    const handleCancel = () => {
+    const handleCancel = function (e: MouseEvent) {
+      e.stopPropagation()
       if (!cancelAutoClose) return
 
       onClosed?.()
@@ -64,7 +65,8 @@ const BaseDialog: ForwardRefRenderFunction<
       }
     }
 
-    const handleOk = (e?: any) => {
+    const handleOk = function (e: MouseEvent) {
+      e.stopPropagation()
       onClosed?.()
       onOk?.(e)
       if (lockScroll && visible) {
@@ -80,7 +82,7 @@ const BaseDialog: ForwardRefRenderFunction<
             plain
             type="primary"
             className="nut-dialog__footer-cancel"
-            onClick={() => handleCancel()}
+            onClick={(e) => handleCancel(e)}
           >
             {cancelText || locale.cancel}
           </Button>
@@ -93,7 +95,7 @@ const BaseDialog: ForwardRefRenderFunction<
               disabled: okBtnDisabled,
             })}
             disabled={okBtnDisabled}
-            onClick={() => handleOk()}
+            onClick={(e) => handleOk(e)}
           >
             {okText || locale.confirm}
           </Button>

src/packages/dialog/doc.md

@@ -106,3 +106,4 @@ return <>
 | onOk  | 确定按钮回调 | (e?: MouseEvent) => Promise | void |
 | onCancel  | 取消按钮回调 | () => void |
 | onClosed  | 关闭回调，任何情况关闭弹窗都会触发 | () => void |
+| onClickSelf  | 点击自身回调 | () => void |