diff --git a/src/Dialog/index.tsx b/src/Dialog/index.tsx index e708d36d..3dc6a661 100644 --- a/src/Dialog/index.tsx +++ b/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) { diff --git a/src/IDialogPropTypes.tsx b/src/IDialogPropTypes.tsx index 042b2d63..8b560e2e 100644 --- a/src/IDialogPropTypes.tsx +++ b/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; diff --git a/tests/index.spec.tsx b/tests/index.spec.tsx index d90c4421..9881e542 100644 --- a/tests/index.spec.tsx +++ b/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(); + jest.runAllTimers(); + + wrapper.setProps({ visible: false }); + jest.runAllTimers(); + + expect(afterOpenChange).toHaveBeenCalledTimes(2); + }); + }); });