mirror of
https://github.com/ant-design/ant-design.git
synced 2026-02-09 02:49:18 +08:00
fix: replace rc-tooltip deprecated api (#52395)
* chore: add rc-tooltip * chore: rename * fix: remove deprecated api * fix: update * test: snap * fix: update * Update components/cascader/__tests__/index.test.tsx Co-authored-by: thinkasany <480968828@qq.com> Signed-off-by: Wanpan <wanpan96@163.com> * Update components/cascader/__tests__/index.test.tsx Co-authored-by: thinkasany <480968828@qq.com> Signed-off-by: Wanpan <wanpan96@163.com> * Update components/cascader/__tests__/index.test.tsx Co-authored-by: thinkasany <480968828@qq.com> Signed-off-by: Wanpan <wanpan96@163.com> --------- Signed-off-by: Wanpan <wanpan96@163.com> Co-authored-by: thinkasany <480968828@qq.com>
This commit is contained in:
Wanpan
@@ -413,7 +413,7 @@ describe('Cascader', () => {
|
||||
const { container } = render(<Cascader options={customOptions} placement="topRight" />);
|
||||
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(<Cascader options={options} direction="rtl" />);
|
||||
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(<Cascader open popupPlacement="bottomLeft" />);
|
||||
// Inject in tests/__mocks__/rc-trigger.js
|
||||
// Inject in tests/__mocks__/@rc-component/trigger.tsx
|
||||
expect((global as any).triggerProps.popupPlacement).toEqual('bottomLeft');
|
||||
});
|
||||
|
||||
|
||||
@@ -61,14 +61,7 @@ Common props ref：[Common props](/docs/react/common-props)
|
||||
|
||||
<ComponentTokenTable component="Popconfirm"></ComponentTokenTable>
|
||||
|
||||
## 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: <https://codesandbox.io/p/sandbox/finddomnode-c5hy96>
|
||||
- Using `forwardRef` to fix: <https://codesandbox.io/p/sandbox/no-finddomnode-warning-forked-gdxczs>
|
||||
<!-- ## FAQ -->
|
||||
|
||||
## Note
|
||||
|
||||
|
||||
@@ -62,14 +62,7 @@ demo:
|
||||
|
||||
<ComponentTokenTable component="Popconfirm"></ComponentTokenTable>
|
||||
|
||||
## FAQ
|
||||
|
||||
### 为何在严格模式中有时候会出现 `findDOMNode is deprecated` 这个警告？
|
||||
|
||||
这是由于 `rc-trigger` 的实现方式导致的，`rc-trigger` 强制要求 children 能够接受 ref，否则就会 fallback 到 findDOMNode，所以 children 需要是原生 html 标签，如果不是，则需要使用 `React.forwardRef` 把 `ref` 透传到原生 html 标签。
|
||||
|
||||
- `findDOMNode is deprecated` 重现：<https://codesandbox.io/p/sandbox/finddomnode-c5hy96>
|
||||
- 使用 `forwardRef` 消除警告：<https://codesandbox.io/p/sandbox/no-finddomnode-warning-forked-gdxczs>
|
||||
<!-- ## FAQ -->
|
||||
|
||||
## 注意
|
||||
|
||||
|
||||
@@ -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';
|
||||
|
||||
@@ -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: <https://codesandbox.io/p/sandbox/finddomnode-c5hy96>
|
||||
- Using `forwardRef` to fix: <https://codesandbox.io/p/sandbox/no-finddomnode-warning-forked-gdxczs>
|
||||
|
||||
### Why sometime not work on HOC?
|
||||
|
||||
Please ensure that the child node of `Tooltip` accepts `onMouseEnter`, `onMouseLeave`, `onPointerEnter`, `onPointerLeave`, `onFocus`, `onClick` events.
|
||||
|
||||
@@ -38,6 +38,7 @@ const InternalPopover = React.forwardRef<TooltipRef, PopoverProps>((props, ref)
|
||||
overlayStyle = {},
|
||||
styles,
|
||||
classNames: popoverClassNames,
|
||||
motion,
|
||||
...otherProps
|
||||
} = props;
|
||||
const { popover, getPrefixCls } = React.useContext(ConfigContext);
|
||||
@@ -110,7 +111,13 @@ const InternalPopover = React.forwardRef<TooltipRef, PopoverProps>((props, ref)
|
||||
<Overlay prefixCls={prefixCls} title={titleNode} content={contentNode} />
|
||||
) : 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, {
|
||||
|
||||
@@ -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` 重现：<https://codesandbox.io/p/sandbox/finddomnode-c5hy96>
|
||||
- 使用 `forwardRef` 消除警告：<https://codesandbox.io/p/sandbox/no-finddomnode-warning-forked-gdxczs>
|
||||
|
||||
### 为何有时候 HOC 组件无法生效？
|
||||
|
||||
请确保 `Popover` 的子元素能接受 `onMouseEnter`、`onMouseLeave`、`onPointerEnter`、`onPointerLeave`、`onFocus`、`onClick` 事件。
|
||||
|
||||
@@ -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';
|
||||
|
||||
@@ -344,7 +344,7 @@ describe('Tooltip', () => {
|
||||
const { container } = render(
|
||||
<Tooltip
|
||||
title="xxxxx"
|
||||
transitionName=""
|
||||
motion={{ motionName: '' }}
|
||||
mouseEnterDelay={0}
|
||||
placement={placement}
|
||||
autoAdjustOverflow={false}
|
||||
|
||||
@@ -51,13 +51,6 @@ 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: <https://codesandbox.io/p/sandbox/finddomnode-c5hy96>
|
||||
- Using `forwardRef` to fix: <https://codesandbox.io/p/sandbox/no-finddomnode-warning-forked-gdxczs>
|
||||
|
||||
### Why sometime not work on HOC?
|
||||
|
||||
Please ensure that the child node of `Tooltip` accepts `onMouseEnter`, `onMouseLeave`, `onPointerEnter`, `onPointerLeave`, `onFocus`, `onClick` events.
|
||||
|
||||
@@ -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<TooltipRef, TooltipProps>((props, ref)
|
||||
builtinPlacements,
|
||||
arrowPointAtCenter = false,
|
||||
autoAdjustOverflow = true,
|
||||
motion,
|
||||
} = props;
|
||||
|
||||
const mergedShowArrow = !!arrow;
|
||||
@@ -350,7 +351,11 @@ const InternalTooltip = React.forwardRef<TooltipRef, TooltipProps>((props, ref)
|
||||
afterVisibleChange={afterOpenChange ?? afterVisibleChange}
|
||||
arrowContent={<span className={`${prefixCls}-arrow-content`} />}
|
||||
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}
|
||||
|
||||
@@ -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` 重现：<https://codesandbox.io/p/sandbox/finddomnode-c5hy96>
|
||||
- 使用 `forwardRef` 消除警告：<https://codesandbox.io/p/sandbox/no-finddomnode-warning-forked-gdxczs>
|
||||
|
||||
### 为何有时候 HOC 组件无法生效？
|
||||
|
||||
请确保 `Tooltip` 的子元素能接受 `onMouseEnter`、`onMouseLeave`、`onPointerEnter`、`onPointerLeave`、`onFocus`、`onClick` 事件。
|
||||
|
||||
@@ -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
|
||||
|
||||
|
||||
@@ -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 边界值最小值，再取中间值即可：
|
||||
|
||||
#### 居中定位
|
||||
|
||||
|
||||
Reference in New Issue
Block a user