diff --git a/README.md b/README.md index 0bc1dcd1f..998cb99c3 100644 --- a/README.md +++ b/README.md @@ -112,7 +112,7 @@ The following APIs are shared by Slider and Range. | dots | boolean | `false` | When the `step` value is greater than 1, you can set the `dots` to `true` if you want to render the slider with dots. | | onBeforeChange | Function | NOOP | `onBeforeChange` will be triggered when `ontouchstart` or `onmousedown` is triggered. | | onChange | Function | NOOP | `onChange` will be triggered while the value of Slider changing. | -| onAfterChange | Function | NOOP | `onAfterChange` will be triggered when `ontouchend` or `onmouseup` is triggered. | +| onChangeComplete | Function | NOOP | `onChangeComplete` will be triggered when `ontouchend` or `onmouseup` is triggered. | | minimumTrackStyle | Object | | please use `trackStyle` instead. (`only used for slider, just for compatibility , will be deprecate at rc-slider@9.x `) | | maximumTrackStyle | Object | | please use `railStyle` instead (`only used for slider, just for compatibility , will be deprecate at rc-slider@9.x`) | | handleStyle | Array[Object] \| Object | `[{}]` | The style used for handle. (`both for slider(`Object`) and range(`Array of Object`), the array will be used for multi handle following element order`) | diff --git a/docs/examples/debug.tsx b/docs/examples/debug.tsx index 3573277f8..eb9a46b1d 100644 --- a/docs/examples/debug.tsx +++ b/docs/examples/debug.tsx @@ -52,7 +52,7 @@ export default () => { console.log('Change:', nextValues); // setValue(nextValues as any); }} - onAfterChange={(v) => { + onChangeComplete={(v) => { console.log('AfterChange:', v); }} // value={value} diff --git a/docs/examples/marks.tsx b/docs/examples/marks.tsx index 94d3b6496..f13a28244 100644 --- a/docs/examples/marks.tsx +++ b/docs/examples/marks.tsx @@ -25,7 +25,7 @@ export default () => (

Slider with marks, `step=null`

- console.log('AfterChange:', v)} /> + console.log('AfterChange:', v)} />
diff --git a/docs/examples/range.tsx b/docs/examples/range.tsx index c566ffc80..45edab9d8 100644 --- a/docs/examples/range.tsx +++ b/docs/examples/range.tsx @@ -194,7 +194,7 @@ export default () => (

Basic Range，`step=20, dots`

- +

Basic Range，disabled

diff --git a/docs/examples/slider.tsx b/docs/examples/slider.tsx index 855a89633..ccfc7b56d 100644 --- a/docs/examples/slider.tsx +++ b/docs/examples/slider.tsx @@ -46,7 +46,7 @@ class NullableSlider extends React.Component {

Basic Slider，`step=20, dots`

- +

@@ -210,7 +210,7 @@ export default () => ( dots step={20} defaultValue={100} - onAfterChange={log} + onChangeComplete={log} dotStyle={{ borderColor: 'orange' }} activeDotStyle={{ borderColor: 'yellow' }} /> diff --git a/src/Slider.tsx b/src/Slider.tsx index 726ee4b0f..53680d7ad 100644 --- a/src/Slider.tsx +++ b/src/Slider.tsx @@ -61,8 +61,9 @@ export interface SliderProps { onChange?: (value: ValueType) => void; /** @deprecated It's always better to use `onChange` instead */ onBeforeChange?: (value: ValueType) => void; - /** @deprecated It's always better to use `onChange` instead */ + /** @deprecated Use `onChangeComplete` instead */ onAfterChange?: (value: ValueType) => void; + onChangeComplete?: (value: ValueType) => void; // Cross allowCross?: boolean; @@ -131,6 +132,7 @@ const Slider = React.forwardRef((props: SliderProps, ref: React.Ref) onChange, onBeforeChange, onAfterChange, + onChangeComplete, // Cross allowCross = true, @@ -290,6 +292,8 @@ const Slider = React.forwardRef((props: SliderProps, ref: React.Ref) const finishChange = () => { onAfterChange?.(getTriggerValue(rawValuesRef.current)); + warning(!onAfterChange, '[rc-slider] `onAfterChange` is deprecated. Please use `onChangeComplete` instead.'); + onChangeComplete?.(getTriggerValue(rawValuesRef.current)); }; const [draggingIndex, draggingValue, cacheValues, onStartDrag] = useDrag( diff --git a/tests/Range.test.js b/tests/Range.test.js index 46bda99bd..ce21d6b46 100644 --- a/tests/Range.test.js +++ b/tests/Range.test.js @@ -110,7 +110,7 @@ describe('Range', () => { it('it should trigger onAfterChange when key pressed', () => { const onAfterChange = jest.fn(); const { container } = render( - , + , ); fireEvent.keyDown(container.getElementsByClassName('rc-slider-handle')[1], { @@ -128,7 +128,7 @@ describe('Range', () => { it('should not change value from keyboard events when disabled', () => { const onAfterChange = jest.fn(); const { container } = render( - , + , ); fireEvent.keyDown(container.getElementsByClassName('rc-slider-handle')[1], { diff --git a/tests/Slider.test.js b/tests/Slider.test.js index 71a57c7b4..accb956f5 100644 --- a/tests/Slider.test.js +++ b/tests/Slider.test.js @@ -138,7 +138,7 @@ describe('Slider', () => { it('it should trigger onAfterChange when key pressed', () => { const onAfterChange = jest.fn(); - const { container } = render(); + const { container } = render(); fireEvent.keyDown(container.getElementsByClassName('rc-slider-handle')[0], { keyCode: keyCode.RIGHT, @@ -189,7 +189,7 @@ describe('Slider', () => { it('decreases the value when key "left" is pressed', () => { const onChange = jest.fn(); const onChangeComplete = jest.fn(); - const { container } = render(); + const { container } = render(); fireEvent.keyDown(container.getElementsByClassName('rc-slider-handle')[0], { keyCode: keyCode.LEFT, @@ -560,7 +560,7 @@ describe('Slider', () => { , ); fireEvent.mouseDown(container.querySelector('.rc-slider'), { @@ -621,7 +621,7 @@ describe('Slider', () => { it('onAfterChange should return number', () => { const onAfterChange = jest.fn(); - const { container } = render(); + const { container } = render(); fireEvent.mouseDown(container.querySelector('.rc-slider'), { clientX: 20, }); diff --git a/tests/common.test.js b/tests/common.test.js index a8d2ea589..e38398399 100644 --- a/tests/common.test.js +++ b/tests/common.test.js @@ -296,7 +296,7 @@ describe('Common', () => { value={0} marks={marks} onChange={sliderOnChange} - onAfterChange={sliderOnAfterChange} + onChangeComplete={sliderOnAfterChange} />, ); const sliderHandleWrapper = container.querySelector(`#${labelId}`); @@ -311,7 +311,7 @@ describe('Common', () => { const rangeOnAfterChange = jest.fn(); const { container: container2 } = render( - , + , ); const rangeHandleWrapper = container2.querySelector(`#${labelId}`); fireEvent.click(rangeHandleWrapper); @@ -325,7 +325,7 @@ describe('Common', () => { const sliderOnChange = jest.fn(); const sliderOnAfterChange = jest.fn(); const { container } = render( - , + , ); fireEvent.keyDown(container.getElementsByClassName('rc-slider-handle')[0], { @@ -342,6 +342,32 @@ describe('Common', () => { 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);