From 5d6312049993a07e0c928f4dc1a1500f4fcd4ee7 Mon Sep 17 00:00:00 2001 From: Jianan Li Date: Sun, 18 May 2025 11:23:14 +0800 Subject: [PATCH 1/4] update destroyOnClose to destroyOnHidden --- .gitignore | 3 +- README.md | 59 +++++++++++++++++------------------- docs/examples/ant-design.tsx | 10 +++--- docs/examples/bootstrap.tsx | 10 +++--- package.json | 7 +++-- src/Dialog/Content/Panel.tsx | 16 +++++++--- src/Dialog/Content/index.tsx | 16 +++++----- src/Dialog/index.tsx | 8 ++--- src/DialogWrap.tsx | 6 ++-- src/IDialogPropTypes.tsx | 2 +- tests/index.spec.tsx | 10 +++--- 11 files changed, 76 insertions(+), 71 deletions(-) diff --git a/.gitignore b/.gitignore index 41ad2dce..a3cbef29 100644 --- a/.gitignore +++ b/.gitignore @@ -34,6 +34,7 @@ coverage /android/ yarn.lock package-lock.json +pnpm-lock.yaml .storybook .doc @@ -48,4 +49,4 @@ package-lock.json .dumi/tmp .dumi/tmp-production -bun.lockb \ No newline at end of file +bun.lockb diff --git a/README.md b/README.md index 6d45b458..087792a5 100644 --- a/README.md +++ b/README.md @@ -49,34 +49,34 @@ ReactDOM.render( ### rc-dialog -| Name | Type | Default | Description | Version | -| ---------------------- | ------------------------------ | --------- | ------------------------------------------------------------------------------- | ------- | -| prefixCls | String | rc-dialog | The dialog dom node's prefixCls | | -| className | String | | additional className for dialog | | -| classNames | { header?: string; body?: string; footer?: string; mask?: string; content?: string; wrapper?: string; } | | pass className to target area | | -| styles | { header?: CSSProperties; body?: CSSProperties; footer?: CSSProperties; mask?: CSSProperties; content?: CSSProperties; wrapper?: CSSProperties; } | | pass styles to target area | | -| style | Object | {} | Root style for dialog element.Such as width, height | | -| zIndex | Number | | | | -| visible | Boolean | false | current dialog's visible status | | -| animation | String | | part of dialog animation css class name | | -| maskAnimation | String | | part of dialog's mask animation css class name | | -| transitionName | String | | dialog animation css class name | | -| 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 | | -| mask | Boolean | true | whether show mask | | -| maskClosable | Boolean | true | whether click mask to close | | -| keyboard | Boolean | true | whether support press esc to close | | -| mousePosition | {x:number,y:number} | | set pageX and pageY of current mouse(it will cause transform origin to be set). | | -| onClose | function() | | called when click close button or mask | | -| afterClose | function() | | called when close animation end | | -| getContainer | function(): HTMLElement | | to determine where Dialog will be mounted | | -| destroyOnClose | Boolean | false | to unmount child compenents on onClose | | -| closeIcon | ReactNode | | specific the close icon. | | -| forceRender | Boolean | false | Create dialog dom node before dialog first show | | -| focusTriggerAfterClose | Boolean | true | focus trigger element when dialog closed | | -| modalRender | (node: ReactNode) => ReactNode | | Custom modal content render | 8.3.0 | +| Name | Type | Default | Description | Version | +| --- | --- | --- | --- | --- | +| prefixCls | String | rc-dialog | The dialog dom node's prefixCls | | +| className | String | | additional className for dialog | | +| classNames | { header?: string; body?: string; footer?: string; mask?: string; content?: string; wrapper?: string; } | | pass className to target area | | +| styles | { header?: CSSProperties; body?: CSSProperties; footer?: CSSProperties; mask?: CSSProperties; content?: CSSProperties; wrapper?: CSSProperties; } | | pass styles to target area | | +| style | Object | {} | Root style for dialog element.Such as width, height | | +| zIndex | Number | | | | +| visible | Boolean | false | current dialog's visible status | | +| animation | String | | part of dialog animation css class name | | +| maskAnimation | String | | part of dialog's mask animation css class name | | +| transitionName | String | | dialog animation css class name | | +| 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 | | +| mask | Boolean | true | whether show mask | | +| maskClosable | Boolean | true | whether click mask to close | | +| keyboard | Boolean | true | whether support press esc to close | | +| mousePosition | {x:number,y:number} | | set pageX and pageY of current mouse(it will cause transform origin to be set). | | +| onClose | function() | | called when click close button or mask | | +| afterClose | function() | | called when close animation end | | +| getContainer | function(): HTMLElement | | to determine where Dialog will be mounted | | +| destroyOnHidden | Boolean | false | to unmount child compenents on onClose | | +| closeIcon | ReactNode | | specific the close icon. | | +| forceRender | Boolean | false | Create dialog dom node before dialog first show | | +| focusTriggerAfterClose | Boolean | true | focus trigger element when dialog closed | | +| modalRender | (node: ReactNode) => ReactNode | | Custom modal content render | 8.3.0 | ## Development @@ -85,8 +85,6 @@ npm install npm start ``` - - ## Test Case ``` @@ -102,7 +100,6 @@ npm run coverage open coverage/ dir - ## License rc-dialog is released under the MIT license. diff --git a/docs/examples/ant-design.tsx b/docs/examples/ant-design.tsx index d1ffab74..0030fd48 100644 --- a/docs/examples/ant-design.tsx +++ b/docs/examples/ant-design.tsx @@ -31,7 +31,7 @@ const MyControl: React.FC = () => { const [visible2, setVisible2] = React.useState(false); const [visible3, setVisible3] = React.useState(false); const [width, setWidth] = React.useState(600); - const [destroyOnClose, setDestroyOnClose] = React.useState(false); + const [destroyOnHidden, setDestroyOnHidden] = React.useState(false); const [center, setCenter] = React.useState(false); const [mousePosition, setMousePosition] = React.useState({ x: null, y: null }); const [useIcon, setUseIcon] = React.useState(false); @@ -60,8 +60,8 @@ const MyControl: React.FC = () => { setVisible3(false); }; - const onDestroyOnCloseChange = (e: React.ChangeEvent) => { - setDestroyOnClose(e.target.checked); + const onDestroyOnHiddenChange = (e: React.ChangeEvent) => { + setDestroyOnHidden(e.target.checked); }; const onForceRenderChange = (e: React.ChangeEvent) => { @@ -97,7 +97,7 @@ const MyControl: React.FC = () => { style={style} title="dialog1" mousePosition={mousePosition} - destroyOnClose={destroyOnClose} + destroyOnHidden={destroyOnHidden} closeIcon={useIcon ? getSvg(clearPath, {}, true) : undefined} forceRender={forceRender} focusTriggerAfterClose={false} @@ -211,7 +211,7 @@ const MyControl: React.FC = () => {