Skip to content

Commit b18b653

Browse files
authored
chore: add internal hooks (#1014)
* chore: add internal hooks * chore: fix lint
1 parent 06ddced commit b18b653

File tree

4 files changed

+87
-35
lines changed

4 files changed

+87
-35
lines changed

docs/examples/editable.tsx

Lines changed: 48 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
/* eslint react/no-multi-comp: 0, no-console: 0 */
2-
import Slider from 'rc-slider';
2+
import Slider, { UnstableContext } from 'rc-slider';
33
import React from 'react';
44
import '../../assets/index.less';
5+
import type { UnstableContextProps } from '../../src/context';
56

67
const style: React.CSSProperties = {
78
width: 400,
@@ -11,43 +12,55 @@ const style: React.CSSProperties = {
1112
export default () => {
1213
const [value, setValue] = React.useState([0, 50, 80]);
1314

15+
const onDragStart: UnstableContextProps['onDragStart'] = (info) => {
16+
const { rawValues } = info;
17+
console.log('Start:', rawValues);
18+
};
19+
20+
const onDragChange: UnstableContextProps['onDragChange'] = (info) => {
21+
const { rawValues } = info;
22+
console.log('Move:', rawValues);
23+
};
24+
1425
return (
1526
<div>
1627
<div style={style}>
17-
<Slider
18-
// range
19-
range={{
20-
editable: true,
21-
minCount: 1,
22-
maxCount: 4,
23-
}}
24-
// track={false}
25-
min={0}
26-
max={100}
27-
value={value}
28-
// defaultValue={null}
29-
onChange={(nextValue) => {
30-
console.error('Change:', nextValue);
31-
setValue(nextValue as any);
32-
}}
33-
onChangeComplete={(nextValue) => {
34-
console.log('Complete', nextValue);
35-
}}
36-
// handleRender={(ori, handleProps) => {
37-
// if (handleProps.index === 0) {
38-
// console.log('handleRender', ori, handleProps);
39-
// }
40-
// return ori;
41-
// }}
42-
styles={{
43-
rail: {
44-
background: `linear-gradient(to right, blue, red)`,
45-
},
46-
track: {
47-
background: 'orange',
48-
},
49-
}}
50-
/>
28+
<UnstableContext.Provider value={{ onDragStart, onDragChange }}>
29+
<Slider
30+
// range
31+
range={{
32+
editable: true,
33+
minCount: 1,
34+
maxCount: 4,
35+
}}
36+
// track={false}
37+
min={0}
38+
max={100}
39+
value={value}
40+
// defaultValue={null}
41+
onChange={(nextValue) => {
42+
console.error('Change:', nextValue);
43+
setValue(nextValue as any);
44+
}}
45+
onChangeComplete={(nextValue) => {
46+
console.log('Complete', nextValue);
47+
}}
48+
// handleRender={(ori, handleProps) => {
49+
// if (handleProps.index === 0) {
50+
// console.log('handleRender', ori, handleProps);
51+
// }
52+
// return ori;
53+
// }}
54+
styles={{
55+
rail: {
56+
background: `linear-gradient(to right, blue, red)`,
57+
},
58+
track: {
59+
background: 'orange',
60+
},
61+
}}
62+
/>
63+
</UnstableContext.Provider>
5164
</div>
5265

5366
<p>Here is a word that drag should not select it</p>

src/context.ts

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,3 +34,20 @@ const SliderContext = React.createContext<SliderContextProps>({
3434
});
3535

3636
export default SliderContext;
37+
38+
export interface UnstableContextProps {
39+
onDragStart?: (info: {
40+
rawValues: number[];
41+
draggingIndex: number;
42+
draggingValue: number;
43+
}) => void;
44+
onDragChange?: (info: {
45+
rawValues: number[];
46+
deleteIndex: number;
47+
draggingIndex: number;
48+
draggingValue: number;
49+
}) => void;
50+
}
51+
52+
/** @private NOT PROMISE AVAILABLE. DO NOT USE IN PRODUCTION. */
53+
export const UnstableContext = React.createContext<UnstableContextProps>({});

src/hooks/useDrag.ts

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { useEvent } from 'rc-util';
22
import * as React from 'react';
3+
import { UnstableContext } from '../context';
34
import type { Direction, OnStartMove } from '../interface';
45
import type { OffsetValues } from './useOffset';
56

@@ -40,6 +41,8 @@ function useDrag(
4041
const mouseMoveEventRef = React.useRef<(event: MouseEvent) => void>(null);
4142
const mouseUpEventRef = React.useRef<(event: MouseEvent) => void>(null);
4243

44+
const { onDragStart, onDragChange } = React.useContext(UnstableContext);
45+
4346
React.useLayoutEffect(() => {
4447
if (draggingIndex === -1) {
4548
setCacheValues(rawValues);
@@ -69,6 +72,15 @@ function useDrag(
6972
changeValues = nextValues.filter((_, i) => i !== draggingIndex);
7073
}
7174
triggerChange(changeValues);
75+
76+
if (onDragChange) {
77+
onDragChange({
78+
rawValues: nextValues,
79+
deleteIndex: deleteMark ? draggingIndex : -1,
80+
draggingIndex,
81+
draggingValue: nextValue,
82+
});
83+
}
7284
};
7385

7486
const updateCacheValue = useEvent(
@@ -123,6 +135,15 @@ function useDrag(
123135
// We declare it here since closure can't get outer latest value
124136
let deleteMark = false;
125137

138+
// Internal trigger event
139+
if (onDragStart) {
140+
onDragStart({
141+
rawValues: initialValues,
142+
draggingIndex: valueIndex,
143+
draggingValue: originValue,
144+
});
145+
}
146+
126147
// Moving
127148
const onMouseMove = (event: MouseEvent | TouchEvent) => {
128149
event.preventDefault();

src/index.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import type { SliderProps, SliderRef } from './Slider';
22
import Slider from './Slider';
3+
export { UnstableContext } from './context';
34

45
export type { SliderProps, SliderRef };
56

0 commit comments

Comments
 (0)