feat: Merge 'afterClose' to 'closable' (#500)

* feat: Merge 'AfterClose' to 'Closable'

* docs: Add a through line to afterClose

* feat: change closable AfterClose ts

* fix: lint error

* feat: add default value to closableAfterClose

* feat: Call separately

* fix:  closable !== null

* feat: change ts

* feat: closable null

* feat: null

* feat: useEffect  dependencies

* fix: lint  error

* fix: lint error (Initializer provides no value)

* fix: Delete non current modifications

---------

Co-authored-by: 刘欢 <[email protected]>

Author: EmilyyyLiu

README.md

@@ -64,7 +64,7 @@ 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 |  |

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 closableObj = closable && typeof closable === 'object' ? closable : {};
+            const { afterClose: closableAfterClose } = closableObj || {};
+            closableAfterClose?.();
             afterClose?.();
             setAnimatedVisible(false);
           }}

src/IDialogPropTypes.tsx

@@ -7,6 +7,12 @@ 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;
@@ -17,7 +23,7 @@ export type IDialogPropTypes = {
   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', () => {