From 42725ff195197106f2982d6f31b8449ef2ce2d0c Mon Sep 17 00:00:00 2001 From: aojunhao <1844749591@qq.com> Date: Sat, 18 Jan 2025 00:30:33 +0800 Subject: [PATCH] feat: retire deprecated api --- .gitignore | 1 + src/Slider.tsx | 62 ++++++++------------------------------------ tests/Range.test.tsx | 11 +++----- tests/Slider.test.js | 12 +++------ tests/common.test.js | 43 ------------------------------ 5 files changed, 18 insertions(+), 111 deletions(-) diff --git a/.gitignore b/.gitignore index 5289a2524..3e17f2420 100644 --- a/.gitignore +++ b/.gitignore @@ -31,6 +31,7 @@ yarn.lock package-lock.json .doc .storybook +.vscode # umi .umi diff --git a/src/Slider.tsx b/src/Slider.tsx index c8d61c65f..bf899c7ea 100644 --- a/src/Slider.tsx +++ b/src/Slider.tsx @@ -65,18 +65,12 @@ export interface SliderProps { // Value range?: boolean | RangeConfig; - /** @deprecated Use `range.minCount` or `range.maxCount` to handle this */ - count?: number; min?: number; max?: number; step?: number | null; value?: ValueType; defaultValue?: ValueType; onChange?: (value: ValueType) => void; - /** @deprecated It's always better to use `onChange` instead */ - onBeforeChange?: (value: ValueType) => void; - /** @deprecated Use `onChangeComplete` instead */ - onAfterChange?: (value: ValueType) => void; onChangeComplete?: (value: ValueType) => void; // Cross @@ -90,12 +84,6 @@ export interface SliderProps { // Style included?: boolean; startPoint?: number; - /** @deprecated Please use `styles.track` instead */ - trackStyle?: React.CSSProperties | React.CSSProperties[]; - /** @deprecated Please use `styles.handle` instead */ - handleStyle?: React.CSSProperties | React.CSSProperties[]; - /** @deprecated Please use `styles.rail` instead */ - railStyle?: React.CSSProperties; dotStyle?: React.CSSProperties | ((dotValue: number) => React.CSSProperties); activeDotStyle?: React.CSSProperties | ((dotValue: number) => React.CSSProperties); @@ -145,10 +133,7 @@ const Slider = React.forwardRef>((prop value, defaultValue, range, - count, onChange, - onBeforeChange, - onAfterChange, onChangeComplete, // Cross @@ -162,9 +147,6 @@ const Slider = React.forwardRef>((prop // Style included = true, startPoint, - trackStyle, - handleStyle, - railStyle, dotStyle, activeDotStyle, @@ -259,8 +241,8 @@ const Slider = React.forwardRef>((prop mergedValue === null || mergedValue === undefined ? [] : Array.isArray(mergedValue) - ? mergedValue - : [mergedValue]; + ? mergedValue + : [mergedValue]; const [val0 = mergedMin] = valueList; let returnValues = mergedValue === null ? [] : [val0]; @@ -269,16 +251,11 @@ const Slider = React.forwardRef>((prop if (rangeEnabled) { returnValues = [...valueList]; - // When count provided or value is `undefined`, we fill values - if (count || mergedValue === undefined) { - const pointCount = count >= 0 ? count + 1 : 2; - returnValues = returnValues.slice(0, pointCount); - - // Fill with count - while (returnValues.length < pointCount) { - returnValues.push(returnValues[returnValues.length - 1] ?? mergedMin); - } + // When value is `undefined`, we fill values with default 2 points + if (mergedValue === undefined) { + returnValues = [mergedMin, mergedMin]; } + returnValues.sort((a, b) => a - b); } @@ -288,7 +265,7 @@ const Slider = React.forwardRef>((prop }); return returnValues; - }, [mergedValue, rangeEnabled, mergedMin, count, formatValue]); + }, [mergedValue, rangeEnabled, mergedMin, formatValue]); // =========================== onChange =========================== const getTriggerValue = (triggerValues: number[]) => @@ -314,11 +291,6 @@ const Slider = React.forwardRef>((prop } const finishValue = getTriggerValue(rawValues); - onAfterChange?.(finishValue); - warning( - !onAfterChange, - '[rc-slider] `onAfterChange` is deprecated. Please use `onChangeComplete` instead.', - ); onChangeComplete?.(finishValue); }); @@ -330,7 +302,6 @@ const Slider = React.forwardRef>((prop const cloneNextValues = [...rawValues]; cloneNextValues.splice(index, 1); - onBeforeChange?.(getTriggerValue(cloneNextValues)); triggerChange(cloneNextValues); const nextFocusIndex = Math.max(0, index - 1); @@ -386,13 +357,11 @@ const Slider = React.forwardRef>((prop cloneNextValues[valueIndex] = newValue; } - // Fill value to match default 2 (only when `rawValues` is empty) - if (rangeEnabled && !rawValues.length && count === undefined) { + if (rangeEnabled && !rawValues.length) { cloneNextValues.push(newValue); } const nextValue = getTriggerValue(cloneNextValues); - onBeforeChange?.(nextValue); triggerChange(cloneNextValues); if (e) { @@ -400,12 +369,6 @@ const Slider = React.forwardRef>((prop handlesRef.current.focus(focusIndex); onStartDrag(e, focusIndex, cloneNextValues); } else { - // https://github.com/ant-design/ant-design/issues/49997 - onAfterChange?.(nextValue); - warning( - !onAfterChange, - '[rc-slider] `onAfterChange` is deprecated. Please use `onChangeComplete` instead.', - ); onChangeComplete?.(nextValue); } } @@ -448,7 +411,6 @@ const Slider = React.forwardRef>((prop if (!disabled) { const next = offsetValues(rawValues, offset, valueIndex); - onBeforeChange?.(getTriggerValue(rawValues)); triggerChange(next.values); setKeyboardValue(next.value); @@ -479,8 +441,6 @@ const Slider = React.forwardRef>((prop const onStartMove: OnStartMove = useEvent((e, valueIndex) => { onStartDrag(e, valueIndex); - - onBeforeChange?.(getTriggerValue(rawValues)); }); // Auto focus for updated handle @@ -587,13 +547,13 @@ const Slider = React.forwardRef>((prop >
{track !== false && ( >((prop { expect(asFragment().firstChild).toMatchSnapshot(); }); - it('should render Multi-Range with correct DOM structure', () => { - const { asFragment } = render(); - expect(asFragment().firstChild).toMatchSnapshot(); - }); - it('should render Range with value correctly', async () => { const { container } = render(); @@ -173,11 +168,11 @@ describe('Range', () => { keyCode: keyCode.RIGHT, }); - expect(onAfterChange).not.toBeCalled(); + expect(onAfterChange).not.toHaveBeenCalled(); }); it('should render Multi-Range with value correctly', () => { - const { container } = render(); + const { container } = render(); expect(container.getElementsByClassName('rc-slider-handle')[0]).toHaveStyle('left: 0%'); expect(container.getElementsByClassName('rc-slider-handle')[1]).toHaveStyle('left: 25%'); @@ -558,7 +553,7 @@ describe('Range', () => { const handleFocus = jest.fn(); const { container } = render(); container.querySelector('.rc-slider-handle').focus(); - expect(handleFocus).toBeCalled(); + expect(handleFocus).toHaveBeenCalled(); }); it('blur()', () => { diff --git a/tests/Slider.test.js b/tests/Slider.test.js index 095080832..6de299b55 100644 --- a/tests/Slider.test.js +++ b/tests/Slider.test.js @@ -562,28 +562,22 @@ describe('Slider', () => { expect(onChange).toHaveBeenCalledWith([20, 20]); }); - it('should call onBeforeChange, onChange, and onAfterChange', () => { - const onBeforeChange = jest.fn(); + it('should call onChange', () => { const onChange = jest.fn(); - const onAfterChange = jest.fn(); const { container } = render( , ); fireEvent.mouseDown(container.querySelector('.rc-slider'), { clientX: 20, }); - expect(onBeforeChange).toHaveBeenCalledWith(20); expect(onChange).toHaveBeenCalledWith(20); - expect(onAfterChange).not.toHaveBeenCalled(); fireEvent.mouseUp(container.querySelector('.rc-slider'), { clientX: 20, }); - expect(onAfterChange).toHaveBeenCalledWith(20); + expect(onChange).toHaveBeenCalledWith(20); }); }); @@ -665,7 +659,7 @@ describe('Slider', () => { it('tipFormatter should not crash with undefined value', () => { [undefined, null].forEach((value) => { - render(); + render(); }); }); }); diff --git a/tests/common.test.js b/tests/common.test.js index 23d417af4..2498b7ac9 100644 --- a/tests/common.test.js +++ b/tests/common.test.js @@ -341,47 +341,4 @@ describe('Common', () => { expect(sliderOnAfterChange).toHaveBeenCalled(); expect(sliderOnAfterChange).toHaveBeenCalledTimes(1); }); - - it('deprecate onAfterChange', () => { - const errSpy = jest.spyOn(console, 'error').mockImplementation(() => {}); - const onChangeComplete = jest.fn(); - const onAfterChange = jest.fn(); - const { container } = render( - , - ); - - fireEvent.keyDown(container.getElementsByClassName('rc-slider-handle')[0], { - keyCode: KeyCode.UP, - }); - - expect(onChangeComplete).not.toHaveBeenCalled(); - expect(onAfterChange).not.toHaveBeenCalled(); - - fireEvent.keyUp(container.getElementsByClassName('rc-slider-handle')[0], { - keyCode: KeyCode.UP, - }); - expect(onChangeComplete).toHaveBeenCalledTimes(1); - expect(onAfterChange).toHaveBeenCalledTimes(1); - expect(errSpy).toHaveBeenCalledWith( - 'Warning: [rc-slider] `onAfterChange` is deprecated. Please use `onChangeComplete` instead.', - ); - errSpy.mockRestore(); - }); - - // Move to antd instead - // it('the tooltip should be attach to the container with the id tooltip', () => { - // const SliderWithTooltip = createSliderWithTooltip(Slider); - // const tooltipPrefixer = { - // prefixCls: 'slider-tooltip', - // }; - // const tooltipParent = document.createElement('div'); - // tooltipParent.setAttribute('id', 'tooltip'); - // const { container } = render( - // document.getElementById('tooltip')} - // />, - // ); - // expect(wrapper.instance().props.getTooltipContainer).toBeTruthy(); - // }); });