From 42bbd9e24f1815fe5846f17a2b967e1b5255fc4c Mon Sep 17 00:00:00 2001 From: yykoypj <601924094@qq.com> Date: Thu, 18 Aug 2022 20:26:19 +0800 Subject: [PATCH] feat: change slide tooltip api (#37043) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: change slide tooltip api * fix * fix * fix: Slider test in config-provider * fix: Slider test * chore: adjust prosp pass Co-authored-by: 二货机器人 --- .../__tests__/components.test.js | 13 ++- components/slider/__tests__/index.test.tsx | 101 +++++++----------- components/slider/index.tsx | 40 +------ components/slider/index.zh-CN.md | 1 - 4 files changed, 51 insertions(+), 104 deletions(-) diff --git a/components/config-provider/__tests__/components.test.js b/components/config-provider/__tests__/components.test.js index c9a38d69ed..ecf2813d3e 100644 --- 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 ( - - ); + tooltip.prefixCls = `${myProps.prefixCls}-tooltip`; } - return ; + return ; }); // Spin diff --git a/components/slider/__tests__/index.test.tsx b/components/slider/__tests__/index.test.tsx index 42c005bf8e..a7246a5372 100644 --- 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) { - it(name, () => { - const { container } = render(); - - fireEvent.mouseEnter(container.querySelector('.ant-slider-handle')!); - expect(tooltipProps().placement).toEqual('left'); - }); - } + it('should show correct placement tooltip when set tooltipPlacement', () => { + const { container } = render( + , + ); - 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, - hideProps: Partial, - ) { - it(name, () => { - const { container, rerender } = render(); - 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(); - - 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(); + 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( + , + ); + 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(); + const { rerender } = render(); 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( document.body} />); + rerender( 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( v} />); + rerender( 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(); + rerender(); 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(); + rerender(); 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(); diff --git a/components/slider/index.tsx b/components/slider/index.tsx index 484094abf2..c271ab8d9e 100644 --- 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( 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( 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, diff --git a/components/slider/index.zh-CN.md b/components/slider/index.zh-CN.md index d8bee332b3..da45970e58 100644 --- 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 | |