Skip to content

feat: retire deprecated api #1055

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

feat: retire deprecated api #1055

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
42725ff
feat: retire deprecated api
aojunhao123 Jan 17, 2025
e235675
docs: update demo
aojunhao123 Jan 17, 2025
40568fa
Merge branch 'master' into retire-api
aojunhao123 Jun 13, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ yarn.lock
package-lock.json
.doc
.storybook
.vscode

# umi
.umi
Expand Down
18 changes: 11 additions & 7 deletions docs/examples/range.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -193,7 +193,7 @@ export default () => (
</div>
<div style={style}>
<p>Basic Range，`step=20` </p>
<Slider range step={20} defaultValue={[20, 20]} onBeforeChange={log} />
<Slider range step={20} defaultValue={[20, 20]} onChange={log} />
</div>
<div style={style}>
<p>Basic Range，`step=20, dots` </p>
Expand All @@ -217,18 +217,22 @@ export default () => (
</div>
<div style={style}>
<p>Multi Range, count=3 and pushable=true</p>
<Slider range count={3} defaultValue={[20, 40, 60, 80]} pushable />
<Slider range={{ minCount: 3 }} defaultValue={[20, 40, 60, 80]} pushable />
</div>
<div style={style}>
<p>Multi Range with custom track and handle style and pushable</p>
<Slider
range
count={3}
range={{ minCount: 3 }}
defaultValue={[20, 40, 60, 80]}
pushable
trackStyle={[{ backgroundColor: 'red' }, { backgroundColor: 'green' }]}
handleStyle={[{ backgroundColor: 'yellow' }, { backgroundColor: 'gray' }]}
railStyle={{ backgroundColor: 'black' }}
styles={{
track: { backgroundColor: 'red' },
handle: { backgroundColor: 'yellow' },
rail: { backgroundColor: 'black' },
}}
// trackStyle={[{ backgroundColor: 'red' }, { backgroundColor: 'green' }]}
// handleStyle={[{ backgroundColor: 'yellow' }, { backgroundColor: 'gray' }]}
// railStyle={{ backgroundColor: 'black' }}
/>
</div>
<div style={style}>
Expand Down
62 changes: 34 additions & 28 deletions docs/examples/slider.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -198,7 +198,7 @@ export default () => (
</div>
<div style={style}>
<p>Basic Slider，`step=20`</p>
<Slider step={20} defaultValue={50} onBeforeChange={log} />
<Slider step={20} defaultValue={50} onChange={log} />
</div>
<div style={style}>
<p>Basic Slider，`step=20, dots`</p>
Expand Down Expand Up @@ -232,15 +232,17 @@ export default () => (
</p>
<Slider
defaultValue={30}
railStyle={{ backgroundColor: 'red', height: 10 }}
trackStyle={{ backgroundColor: 'blue', height: 10 }}
handleStyle={{
borderColor: 'blue',
height: 28,
width: 28,
marginLeft: -14,
marginTop: -9,
backgroundColor: 'black',
styles={{
rail: { backgroundColor: 'red', height: 10 },
track: { backgroundColor: 'blue', height: 10 },
handle: {
borderColor: 'blue',
height: 28,
width: 28,
marginLeft: -14,
marginTop: -9,
backgroundColor: 'black',
},
}}
/>
</div>
Expand All @@ -250,16 +252,18 @@ export default () => (
</p>
<Slider
defaultValue={30}
trackStyle={{ backgroundColor: 'blue', height: 10 }}
handleStyle={{
borderColor: 'blue',
height: 28,
width: 28,
marginLeft: -14,
marginTop: -9,
backgroundColor: 'black',
styles={{
track: { backgroundColor: 'blue', height: 10 },
handle: {
borderColor: 'blue',
height: 28,
width: 28,
marginLeft: -14,
marginTop: -9,
backgroundColor: 'black',
},
rail: { backgroundColor: 'red', height: 10 },
}}
railStyle={{ backgroundColor: 'red', height: 10 }}
/>
</div>
<div style={style}>
Expand All @@ -269,17 +273,19 @@ export default () => (
</p>
<Slider
defaultValue={30}
trackStyle={{ backgroundColor: 'blue', height: 10 }}
reverse
handleStyle={{
borderColor: 'blue',
height: 28,
width: 28,
marginLeft: -14,
marginTop: -9,
backgroundColor: 'black',
styles={{
track: { backgroundColor: 'blue', height: 10 },
handle: {
borderColor: 'blue',
height: 28,
width: 28,
marginLeft: -14,
marginTop: -9,
backgroundColor: 'black',
},
rail: { backgroundColor: 'red', height: 10 },
}}
railStyle={{ backgroundColor: 'red', height: 10 }}
/>
</div>
<div style={style}>
Expand Down
62 changes: 11 additions & 51 deletions src/Slider.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,18 +65,12 @@ export interface SliderProps<ValueType = number | number[]> {

// 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
Expand All @@ -90,12 +84,6 @@ export interface SliderProps<ValueType = number | number[]> {
// 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);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

看起来这两个 miss 了，是不是已经有平替了？下面那个也是

activeDotStyle?: React.CSSProperties | ((dotValue: number) => React.CSSProperties);

Expand Down Expand Up @@ -145,10 +133,7 @@ const Slider = React.forwardRef<SliderRef, SliderProps<number | number[]>>((prop
value,
defaultValue,
range,
count,
onChange,
onBeforeChange,
onAfterChange,
onChangeComplete,

// Cross
Expand All @@ -162,9 +147,6 @@ const Slider = React.forwardRef<SliderRef, SliderProps<number | number[]>>((prop
// Style
included = true,
startPoint,
trackStyle,
handleStyle,
railStyle,
dotStyle,
activeDotStyle,

Expand Down Expand Up @@ -259,8 +241,8 @@ const Slider = React.forwardRef<SliderRef, SliderProps<number | number[]>>((prop
mergedValue === null || mergedValue === undefined
? []
: Array.isArray(mergedValue)
? mergedValue
: [mergedValue];
? mergedValue
: [mergedValue];

const [val0 = mergedMin] = valueList;
let returnValues = mergedValue === null ? [] : [val0];
Expand All @@ -269,16 +251,11 @@ const Slider = React.forwardRef<SliderRef, SliderProps<number | number[]>>((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);
}

Expand All @@ -288,7 +265,7 @@ const Slider = React.forwardRef<SliderRef, SliderProps<number | number[]>>((prop
});

return returnValues;
}, [mergedValue, rangeEnabled, mergedMin, count, formatValue]);
}, [mergedValue, rangeEnabled, mergedMin, formatValue]);

// =========================== onChange ===========================
const getTriggerValue = (triggerValues: number[]) =>
Expand All @@ -314,11 +291,6 @@ const Slider = React.forwardRef<SliderRef, SliderProps<number | number[]>>((prop
}

const finishValue = getTriggerValue(rawValues);
onAfterChange?.(finishValue);
warning(
!onAfterChange,
'[rc-slider] `onAfterChange` is deprecated. Please use `onChangeComplete` instead.',
);
onChangeComplete?.(finishValue);
});

Expand All @@ -330,7 +302,6 @@ const Slider = React.forwardRef<SliderRef, SliderProps<number | number[]>>((prop
const cloneNextValues = [...rawValues];
cloneNextValues.splice(index, 1);

onBeforeChange?.(getTriggerValue(cloneNextValues));
triggerChange(cloneNextValues);

const nextFocusIndex = Math.max(0, index - 1);
Expand Down Expand Up @@ -386,26 +357,18 @@ const Slider = React.forwardRef<SliderRef, SliderProps<number | number[]>>((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) {
(document.activeElement as HTMLElement)?.blur?.();
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);
}
}
Expand Down Expand Up @@ -448,7 +411,6 @@ const Slider = React.forwardRef<SliderRef, SliderProps<number | number[]>>((prop
if (!disabled) {
const next = offsetValues(rawValues, offset, valueIndex);

onBeforeChange?.(getTriggerValue(rawValues));
triggerChange(next.values);

setKeyboardValue(next.value);
Expand Down Expand Up @@ -479,8 +441,6 @@ const Slider = React.forwardRef<SliderRef, SliderProps<number | number[]>>((prop

const onStartMove: OnStartMove = useEvent((e, valueIndex) => {
onStartDrag(e, valueIndex);

onBeforeChange?.(getTriggerValue(rawValues));
});

// Auto focus for updated handle
Expand Down Expand Up @@ -587,13 +547,13 @@ const Slider = React.forwardRef<SliderRef, SliderProps<number | number[]>>((prop
>
<div
className={cls(`${prefixCls}-rail`, classNames?.rail)}
style={{ ...railStyle, ...styles?.rail }}
style={styles?.rail}
/>

{track !== false && (
<Tracks
prefixCls={prefixCls}
style={trackStyle}
style={styles?.track}
values={rawValues}
startPoint={startPoint}
onStartMove={mergedDraggableTrack ? onStartMove : undefined}
Expand All @@ -611,7 +571,7 @@ const Slider = React.forwardRef<SliderRef, SliderProps<number | number[]>>((prop
<Handles
ref={handlesRef}
prefixCls={prefixCls}
style={handleStyle}
style={styles?.handle}
values={cacheValues}
draggingIndex={draggingIndex}
draggingDelete={draggingDelete}
Expand Down
11 changes: 3 additions & 8 deletions tests/Range.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,11 +99,6 @@ describe('Range', () => {
expect(asFragment().firstChild).toMatchSnapshot();
});

it('should render Multi-Range with correct DOM structure', () => {
const { asFragment } = render(<Slider range count={3} />);
expect(asFragment().firstChild).toMatchSnapshot();
});

it('should render Range with value correctly', async () => {
const { container } = render(<Slider range value={[0, 50]} />);

Expand Down Expand Up @@ -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(<Slider range count={3} value={[0, 25, 50, 75]} />);
const { container } = render(<Slider range value={[0, 25, 50, 75]} />);

expect(container.getElementsByClassName('rc-slider-handle')[0]).toHaveStyle('left: 0%');
expect(container.getElementsByClassName('rc-slider-handle')[1]).toHaveStyle('left: 25%');
Expand Down Expand Up @@ -558,7 +553,7 @@ describe('Range', () => {
const handleFocus = jest.fn();
const { container } = render(<Slider range min={0} max={20} onFocus={handleFocus} />);
container.querySelector<HTMLDivElement>('.rc-slider-handle').focus();
expect(handleFocus).toBeCalled();
expect(handleFocus).toHaveBeenCalled();
});

it('blur()', () => {
Expand Down
12 changes: 3 additions & 9 deletions tests/Slider.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(
<Slider
onBeforeChange={onBeforeChange}
onChange={onChange}
onChangeComplete={onAfterChange}
/>,
);
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);
});
});

Expand Down Expand Up @@ -665,7 +659,7 @@ describe('Slider', () => {

it('tipFormatter should not crash with undefined value', () => {
[undefined, null].forEach((value) => {
render(<Slider value={value} tooltip={{ open: true }} styles={{ tracks: {} }}/>);
render(<Slider value={value} tooltip={{ open: true }} styles={{ tracks: {} }} />);
});
});
});
Loading