From 63ffe3921a6614d469814ee5cec49adf0aab3a76 Mon Sep 17 00:00:00 2001 From: MuxinFeng <434980373@qq.com> Date: Tue, 21 Feb 2023 17:59:53 +0800 Subject: [PATCH 1/4] feat: add onOpenChanged prop --- src/Dialog/index.tsx | 2 ++ src/IDialogPropTypes.tsx | 3 ++- tests/index.spec.tsx | 14 ++++++++++++++ 3 files changed, 18 insertions(+), 1 deletion(-) diff --git a/src/Dialog/index.tsx b/src/Dialog/index.tsx index e708d36d..878a770e 100644 --- a/src/Dialog/index.tsx +++ b/src/Dialog/index.tsx @@ -25,6 +25,7 @@ export default function Dialog(props: IDialogPropTypes) { wrapClassName, wrapProps, onClose, + onOpenChanged, afterClose, // Dialog @@ -86,6 +87,7 @@ export default function Dialog(props: IDialogPropTypes) { afterClose?.(); } } + onOpenChanged?.(newVisible) } function onInternalClose(e: React.SyntheticEvent) { diff --git a/src/IDialogPropTypes.tsx b/src/IDialogPropTypes.tsx index 042b2d63..5231528e 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; + onOpenChanged?: (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..23ca6174 100644 --- a/tests/index.spec.tsx +++ b/tests/index.spec.tsx @@ -505,4 +505,18 @@ describe('dialog', () => { expect(afterClose).toHaveBeenCalledTimes(0); }); }); + + describe('onOpenChanged', () => { + it('should trigger onOpenChanged when visible changed', () => { + const onOpenChanged = jest.fn(); + + const wrapper = mount(); + jest.runAllTimers(); + + wrapper.setProps({ visible: false }); + jest.runAllTimers(); + + expect(onOpenChanged).toHaveBeenCalledTimes(2); + }); + }); }); From a598ba7ac0d2f541330734dcc02321418268fa25 Mon Sep 17 00:00:00 2001 From: muxin Date: Tue, 21 Feb 2023 18:41:45 +0800 Subject: [PATCH 2/4] Update src/Dialog/index.tsx Co-authored-by: afc163 --- src/Dialog/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Dialog/index.tsx b/src/Dialog/index.tsx index 878a770e..5d4e5ff1 100644 --- a/src/Dialog/index.tsx +++ b/src/Dialog/index.tsx @@ -87,7 +87,7 @@ export default function Dialog(props: IDialogPropTypes) { afterClose?.(); } } - onOpenChanged?.(newVisible) + onOpenChanged?.(newVisible); } function onInternalClose(e: React.SyntheticEvent) { From e24b8d1086a3fa606cb4668530531b39f733c030 Mon Sep 17 00:00:00 2001 From: MuxinFeng <434980373@qq.com> Date: Thu, 23 Feb 2023 19:42:41 +0800 Subject: [PATCH 3/4] fix: fix onOpenChanged to onOpenChange --- src/Dialog/index.tsx | 4 ++-- src/IDialogPropTypes.tsx | 2 +- tests/index.spec.tsx | 10 +++++----- 3 files changed, 8 insertions(+), 8 deletions(-) diff --git a/src/Dialog/index.tsx b/src/Dialog/index.tsx index 5d4e5ff1..759ebc15 100644 --- a/src/Dialog/index.tsx +++ b/src/Dialog/index.tsx @@ -25,7 +25,7 @@ export default function Dialog(props: IDialogPropTypes) { wrapClassName, wrapProps, onClose, - onOpenChanged, + onOpenChange, afterClose, // Dialog @@ -87,7 +87,7 @@ export default function Dialog(props: IDialogPropTypes) { afterClose?.(); } } - onOpenChanged?.(newVisible); + onOpenChange?.(newVisible); } function onInternalClose(e: React.SyntheticEvent) { diff --git a/src/IDialogPropTypes.tsx b/src/IDialogPropTypes.tsx index 5231528e..9575a848 100644 --- a/src/IDialogPropTypes.tsx +++ b/src/IDialogPropTypes.tsx @@ -8,7 +8,7 @@ export type IDialogPropTypes = { mask?: boolean; children?: any; afterClose?: () => any; - onOpenChanged?: (open: boolean) => void; + onOpenChange?: (open: boolean) => void; onClose?: (e: SyntheticEvent) => any; closable?: boolean; maskClosable?: boolean; diff --git a/tests/index.spec.tsx b/tests/index.spec.tsx index 23ca6174..ca5b5e99 100644 --- a/tests/index.spec.tsx +++ b/tests/index.spec.tsx @@ -506,17 +506,17 @@ describe('dialog', () => { }); }); - describe('onOpenChanged', () => { - it('should trigger onOpenChanged when visible changed', () => { - const onOpenChanged = jest.fn(); + describe('onOpenChange', () => { + it('should trigger onOpenChange when visible changed', () => { + const onOpenChange = jest.fn(); - const wrapper = mount(); + const wrapper = mount(); jest.runAllTimers(); wrapper.setProps({ visible: false }); jest.runAllTimers(); - expect(onOpenChanged).toHaveBeenCalledTimes(2); + expect(onOpenChange).toHaveBeenCalledTimes(2); }); }); }); From 3bd603f17b8b637f1842c869f0913b9a3a511637 Mon Sep 17 00:00:00 2001 From: MuxinFeng <434980373@qq.com> Date: Tue, 28 Feb 2023 18:57:42 +0800 Subject: [PATCH 4/4] fix: replace onOpenChange with afterOpenChange --- src/Dialog/index.tsx | 14 +++++++------- src/IDialogPropTypes.tsx | 2 +- tests/index.spec.tsx | 14 +++++++------- 3 files changed, 15 insertions(+), 15 deletions(-) diff --git a/src/Dialog/index.tsx b/src/Dialog/index.tsx index 759ebc15..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,7 +25,7 @@ export default function Dialog(props: IDialogPropTypes) { wrapClassName, wrapProps, onClose, - onOpenChange, + afterOpenChange, afterClose, // Dialog @@ -87,7 +87,7 @@ export default function Dialog(props: IDialogPropTypes) { afterClose?.(); } } - onOpenChange?.(newVisible); + afterOpenChange?.(newVisible); } function onInternalClose(e: React.SyntheticEvent) { diff --git a/src/IDialogPropTypes.tsx b/src/IDialogPropTypes.tsx index 9575a848..8b560e2e 100644 --- a/src/IDialogPropTypes.tsx +++ b/src/IDialogPropTypes.tsx @@ -8,7 +8,7 @@ export type IDialogPropTypes = { mask?: boolean; children?: any; afterClose?: () => any; - onOpenChange?: (open: boolean) => void; + 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 ca5b5e99..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'; @@ -506,17 +506,17 @@ describe('dialog', () => { }); }); - describe('onOpenChange', () => { - it('should trigger onOpenChange when visible changed', () => { - const onOpenChange = jest.fn(); + describe('afterOpenChange', () => { + it('should trigger afterOpenChange when visible changed', () => { + const afterOpenChange = jest.fn(); - const wrapper = mount(); + const wrapper = mount(); jest.runAllTimers(); wrapper.setProps({ visible: false }); jest.runAllTimers(); - expect(onOpenChange).toHaveBeenCalledTimes(2); + expect(afterOpenChange).toHaveBeenCalledTimes(2); }); }); });