@tamagui/slider 1.0.1-beta.151 → 1.0.1-beta.152
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/Slider.js +330 -308
- package/dist/cjs/Slider.js.map +2 -2
- package/dist/cjs/SliderImpl.js +65 -59
- package/dist/cjs/SliderImpl.js.map +1 -1
- package/dist/cjs/constants.js.map +1 -1
- package/dist/cjs/helpers.js.map +1 -1
- package/dist/esm/Slider.js +326 -307
- package/dist/esm/Slider.js.map +2 -2
- package/dist/esm/SliderImpl.js +61 -58
- package/dist/esm/SliderImpl.js.map +1 -1
- package/dist/esm/constants.js.map +1 -1
- package/dist/esm/helpers.js.map +1 -1
- package/dist/esm/index.js.map +1 -1
- package/dist/jsx/Slider.js +231 -216
- package/dist/jsx/Slider.js.map +2 -2
- package/dist/jsx/SliderImpl.js +45 -43
- package/dist/jsx/SliderImpl.js.map +1 -1
- package/dist/jsx/constants.js.map +1 -1
- package/dist/jsx/helpers.js.map +1 -1
- package/dist/jsx/index.js.map +1 -1
- package/package.json +8 -8
package/dist/jsx/Slider.js
CHANGED
|
@@ -33,74 +33,78 @@ import {
|
|
|
33
33
|
roundValue
|
|
34
34
|
} from "./helpers";
|
|
35
35
|
import { SliderFrame, SliderImpl } from "./SliderImpl";
|
|
36
|
-
const SliderHorizontal = React.forwardRef(
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
return <SliderOrientationProvider scope={props.__scopeSlider} startEdge={isDirectionLTR ? "left" : "right"} endEdge={isDirectionLTR ? "right" : "left"} direction={isDirectionLTR ? 1 : -1} sizeProp="width" size={state.size}><SliderImpl ref={composeRefs(forwardedRef, sliderRef)} dir={direction} {...sliderProps} orientation="horizontal" onLayout={() => {
|
|
49
|
-
sliderRef.current?.measure((_x, _y, width, _height, pageX, _pageY) => {
|
|
50
|
-
setState({
|
|
51
|
-
size: width,
|
|
52
|
-
offset: pageX
|
|
53
|
-
});
|
|
54
|
-
});
|
|
55
|
-
}} onSlideStart={(event, target) => {
|
|
56
|
-
const value = getValueFromPointer(event.nativeEvent.locationX);
|
|
57
|
-
if (value) {
|
|
58
|
-
onSlideStart?.(value, target);
|
|
36
|
+
const SliderHorizontal = React.forwardRef(
|
|
37
|
+
(props, forwardedRef) => {
|
|
38
|
+
const { min, max, dir, onSlideStart, onSlideMove, onStepKeyDown, ...sliderProps } = props;
|
|
39
|
+
const direction = useDirection(dir);
|
|
40
|
+
const isDirectionLTR = direction === "ltr";
|
|
41
|
+
const sliderRef = React.useRef(null);
|
|
42
|
+
const [state, setState] = React.useState(() => ({ size: 0, offset: 0 }));
|
|
43
|
+
function getValueFromPointer(pointerPosition) {
|
|
44
|
+
const input = [0, state.size];
|
|
45
|
+
const output = isDirectionLTR ? [min, max] : [max, min];
|
|
46
|
+
const value = linearScale(input, output);
|
|
47
|
+
return value(pointerPosition);
|
|
59
48
|
}
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
}} onStepKeyDown={(event) => {
|
|
67
|
-
const isBackKey = BACK_KEYS[direction].includes(event.key);
|
|
68
|
-
onStepKeyDown?.({ event, direction: isBackKey ? -1 : 1 });
|
|
69
|
-
}} /></SliderOrientationProvider>;
|
|
70
|
-
});
|
|
71
|
-
const SliderVertical = React.forwardRef((props, forwardedRef) => {
|
|
72
|
-
const { min, max, onSlideStart, onSlideMove, onStepKeyDown, ...sliderProps } = props;
|
|
73
|
-
const [state, setState] = React.useState(() => ({ size: 0, offset: 0 }));
|
|
74
|
-
const sliderRef = React.useRef(null);
|
|
75
|
-
function getValueFromPointer(pointerPosition) {
|
|
76
|
-
const input = [0, state.size];
|
|
77
|
-
const output = [max, min];
|
|
78
|
-
const value = linearScale(input, output);
|
|
79
|
-
return value(pointerPosition);
|
|
80
|
-
}
|
|
81
|
-
return <SliderOrientationProvider scope={props.__scopeSlider} startEdge="bottom" endEdge="top" sizeProp="height" size={state.size} direction={1}><SliderImpl ref={composeRefs(forwardedRef, sliderRef)} {...sliderProps} orientation="vertical" onLayout={() => {
|
|
82
|
-
sliderRef.current?.measure((_x, _y, _width, height, _pageX, pageY) => {
|
|
83
|
-
setState({
|
|
84
|
-
size: height,
|
|
85
|
-
offset: pageY
|
|
49
|
+
return <SliderOrientationProvider scope={props.__scopeSlider} startEdge={isDirectionLTR ? "left" : "right"} endEdge={isDirectionLTR ? "right" : "left"} direction={isDirectionLTR ? 1 : -1} sizeProp="width" size={state.size}><SliderImpl ref={composeRefs(forwardedRef, sliderRef)} dir={direction} {...sliderProps} orientation="horizontal" onLayout={() => {
|
|
50
|
+
sliderRef.current?.measure((_x, _y, width, _height, pageX, _pageY) => {
|
|
51
|
+
setState({
|
|
52
|
+
size: width,
|
|
53
|
+
offset: pageX
|
|
54
|
+
});
|
|
86
55
|
});
|
|
87
|
-
})
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
}
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
56
|
+
}} onSlideStart={(event, target) => {
|
|
57
|
+
const value = getValueFromPointer(event.nativeEvent.locationX);
|
|
58
|
+
if (value) {
|
|
59
|
+
onSlideStart?.(value, target);
|
|
60
|
+
}
|
|
61
|
+
}} onSlideMove={(event) => {
|
|
62
|
+
const value = getValueFromPointer(event.nativeEvent.pageX - state.offset);
|
|
63
|
+
if (value) {
|
|
64
|
+
onSlideMove?.(value);
|
|
65
|
+
}
|
|
66
|
+
}} onSlideEnd={() => {
|
|
67
|
+
}} onStepKeyDown={(event) => {
|
|
68
|
+
const isBackKey = BACK_KEYS[direction].includes(event.key);
|
|
69
|
+
onStepKeyDown?.({ event, direction: isBackKey ? -1 : 1 });
|
|
70
|
+
}} /></SliderOrientationProvider>;
|
|
71
|
+
}
|
|
72
|
+
);
|
|
73
|
+
const SliderVertical = React.forwardRef(
|
|
74
|
+
(props, forwardedRef) => {
|
|
75
|
+
const { min, max, onSlideStart, onSlideMove, onStepKeyDown, ...sliderProps } = props;
|
|
76
|
+
const [state, setState] = React.useState(() => ({ size: 0, offset: 0 }));
|
|
77
|
+
const sliderRef = React.useRef(null);
|
|
78
|
+
function getValueFromPointer(pointerPosition) {
|
|
79
|
+
const input = [0, state.size];
|
|
80
|
+
const output = [max, min];
|
|
81
|
+
const value = linearScale(input, output);
|
|
82
|
+
return value(pointerPosition);
|
|
97
83
|
}
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
});
|
|
84
|
+
return <SliderOrientationProvider scope={props.__scopeSlider} startEdge="bottom" endEdge="top" sizeProp="height" size={state.size} direction={1}><SliderImpl ref={composeRefs(forwardedRef, sliderRef)} {...sliderProps} orientation="vertical" onLayout={() => {
|
|
85
|
+
sliderRef.current?.measure((_x, _y, _width, height, _pageX, pageY) => {
|
|
86
|
+
setState({
|
|
87
|
+
size: height,
|
|
88
|
+
offset: pageY
|
|
89
|
+
});
|
|
90
|
+
});
|
|
91
|
+
}} onSlideStart={(event, target) => {
|
|
92
|
+
const value = getValueFromPointer(event.nativeEvent.locationY);
|
|
93
|
+
if (value) {
|
|
94
|
+
onSlideStart?.(value, target);
|
|
95
|
+
}
|
|
96
|
+
}} onSlideMove={(event) => {
|
|
97
|
+
const value = getValueFromPointer(event.nativeEvent.pageY - state.offset);
|
|
98
|
+
if (value) {
|
|
99
|
+
onSlideMove?.(value);
|
|
100
|
+
}
|
|
101
|
+
}} onSlideEnd={() => {
|
|
102
|
+
}} onStepKeyDown={(event) => {
|
|
103
|
+
const isBackKey = BACK_KEYS.ltr.includes(event.key);
|
|
104
|
+
onStepKeyDown?.({ event, direction: isBackKey ? -1 : 1 });
|
|
105
|
+
}} /></SliderOrientationProvider>;
|
|
106
|
+
}
|
|
107
|
+
);
|
|
104
108
|
const TRACK_NAME = "SliderTrack";
|
|
105
109
|
const SliderTrackFrame = styled(SliderFrame, {
|
|
106
110
|
name: "SliderTrack",
|
|
@@ -111,11 +115,13 @@ const SliderTrackFrame = styled(SliderFrame, {
|
|
|
111
115
|
borderRadius: 1e5,
|
|
112
116
|
overflow: "hidden"
|
|
113
117
|
});
|
|
114
|
-
const SliderTrack = React.forwardRef(
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
}
|
|
118
|
+
const SliderTrack = React.forwardRef(
|
|
119
|
+
(props, forwardedRef) => {
|
|
120
|
+
const { __scopeSlider, ...trackProps } = props;
|
|
121
|
+
const context = useSliderContext(TRACK_NAME, __scopeSlider);
|
|
122
|
+
return <SliderTrackFrame data-disabled={context.disabled ? "" : void 0} data-orientation={context.orientation} orientation={context.orientation} size={context.size} {...trackProps} ref={forwardedRef} />;
|
|
123
|
+
}
|
|
124
|
+
);
|
|
119
125
|
SliderTrack.displayName = TRACK_NAME;
|
|
120
126
|
const RANGE_NAME = "SliderTrackActive";
|
|
121
127
|
const SliderTrackActiveFrame = styled(SliderFrame, {
|
|
@@ -123,26 +129,30 @@ const SliderTrackActiveFrame = styled(SliderFrame, {
|
|
|
123
129
|
backgroundColor: "$background",
|
|
124
130
|
position: "absolute"
|
|
125
131
|
});
|
|
126
|
-
const SliderTrackActive = React.forwardRef(
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
132
|
+
const SliderTrackActive = React.forwardRef(
|
|
133
|
+
(props, forwardedRef) => {
|
|
134
|
+
const { __scopeSlider, ...rangeProps } = props;
|
|
135
|
+
const context = useSliderContext(RANGE_NAME, __scopeSlider);
|
|
136
|
+
const orientation = useSliderOrientationContext(RANGE_NAME, __scopeSlider);
|
|
137
|
+
const ref = React.useRef(null);
|
|
138
|
+
const composedRefs = useComposedRefs(forwardedRef, ref);
|
|
139
|
+
const valuesCount = context.values.length;
|
|
140
|
+
const percentages = context.values.map(
|
|
141
|
+
(value) => convertValueToPercentage(value, context.min, context.max)
|
|
142
|
+
);
|
|
143
|
+
const offsetStart = valuesCount > 1 ? Math.min(...percentages) : 0;
|
|
144
|
+
const offsetEnd = 100 - Math.max(...percentages);
|
|
145
|
+
return <SliderTrackActiveFrame orientation={context.orientation} data-orientation={context.orientation} data-disabled={context.disabled ? "" : void 0} size={context.size} {...rangeProps} ref={composedRefs} {...{
|
|
146
|
+
[orientation.startEdge]: offsetStart + "%",
|
|
147
|
+
[orientation.endEdge]: offsetEnd + "%"
|
|
148
|
+
}} {...orientation.sizeProp === "width" ? {
|
|
149
|
+
height: "100%"
|
|
150
|
+
} : {
|
|
151
|
+
left: 0,
|
|
152
|
+
right: 0
|
|
153
|
+
}} />;
|
|
154
|
+
}
|
|
155
|
+
);
|
|
146
156
|
SliderTrackActive.displayName = RANGE_NAME;
|
|
147
157
|
const THUMB_NAME = "SliderThumb";
|
|
148
158
|
const getThumbSize = (val) => {
|
|
@@ -169,138 +179,143 @@ const SliderThumbFrame = styled(ThemeableStack, {
|
|
|
169
179
|
}
|
|
170
180
|
}
|
|
171
181
|
});
|
|
172
|
-
const SliderThumb = React.forwardRef(
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
const
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
if (thumb) {
|
|
188
|
-
context.thumbs.add(thumb);
|
|
189
|
-
return () => {
|
|
190
|
-
context.thumbs.delete(thumb);
|
|
191
|
-
};
|
|
192
|
-
}
|
|
193
|
-
}, [thumb, context.thumbs]);
|
|
194
|
-
return <SliderThumbFrame ref={composedRefs} role="slider" aria-label={props["aria-label"] || label} aria-valuemin={context.min} aria-valuenow={value} aria-valuemax={context.max} aria-orientation={context.orientation} data-orientation={context.orientation} data-disabled={context.disabled ? "" : void 0} tabIndex={context.disabled ? void 0 : 0} {...thumbProps} {...context.orientation === "horizontal" ? {
|
|
195
|
-
x: thumbInBoundsOffset - size / 2,
|
|
196
|
-
y: -size / 2,
|
|
197
|
-
top: "50%",
|
|
198
|
-
...size === 0 && {
|
|
199
|
-
top: "auto",
|
|
200
|
-
bottom: "auto"
|
|
201
|
-
}
|
|
202
|
-
} : {
|
|
203
|
-
x: -size / 2,
|
|
204
|
-
y: size / 2,
|
|
205
|
-
left: "50%",
|
|
206
|
-
...size === 0 && {
|
|
207
|
-
left: "auto",
|
|
208
|
-
right: "auto"
|
|
209
|
-
}
|
|
210
|
-
}} size={sizeProp ?? context.size ?? "$4"} onLayout={(e) => {
|
|
211
|
-
setSize(e.nativeEvent.layout[orientation.sizeProp]);
|
|
212
|
-
}} {...{
|
|
213
|
-
[orientation.startEdge]: `${percent}%`
|
|
214
|
-
}} onFocus={composeEventHandlers(props.onFocus, () => {
|
|
215
|
-
context.valueIndexToChangeRef.current = index;
|
|
216
|
-
})} />;
|
|
217
|
-
});
|
|
218
|
-
SliderThumb.displayName = THUMB_NAME;
|
|
219
|
-
const Slider = withStaticProperties(React.forwardRef((props, forwardedRef) => {
|
|
220
|
-
const {
|
|
221
|
-
name,
|
|
222
|
-
min = 0,
|
|
223
|
-
max = 100,
|
|
224
|
-
step = 1,
|
|
225
|
-
orientation = "horizontal",
|
|
226
|
-
disabled = false,
|
|
227
|
-
minStepsBetweenThumbs = 0,
|
|
228
|
-
defaultValue = [min],
|
|
229
|
-
value,
|
|
230
|
-
onValueChange = () => {
|
|
231
|
-
},
|
|
232
|
-
size: sizeProp,
|
|
233
|
-
...sliderProps
|
|
234
|
-
} = props;
|
|
235
|
-
const sliderRef = React.useRef(null);
|
|
236
|
-
const composedRefs = useComposedRefs(sliderRef, forwardedRef);
|
|
237
|
-
const thumbRefs = React.useRef(/* @__PURE__ */ new Set());
|
|
238
|
-
const valueIndexToChangeRef = React.useRef(0);
|
|
239
|
-
const isHorizontal = orientation === "horizontal";
|
|
240
|
-
const [values = [], setValues] = useControllableState({
|
|
241
|
-
prop: value,
|
|
242
|
-
defaultProp: defaultValue,
|
|
243
|
-
onChange: (value2) => {
|
|
244
|
-
if (isWeb) {
|
|
245
|
-
const thumbs = [...thumbRefs.current];
|
|
246
|
-
thumbs[valueIndexToChangeRef.current]?.focus();
|
|
247
|
-
}
|
|
248
|
-
onValueChange(value2);
|
|
249
|
-
}
|
|
250
|
-
});
|
|
251
|
-
if (isWeb) {
|
|
182
|
+
const SliderThumb = React.forwardRef(
|
|
183
|
+
(props, forwardedRef) => {
|
|
184
|
+
const { __scopeSlider, index, size: sizeProp, ...thumbProps } = props;
|
|
185
|
+
const context = useSliderContext(THUMB_NAME, __scopeSlider);
|
|
186
|
+
const orientation = useSliderOrientationContext(THUMB_NAME, __scopeSlider);
|
|
187
|
+
const [thumb, setThumb] = React.useState(null);
|
|
188
|
+
const composedRefs = useComposedRefs(forwardedRef, (node) => setThumb(node));
|
|
189
|
+
const value = context.values[index];
|
|
190
|
+
const percent = value === void 0 ? 0 : convertValueToPercentage(value, context.min, context.max);
|
|
191
|
+
const label = getLabel(index, context.values.length);
|
|
192
|
+
const [size, setSize] = React.useState(() => {
|
|
193
|
+
const estimatedSize = getVariableValue(getThumbSize(sizeProp).width);
|
|
194
|
+
return estimatedSize;
|
|
195
|
+
});
|
|
196
|
+
const thumbInBoundsOffset = size ? getThumbInBoundsOffset(size, percent, orientation.direction) : 0;
|
|
252
197
|
React.useEffect(() => {
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
return
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
}
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
198
|
+
if (thumb) {
|
|
199
|
+
context.thumbs.add(thumb);
|
|
200
|
+
return () => {
|
|
201
|
+
context.thumbs.delete(thumb);
|
|
202
|
+
};
|
|
203
|
+
}
|
|
204
|
+
}, [thumb, context.thumbs]);
|
|
205
|
+
return <SliderThumbFrame ref={composedRefs} role="slider" aria-label={props["aria-label"] || label} aria-valuemin={context.min} aria-valuenow={value} aria-valuemax={context.max} aria-orientation={context.orientation} data-orientation={context.orientation} data-disabled={context.disabled ? "" : void 0} tabIndex={context.disabled ? void 0 : 0} {...thumbProps} {...context.orientation === "horizontal" ? {
|
|
206
|
+
x: thumbInBoundsOffset - size / 2,
|
|
207
|
+
y: -size / 2,
|
|
208
|
+
top: "50%",
|
|
209
|
+
...size === 0 && {
|
|
210
|
+
top: "auto",
|
|
211
|
+
bottom: "auto"
|
|
212
|
+
}
|
|
213
|
+
} : {
|
|
214
|
+
x: -size / 2,
|
|
215
|
+
y: size / 2,
|
|
216
|
+
left: "50%",
|
|
217
|
+
...size === 0 && {
|
|
218
|
+
left: "auto",
|
|
219
|
+
right: "auto"
|
|
220
|
+
}
|
|
221
|
+
}} size={sizeProp ?? context.size ?? "$4"} onLayout={(e) => {
|
|
222
|
+
setSize(e.nativeEvent.layout[orientation.sizeProp]);
|
|
223
|
+
}} {...{
|
|
224
|
+
[orientation.startEdge]: `${percent}%`
|
|
225
|
+
}} onFocus={composeEventHandlers(props.onFocus, () => {
|
|
226
|
+
context.valueIndexToChangeRef.current = index;
|
|
227
|
+
})} />;
|
|
267
228
|
}
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
229
|
+
);
|
|
230
|
+
SliderThumb.displayName = THUMB_NAME;
|
|
231
|
+
const Slider = withStaticProperties(
|
|
232
|
+
React.forwardRef((props, forwardedRef) => {
|
|
233
|
+
const {
|
|
234
|
+
name,
|
|
235
|
+
min = 0,
|
|
236
|
+
max = 100,
|
|
237
|
+
step = 1,
|
|
238
|
+
orientation = "horizontal",
|
|
239
|
+
disabled = false,
|
|
240
|
+
minStepsBetweenThumbs = 0,
|
|
241
|
+
defaultValue = [min],
|
|
242
|
+
value,
|
|
243
|
+
onValueChange = () => {
|
|
244
|
+
},
|
|
245
|
+
size: sizeProp,
|
|
246
|
+
...sliderProps
|
|
247
|
+
} = props;
|
|
248
|
+
const sliderRef = React.useRef(null);
|
|
249
|
+
const composedRefs = useComposedRefs(sliderRef, forwardedRef);
|
|
250
|
+
const thumbRefs = React.useRef(/* @__PURE__ */ new Set());
|
|
251
|
+
const valueIndexToChangeRef = React.useRef(0);
|
|
252
|
+
const isHorizontal = orientation === "horizontal";
|
|
253
|
+
const [values = [], setValues] = useControllableState({
|
|
254
|
+
prop: value,
|
|
255
|
+
defaultProp: defaultValue,
|
|
256
|
+
onChange: (value2) => {
|
|
257
|
+
if (isWeb) {
|
|
258
|
+
const thumbs = [...thumbRefs.current];
|
|
259
|
+
thumbs[valueIndexToChangeRef.current]?.focus();
|
|
260
|
+
}
|
|
261
|
+
onValueChange(value2);
|
|
279
262
|
}
|
|
280
263
|
});
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
264
|
+
if (isWeb) {
|
|
265
|
+
React.useEffect(() => {
|
|
266
|
+
const node = sliderRef.current;
|
|
267
|
+
if (!node)
|
|
268
|
+
return;
|
|
269
|
+
const preventDefault = (e) => {
|
|
270
|
+
e.preventDefault();
|
|
271
|
+
};
|
|
272
|
+
node.addEventListener("touchstart", preventDefault);
|
|
273
|
+
return () => {
|
|
274
|
+
node.removeEventListener("touchstart", preventDefault);
|
|
275
|
+
};
|
|
276
|
+
}, []);
|
|
287
277
|
}
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
const isPageKey = PAGE_KEYS.includes(event.key);
|
|
291
|
-
const isSkipKey = isPageKey || event.shiftKey && ARROW_KEYS.includes(event.key);
|
|
292
|
-
const multiplier = isSkipKey ? 10 : 1;
|
|
293
|
-
const atIndex = valueIndexToChangeRef.current;
|
|
294
|
-
const value2 = values[atIndex];
|
|
295
|
-
const stepInDirection = step * multiplier * stepDirection;
|
|
296
|
-
updateValues(value2 + stepInDirection, atIndex);
|
|
278
|
+
function handleSlideMove(value2) {
|
|
279
|
+
updateValues(value2, valueIndexToChangeRef.current);
|
|
297
280
|
}
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
281
|
+
function updateValues(value2, atIndex) {
|
|
282
|
+
const decimalCount = getDecimalCount(step);
|
|
283
|
+
const snapToStep = roundValue(Math.round((value2 - min) / step) * step + min, decimalCount);
|
|
284
|
+
const nextValue = clamp(snapToStep, [min, max]);
|
|
285
|
+
setValues((prevValues = []) => {
|
|
286
|
+
const nextValues = getNextSortedValues(prevValues, nextValue, atIndex);
|
|
287
|
+
if (hasMinStepsBetweenValues(nextValues, minStepsBetweenThumbs * step)) {
|
|
288
|
+
valueIndexToChangeRef.current = nextValues.indexOf(nextValue);
|
|
289
|
+
return String(nextValues) === String(prevValues) ? prevValues : nextValues;
|
|
290
|
+
} else {
|
|
291
|
+
return prevValues;
|
|
292
|
+
}
|
|
293
|
+
});
|
|
294
|
+
}
|
|
295
|
+
const SliderOriented = isHorizontal ? SliderHorizontal : SliderVertical;
|
|
296
|
+
return <SliderProvider scope={props.__scopeSlider} disabled={disabled} min={min} max={max} valueIndexToChangeRef={valueIndexToChangeRef} thumbs={thumbRefs.current} values={values} orientation={orientation} size={sizeProp}><SliderOriented aria-disabled={disabled} data-disabled={disabled ? "" : void 0} {...sliderProps} ref={composedRefs} min={min} max={max} onSlideStart={disabled ? void 0 : (value2, target) => {
|
|
297
|
+
if (target !== "thumb") {
|
|
298
|
+
const closestIndex = getClosestValueIndex(values, value2);
|
|
299
|
+
updateValues(value2, closestIndex);
|
|
300
|
+
}
|
|
301
|
+
}} onSlideMove={disabled ? void 0 : handleSlideMove} onHomeKeyDown={() => !disabled && updateValues(min, 0)} onEndKeyDown={() => !disabled && updateValues(max, values.length - 1)} onStepKeyDown={({ event, direction: stepDirection }) => {
|
|
302
|
+
if (!disabled) {
|
|
303
|
+
const isPageKey = PAGE_KEYS.includes(event.key);
|
|
304
|
+
const isSkipKey = isPageKey || event.shiftKey && ARROW_KEYS.includes(event.key);
|
|
305
|
+
const multiplier = isSkipKey ? 10 : 1;
|
|
306
|
+
const atIndex = valueIndexToChangeRef.current;
|
|
307
|
+
const value2 = values[atIndex];
|
|
308
|
+
const stepInDirection = step * multiplier * stepDirection;
|
|
309
|
+
updateValues(value2 + stepInDirection, atIndex);
|
|
310
|
+
}
|
|
311
|
+
}} /></SliderProvider>;
|
|
312
|
+
}),
|
|
313
|
+
{
|
|
314
|
+
Track: SliderTrack,
|
|
315
|
+
TrackActive: SliderTrackActive,
|
|
316
|
+
Thumb: SliderThumb
|
|
317
|
+
}
|
|
318
|
+
);
|
|
304
319
|
Slider.displayName = SLIDER_NAME;
|
|
305
320
|
const Track = SliderTrack;
|
|
306
321
|
const Range = SliderTrackActive;
|
package/dist/jsx/Slider.js.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/Slider.tsx"],
|
|
4
4
|
"sourcesContent": ["// forked from radix-ui\n\nimport { composeRefs, useComposedRefs } from '@tamagui/compose-refs'\nimport {\n GetProps,\n SizeTokens,\n getSize,\n getVariableValue,\n isWeb,\n styled,\n withStaticProperties,\n} from '@tamagui/core'\nimport { clamp, composeEventHandlers } from '@tamagui/helpers'\nimport { SizableStackProps, ThemeableStack } from '@tamagui/stacks'\nimport { useControllableState } from '@tamagui/use-controllable-state'\nimport { useDirection } from '@tamagui/use-direction'\nimport * as React from 'react'\nimport { View } from 'react-native'\n\nimport {\n ARROW_KEYS,\n BACK_KEYS,\n PAGE_KEYS,\n SLIDER_NAME,\n SliderOrientationProvider,\n SliderProvider,\n useSliderContext,\n useSliderOrientationContext,\n} from './constants'\nimport {\n convertValueToPercentage,\n getClosestValueIndex,\n getDecimalCount,\n getLabel,\n getNextSortedValues,\n getThumbInBoundsOffset,\n hasMinStepsBetweenValues,\n linearScale,\n roundValue,\n} from './helpers'\nimport { SliderFrame, SliderImpl } from './SliderImpl'\nimport {\n ScopedProps,\n SliderContextValue,\n SliderHorizontalProps,\n SliderProps,\n SliderTrackProps,\n SliderVerticalProps,\n} from './types'\n\n/* -------------------------------------------------------------------------------------------------\n * SliderHorizontal\n * -----------------------------------------------------------------------------------------------*/\n\nconst SliderHorizontal = React.forwardRef<View, SliderHorizontalProps>(\n (props: ScopedProps<SliderHorizontalProps>, forwardedRef) => {\n const { min, max, dir, onSlideStart, onSlideMove, onStepKeyDown, ...sliderProps } = props\n const direction = useDirection(dir)\n const isDirectionLTR = direction === 'ltr'\n const sliderRef = React.useRef<View>(null)\n const [state, setState] = React.useState(() => ({ size: 0, offset: 0 }))\n\n function getValueFromPointer(pointerPosition: number) {\n const input: [number, number] = [0, state.size]\n const output: [number, number] = isDirectionLTR ? [min, max] : [max, min]\n const value = linearScale(input, output)\n return value(pointerPosition)\n }\n\n return (\n <SliderOrientationProvider\n scope={props.__scopeSlider}\n startEdge={isDirectionLTR ? 'left' : 'right'}\n endEdge={isDirectionLTR ? 'right' : 'left'}\n direction={isDirectionLTR ? 1 : -1}\n sizeProp=\"width\"\n size={state.size}\n >\n <SliderImpl\n ref={composeRefs(forwardedRef, sliderRef)}\n dir={direction}\n {...sliderProps}\n orientation=\"horizontal\"\n onLayout={() => {\n sliderRef.current?.measure((_x, _y, width, _height, pageX, _pageY) => {\n setState({\n size: width,\n offset: pageX,\n })\n })\n }}\n onSlideStart={(event, target) => {\n const value = getValueFromPointer(event.nativeEvent.locationX)\n if (value) {\n onSlideStart?.(value, target)\n }\n }}\n onSlideMove={(event) => {\n const value = getValueFromPointer(event.nativeEvent.pageX - state.offset)\n if (value) {\n onSlideMove?.(value)\n }\n }}\n onSlideEnd={() => {}}\n onStepKeyDown={(event) => {\n const isBackKey = BACK_KEYS[direction].includes(event.key)\n onStepKeyDown?.({ event, direction: isBackKey ? -1 : 1 })\n }}\n />\n </SliderOrientationProvider>\n )\n }\n)\n\n/* -------------------------------------------------------------------------------------------------\n * SliderVertical\n * -----------------------------------------------------------------------------------------------*/\n\nconst SliderVertical = React.forwardRef<View, SliderVerticalProps>(\n (props: ScopedProps<SliderVerticalProps>, forwardedRef) => {\n const { min, max, onSlideStart, onSlideMove, onStepKeyDown, ...sliderProps } = props\n const [state, setState] = React.useState(() => ({ size: 0, offset: 0 }))\n const sliderRef = React.useRef<View>(null)\n\n function getValueFromPointer(pointerPosition: number) {\n const input: [number, number] = [0, state.size]\n const output: [number, number] = [max, min]\n const value = linearScale(input, output)\n return value(pointerPosition)\n }\n\n return (\n <SliderOrientationProvider\n scope={props.__scopeSlider}\n startEdge=\"bottom\"\n endEdge=\"top\"\n sizeProp=\"height\"\n size={state.size}\n direction={1}\n >\n <SliderImpl\n ref={composeRefs(forwardedRef, sliderRef)}\n {...sliderProps}\n orientation=\"vertical\"\n onLayout={() => {\n sliderRef.current?.measure((_x, _y, _width, height, _pageX, pageY) => {\n setState({\n size: height,\n offset: pageY,\n })\n })\n }}\n onSlideStart={(event, target) => {\n const value = getValueFromPointer(event.nativeEvent.locationY)\n if (value) {\n onSlideStart?.(value, target)\n }\n }}\n onSlideMove={(event) => {\n const value = getValueFromPointer(event.nativeEvent.pageY - state.offset)\n if (value) {\n onSlideMove?.(value)\n }\n }}\n onSlideEnd={() => {}}\n onStepKeyDown={(event) => {\n const isBackKey = BACK_KEYS.ltr.includes(event.key)\n onStepKeyDown?.({ event, direction: isBackKey ? -1 : 1 })\n }}\n />\n </SliderOrientationProvider>\n )\n }\n)\n\n/* -------------------------------------------------------------------------------------------------\n * SliderTrack\n * -----------------------------------------------------------------------------------------------*/\n\nconst TRACK_NAME = 'SliderTrack'\n\ntype SliderTrackElement = HTMLElement | View\n\nexport const SliderTrackFrame = styled(SliderFrame, {\n name: 'SliderTrack',\n height: '100%',\n width: '100%',\n backgroundColor: '$background',\n position: 'relative',\n borderRadius: 100_000,\n overflow: 'hidden',\n})\n\nconst SliderTrack = React.forwardRef<SliderTrackElement, SliderTrackProps>(\n (props: ScopedProps<SliderTrackProps>, forwardedRef) => {\n const { __scopeSlider, ...trackProps } = props\n const context = useSliderContext(TRACK_NAME, __scopeSlider)\n return (\n <SliderTrackFrame\n data-disabled={context.disabled ? '' : undefined}\n data-orientation={context.orientation}\n orientation={context.orientation}\n size={context.size}\n {...trackProps}\n ref={forwardedRef}\n />\n )\n }\n)\n\nSliderTrack.displayName = TRACK_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * SliderTrackActive\n * -----------------------------------------------------------------------------------------------*/\n\nconst RANGE_NAME = 'SliderTrackActive'\n\nexport const SliderTrackActiveFrame = styled(SliderFrame, {\n name: 'SliderTrackActive',\n backgroundColor: '$background',\n position: 'absolute',\n})\n\ntype SliderTrackActiveProps = GetProps<typeof SliderTrackActiveFrame>\n\nconst SliderTrackActive = React.forwardRef<View, SliderTrackActiveProps>(\n (props: ScopedProps<SliderTrackActiveProps>, forwardedRef) => {\n const { __scopeSlider, ...rangeProps } = props\n const context = useSliderContext(RANGE_NAME, __scopeSlider)\n const orientation = useSliderOrientationContext(RANGE_NAME, __scopeSlider)\n const ref = React.useRef<View>(null)\n const composedRefs = useComposedRefs(forwardedRef, ref)\n const valuesCount = context.values.length\n const percentages = context.values.map((value) =>\n convertValueToPercentage(value, context.min, context.max)\n )\n const offsetStart = valuesCount > 1 ? Math.min(...percentages) : 0\n const offsetEnd = 100 - Math.max(...percentages)\n\n return (\n <SliderTrackActiveFrame\n orientation={context.orientation}\n data-orientation={context.orientation}\n data-disabled={context.disabled ? '' : undefined}\n size={context.size}\n {...rangeProps}\n ref={composedRefs}\n {...{\n [orientation.startEdge]: offsetStart + '%',\n [orientation.endEdge]: offsetEnd + '%',\n }}\n {...(orientation.sizeProp === 'width'\n ? {\n height: '100%',\n }\n : {\n left: 0,\n right: 0,\n })}\n />\n )\n }\n)\n\nSliderTrackActive.displayName = RANGE_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * SliderThumb\n * -----------------------------------------------------------------------------------------------*/\n\nconst THUMB_NAME = 'SliderThumb'\n\n// TODO make this customizable through tamagui\n// so we can accurately use it for estimatedSize below\nconst getThumbSize = (val?: SizeTokens | number) => {\n const size = typeof val === 'number' ? val : getSize(val, -1)\n return {\n width: size,\n height: size,\n minWidth: size,\n minHeight: size,\n }\n}\n\nexport const SliderThumbFrame = styled(ThemeableStack, {\n name: 'SliderThumb',\n position: 'absolute',\n // TODO not taking up 2\n bordered: 2,\n // OR THIS\n borderWidth: 2,\n backgrounded: true,\n pressTheme: isWeb,\n focusTheme: isWeb,\n hoverTheme: isWeb,\n\n variants: {\n size: {\n '...size': getThumbSize,\n },\n },\n})\n\ninterface SliderThumbProps extends SizableStackProps {\n index: number\n}\n\nconst SliderThumb = React.forwardRef<View, SliderThumbProps>(\n (props: ScopedProps<SliderThumbProps>, forwardedRef) => {\n const { __scopeSlider, index, size: sizeProp, ...thumbProps } = props\n const context = useSliderContext(THUMB_NAME, __scopeSlider)\n const orientation = useSliderOrientationContext(THUMB_NAME, __scopeSlider)\n const [thumb, setThumb] = React.useState<View | HTMLElement | null>(null)\n const composedRefs = useComposedRefs(forwardedRef, (node) => setThumb(node))\n\n // We cast because index could be `-1` which would return undefined\n const value = context.values[index] as number | undefined\n const percent =\n value === undefined ? 0 : convertValueToPercentage(value, context.min, context.max)\n const label = getLabel(index, context.values.length)\n const [size, setSize] = React.useState(() => {\n // for SSR\n const estimatedSize = getVariableValue(getThumbSize(sizeProp).width)\n return estimatedSize\n })\n\n const thumbInBoundsOffset = size\n ? getThumbInBoundsOffset(size, percent, orientation.direction)\n : 0\n\n React.useEffect(() => {\n if (thumb) {\n context.thumbs.add(thumb)\n return () => {\n context.thumbs.delete(thumb)\n }\n }\n }, [thumb, context.thumbs])\n\n return (\n <SliderThumbFrame\n ref={composedRefs}\n // TODO\n // @ts-ignore\n role=\"slider\"\n aria-label={props['aria-label'] || label}\n aria-valuemin={context.min}\n aria-valuenow={value}\n aria-valuemax={context.max}\n aria-orientation={context.orientation}\n data-orientation={context.orientation}\n data-disabled={context.disabled ? '' : undefined}\n tabIndex={context.disabled ? undefined : 0}\n {...thumbProps}\n {...(context.orientation === 'horizontal'\n ? {\n x: thumbInBoundsOffset - size / 2,\n y: -size / 2,\n top: '50%',\n ...(size === 0 && {\n top: 'auto',\n bottom: 'auto',\n }),\n }\n : {\n x: -size / 2,\n y: size / 2,\n left: '50%',\n ...(size === 0 && {\n left: 'auto',\n right: 'auto',\n }),\n })}\n size={sizeProp ?? context.size ?? '$4'}\n onLayout={(e) => {\n setSize(e.nativeEvent.layout[orientation.sizeProp])\n }}\n {...{\n [orientation.startEdge]: `${percent}%`,\n }}\n /**\n * There will be no value on initial render while we work out the index so we hide thumbs\n * without a value, otherwise SSR will render them in the wrong position before they\n * snap into the correct position during hydration which would be visually jarring for\n * slower connections.\n */\n // style={value === undefined ? { display: 'none' } : props.style}\n onFocus={composeEventHandlers(props.onFocus, () => {\n context.valueIndexToChangeRef.current = index\n })}\n />\n )\n }\n)\n\nSliderThumb.displayName = THUMB_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * Slider\n * -----------------------------------------------------------------------------------------------*/\n\nconst Slider = withStaticProperties(\n React.forwardRef<View, SliderProps>((props: ScopedProps<SliderProps>, forwardedRef) => {\n const {\n name,\n min = 0,\n max = 100,\n step = 1,\n orientation = 'horizontal',\n disabled = false,\n minStepsBetweenThumbs = 0,\n defaultValue = [min],\n value,\n onValueChange = () => {},\n size: sizeProp,\n ...sliderProps\n } = props\n const sliderRef = React.useRef<View>(null)\n const composedRefs = useComposedRefs(sliderRef, forwardedRef)\n const thumbRefs = React.useRef<SliderContextValue['thumbs']>(new Set())\n const valueIndexToChangeRef = React.useRef<number>(0)\n const isHorizontal = orientation === 'horizontal'\n // We set this to true by default so that events bubble to forms without JS (SSR)\n // const isFormControl =\n // sliderRef.current instanceof HTMLElement ? Boolean(sliderRef.current.closest('form')) : true\n\n const [values = [], setValues] = useControllableState({\n prop: value,\n defaultProp: defaultValue,\n onChange: (value) => {\n if (isWeb) {\n const thumbs = [...thumbRefs.current]\n thumbs[valueIndexToChangeRef.current]?.focus()\n }\n onValueChange(value)\n },\n })\n\n if (isWeb) {\n React.useEffect(() => {\n // @ts-ignore\n const node = sliderRef.current as HTMLElement\n if (!node) return\n const preventDefault = (e) => {\n e.preventDefault()\n }\n node.addEventListener('touchstart', preventDefault)\n return () => {\n node.removeEventListener('touchstart', preventDefault)\n }\n }, [])\n }\n\n function handleSlideMove(value: number) {\n updateValues(value, valueIndexToChangeRef.current)\n }\n\n function updateValues(value: number, atIndex: number) {\n const decimalCount = getDecimalCount(step)\n const snapToStep = roundValue(Math.round((value - min) / step) * step + min, decimalCount)\n const nextValue = clamp(snapToStep, [min, max])\n setValues((prevValues = []) => {\n const nextValues = getNextSortedValues(prevValues, nextValue, atIndex)\n if (hasMinStepsBetweenValues(nextValues, minStepsBetweenThumbs * step)) {\n valueIndexToChangeRef.current = nextValues.indexOf(nextValue)\n return String(nextValues) === String(prevValues) ? prevValues : nextValues\n } else {\n return prevValues\n }\n })\n }\n\n const SliderOriented = isHorizontal ? SliderHorizontal : SliderVertical\n\n return (\n <SliderProvider\n scope={props.__scopeSlider}\n disabled={disabled}\n min={min}\n max={max}\n valueIndexToChangeRef={valueIndexToChangeRef}\n thumbs={thumbRefs.current}\n values={values}\n orientation={orientation}\n size={sizeProp}\n >\n <SliderOriented\n aria-disabled={disabled}\n data-disabled={disabled ? '' : undefined}\n {...sliderProps}\n ref={composedRefs}\n min={min}\n max={max}\n onSlideStart={\n disabled\n ? undefined\n : (value: number, target) => {\n // when starting on the track, move it right away\n // when starting on thumb, dont jump until movemenet as it feels weird\n if (target !== 'thumb') {\n const closestIndex = getClosestValueIndex(values, value)\n updateValues(value, closestIndex)\n }\n }\n }\n onSlideMove={disabled ? undefined : handleSlideMove}\n onHomeKeyDown={() => !disabled && updateValues(min, 0)}\n onEndKeyDown={() => !disabled && updateValues(max, values.length - 1)}\n onStepKeyDown={({ event, direction: stepDirection }) => {\n if (!disabled) {\n const isPageKey = PAGE_KEYS.includes(event.key)\n const isSkipKey = isPageKey || (event.shiftKey && ARROW_KEYS.includes(event.key))\n const multiplier = isSkipKey ? 10 : 1\n const atIndex = valueIndexToChangeRef.current\n const value = values[atIndex]\n const stepInDirection = step * multiplier * stepDirection\n updateValues(value + stepInDirection, atIndex)\n }\n }}\n />\n {/* {isFormControl &&\n values.map((value, index) => (\n <BubbleInput\n key={index}\n name={name ? name + (values.length > 1 ? '[]' : '') : undefined}\n value={value}\n />\n ))} */}\n </SliderProvider>\n )\n }),\n {\n Track: SliderTrack,\n TrackActive: SliderTrackActive,\n Thumb: SliderThumb,\n }\n)\n\nSlider.displayName = SLIDER_NAME\n\n/* -----------------------------------------------------------------------------------------------*/\n\n// // TODO\n// const BubbleInput = (props: any) => {\n// const { value, ...inputProps } = props\n// const ref = React.useRef<HTMLInputElement>(null)\n// const prevValue = usePrevious(value)\n\n// // Bubble value change to parents (e.g form change event)\n// React.useEffect(() => {\n// const input = ref.current!\n// const inputProto = window.HTMLInputElement.prototype\n// const descriptor = Object.getOwnPropertyDescriptor(inputProto, 'value') as PropertyDescriptor\n// const setValue = descriptor.set\n// if (prevValue !== value && setValue) {\n// const event = new Event('input', { bubbles: true })\n// setValue.call(input, value)\n// input.dispatchEvent(event)\n// }\n// }, [prevValue, value])\n\n// /**\n// * We purposefully do not use `type=\"hidden\"` here otherwise forms that\n// * wrap it will not be able to access its value via the FormData API.\n// *\n// * We purposefully do not add the `value` attribute here to allow the value\n// * to be set programatically and bubble to any parent form `onChange` event.\n// * Adding the `value` will cause React to consider the programatic\n// * dispatch a duplicate and it will get swallowed.\n// */\n// return <input style={{ display: 'none' }} {...inputProps} ref={ref} defaultValue={value} />\n// }\n\n/* -----------------------------------------------------------------------------------------------*/\n\nconst Track = SliderTrack\nconst Range = SliderTrackActive\nconst Thumb = SliderThumb\n\nexport {\n Slider,\n SliderTrack,\n SliderTrackActive,\n SliderThumb,\n //\n Track,\n Range,\n Thumb,\n}\n\nexport type { SliderProps, SliderTrackProps, SliderTrackActiveProps, SliderThumbProps }\n"],
|
|
5
|
-
"mappings": "AAEA;
|
|
6
|
-
"names": []
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["value"]
|
|
7
7
|
}
|