extends React.FC
{ PreviewGroup: typeof PreviewGroup; } +type Replace = Partial & { [P in K]: V }>; + +interface PreviewType extends Omit { + /** @deprecated Please use destroyOnHidden instead */ + destroyOnClose?: boolean; + /** + * @since 5.25.0 + */ + destroyOnHidden?: boolean; +} + +type ImageProps = Replace; + const Image: CompositionImage = (props) => { const { prefixCls: customizePrefixCls, @@ -25,6 +39,16 @@ const Image: CompositionImage = (props) => { style, ...otherProps } = props; + + if (process.env.NODE_ENV !== 'production') { + const warning = devUseWarning('Image'); + warning.deprecated( + !(preview && typeof preview === 'object' && 'destroyOnClose' in preview), + 'destroyOnClose', + 'destroyOnHidden', + ); + } + const { getPrefixCls, getPopupContainer: getContextPopupContainer, @@ -51,12 +75,19 @@ const Image: CompositionImage = (props) => { typeof preview === 'object' ? preview.zIndex : undefined, ); - const mergedPreview = React.useMemo(() => { + const mergedPreview = React.useMemo(() => { if (preview === false) { return preview; } const _preview = typeof preview === 'object' ? preview : {}; - const { getContainer, closeIcon, rootClassName, ...restPreviewProps } = _preview; + const { + getContainer, + closeIcon, + rootClassName, + destroyOnClose, + destroyOnHidden, + ...restPreviewProps + } = _preview; return { mask: ( @@ -66,6 +97,8 @@ const Image: CompositionImage = (props) => { ), icons, ...restPreviewProps, + // TODO: In the future, destroyOnClose in rc-image needs to be upgrade to destroyOnHidden + destroyOnClose: destroyOnHidden ?? destroyOnClose, rootClassName: classNames(mergedRootClassName, rootClassName), getContainer: getContainer ?? getContextPopupContainer, transitionName: getTransitionName(rootPrefixCls, 'zoom', _preview.transitionName), diff --git a/components/image/index.zh-CN.md b/components/image/index.zh-CN.md index fe4c076bfc..64a2aa9f3d 100644 --- a/components/image/index.zh-CN.md +++ b/components/image/index.zh-CN.md @@ -69,7 +69,8 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*LVQ3R5JjjJEAAA | forceRender | 强制渲染预览图 | boolean | - | - | | toolbarRender | 自定义工具栏 | (originalNode: React.ReactElement, info: Omit<[ToolbarRenderInfoType](#toolbarrenderinfotype), 'current' \| 'total'>) => React.ReactNode | - | 5.7.0, `info.image`: 5.18.0 | | imageRender | 自定义预览内容 | (originalNode: React.ReactElement, info: { transform: [TransformType](#transformtype), image: [ImgInfo](#imginfo) }) => React.ReactNode | - | 5.7.0, image: 5.18.0 | -| destroyOnClose | 关闭预览时销毁子元素 | boolean | false | | +| ~~destroyOnClose~~ | 关闭预览时销毁子元素 | boolean | false | | +| destroyOnHidden | 关闭预览时销毁子元素 | boolean | false | 5.25.0 | | onTransform | 预览图 transform 变化的回调 | { transform: [TransformType](#transformtype), action: [TransformAction](#transformaction) } | - | 5.7.0 | | onVisibleChange | 当 `visible` 发生改变时的回调 | (visible: boolean, prevVisible: boolean) => void | - | - | diff --git a/components/modal/Modal.tsx b/components/modal/Modal.tsx index a28edc9bf2..c36fac1527 100644 --- a/components/modal/Modal.tsx +++ b/components/modal/Modal.tsx @@ -64,6 +64,8 @@ const Modal: React.FC = (props) => { mousePosition: customizeMousePosition, onOk, onCancel, + destroyOnHidden, + destroyOnClose, ...restProps } = props; @@ -92,6 +94,7 @@ const Modal: React.FC = (props) => { ['visible', 'open'], ['bodyStyle', 'styles.body'], ['maskStyle', 'styles.mask'], + ['destroyOnClose', 'destroyOnHidden'], ].forEach(([deprecatedName, newName]) => { warning.deprecated(!(deprecatedName in props), deprecatedName, newName); }); @@ -187,6 +190,8 @@ const Modal: React.FC = (props) => { }} styles={{ ...modalContext?.styles, ...modalStyles }} panelRef={panelRef} + // TODO: In the future, destroyOnClose in rc-dialog needs to be upgrade to destroyOnHidden + destroyOnClose={destroyOnHidden ?? destroyOnClose} > {loading ? ( { title="Basic Modal" open={isModalOpen} footer={null} - destroyOnClose + destroyOnHidden onCancel={() => setIsModalOpen(false)} maskClosable={false} closable={false} @@ -52,7 +52,7 @@ const Demo: React.FC = () => { title="Nested Modal" open={isModalOpen} footer={null} - destroyOnClose + destroyOnHidden mask={false} onCancel={() => setIsModalOpen(false)} maskClosable={false} @@ -73,7 +73,7 @@ const Demo: React.FC = () => { title="Nested Modal" open={isModalOpen} footer={null} - destroyOnClose + destroyOnHidden mask={false} maskClosable={false} onCancel={() => setIsModalOpen(false)} diff --git a/components/modal/index.en-US.md b/components/modal/index.en-US.md index 112ec1b268..a3b3771b87 100644 --- a/components/modal/index.en-US.md +++ b/components/modal/index.en-US.md @@ -56,7 +56,8 @@ Common props ref：[Common props](/docs/react/common-props) | closable | Whether a close (x) button is visible on top right or not | boolean \| { closeIcon?: React.ReactNode; disabled?: boolean; } | true | | | closeIcon | Custom close icon. 5.7.0: close button will be hidden when setting to `null` or `false` | ReactNode | <CloseOutlined /> | | | confirmLoading | Whether to apply loading visual effect for OK button or not | boolean | false | | -| destroyOnClose | Whether to unmount child components on onClose | boolean | false | | +| ~~destroyOnClose~~ | Whether to unmount child components on onClose | boolean | false | | +| destroyOnHidden | Whether to unmount child components on onClose | boolean | false | 5.25.0 | | focusTriggerAfterClose | Whether need to focus trigger element after dialog is closed | boolean | true | 4.9.0 | | footer | Footer content, set as `footer={null}` when you don't need default buttons | ReactNode \| (originNode: ReactNode, extra: { OkBtn: React.FC, CancelBtn: React.FC }) => ReactNode | (OK and Cancel buttons) | renderFunction: 5.9.0 | | forceRender | Force render Modal | boolean | false | | @@ -81,8 +82,8 @@ Common props ref：[Common props](/docs/react/common-props) #### Note -- The state of Modal will be preserved at it's component lifecycle by default, if you wish to open it with a brand new state every time, set `destroyOnClose` on it. -- There is a situation that using `` with Form, which won't clear fields value when closing Modal even you have set `destroyOnClose`. You need `` in this case. +- The state of Modal will be preserved at it's component lifecycle by default, if you wish to open it with a brand new state every time, set `destroyOnHidden` on it. +- There is a situation that using `` with Form, which won't clear fields value when closing Modal even you have set `destroyOnHidden`. You need `` in this case. - `Modal.method()` RTL mode only supports hooks. ### Modal.method() diff --git a/components/modal/index.zh-CN.md b/components/modal/index.zh-CN.md index 0a8c3873e6..0d1d064e1a 100644 --- a/components/modal/index.zh-CN.md +++ b/components/modal/index.zh-CN.md @@ -57,7 +57,8 @@ demo: | closable | 是否显示右上角的关闭按钮 | boolean \| { closeIcon?: React.ReactNode; disabled?: boolean; } | true | | | closeIcon | 自定义关闭图标。5.7.0：设置为 `null` 或 `false` 时隐藏关闭按钮 | ReactNode | <CloseOutlined /> | | | confirmLoading | 确定按钮 loading | boolean | false | | -| destroyOnClose | 关闭时销毁 Modal 里的子元素 | boolean | false | | +| ~~destroyOnClose~~ | 关闭时销毁 Modal 里的子元素 | boolean | false | | +| destroyOnHidden | 关闭时销毁 Modal 里的子元素 | boolean | false | 5.25.0 | | focusTriggerAfterClose | 对话框关闭后是否需要聚焦触发元素 | boolean | true | 4.9.0 | | footer | 底部内容，当不需要默认底部按钮时，可以设为 `footer={null}` | ReactNode \| (originNode: ReactNode, extra: { OkBtn: React.FC, CancelBtn: React.FC }) => ReactNode | (确定取消按钮) | renderFunction: 5.9.0 | | forceRender | 强制渲染 Modal | boolean | false | | @@ -82,8 +83,8 @@ demo: #### 注意 -- `` 默认关闭后状态不会自动清空，如果希望每次打开都是新内容，请设置 `destroyOnClose`。 -- `` 和 Form 一起配合使用时，设置 `destroyOnClose` 也不会在 Modal 关闭时销毁表单字段数据，需要设置 ``。 +- `` 默认关闭后状态不会自动清空，如果希望每次打开都是新内容，请设置 `destroyOnHidden`。 +- `` 和 Form 一起配合使用时，设置 `destroyOnHidden` 也不会在 Modal 关闭时销毁表单字段数据，需要设置 ``。 - `Modal.method()` RTL 模式仅支持 hooks 用法。 ### Modal.method() diff --git a/components/modal/interface.ts b/components/modal/interface.ts index c37268ca7b..c3629c0bf9 100644 --- a/components/modal/interface.ts +++ b/components/modal/interface.ts @@ -44,7 +44,12 @@ export interface ModalProps extends ModalCommonProps { forceRender?: boolean; okButtonProps?: ButtonProps; cancelButtonProps?: ButtonProps; + /** @deprecated Please use `destroyOnHidden` instead */ destroyOnClose?: boolean; + /** + * @since 5.25.0 + */ + destroyOnHidden?: boolean; style?: React.CSSProperties; wrapClassName?: string; maskTransitionName?: string; diff --git a/components/tabs/index.en-US.md b/components/tabs/index.en-US.md index df51724a2a..9d99e25972 100644 --- a/components/tabs/index.en-US.md +++ b/components/tabs/index.en-US.md @@ -63,7 +63,8 @@ Common props ref：[Common props](/docs/react/common-props) | tabBarGutter | The gap between tabs | number | - | | | tabBarStyle | Tab bar style object | CSSProperties | - | | | tabPosition | Position of tabs | `top` \| `right` \| `bottom` \| `left` | `top` | | -| destroyInactiveTabPane | Whether destroy inactive TabPane when change tab | boolean | false | | +| ~~destroyInactiveTabPane~~ | Whether destroy inactive TabPane when change tab | boolean | false | | +| destroyOnHidden | Whether destroy inactive TabPane when change tab | boolean | false | 5.25.0 | | type | Basic style of tabs | `line` \| `card` \| `editable-card` | `line` | | | onChange | Callback executed when active tab is changed | (activeKey: string) => void | - | | | onEdit | Callback executed when tab is added or removed. Only works while `type="editable-card"` | (action === 'add' ? event : targetKey, action) => void | - | | diff --git a/components/tabs/index.tsx b/components/tabs/index.tsx index 232a282fb8..21f7073935 100755 --- a/components/tabs/index.tsx +++ b/components/tabs/index.tsx @@ -24,7 +24,7 @@ export type TabsPosition = 'top' | 'right' | 'bottom' | 'left'; export type { TabPaneProps }; -export interface TabsProps extends Omit { +export interface TabsProps extends Omit { rootClassName?: string; type?: TabsType; size?: SizeType; @@ -38,6 +38,13 @@ export interface TabsProps extends Omit { children?: React.ReactNode; /** @deprecated Please use `indicator={{ size: ... }}` instead */ indicatorSize?: GetIndicatorSize; + + /** @deprecated Please use `destroyOnHidden` instead */ + destroyInactiveTabPane?: boolean; + /** + * @since 5.25.0 + */ + destroyOnHidden?: boolean; } const Tabs: React.FC & { TabPane: typeof TabPane } = (props) => { @@ -60,6 +67,8 @@ const Tabs: React.FC & { TabPane: typeof TabPane } = (props) => { style, indicatorSize, indicator, + destroyInactiveTabPane, + destroyOnHidden, ...otherProps } = props; const { prefixCls: customizePrefixCls } = otherProps; @@ -95,6 +104,12 @@ const Tabs: React.FC & { TabPane: typeof TabPane } = (props) => { 'deprecated', '`indicatorSize` has been deprecated. Please use `indicator={{ size: ... }}` instead.', ); + + warning.deprecated( + !('destroyInactiveTabPane' in props), + 'destroyInactiveTabPane', + 'destroyOnHidden', + ); } const size = useSize(customSize); @@ -141,6 +156,8 @@ const Tabs: React.FC & { TabPane: typeof TabPane } = (props) => { prefixCls={prefixCls} animated={mergedAnimated} indicator={mergedIndicator} + // TODO: In the future, destroyInactiveTabPane in rc-tabs needs to be upgrade to destroyOnHidden + destroyInactiveTabPane={destroyOnHidden ?? destroyInactiveTabPane} />, ); }; diff --git a/components/tabs/index.zh-CN.md b/components/tabs/index.zh-CN.md index bc3a9ff995..a8d6a34cdc 100644 --- a/components/tabs/index.zh-CN.md +++ b/components/tabs/index.zh-CN.md @@ -65,7 +65,8 @@ Ant Design 依次提供了三级选项卡，分别用于不同的场景。 | tabBarGutter | tabs 之间的间隙 | number | - | | | tabBarStyle | tab bar 的样式对象 | CSSProperties | - | | | tabPosition | 页签位置，可选值有 `top` `right` `bottom` `left` | string | `top` | | -| destroyInactiveTabPane | 被隐藏时是否销毁 DOM 结构 | boolean | false | | +| ~~destroyInactiveTabPane~~ | 被隐藏时是否销毁 DOM 结构 | boolean | false | | +| destroyOnHidden | 被隐藏时是否销毁 DOM 结构 | boolean | false | 5.25.0 | | type | 页签的基本样式，可选 `line`、`card` `editable-card` 类型 | string | `line` | | | onChange | 切换面板的回调 | (activeKey: string) => void | - | | | onEdit | 新增和删除页签的回调，在 `type="editable-card"` 时有效 | (action === 'add' ? event : targetKey, action) => void | - | | diff --git a/components/tooltip/__tests__/tooltip.test.tsx b/components/tooltip/__tests__/tooltip.test.tsx index b1e1949a92..1c2d5fa0d3 100644 --- a/components/tooltip/__tests__/tooltip.test.tsx +++ b/components/tooltip/__tests__/tooltip.test.tsx @@ -544,7 +544,7 @@ describe('Tooltip', () => { , ); expect(errSpy).toHaveBeenCalledWith( - 'Warning: [antd: Tooltip] `destroyTooltipOnHide` is deprecated. Please use `destroyOnClose` instead.', + 'Warning: [antd: Tooltip] `destroyTooltipOnHide` is deprecated. Please use `destroyOnHidden` instead.', ); // Event Trigger diff --git a/components/tooltip/demo/destroy-on-close.md b/components/tooltip/demo/destroy-on-close.md index d1f4f1ea87..0419202e8c 100644 --- a/components/tooltip/demo/destroy-on-close.md +++ b/components/tooltip/demo/destroy-on-close.md @@ -1,7 +1,7 @@ ## zh-CN -通过 `destroyOnClose` 控制提示关闭时是否销毁 dom 节点。 +通过 `destroyOnHidden` 控制提示关闭时是否销毁 dom 节点。 ## en-US -Setting `destroyOnClose` to control whether destroy dom node of tooltip when hidden. +Setting `destroyOnHidden` to control whether destroy dom node of tooltip when hidden. diff --git a/components/tooltip/demo/destroy-on-close.tsx b/components/tooltip/demo/destroy-on-close.tsx index a1770a147b..6307e0b0cb 100644 --- a/components/tooltip/demo/destroy-on-close.tsx +++ b/components/tooltip/demo/destroy-on-close.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { Tooltip } from 'antd'; const App: React.FC = () => ( - + Dom will destroyed when Tooltip close ); diff --git a/components/tooltip/index.tsx b/components/tooltip/index.tsx index a4eb2557a6..bcf3e1d935 100644 --- a/components/tooltip/index.tsx +++ b/components/tooltip/index.tsx @@ -115,12 +115,12 @@ export interface AbstractTooltipProps extends LegacyTooltipProps { autoAdjustOverflow?: boolean | AdjustOverflow; getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement; children?: React.ReactNode; - /** @deprecated Please use `destroyOnClose` instead */ + /** @deprecated Please use `destroyOnHidden` instead */ destroyTooltipOnHide?: boolean | { keepParent?: boolean }; /** * @since 5.25.0 */ - destroyOnClose?: boolean; + destroyOnHidden?: boolean; } export interface TooltipPropsWithOverlay extends AbstractTooltipProps { @@ -146,7 +146,7 @@ const InternalTooltip = React.forwardRef((props, ref) afterOpenChange, afterVisibleChange, destroyTooltipOnHide, - destroyOnClose, + destroyOnHidden, arrow = true, title, overlay, @@ -206,7 +206,7 @@ const InternalTooltip = React.forwardRef((props, ref) ['defaultVisible', 'defaultOpen'], ['onVisibleChange', 'onOpenChange'], ['afterVisibleChange', 'afterOpenChange'], - ['destroyTooltipOnHide', 'destroyOnClose'], + ['destroyTooltipOnHide', 'destroyOnHidden'], ['arrowPointAtCenter', 'arrow={{ pointAtCenter: true }}'], ['overlayStyle', 'styles={{ root: {} }}'], ['overlayInnerStyle', 'styles={{ body: {} }}'], @@ -359,8 +359,8 @@ const InternalTooltip = React.forwardRef((props, ref) motionName: getTransitionName(rootPrefixCls, 'zoom-big-fast', props.transitionName), motionDeadline: 1000, }} - // TODO: 未来需要把 rc-tooltip 里面的 destroyTooltipOnHide 统一成 destroyOnClose - destroyTooltipOnHide={destroyOnClose ?? !!destroyTooltipOnHide} + // TODO: In the future, destroyTooltipOnHide in rc-tooltip needs to be upgrade to destroyOnHidden + destroyTooltipOnHide={destroyOnHidden ?? !!destroyTooltipOnHide} > {tempOpen ? cloneElement(child, { className: childCls }) : child} diff --git a/components/tooltip/shared/sharedProps.en-US.md b/components/tooltip/shared/sharedProps.en-US.md index 9896b1d083..1bf7057c67 100644 --- a/components/tooltip/shared/sharedProps.en-US.md +++ b/components/tooltip/shared/sharedProps.en-US.md @@ -9,7 +9,7 @@ | color | The background color | string | - | 4.3.0 | | defaultOpen | Whether the floating tooltip card is open by default | boolean | false | 4.23.0 | | ~~destroyTooltipOnHide~~ | Whether destroy dom when close | boolean | false | | -| destroyOnClose | Whether destroy dom when close | boolean | false | 5.25.0 | +| destroyOnHidden | Whether destroy dom when close | boolean | false | 5.25.0 | | fresh | Tooltip will cache content when it is closed by default. Setting this property will always keep updating | boolean | false | 5.10.0 | | getPopupContainer | The DOM container of the tip, the default behavior is to create a `div` element in `body` | (triggerNode: HTMLElement) => HTMLElement | () => document.body | | | mouseEnterDelay | Delay in seconds, before tooltip is shown on mouse enter | number | 0.1 | | diff --git a/components/tooltip/shared/sharedProps.zh-CN.md b/components/tooltip/shared/sharedProps.zh-CN.md index 7f17ac20d1..dcb828149b 100644 --- a/components/tooltip/shared/sharedProps.zh-CN.md +++ b/components/tooltip/shared/sharedProps.zh-CN.md @@ -9,7 +9,7 @@ | color | 背景颜色 | string | - | 4.3.0 | | defaultOpen | 默认是否显隐 | boolean | false | 4.23.0 | | ~~destroyTooltipOnHide~~ | 关闭后是否销毁 dom | boolean | false | | -| destroyOnClose | 关闭后是否销毁 dom | boolean | false | 5.25.0 | +| destroyOnHidden | 关闭后是否销毁 dom | boolean | false | 5.25.0 | | fresh | 默认情况下，Tooltip 在关闭时会缓存内容。设置该属性后会始终保持更新 | boolean | false | 5.10.0 | | getPopupContainer | 浮层渲染父节点，默认渲染到 body 上 | (triggerNode: HTMLElement) => HTMLElement | () => document.body | | | mouseEnterDelay | 鼠标移入后延时多少才显示 Tooltip，单位：秒 | number | 0.1 | | diff --git a/components/watermark/demo/portal.tsx b/components/watermark/demo/portal.tsx index bd9e3391d6..4dfcc87d74 100644 --- a/components/watermark/demo/portal.tsx +++ b/components/watermark/demo/portal.tsx @@ -35,7 +35,7 @@ const App: React.FC = () => { { > {placeholder} - + {placeholder} - + {placeholder}