diff --git a/components/cascader/__tests__/index.test.tsx b/components/cascader/__tests__/index.test.tsx index 0a4ffc697960..32b2711dce5a 100644 --- a/components/cascader/__tests__/index.test.tsx +++ b/components/cascader/__tests__/index.test.tsx @@ -413,7 +413,7 @@ describe('Cascader', () => { const { container } = render(); toggleOpen(container); - // Inject in tests/__mocks__/rc-trigger.js + // Inject in tests/__mocks__/@rc-component/trigger.tsx expect((global as any)?.triggerProps.popupPlacement).toEqual('topRight'); }); @@ -531,14 +531,14 @@ describe('Cascader', () => { const { container } = render(); toggleOpen(container); - // Inject in tests/__mocks__/rc-trigger.js + // Inject in tests/__mocks__/@rc-component/trigger.tsx expect((global as any).triggerProps.popupPlacement).toEqual('bottomRight'); }); describe('legacy props', () => { it('popupPlacement', () => { render(); - // Inject in tests/__mocks__/rc-trigger.js + // Inject in tests/__mocks__/@rc-component/trigger.tsx expect((global as any).triggerProps.popupPlacement).toEqual('bottomLeft'); }); diff --git a/components/popconfirm/index.en-US.md b/components/popconfirm/index.en-US.md index 42e7ba04d5a4..5987945e68ba 100644 --- a/components/popconfirm/index.en-US.md +++ b/components/popconfirm/index.en-US.md @@ -61,14 +61,7 @@ Common props ref:[Common props](/docs/react/common-props) -## FAQ - -### Why does the warning `findDOMNode is deprecated` sometimes appear in strict mode? - -This is due to the implementation of `rc-trigger`. `rc-trigger` forces children to accept ref, otherwise it will fall back to findDOMNode, so children need to be native html tags. If not, you need to use `React.forwardRef` transparently passes `ref` to native html tags. - -- `findDOMNode is deprecated` reproduce: -- Using `forwardRef` to fix: + ## Note diff --git a/components/popconfirm/index.zh-CN.md b/components/popconfirm/index.zh-CN.md index a9bd628e293b..aa35c88dcab5 100644 --- a/components/popconfirm/index.zh-CN.md +++ b/components/popconfirm/index.zh-CN.md @@ -62,14 +62,7 @@ demo: -## FAQ - -### 为何在严格模式中有时候会出现 `findDOMNode is deprecated` 这个警告? - -这是由于 `rc-trigger` 的实现方式导致的,`rc-trigger` 强制要求 children 能够接受 ref,否则就会 fallback 到 findDOMNode,所以 children 需要是原生 html 标签,如果不是,则需要使用 `React.forwardRef` 把 `ref` 透传到原生 html 标签。 - -- `findDOMNode is deprecated` 重现: -- 使用 `forwardRef` 消除警告: + ## 注意 diff --git a/components/popover/PurePanel.tsx b/components/popover/PurePanel.tsx index 3ed5d1a9facf..a2cb7b306fb0 100644 --- a/components/popover/PurePanel.tsx +++ b/components/popover/PurePanel.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import classNames from 'classnames'; -import { Popup } from 'rc-tooltip'; +import { Popup } from '@rc-component/tooltip'; import type { PopoverProps } from '.'; import { getRenderPropValue } from '../_util/getRenderPropValue'; diff --git a/components/popover/index.en-US.md b/components/popover/index.en-US.md index 176d55134272..9dfe7aca50e5 100644 --- a/components/popover/index.en-US.md +++ b/components/popover/index.en-US.md @@ -57,13 +57,6 @@ Please ensure that the child node of `Popover` accepts `onMouseEnter`, `onMouseL ## FAQ -### Why does the warning `findDOMNode is deprecated` sometimes appear in strict mode? - -This is due to the implementation of `rc-trigger`. `rc-trigger` forces children to accept ref, otherwise it will fall back to findDOMNode, so children need to be native html tags. If not, you need to use `React.forwardRef` transparently passes `ref` to native html tags. - -- `findDOMNode is deprecated` reproduce: -- Using `forwardRef` to fix: - ### Why sometime not work on HOC? Please ensure that the child node of `Tooltip` accepts `onMouseEnter`, `onMouseLeave`, `onPointerEnter`, `onPointerLeave`, `onFocus`, `onClick` events. diff --git a/components/popover/index.tsx b/components/popover/index.tsx index 7b46d04192aa..20ffaeb1e4b6 100644 --- a/components/popover/index.tsx +++ b/components/popover/index.tsx @@ -38,6 +38,7 @@ const InternalPopover = React.forwardRef((props, ref) overlayStyle = {}, styles, classNames: popoverClassNames, + motion, ...otherProps } = props; const { popover, getPrefixCls } = React.useContext(ConfigContext); @@ -110,7 +111,13 @@ const InternalPopover = React.forwardRef((props, ref) ) : null } - transitionName={getTransitionName(rootPrefixCls, 'zoom-big', otherProps.transitionName)} + motion={{ + motionName: getTransitionName( + rootPrefixCls, + 'zoom-big', + typeof motion?.motionName === 'string' ? motion?.motionName : undefined, + ), + }} data-popover-inject > {cloneElement(children, { diff --git a/components/popover/index.zh-CN.md b/components/popover/index.zh-CN.md index 1400be912f72..2a81e4e16768 100644 --- a/components/popover/index.zh-CN.md +++ b/components/popover/index.zh-CN.md @@ -58,13 +58,6 @@ demo: ## FAQ -### 为何在严格模式中有时候会出现 `findDOMNode is deprecated` 这个警告? - -这是由于 `rc-trigger` 的实现方式导致的,`rc-trigger` 强制要求 children 能够接受 ref,否则就会 fallback 到 findDOMNode,所以 children 需要是原生 html 标签,如果不是,则需要使用 `React.forwardRef` 把 `ref` 透传到原生 html 标签。 - -- `findDOMNode is deprecated` 重现: -- 使用 `forwardRef` 消除警告: - ### 为何有时候 HOC 组件无法生效? 请确保 `Popover` 的子元素能接受 `onMouseEnter`、`onMouseLeave`、`onPointerEnter`、`onPointerLeave`、`onFocus`、`onClick` 事件。 diff --git a/components/tooltip/PurePanel.tsx b/components/tooltip/PurePanel.tsx index 5dc5e6e7d020..96c8020be786 100644 --- a/components/tooltip/PurePanel.tsx +++ b/components/tooltip/PurePanel.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import classNames from 'classnames'; -import { Popup } from 'rc-tooltip'; +import { Popup } from '@rc-component/tooltip'; import type { TooltipProps } from '.'; import { ConfigContext } from '../config-provider'; diff --git a/components/tooltip/__tests__/tooltip.test.tsx b/components/tooltip/__tests__/tooltip.test.tsx index 36b8e3e04c8b..ff9edddc84ce 100644 --- a/components/tooltip/__tests__/tooltip.test.tsx +++ b/components/tooltip/__tests__/tooltip.test.tsx @@ -344,7 +344,7 @@ describe('Tooltip', () => { const { container } = render( -- Using `forwardRef` to fix: - ### Why sometime not work on HOC? Please ensure that the child node of `Tooltip` accepts `onMouseEnter`, `onMouseLeave`, `onPointerEnter`, `onPointerLeave`, `onFocus`, `onClick` events. diff --git a/components/tooltip/index.tsx b/components/tooltip/index.tsx index 63f187b111f5..ad8ce86a3239 100644 --- a/components/tooltip/index.tsx +++ b/components/tooltip/index.tsx @@ -1,13 +1,13 @@ import * as React from 'react'; -import type { BuildInPlacements } from '@rc-component/trigger'; -import useMergedState from '@rc-component/util/lib/hooks/useMergedState'; -import classNames from 'classnames'; -import RcTooltip from 'rc-tooltip'; -import type { placements as Placements } from 'rc-tooltip/lib/placements'; +import RcTooltip from '@rc-component/tooltip'; +import type { placements as Placements } from '@rc-component/tooltip/lib/placements'; import type { TooltipProps as RcTooltipProps, TooltipRef as RcTooltipRef, -} from 'rc-tooltip/lib/Tooltip'; +} from '@rc-component/tooltip/lib/Tooltip'; +import type { BuildInPlacements } from '@rc-component/trigger'; +import useMergedState from '@rc-component/util/lib/hooks/useMergedState'; +import classNames from 'classnames'; import type { PresetColorType } from '../_util/colors'; import ContextIsolator from '../_util/ContextIsolator'; @@ -150,6 +150,7 @@ const InternalTooltip = React.forwardRef((props, ref) builtinPlacements, arrowPointAtCenter = false, autoAdjustOverflow = true, + motion, } = props; const mergedShowArrow = !!arrow; @@ -350,7 +351,11 @@ const InternalTooltip = React.forwardRef((props, ref) afterVisibleChange={afterOpenChange ?? afterVisibleChange} arrowContent={} motion={{ - motionName: getTransitionName(rootPrefixCls, 'zoom-big-fast', props.transitionName), + motionName: getTransitionName( + rootPrefixCls, + 'zoom-big-fast', + typeof motion?.motionName === 'string' ? motion?.motionName : undefined, + ), motionDeadline: 1000, }} destroyTooltipOnHide={!!destroyTooltipOnHide} diff --git a/components/tooltip/index.zh-CN.md b/components/tooltip/index.zh-CN.md index b9ba9c3c0e1f..8b448a412e15 100644 --- a/components/tooltip/index.zh-CN.md +++ b/components/tooltip/index.zh-CN.md @@ -53,13 +53,6 @@ demo: ## FAQ -### 为何在严格模式中有时候会出现 `findDOMNode is deprecated` 这个警告? - -这是由于 `rc-trigger` 的实现方式导致的,`rc-trigger` 强制要求 children 能够接受 ref,否则就会 fallback 到 findDOMNode,所以 children 需要是原生 html 标签,如果不是,则需要使用 `React.forwardRef` 把 `ref` 透传到原生 html 标签。 - -- `findDOMNode is deprecated` 重现: -- 使用 `forwardRef` 消除警告: - ### 为何有时候 HOC 组件无法生效? 请确保 `Tooltip` 的子元素能接受 `onMouseEnter`、`onMouseLeave`、`onPointerEnter`、`onPointerLeave`、`onFocus`、`onClick` 事件。 diff --git a/docs/blog/tooltip-align.en-US.md b/docs/blog/tooltip-align.en-US.md index 6f16eb0d3936..f5a1fabcefd0 100644 --- a/docs/blog/tooltip-align.en-US.md +++ b/docs/blog/tooltip-align.en-US.md @@ -78,7 +78,7 @@ const scaledOffsetY = baseOffsetY / scaleY; ### Arrow -In the past, arrows were added by `rc-tooltip` instead of `rc-trigger`. This makes the `rc-tooltip` lost the alignment information, so that the arrow position cannot be adjusted correctly when the Popup is offset. To this end, we also integrate the arrow logic into `rc-trigger`, so that the position of the arrow can be offset with the offset of the Popup. After merging, the arrow position calculation becomes very simple. We only need to take the minimum value of the target element and the Popup boundary value, and then take the middle value: +In the past, arrows were added by `@rc-component/tooltip` instead of `@rc-component/trigger`. This makes the `@rc-component/tooltip` lost the alignment information, so that the arrow position cannot be adjusted correctly when the Popup is offset. To this end, we also integrate the arrow logic into `@rc-component/trigger`, so that the position of the arrow can be offset with the offset of the Popup. After merging, the arrow position calculation becomes very simple. We only need to take the minimum value of the target element and the Popup boundary value, and then take the middle value: #### Center Position diff --git a/docs/blog/tooltip-align.zh-CN.md b/docs/blog/tooltip-align.zh-CN.md index 202d08b3ec72..a82f6664795c 100644 --- a/docs/blog/tooltip-align.zh-CN.md +++ b/docs/blog/tooltip-align.zh-CN.md @@ -78,7 +78,7 @@ const scaledOffsetY = baseOffsetY / scaleY; ### 箭头优化 -在过去版本中,箭头由 `rc-tooltip` 添加而非 `rc-trigger` 管理。这使得 `rc-tooltip` 封装时已经丢失了对齐信息,以至于无法在 Popup 偏移时正确的调整箭头位置。为此,我们将箭头逻辑也整合到 `rc-trigger` 中,使得箭头的位置可以随着 Popup 的偏移而偏移。合并之后,箭头位置计算变得十分简单。我们只要取目标元素和 Popup 边界值最小值,再取中间值即可: +在过去版本中,箭头由 `@rc-component/tooltip` 添加而非 `@rc-component/trigger` 管理。这使得 `@rc-component/tooltip` 封装时已经丢失了对齐信息,以至于无法在 Popup 偏移时正确的调整箭头位置。为此,我们将箭头逻辑也整合到 `@rc-component/trigger` 中,使得箭头的位置可以随着 Popup 的偏移而偏移。合并之后,箭头位置计算变得十分简单。我们只要取目标元素和 Popup 边界值最小值,再取中间值即可: #### 居中定位