feat: add afterOpenChange prop (#349)

* feat: add onOpenChanged prop

* Update src/Dialog/index.tsx

Co-authored-by: afc163 <[email protected]>

* fix: fix onOpenChanged to onOpenChange

* fix: replace onOpenChange with afterOpenChange

---------

Co-authored-by: afc163 <[email protected]>

Author: MuxinFeng

src/Dialog/index.tsx

@@ -1,15 +1,15 @@
-import * as React from 'react';
-import { useRef, useEffect } from 'react';
 import classNames from 'classnames';
-import KeyCode from 'rc-util/lib/KeyCode';
-import useId from 'rc-util/lib/hooks/useId';
 import contains from 'rc-util/lib/Dom/contains';
+import useId from 'rc-util/lib/hooks/useId';
+import KeyCode from 'rc-util/lib/KeyCode';
 import pickAttrs from 'rc-util/lib/pickAttrs';
+import * as React from 'react';
+import { useEffect, useRef } from 'react';
 import type { IDialogPropTypes } from '../IDialogPropTypes';
-import Mask from './Mask';
 import { getMotionName } from '../util';
 import Content from './Content';
 import type { ContentRef } from './Content/Panel';
+import Mask from './Mask';
 
 export default function Dialog(props: IDialogPropTypes) {
   const {
@@ -25,6 +25,7 @@ export default function Dialog(props: IDialogPropTypes) {
     wrapClassName,
     wrapProps,
     onClose,
+    afterOpenChange,
     afterClose,
 
     // Dialog
@@ -86,6 +87,7 @@ export default function Dialog(props: IDialogPropTypes) {
         afterClose?.();
       }
     }
+    afterOpenChange?.(newVisible);
   }
 
   function onInternalClose(e: React.SyntheticEvent) {

src/IDialogPropTypes.tsx

@@ -1,5 +1,5 @@
-import type { ReactNode, CSSProperties, SyntheticEvent } from 'react';
 import type { GetContainer } from 'rc-util/lib/PortalWrapper';
+import type { CSSProperties, ReactNode, SyntheticEvent } from 'react';
 
 export type IDialogPropTypes = {
   className?: string;
@@ -8,6 +8,7 @@ export type IDialogPropTypes = {
   mask?: boolean;
   children?: any;
   afterClose?: () => any;
+  afterOpenChange?: (open: boolean) => void;
   onClose?: (e: SyntheticEvent) => any;
   closable?: boolean;
   maskClosable?: boolean;

tests/index.spec.tsx

@@ -504,4 +504,18 @@ describe('dialog', () => {
       expect(afterClose).toHaveBeenCalledTimes(0);
     });
   });
+
+  describe('afterOpenChange', () => {
+    it('should trigger afterOpenChange when visible changed', () => {
+      const afterOpenChange = jest.fn();
+
+      const wrapper = mount(<Dialog afterOpenChange={afterOpenChange} visible />);
+      jest.runAllTimers();
+
+      wrapper.setProps({ visible: false });
+      jest.runAllTimers();
+
+      expect(afterOpenChange).toHaveBeenCalledTimes(2);
+    });
+  });
 });