feat: Merge 'afterClose' to 'closable'

README.md

@@ -64,13 +64,13 @@ ReactDOM.render(
 | maskTransitionName | String |  | mask animation css class name |  |
 | title | String\|React.Element |  | Title of the dialog |  |
 | footer | React.Element |  | footer of the dialog |  |
-| closable | Boolean \| ({ closeIcon?: React.ReactNode; disabled?: boolean } & React.AriaAttributes | true | whether show close button |  |
+| closable | Boolean \| ({ closeIcon?: React.ReactNode; disabled?: boolean, afterClose:function } & React.AriaAttributes) | true | whether show close button |  |
 | mask | Boolean | true | whether show mask |  |
 | maskClosable | Boolean | true | whether click mask to close |  |
 | keyboard | Boolean | true | whether support press esc to close |  |
 | mousePosition | {x:number,y:number} |  | set pageX and pageY of current mouse(it will cause transform origin to be set). |  |
 | onClose | function() |  | called when click close button or mask |  |
-| afterClose | function() |  | called when close animation end |  |
+| ~~afterClose~~ | function() |  | called when close animation end |  |
 | getContainer | function(): HTMLElement |  | to determine where Dialog will be mounted |  |
 | destroyOnHidden | Boolean | false | to unmount child compenents on onClose |  |
 | closeIcon | ReactNode |  | specific the close icon. |  |

src/DialogWrap.tsx

@@ -20,6 +20,7 @@ const DialogWrap: React.FC<IDialogPropTypes> = (props) => {
     forceRender,
     destroyOnHidden = false,
     afterClose,
+    closable,
     panelRef,
   } = props;
   const [animatedVisible, setAnimatedVisible] = React.useState<boolean>(visible);
@@ -49,6 +50,9 @@ const DialogWrap: React.FC<IDialogPropTypes> = (props) => {
           {...props}
           destroyOnHidden={destroyOnHidden}
           afterClose={() => {
+            const { afterClose: closableAfterClose = undefined } =
+              typeof closable === 'object' ? closable : {};
+            closableAfterClose?.();
             afterClose?.();
             setAnimatedVisible(false);
           }}

src/IDialogPropTypes.tsx

@@ -7,17 +7,24 @@ export type ModalClassNames = Partial<Record<SemanticName, string>>;
 
 export type ModalStyles = Partial<Record<SemanticName, CSSProperties>>;
 
+export type ClosableType = {
+  closeIcon?: React.ReactNode;
+  disabled?: boolean;
+  afterClose?: () => any;
+};
+
 export type IDialogPropTypes = {
   className?: string;
   keyboard?: boolean;
   style?: CSSProperties;
   rootStyle?: CSSProperties;
   mask?: boolean;
   children?: React.ReactNode;
+  /** @description please use `closable.afterClose` instead */
   afterClose?: () => any;
   afterOpenChange?: (open: boolean) => void;
   onClose?: (e: SyntheticEvent) => any;
-  closable?: boolean | ({ closeIcon?: React.ReactNode; disabled?: boolean } & React.AriaAttributes);
+  closable?: boolean | (ClosableType & React.AriaAttributes);
   maskClosable?: boolean;
   visible?: boolean;
   destroyOnHidden?: boolean;

tests/index.spec.tsx

@@ -552,6 +552,25 @@ describe('dialog', () => {
 
       expect(afterClose).toHaveBeenCalledTimes(0);
     });
+
+    it('should prioritize closable.afterClose when both exist', () => {
+      const afterClose = jest.fn();
+      const legacyAfterClose = jest.fn();
+
+      const { rerender } = render(
+        <Dialog closable={{ afterClose }} afterClose={legacyAfterClose} visible />,
+      );
+      act(() => {
+        jest.runAllTimers();
+      });
+
+      rerender(<Dialog closable={{ afterClose }} afterClose={legacyAfterClose} visible={false} />);
+      act(() => {
+        jest.runAllTimers();
+      });
+      expect(afterClose).toHaveBeenCalledTimes(1);
+      expect(legacyAfterClose).toHaveBeenCalledTimes(1);
+    });
   });
 
   describe('afterOpenChange', () => {