feat: change slide tooltip api (#37043)

* feat: change slide tooltip api * fix * fix * fix: Slider test in config-provider * fix: Slider test * chore: adjust prosp pass Co-authored-by: 二货机器人 <smith3816@gmail.com>
2 years ago · 42bbd9e24f
4 changed files with 51 additions and 104 deletions
--- a/components/config-provider/tests/components.test.js
+++ b/components/config-provider/tests/components.test.js
@ -456,15 +456,14 @@ describe('ConfigProvider', () => {
    // Slider
    testPair('Slider', props => {
      const myProps = { ...props };
+      const tooltip = {
+        open: true,
+      };
+
      if (myProps.prefixCls) {
-        return (
-          <Slider
-            tooltip={{ open: true, prefixCls: `${myProps.prefixCls}-tooltip` }}
-            {...myProps}
-          />
-        );
+        tooltip.prefixCls = `${myProps.prefixCls}-tooltip`;
      }
-      return <Slider tooltip={{ open: true }} {...myProps} />;
+      return <Slider tooltip={tooltip} {...myProps} />;
    });

    // Spin
--- a/components/slider/tests/index.test.tsx
+++ b/components/slider/tests/index.test.tsx
@ -1,6 +1,5 @@
 import React from 'react';
 import Slider from '..';
-import type { SliderSingleProps } from '..';
 import focusTest from '../../../tests/shared/focusTest';
 import mountTest from '../../../tests/shared/mountTest';
 import rtlTest from '../../../tests/shared/rtlTest';
@ -8,6 +7,7 @@ import { render, fireEvent, act } from '../../../tests/utils';
 import ConfigProvider from '../../config-provider';
 import SliderTooltip from '../SliderTooltip';
 import type { TooltipProps } from '../../tooltip';
+import { resetWarned } from '../../_util/warning';

 function tooltipProps(): TooltipProps {
  return (global as any).tooltipProps;
@ -48,58 +48,35 @@ describe('Slider', () => {
    expect(document.querySelector('.ant-tooltip')).toMatchSnapshot();
  });

-  describe('should show correct placement tooltip when set tooltipPlacement', () => {
-    function test(name: string, props: Partial<SliderSingleProps>) {
-      it(name, () => {
-        const { container } = render(<Slider vertical defaultValue={30} {...props} />);
-
-        fireEvent.mouseEnter(container.querySelector('.ant-slider-handle')!);
-        expect(tooltipProps().placement).toEqual('left');
-      });
-    }
+  it('should show correct placement tooltip when set tooltipPlacement', () => {
+    const { container } = render(
+      <Slider vertical defaultValue={30} tooltip={{ placement: 'left' }} />,
+    );

-    test('new', { tooltip: { placement: 'left' } });
-    test('legacy', { tooltipPlacement: 'left' });
+    fireEvent.mouseEnter(container.querySelector('.ant-slider-handle')!);
+    expect(tooltipProps().placement).toEqual('left');
  });

-  describe('when tooltip.open is true, tooltip should show always, or should never show', () => {
-    function test(
-      name: string,
-      showProps: Partial<SliderSingleProps>,
-      hideProps: Partial<SliderSingleProps>,
-    ) {
-      it(name, () => {
-        const { container, rerender } = render(<Slider defaultValue={30} {...showProps} />);
-        expect(
-          container.querySelector('.ant-tooltip-content')!.className.includes('ant-tooltip-hidden'),
-        ).toBeFalsy();
-
-        fireEvent.mouseEnter(container.querySelector('.ant-slider-handle')!);
-        expect(
-          container.querySelector('.ant-tooltip-content')!.className.includes('ant-tooltip-hidden'),
-        ).toBeFalsy();
-
-        fireEvent.click(container.querySelector('.ant-slider-handle')!);
-        expect(
-          container.querySelector('.ant-tooltip-content')!.className.includes('ant-tooltip-hidden'),
-        ).toBeFalsy();
-
-        // Force hide
-        rerender(<Slider defaultValue={30} {...hideProps} />);
-
-        act(() => {
-          jest.runAllTimers();
-        });
-        if (container.querySelector('.ant-zoom-down-leave-active')) {
-          fireEvent.animationEnd(container.querySelector('.ant-zoom-down-leave-active')!);
-        }
-
-        expect(container.querySelector('.ant-tooltip-hidden')!).toBeTruthy();
-      });
-    }
-
-    test('new', { tooltip: { open: true } }, { tooltip: { open: false } });
-    test('legacy', { tooltipVisible: true }, { tooltipVisible: false });
+  it('when tooltip.open is true, tooltip should show always, or should never show', () => {
+    const { container: container1 } = render(<Slider defaultValue={30} tooltip={{ open: true }} />);
+    expect(
+      container1.querySelector('.ant-tooltip-content')!.className.includes('ant-tooltip-hidden'),
+    ).toBeFalsy();
+
+    fireEvent.mouseEnter(container1.querySelector('.ant-slider-handle')!);
+    expect(
+      container1.querySelector('.ant-tooltip-content')!.className.includes('ant-tooltip-hidden'),
+    ).toBeFalsy();
+
+    fireEvent.click(container1.querySelector('.ant-slider-handle')!);
+    expect(
+      container1.querySelector('.ant-tooltip-content')!.className.includes('ant-tooltip-hidden'),
+    ).toBeFalsy();
+
+    const { container: container2 } = render(
+      <Slider defaultValue={30} tooltip={{ open: false }} />,
+    );
+    expect(container2.querySelector('.ant-tooltip-content')!).toBeNull();
  });

  it('when step is null, thumb can only be slided to the specific mark', () => {
@ -185,27 +162,31 @@ describe('Slider', () => {
    });
  });
  it('deprecated warning', () => {
+    resetWarned();
+
+    const TSSlider = Slider as any;
+
    const errSpy = jest.spyOn(console, 'error').mockImplementation(() => {});

-    const { rerender } = render(<Slider tooltipPrefixCls="xxx" />);
+    const { rerender } = render(<TSSlider tooltipPrefixCls="xxx" />);
    expect(errSpy).toHaveBeenCalledWith(
-      'Warning: [antd: Slider] `tooltipPrefixCls` is deprecated which will be removed in next major version, please use `tooltip.prefixCls` instead.',
+      'Warning: [antd: Slider] `tooltipPrefixCls` is removed in v5, please use `tooltip.prefixCls` instead.',
    );
-    rerender(<Slider getTooltipPopupContainer={() => document.body} />);
+    rerender(<TSSlider getTooltipPopupContainer={() => document.body} />);
    expect(errSpy).toHaveBeenCalledWith(
-      'Warning: [antd: Slider] `getTooltipPopupContainer` is deprecated which will be removed in next major version, please use `tooltip.getPopupContainer` instead.',
+      'Warning: [antd: Slider] `getTooltipPopupContainer` is removed in v5, please use `tooltip.getPopupContainer` instead.',
    );
-    rerender(<Slider tipFormatter={v => v} />);
+    rerender(<TSSlider tipFormatter={(v: any) => v} />);
    expect(errSpy).toHaveBeenCalledWith(
-      'Warning: [antd: Slider] `tipFormatter` is deprecated which will be removed in next major version, please use `tooltip.formatter` instead.',
+      'Warning: [antd: Slider] `tipFormatter` is removed in v5, please use `tooltip.formatter` instead.',
    );
-    rerender(<Slider tooltipVisible />);
+    rerender(<TSSlider tooltipVisible />);
    expect(errSpy).toHaveBeenCalledWith(
-      'Warning: [antd: Slider] `tooltipVisible` is deprecated which will be removed in next major version, please use `tooltip.open` instead.',
+      'Warning: [antd: Slider] `tooltipVisible` is removed in v5, please use `tooltip.open` instead.',
    );
-    rerender(<Slider tooltipPlacement="left" />);
+    rerender(<TSSlider tooltipPlacement="left" />);
    expect(errSpy).toHaveBeenCalledWith(
-      'Warning: [antd: Slider] `tooltipPlacement` is deprecated which will be removed in next major version, please use `tooltip.placement` instead.',
+      'Warning: [antd: Slider] `tooltipPlacement` is removed in v5, please use `tooltip.placement` instead.',
    );

    errSpy.mockRestore();
--- a/components/slider/index.tsx
+++ b/components/slider/index.tsx
@ -33,11 +33,6 @@ export interface SliderTooltipProps {

 export interface SliderBaseProps {
  prefixCls?: string;
-  /**
-   * @deprecated `tooltipPrefixCls` is deprecated which will be removed in next major version.
-   *   Please use `tooltip.prefixCls` instead.
-   */
-  tooltipPrefixCls?: string;
  reverse?: boolean;
  min?: number;
  max?: number;
@ -47,30 +42,10 @@ export interface SliderBaseProps {
  included?: boolean;
  disabled?: boolean;
  vertical?: boolean;
-  /**
-   * @deprecated `tipFormatter` is deprecated which will be removed in next major version. Please
-   *   use `tooltip.formatter` instead.
-   */
-  tipFormatter?: null | ((value?: number) => React.ReactNode);
  className?: string;
  id?: string;
  style?: React.CSSProperties;
-  /**
-   * @deprecated `tooltipVisible` is deprecated which will be removed in next major version. Please
-   *   use `tooltip.open` instead.
-   */
-  tooltipVisible?: boolean;
-  /**
-   * @deprecated `tooltipPlacement` is deprecated which will be removed in next major version.
-   *   Please use `tooltip.placement` instead.
-   */
-  tooltipPlacement?: TooltipPlacement;
  tooltip?: SliderTooltipProps;
-  /**
-   * @deprecated `getTooltipPopupContainer` is deprecated which will be removed in next major
-   *   version. Please use `tooltip.getPopupContainer` instead.
-   */
-  getTooltipPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
  autoFocus?: boolean;
 }

@ -158,7 +133,7 @@ const Slider = React.forwardRef<unknown, SliderSingleProps | SliderRangeProps>(
        warning(
          !(deprecatedName in props),
          'Slider',
-          `\`${deprecatedName}\` is deprecated which will be removed in next major version, please use \`tooltip.${newName}\` instead.`,
+          `\`${deprecatedName}\` is removed in v5, please use \`tooltip.${newName}\` instead.`,
        );
      });
    }
@ -170,18 +145,11 @@ const Slider = React.forwardRef<unknown, SliderSingleProps | SliderRangeProps>(
      const { tooltip = {}, vertical } = props;

      const tooltipProps: SliderTooltipProps = {
-        formatter:
-          props.tipFormatter ??
-          // eslint-disable-next-line func-names
-          function (value) {
-            return typeof value === 'number' ? value.toString() : '';
-          },
-        open: props.tooltipVisible,
-        placement: props.tooltipPlacement,
-        getPopupContainer: props.getTooltipPopupContainer,
+        formatter(value) {
+          return typeof value === 'number' ? value.toString() : '';
+        },
        ...tooltip,
      };
-
      const {
        open: tooltipOpen,
        placement: tooltipPlacement,
--- a/components/slider/index.zh-CN.md
+++ b/components/slider/index.zh-CN.md
@ -20,7 +20,6 @@ cover: https://gw.alipayobjects.com/zos/alicdn/HZ3meFc6W/Silder.svg
 | defaultValue | 设置初始取值。当 `range` 为 false 时，使用 number，否则用 \[number, number] | number \| \[number, number] | 0 \| \[0, 0] |  |
 | disabled | 值为 true 时，滑块为禁用状态 | boolean | false |  |
 | dots | 是否只能拖拽到刻度上 | boolean | false |  |
-| getTooltipPopupContainer | Tooltip 渲染父节点，默认渲染到 body 上 | (triggerNode) => HTMLElement | () => document.body |  |
 | included | `marks` 不为空对象时有效，值为 true 时表示值为包含关系，false 表示并列 | boolean | true |  |
 | marks | 刻度标记，key 的类型必须为 `number` 且取值在闭区间 \[min, max] 内，每个标签可以单独设置样式 | object | { number: ReactNode } or { number: { style: CSSProperties, label: ReactNode } } |  |
 | max | 最大值 | number | 100 |  |