Merge 3bd603f into fd1e6f1

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

@@ -1,10 +1,10 @@
 /* eslint-disable react/no-render-return-value, max-classes-per-file, func-names, no-console */
-import React, { cloneElement, useEffect } from 'react';
-import { act } from 'react-dom/test-utils';
 import { render } from '@testing-library/react';
 import type { ReactWrapper } from 'enzyme';
 import { mount } from 'enzyme';
 import KeyCode from 'rc-util/lib/KeyCode';
+import React, { cloneElement, useEffect } from 'react';
+import { act } from 'react-dom/test-utils';
 import type { DialogProps } from '../src';
 import Dialog from '../src';
 
@@ -505,4 +505,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);
+    });
+  });
 });