@tamagui/slider 1.13.3 → 1.14.0
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 +1 -481
- package/dist/cjs/Slider.js.map +2 -2
- package/dist/cjs/SliderImpl.js +1 -139
- package/dist/cjs/SliderImpl.js.map +2 -2
- package/dist/cjs/constants.js +1 -62
- package/dist/cjs/constants.js.map +2 -2
- package/dist/cjs/helpers.js +1 -101
- package/dist/cjs/helpers.js.map +2 -2
- package/dist/cjs/index.js +1 -32
- package/dist/cjs/index.js.map +2 -2
- package/dist/cjs/types.js +1 -16
- package/dist/cjs/types.js.map +2 -2
- package/dist/esm/Slider.js +1 -462
- package/dist/esm/Slider.js.map +2 -2
- package/dist/esm/Slider.mjs +1 -462
- package/dist/esm/Slider.mjs.map +2 -2
- package/dist/esm/SliderImpl.js +1 -103
- package/dist/esm/SliderImpl.js.map +2 -2
- package/dist/esm/SliderImpl.mjs +1 -103
- package/dist/esm/SliderImpl.mjs.map +2 -2
- package/dist/esm/constants.js +1 -29
- package/dist/esm/constants.js.map +2 -2
- package/dist/esm/constants.mjs +1 -29
- package/dist/esm/constants.mjs.map +2 -2
- package/dist/esm/helpers.js +1 -69
- package/dist/esm/helpers.js.map +2 -2
- package/dist/esm/helpers.mjs +1 -69
- package/dist/esm/helpers.mjs.map +2 -2
- package/dist/esm/index.js +1 -6
- package/dist/esm/index.js.map +2 -2
- package/dist/esm/index.mjs +1 -6
- package/dist/esm/index.mjs.map +2 -2
- package/dist/jsx/Slider.js +1 -428
- package/dist/jsx/Slider.js.map +2 -2
- package/dist/jsx/Slider.mjs +1 -428
- package/dist/jsx/Slider.mjs.map +2 -2
- package/dist/jsx/SliderImpl.js +1 -99
- package/dist/jsx/SliderImpl.js.map +2 -2
- package/dist/jsx/SliderImpl.mjs +1 -99
- package/dist/jsx/SliderImpl.mjs.map +2 -2
- package/dist/jsx/constants.js +1 -29
- package/dist/jsx/constants.js.map +2 -2
- package/dist/jsx/constants.mjs +1 -29
- package/dist/jsx/constants.mjs.map +2 -2
- package/dist/jsx/helpers.js +1 -69
- package/dist/jsx/helpers.js.map +2 -2
- package/dist/jsx/helpers.mjs +1 -69
- package/dist/jsx/helpers.mjs.map +2 -2
- package/dist/jsx/index.js +1 -6
- package/dist/jsx/index.js.map +2 -2
- package/dist/jsx/index.mjs +1 -6
- package/dist/jsx/index.mjs.map +2 -2
- package/package.json +10 -10
package/dist/esm/Slider.mjs
CHANGED
|
@@ -1,463 +1,2 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { composeRefs, useComposedRefs } from "@tamagui/compose-refs";
|
|
3
|
-
import {
|
|
4
|
-
getVariableValue,
|
|
5
|
-
isWeb,
|
|
6
|
-
styled,
|
|
7
|
-
withStaticProperties
|
|
8
|
-
} from "@tamagui/core";
|
|
9
|
-
import { getSize } from "@tamagui/get-size";
|
|
10
|
-
import { clamp, composeEventHandlers } from "@tamagui/helpers";
|
|
11
|
-
import { ThemeableStack } from "@tamagui/stacks";
|
|
12
|
-
import { useControllableState } from "@tamagui/use-controllable-state";
|
|
13
|
-
import { useDirection } from "@tamagui/use-direction";
|
|
14
|
-
import * as React from "react";
|
|
15
|
-
import {
|
|
16
|
-
ARROW_KEYS,
|
|
17
|
-
BACK_KEYS,
|
|
18
|
-
PAGE_KEYS,
|
|
19
|
-
SLIDER_NAME,
|
|
20
|
-
SliderOrientationProvider,
|
|
21
|
-
SliderProvider,
|
|
22
|
-
useSliderContext,
|
|
23
|
-
useSliderOrientationContext
|
|
24
|
-
} from "./constants";
|
|
25
|
-
import {
|
|
26
|
-
convertValueToPercentage,
|
|
27
|
-
getClosestValueIndex,
|
|
28
|
-
getDecimalCount,
|
|
29
|
-
getLabel,
|
|
30
|
-
getNextSortedValues,
|
|
31
|
-
getThumbInBoundsOffset,
|
|
32
|
-
hasMinStepsBetweenValues,
|
|
33
|
-
linearScale,
|
|
34
|
-
roundValue
|
|
35
|
-
} from "./helpers";
|
|
36
|
-
import { SliderFrame, SliderImpl } from "./SliderImpl";
|
|
37
|
-
const SliderHorizontal = React.forwardRef(
|
|
38
|
-
(props, forwardedRef) => {
|
|
39
|
-
const { min, max, dir, onSlideStart, onSlideMove, onStepKeyDown, ...sliderProps } = props;
|
|
40
|
-
const direction = useDirection(dir);
|
|
41
|
-
const isDirectionLTR = direction === "ltr";
|
|
42
|
-
const sliderRef = React.useRef(null);
|
|
43
|
-
const [state, setState] = React.useState(() => ({ size: 0, offset: 0 }));
|
|
44
|
-
function getValueFromPointer(pointerPosition) {
|
|
45
|
-
const input = [0, state.size];
|
|
46
|
-
const output = isDirectionLTR ? [min, max] : [max, min];
|
|
47
|
-
const value = linearScale(input, output);
|
|
48
|
-
return value(pointerPosition);
|
|
49
|
-
}
|
|
50
|
-
return /* @__PURE__ */ jsx(
|
|
51
|
-
SliderOrientationProvider,
|
|
52
|
-
{
|
|
53
|
-
scope: props.__scopeSlider,
|
|
54
|
-
startEdge: isDirectionLTR ? "left" : "right",
|
|
55
|
-
endEdge: isDirectionLTR ? "right" : "left",
|
|
56
|
-
direction: isDirectionLTR ? 1 : -1,
|
|
57
|
-
sizeProp: "width",
|
|
58
|
-
size: state.size,
|
|
59
|
-
children: /* @__PURE__ */ jsx(
|
|
60
|
-
SliderImpl,
|
|
61
|
-
{
|
|
62
|
-
ref: composeRefs(forwardedRef, sliderRef),
|
|
63
|
-
dir: direction,
|
|
64
|
-
...sliderProps,
|
|
65
|
-
orientation: "horizontal",
|
|
66
|
-
onLayout: () => {
|
|
67
|
-
var _a;
|
|
68
|
-
(_a = sliderRef.current) == null ? void 0 : _a.measure((_x, _y, width, _height, pageX, _pageY) => {
|
|
69
|
-
setState({
|
|
70
|
-
size: width,
|
|
71
|
-
offset: pageX
|
|
72
|
-
});
|
|
73
|
-
});
|
|
74
|
-
},
|
|
75
|
-
onSlideStart: (event, target) => {
|
|
76
|
-
const value = getValueFromPointer(event.nativeEvent.locationX);
|
|
77
|
-
if (value) {
|
|
78
|
-
onSlideStart == null ? void 0 : onSlideStart(value, target);
|
|
79
|
-
}
|
|
80
|
-
},
|
|
81
|
-
onSlideMove: (event) => {
|
|
82
|
-
const value = getValueFromPointer(event.nativeEvent.pageX - state.offset);
|
|
83
|
-
if (value) {
|
|
84
|
-
onSlideMove == null ? void 0 : onSlideMove(value);
|
|
85
|
-
}
|
|
86
|
-
},
|
|
87
|
-
onSlideEnd: () => {
|
|
88
|
-
},
|
|
89
|
-
onStepKeyDown: (event) => {
|
|
90
|
-
const isBackKey = BACK_KEYS[direction].includes(event.key);
|
|
91
|
-
onStepKeyDown == null ? void 0 : onStepKeyDown({ event, direction: isBackKey ? -1 : 1 });
|
|
92
|
-
}
|
|
93
|
-
}
|
|
94
|
-
)
|
|
95
|
-
}
|
|
96
|
-
);
|
|
97
|
-
}
|
|
98
|
-
);
|
|
99
|
-
const SliderVertical = React.forwardRef(
|
|
100
|
-
(props, forwardedRef) => {
|
|
101
|
-
const { min, max, onSlideStart, onSlideMove, onStepKeyDown, ...sliderProps } = props;
|
|
102
|
-
const [state, setState] = React.useState(() => ({ size: 0, offset: 0 }));
|
|
103
|
-
const sliderRef = React.useRef(null);
|
|
104
|
-
function getValueFromPointer(pointerPosition) {
|
|
105
|
-
const input = [0, state.size];
|
|
106
|
-
const output = [max, min];
|
|
107
|
-
const value = linearScale(input, output);
|
|
108
|
-
return value(pointerPosition);
|
|
109
|
-
}
|
|
110
|
-
return /* @__PURE__ */ jsx(
|
|
111
|
-
SliderOrientationProvider,
|
|
112
|
-
{
|
|
113
|
-
scope: props.__scopeSlider,
|
|
114
|
-
startEdge: "bottom",
|
|
115
|
-
endEdge: "top",
|
|
116
|
-
sizeProp: "height",
|
|
117
|
-
size: state.size,
|
|
118
|
-
direction: 1,
|
|
119
|
-
children: /* @__PURE__ */ jsx(
|
|
120
|
-
SliderImpl,
|
|
121
|
-
{
|
|
122
|
-
ref: composeRefs(forwardedRef, sliderRef),
|
|
123
|
-
...sliderProps,
|
|
124
|
-
orientation: "vertical",
|
|
125
|
-
onLayout: ({ nativeEvent: { layout } }) => {
|
|
126
|
-
var _a;
|
|
127
|
-
(_a = sliderRef.current) == null ? void 0 : _a.measure((_x, _y, _width, height, _pageX, pageY) => {
|
|
128
|
-
setState({
|
|
129
|
-
size: height,
|
|
130
|
-
offset: pageY
|
|
131
|
-
});
|
|
132
|
-
});
|
|
133
|
-
},
|
|
134
|
-
onSlideStart: (event, target) => {
|
|
135
|
-
const value = getValueFromPointer(event.nativeEvent.locationY);
|
|
136
|
-
if (value) {
|
|
137
|
-
onSlideStart == null ? void 0 : onSlideStart(value, target);
|
|
138
|
-
}
|
|
139
|
-
},
|
|
140
|
-
onSlideMove: (event) => {
|
|
141
|
-
const value = getValueFromPointer(event.nativeEvent.pageY - state.offset);
|
|
142
|
-
if (value) {
|
|
143
|
-
onSlideMove == null ? void 0 : onSlideMove(value);
|
|
144
|
-
}
|
|
145
|
-
},
|
|
146
|
-
onSlideEnd: () => {
|
|
147
|
-
},
|
|
148
|
-
onStepKeyDown: (event) => {
|
|
149
|
-
const isBackKey = BACK_KEYS.ltr.includes(event.key);
|
|
150
|
-
onStepKeyDown == null ? void 0 : onStepKeyDown({ event, direction: isBackKey ? -1 : 1 });
|
|
151
|
-
}
|
|
152
|
-
}
|
|
153
|
-
)
|
|
154
|
-
}
|
|
155
|
-
);
|
|
156
|
-
}
|
|
157
|
-
);
|
|
158
|
-
const TRACK_NAME = "SliderTrack";
|
|
159
|
-
const SliderTrackFrame = styled(SliderFrame, {
|
|
160
|
-
name: "SliderTrack",
|
|
161
|
-
height: "100%",
|
|
162
|
-
width: "100%",
|
|
163
|
-
backgroundColor: "$background",
|
|
164
|
-
position: "relative",
|
|
165
|
-
borderRadius: 1e5,
|
|
166
|
-
overflow: "hidden"
|
|
167
|
-
});
|
|
168
|
-
const SliderTrack = React.forwardRef(
|
|
169
|
-
(props, forwardedRef) => {
|
|
170
|
-
const { __scopeSlider, ...trackProps } = props;
|
|
171
|
-
const context = useSliderContext(TRACK_NAME, __scopeSlider);
|
|
172
|
-
return /* @__PURE__ */ jsx(
|
|
173
|
-
SliderTrackFrame,
|
|
174
|
-
{
|
|
175
|
-
"data-disabled": context.disabled ? "" : void 0,
|
|
176
|
-
"data-orientation": context.orientation,
|
|
177
|
-
orientation: context.orientation,
|
|
178
|
-
size: context.size,
|
|
179
|
-
...trackProps,
|
|
180
|
-
ref: forwardedRef
|
|
181
|
-
}
|
|
182
|
-
);
|
|
183
|
-
}
|
|
184
|
-
);
|
|
185
|
-
SliderTrack.displayName = TRACK_NAME;
|
|
186
|
-
const RANGE_NAME = "SliderTrackActive";
|
|
187
|
-
const SliderTrackActiveFrame = styled(SliderFrame, {
|
|
188
|
-
name: "SliderTrackActive",
|
|
189
|
-
backgroundColor: "$background",
|
|
190
|
-
position: "absolute"
|
|
191
|
-
});
|
|
192
|
-
const SliderTrackActive = React.forwardRef(
|
|
193
|
-
(props, forwardedRef) => {
|
|
194
|
-
const { __scopeSlider, ...rangeProps } = props;
|
|
195
|
-
const context = useSliderContext(RANGE_NAME, __scopeSlider);
|
|
196
|
-
const orientation = useSliderOrientationContext(RANGE_NAME, __scopeSlider);
|
|
197
|
-
const ref = React.useRef(null);
|
|
198
|
-
const composedRefs = useComposedRefs(forwardedRef, ref);
|
|
199
|
-
const valuesCount = context.values.length;
|
|
200
|
-
const percentages = context.values.map(
|
|
201
|
-
(value) => convertValueToPercentage(value, context.min, context.max)
|
|
202
|
-
);
|
|
203
|
-
const offsetStart = valuesCount > 1 ? Math.min(...percentages) : 0;
|
|
204
|
-
const offsetEnd = 100 - Math.max(...percentages);
|
|
205
|
-
return /* @__PURE__ */ jsx(
|
|
206
|
-
SliderTrackActiveFrame,
|
|
207
|
-
{
|
|
208
|
-
orientation: context.orientation,
|
|
209
|
-
"data-orientation": context.orientation,
|
|
210
|
-
"data-disabled": context.disabled ? "" : void 0,
|
|
211
|
-
size: context.size,
|
|
212
|
-
...rangeProps,
|
|
213
|
-
ref: composedRefs,
|
|
214
|
-
...{
|
|
215
|
-
[orientation.startEdge]: `${offsetStart}%`,
|
|
216
|
-
[orientation.endEdge]: `${offsetEnd}%`
|
|
217
|
-
},
|
|
218
|
-
...orientation.sizeProp === "width" ? {
|
|
219
|
-
height: "100%"
|
|
220
|
-
} : {
|
|
221
|
-
left: 0,
|
|
222
|
-
right: 0
|
|
223
|
-
}
|
|
224
|
-
}
|
|
225
|
-
);
|
|
226
|
-
}
|
|
227
|
-
);
|
|
228
|
-
SliderTrackActive.displayName = RANGE_NAME;
|
|
229
|
-
const THUMB_NAME = "SliderThumb";
|
|
230
|
-
const getThumbSize = (val) => {
|
|
231
|
-
const size = typeof val === "number" ? val : getSize(val, -1);
|
|
232
|
-
return {
|
|
233
|
-
width: size,
|
|
234
|
-
height: size,
|
|
235
|
-
minWidth: size,
|
|
236
|
-
minHeight: size
|
|
237
|
-
};
|
|
238
|
-
};
|
|
239
|
-
const SliderThumbFrame = styled(ThemeableStack, {
|
|
240
|
-
name: "SliderThumb",
|
|
241
|
-
position: "absolute",
|
|
242
|
-
bordered: 2,
|
|
243
|
-
borderWidth: 2,
|
|
244
|
-
backgrounded: true,
|
|
245
|
-
pressTheme: isWeb,
|
|
246
|
-
focusTheme: isWeb,
|
|
247
|
-
hoverTheme: isWeb,
|
|
248
|
-
variants: {
|
|
249
|
-
size: {
|
|
250
|
-
"...size": getThumbSize
|
|
251
|
-
}
|
|
252
|
-
}
|
|
253
|
-
});
|
|
254
|
-
const SliderThumb = React.forwardRef(
|
|
255
|
-
(props, forwardedRef) => {
|
|
256
|
-
const { __scopeSlider, index, size: sizeProp, ...thumbProps } = props;
|
|
257
|
-
const context = useSliderContext(THUMB_NAME, __scopeSlider);
|
|
258
|
-
const orientation = useSliderOrientationContext(THUMB_NAME, __scopeSlider);
|
|
259
|
-
const [thumb, setThumb] = React.useState(null);
|
|
260
|
-
const composedRefs = useComposedRefs(forwardedRef, (node) => setThumb(node));
|
|
261
|
-
const value = context.values[index];
|
|
262
|
-
const percent = value === void 0 ? 0 : convertValueToPercentage(value, context.min, context.max);
|
|
263
|
-
const label = getLabel(index, context.values.length);
|
|
264
|
-
const sizeIn = sizeProp ?? context.size ?? "$true";
|
|
265
|
-
const [size, setSize] = React.useState(() => {
|
|
266
|
-
const estimatedSize = getVariableValue(getThumbSize(sizeIn).width);
|
|
267
|
-
return estimatedSize;
|
|
268
|
-
});
|
|
269
|
-
const thumbInBoundsOffset = size ? getThumbInBoundsOffset(size, percent, orientation.direction) : 0;
|
|
270
|
-
React.useEffect(() => {
|
|
271
|
-
if (thumb) {
|
|
272
|
-
context.thumbs.add(thumb);
|
|
273
|
-
return () => {
|
|
274
|
-
context.thumbs.delete(thumb);
|
|
275
|
-
};
|
|
276
|
-
}
|
|
277
|
-
}, [thumb, context.thumbs]);
|
|
278
|
-
return /* @__PURE__ */ jsx(
|
|
279
|
-
SliderThumbFrame,
|
|
280
|
-
{
|
|
281
|
-
ref: composedRefs,
|
|
282
|
-
role: "slider",
|
|
283
|
-
"aria-label": props["aria-label"] || label,
|
|
284
|
-
"aria-valuemin": context.min,
|
|
285
|
-
"aria-valuenow": value,
|
|
286
|
-
"aria-valuemax": context.max,
|
|
287
|
-
"aria-orientation": context.orientation,
|
|
288
|
-
"data-orientation": context.orientation,
|
|
289
|
-
"data-disabled": context.disabled ? "" : void 0,
|
|
290
|
-
tabIndex: context.disabled ? void 0 : 0,
|
|
291
|
-
animateOnly: ["transform", "left", "right", "top", "bottom"],
|
|
292
|
-
...thumbProps,
|
|
293
|
-
...context.orientation === "horizontal" ? {
|
|
294
|
-
x: thumbInBoundsOffset - size / 2,
|
|
295
|
-
y: -size / 2,
|
|
296
|
-
top: "50%",
|
|
297
|
-
...size === 0 && {
|
|
298
|
-
top: "auto",
|
|
299
|
-
bottom: "auto"
|
|
300
|
-
}
|
|
301
|
-
} : {
|
|
302
|
-
x: -size / 2,
|
|
303
|
-
y: size / 2,
|
|
304
|
-
left: "50%",
|
|
305
|
-
...size === 0 && {
|
|
306
|
-
left: "auto",
|
|
307
|
-
right: "auto"
|
|
308
|
-
}
|
|
309
|
-
},
|
|
310
|
-
...{
|
|
311
|
-
[orientation.startEdge]: `${percent}%`
|
|
312
|
-
},
|
|
313
|
-
size: sizeIn,
|
|
314
|
-
onLayout: (e) => {
|
|
315
|
-
setSize(e.nativeEvent.layout[orientation.sizeProp]);
|
|
316
|
-
},
|
|
317
|
-
onFocus: composeEventHandlers(props.onFocus, () => {
|
|
318
|
-
context.valueIndexToChangeRef.current = index;
|
|
319
|
-
})
|
|
320
|
-
}
|
|
321
|
-
);
|
|
322
|
-
}
|
|
323
|
-
);
|
|
324
|
-
SliderThumb.displayName = THUMB_NAME;
|
|
325
|
-
const Slider = withStaticProperties(
|
|
326
|
-
React.forwardRef((props, forwardedRef) => {
|
|
327
|
-
const {
|
|
328
|
-
name,
|
|
329
|
-
min = 0,
|
|
330
|
-
max = 100,
|
|
331
|
-
step = 1,
|
|
332
|
-
orientation = "horizontal",
|
|
333
|
-
disabled = false,
|
|
334
|
-
minStepsBetweenThumbs = 0,
|
|
335
|
-
defaultValue = [min],
|
|
336
|
-
value,
|
|
337
|
-
onValueChange = () => {
|
|
338
|
-
},
|
|
339
|
-
size: sizeProp,
|
|
340
|
-
...sliderProps
|
|
341
|
-
} = props;
|
|
342
|
-
const sliderRef = React.useRef(null);
|
|
343
|
-
const composedRefs = useComposedRefs(sliderRef, forwardedRef);
|
|
344
|
-
const thumbRefs = React.useRef(/* @__PURE__ */ new Set());
|
|
345
|
-
const valueIndexToChangeRef = React.useRef(0);
|
|
346
|
-
const isHorizontal = orientation === "horizontal";
|
|
347
|
-
const [values = [], setValues] = useControllableState({
|
|
348
|
-
prop: value,
|
|
349
|
-
defaultProp: defaultValue,
|
|
350
|
-
transition: true,
|
|
351
|
-
onChange: (value2) => {
|
|
352
|
-
var _a;
|
|
353
|
-
if (isWeb) {
|
|
354
|
-
const thumbs = [...thumbRefs.current];
|
|
355
|
-
(_a = thumbs[valueIndexToChangeRef.current]) == null ? void 0 : _a.focus();
|
|
356
|
-
}
|
|
357
|
-
onValueChange(value2);
|
|
358
|
-
}
|
|
359
|
-
});
|
|
360
|
-
if (isWeb) {
|
|
361
|
-
React.useEffect(() => {
|
|
362
|
-
const node = sliderRef.current;
|
|
363
|
-
if (!node)
|
|
364
|
-
return;
|
|
365
|
-
const preventDefault = (e) => {
|
|
366
|
-
e.preventDefault();
|
|
367
|
-
};
|
|
368
|
-
node.addEventListener("touchstart", preventDefault);
|
|
369
|
-
return () => {
|
|
370
|
-
node.removeEventListener("touchstart", preventDefault);
|
|
371
|
-
};
|
|
372
|
-
}, []);
|
|
373
|
-
}
|
|
374
|
-
function handleSlideMove(value2) {
|
|
375
|
-
updateValues(value2, valueIndexToChangeRef.current);
|
|
376
|
-
}
|
|
377
|
-
function updateValues(value2, atIndex) {
|
|
378
|
-
const decimalCount = getDecimalCount(step);
|
|
379
|
-
const snapToStep = roundValue(
|
|
380
|
-
Math.round((value2 - min) / step) * step + min,
|
|
381
|
-
decimalCount
|
|
382
|
-
);
|
|
383
|
-
const nextValue = clamp(snapToStep, [min, max]);
|
|
384
|
-
setValues((prevValues = []) => {
|
|
385
|
-
const nextValues = getNextSortedValues(prevValues, nextValue, atIndex);
|
|
386
|
-
if (hasMinStepsBetweenValues(nextValues, minStepsBetweenThumbs * step)) {
|
|
387
|
-
valueIndexToChangeRef.current = nextValues.indexOf(nextValue);
|
|
388
|
-
return String(nextValues) === String(prevValues) ? prevValues : nextValues;
|
|
389
|
-
} else {
|
|
390
|
-
return prevValues;
|
|
391
|
-
}
|
|
392
|
-
});
|
|
393
|
-
}
|
|
394
|
-
const SliderOriented = isHorizontal ? SliderHorizontal : SliderVertical;
|
|
395
|
-
return /* @__PURE__ */ jsx(
|
|
396
|
-
SliderProvider,
|
|
397
|
-
{
|
|
398
|
-
scope: props.__scopeSlider,
|
|
399
|
-
disabled,
|
|
400
|
-
min,
|
|
401
|
-
max,
|
|
402
|
-
valueIndexToChangeRef,
|
|
403
|
-
thumbs: thumbRefs.current,
|
|
404
|
-
values,
|
|
405
|
-
orientation,
|
|
406
|
-
size: sizeProp,
|
|
407
|
-
children: /* @__PURE__ */ jsx(
|
|
408
|
-
SliderOriented,
|
|
409
|
-
{
|
|
410
|
-
"aria-disabled": disabled,
|
|
411
|
-
"data-disabled": disabled ? "" : void 0,
|
|
412
|
-
...sliderProps,
|
|
413
|
-
ref: composedRefs,
|
|
414
|
-
min,
|
|
415
|
-
max,
|
|
416
|
-
onSlideStart: disabled ? void 0 : (value2, target) => {
|
|
417
|
-
if (target !== "thumb") {
|
|
418
|
-
const closestIndex = getClosestValueIndex(values, value2);
|
|
419
|
-
updateValues(value2, closestIndex);
|
|
420
|
-
}
|
|
421
|
-
},
|
|
422
|
-
onSlideMove: disabled ? void 0 : handleSlideMove,
|
|
423
|
-
onHomeKeyDown: () => !disabled && updateValues(min, 0),
|
|
424
|
-
onEndKeyDown: () => !disabled && updateValues(max, values.length - 1),
|
|
425
|
-
onStepKeyDown: ({ event, direction: stepDirection }) => {
|
|
426
|
-
if (!disabled) {
|
|
427
|
-
const isPageKey = PAGE_KEYS.includes(event.key);
|
|
428
|
-
const isSkipKey = isPageKey || event.shiftKey && ARROW_KEYS.includes(event.key);
|
|
429
|
-
const multiplier = isSkipKey ? 10 : 1;
|
|
430
|
-
const atIndex = valueIndexToChangeRef.current;
|
|
431
|
-
const value2 = values[atIndex];
|
|
432
|
-
const stepInDirection = step * multiplier * stepDirection;
|
|
433
|
-
updateValues(value2 + stepInDirection, atIndex);
|
|
434
|
-
}
|
|
435
|
-
}
|
|
436
|
-
}
|
|
437
|
-
)
|
|
438
|
-
}
|
|
439
|
-
);
|
|
440
|
-
}),
|
|
441
|
-
{
|
|
442
|
-
Track: SliderTrack,
|
|
443
|
-
TrackActive: SliderTrackActive,
|
|
444
|
-
Thumb: SliderThumb
|
|
445
|
-
}
|
|
446
|
-
);
|
|
447
|
-
Slider.displayName = SLIDER_NAME;
|
|
448
|
-
const Track = SliderTrack;
|
|
449
|
-
const Range = SliderTrackActive;
|
|
450
|
-
const Thumb = SliderThumb;
|
|
451
|
-
export {
|
|
452
|
-
Range,
|
|
453
|
-
Slider,
|
|
454
|
-
SliderThumb,
|
|
455
|
-
SliderThumbFrame,
|
|
456
|
-
SliderTrack,
|
|
457
|
-
SliderTrackActive,
|
|
458
|
-
SliderTrackActiveFrame,
|
|
459
|
-
SliderTrackFrame,
|
|
460
|
-
Thumb,
|
|
461
|
-
Track
|
|
462
|
-
};
|
|
1
|
+
import{jsx as z}from"react/jsx-runtime";import{composeRefs as F,useComposedRefs as M}from"@tamagui/compose-refs";import{getVariableValue as ee,isWeb as R,styled as I,withStaticProperties as te}from"@tamagui/core";import{getSize as oe}from"@tamagui/get-size";import{clamp as re,composeEventHandlers as ie}from"@tamagui/helpers";import{ThemeableStack as ne}from"@tamagui/stacks";import{useControllableState as se}from"@tamagui/use-controllable-state";import{useDirection as ae}from"@tamagui/use-direction";import*as d from"react";import{ARROW_KEYS as de,BACK_KEYS as B,PAGE_KEYS as le,SLIDER_NAME as ce,SliderOrientationProvider as Y,SliderProvider as ue,useSliderContext as H,useSliderOrientationContext as $}from"./constants";import{convertValueToPercentage as G,getClosestValueIndex as me,getDecimalCount as pe,getLabel as fe,getNextSortedValues as Se,getThumbInBoundsOffset as he,hasMinStepsBetweenValues as be,linearScale as W,roundValue as ve}from"./helpers";import{SliderFrame as X,SliderImpl as U}from"./SliderImpl";const Pe=d.forwardRef((r,c)=>{const{min:S,max:i,dir:t,onSlideStart:a,onSlideMove:e,onStepKeyDown:n,...p}=r,P=ae(t),h=P==="ltr",b=d.useRef(null),[s,l]=d.useState(()=>({size:0,offset:0}));function v(o){const m=[0,s.size];return W(m,h?[S,i]:[i,S])(o)}return z(Y,{scope:r.__scopeSlider,startEdge:h?"left":"right",endEdge:h?"right":"left",direction:h?1:-1,sizeProp:"width",size:s.size,children:z(U,{ref:F(c,b),dir:P,...p,orientation:"horizontal",onLayout:()=>{var o;(o=b.current)==null||o.measure((m,f,T,w,K,L)=>{l({size:T,offset:K})})},onSlideStart:(o,m)=>{const f=v(o.nativeEvent.locationX);f&&(a==null||a(f,m))},onSlideMove:o=>{const m=v(o.nativeEvent.pageX-s.offset);m&&(e==null||e(m))},onSlideEnd:()=>{},onStepKeyDown:o=>{const m=B[P].includes(o.key);n==null||n({event:o,direction:m?-1:1})}})})}),ge=d.forwardRef((r,c)=>{const{min:S,max:i,onSlideStart:t,onSlideMove:a,onStepKeyDown:e,...n}=r,[p,P]=d.useState(()=>({size:0,offset:0})),h=d.useRef(null);function b(s){const l=[0,p.size];return W(l,[i,S])(s)}return z(Y,{scope:r.__scopeSlider,startEdge:"bottom",endEdge:"top",sizeProp:"height",size:p.size,direction:1,children:z(U,{ref:F(c,h),...n,orientation:"vertical",onLayout:({nativeEvent:{layout:s}})=>{var l;(l=h.current)==null||l.measure((v,o,m,f,T,w)=>{P({size:f,offset:w})})},onSlideStart:(s,l)=>{const v=b(s.nativeEvent.locationY);v&&(t==null||t(v,l))},onSlideMove:s=>{const l=b(s.nativeEvent.pageY-p.offset);l&&(a==null||a(l))},onSlideEnd:()=>{},onStepKeyDown:s=>{const l=B.ltr.includes(s.key);e==null||e({event:s,direction:l?-1:1})}})})}),j="SliderTrack",Te=I(X,{name:"SliderTrack",height:"100%",width:"100%",backgroundColor:"$background",position:"relative",borderRadius:1e5,overflow:"hidden"}),_=d.forwardRef((r,c)=>{const{__scopeSlider:S,...i}=r,t=H(j,S);return z(Te,{"data-disabled":t.disabled?"":void 0,"data-orientation":t.orientation,orientation:t.orientation,size:t.size,...i,ref:c})});_.displayName=j;const O="SliderTrackActive",ze=I(X,{name:"SliderTrackActive",backgroundColor:"$background",position:"absolute"}),A=d.forwardRef((r,c)=>{const{__scopeSlider:S,...i}=r,t=H(O,S),a=$(O,S),e=d.useRef(null),n=M(c,e),p=t.values.length,P=t.values.map(s=>G(s,t.min,t.max)),h=p>1?Math.min(...P):0,b=100-Math.max(...P);return z(ze,{orientation:t.orientation,"data-orientation":t.orientation,"data-disabled":t.disabled?"":void 0,size:t.size,...i,ref:n,[a.startEdge]:`${h}%`,[a.endEdge]:`${b}%`,...a.sizeProp==="width"?{height:"100%"}:{left:0,right:0}})});A.displayName=O;const D="SliderThumb",q=r=>{const c=typeof r=="number"?r:oe(r,-1);return{width:c,height:c,minWidth:c,minHeight:c}},we=I(ne,{name:"SliderThumb",position:"absolute",bordered:2,borderWidth:2,backgrounded:!0,pressTheme:R,focusTheme:R,hoverTheme:R,variants:{size:{"...size":q}}}),C=d.forwardRef((r,c)=>{const{__scopeSlider:S,index:i,size:t,...a}=r,e=H(D,S),n=$(D,S),[p,P]=d.useState(null),h=M(c,T=>P(T)),b=e.values[i],s=b===void 0?0:G(b,e.min,e.max),l=fe(i,e.values.length),v=t??e.size??"$true",[o,m]=d.useState(()=>ee(q(v).width)),f=o?he(o,s,n.direction):0;return d.useEffect(()=>{if(p)return e.thumbs.add(p),()=>{e.thumbs.delete(p)}},[p,e.thumbs]),z(we,{ref:h,role:"slider","aria-label":r["aria-label"]||l,"aria-valuemin":e.min,"aria-valuenow":b,"aria-valuemax":e.max,"aria-orientation":e.orientation,"data-orientation":e.orientation,"data-disabled":e.disabled?"":void 0,tabIndex:e.disabled?void 0:0,animateOnly:["transform","left","right","top","bottom"],...a,...e.orientation==="horizontal"?{x:f-o/2,y:-o/2,top:"50%",...o===0&&{top:"auto",bottom:"auto"}}:{x:-o/2,y:o/2,left:"50%",...o===0&&{left:"auto",right:"auto"}},[n.startEdge]:`${s}%`,size:v,onLayout:T=>{m(T.nativeEvent.layout[n.sizeProp])},onFocus:ie(r.onFocus,()=>{e.valueIndexToChangeRef.current=i})})});C.displayName=D;const J=te(d.forwardRef((r,c)=>{const{name:S,min:i=0,max:t=100,step:a=1,orientation:e="horizontal",disabled:n=!1,minStepsBetweenThumbs:p=0,defaultValue:P=[i],value:h,onValueChange:b=()=>{},size:s,...l}=r,v=d.useRef(null),o=M(v,c),m=d.useRef(new Set),f=d.useRef(0),T=e==="horizontal",[w=[],K]=se({prop:h,defaultProp:P,transition:!0,onChange:u=>{var g;R&&((g=[...m.current][f.current])==null||g.focus()),b(u)}});R&&d.useEffect(()=>{const u=v.current;if(!u)return;const g=k=>{k.preventDefault()};return u.addEventListener("touchstart",g),()=>{u.removeEventListener("touchstart",g)}},[]);function L(u){E(u,f.current)}function E(u,g){const k=pe(a),N=ve(Math.round((u-i)/a)*a+i,k),V=re(N,[i,t]);K((x=[])=>{const y=Se(x,V,g);return be(y,p*a)?(f.current=y.indexOf(V),String(y)===String(x)?x:y):x})}const Q=T?Pe:ge;return z(ue,{scope:r.__scopeSlider,disabled:n,min:i,max:t,valueIndexToChangeRef:f,thumbs:m.current,values:w,orientation:e,size:s,children:z(Q,{"aria-disabled":n,"data-disabled":n?"":void 0,...l,ref:o,min:i,max:t,onSlideStart:n?void 0:(u,g)=>{if(g!=="thumb"){const k=me(w,u);E(u,k)}},onSlideMove:n?void 0:L,onHomeKeyDown:()=>!n&&E(i,0),onEndKeyDown:()=>!n&&E(t,w.length-1),onStepKeyDown:({event:u,direction:g})=>{if(!n){const V=le.includes(u.key)||u.shiftKey&&de.includes(u.key)?10:1,x=f.current,y=w[x],Z=a*V*g;E(y+Z,x)}}})})}),{Track:_,TrackActive:A,Thumb:C});J.displayName=ce;const ke=_,xe=A,ye=C;export{xe as Range,J as Slider,C as SliderThumb,we as SliderThumbFrame,_ as SliderTrack,A as SliderTrackActive,ze as SliderTrackActiveFrame,Te as SliderTrackFrame,ye as Thumb,ke as Track};
|
|
463
2
|
//# sourceMappingURL=Slider.mjs.map
|
package/dist/esm/Slider.mjs.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 getVariableValue,\n isWeb,\n styled,\n withStaticProperties,\n} from '@tamagui/core'\nimport { getSize } from '@tamagui/get-size'\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 } =\n 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={({ nativeEvent: { layout } }) => {\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 bordered: 2,\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 } as const,\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 sizeIn = sizeProp ?? context.size ?? '$true'\n const [size, setSize] = React.useState(() => {\n // for SSR\n const estimatedSize = getVariableValue(getThumbSize(sizeIn).width) as number\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 animateOnly={['transform', 'left', 'right', 'top', 'bottom']}\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 {...{\n [orientation.startEdge]: `${percent}%`,\n }}\n size={sizeIn}\n onLayout={(e) => {\n setSize(e.nativeEvent.layout[orientation.sizeProp])\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 transition: true,\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(\n Math.round((value - min) / step) * step + min,\n decimalCount\n )\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 =\n 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": "AA+EQ
|
|
6
|
-
"names": ["value"]
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["jsx", "composeRefs", "useComposedRefs", "getVariableValue", "isWeb", "styled", "withStaticProperties", "getSize", "clamp", "composeEventHandlers", "ThemeableStack", "useControllableState", "useDirection", "React", "ARROW_KEYS", "BACK_KEYS", "PAGE_KEYS", "SLIDER_NAME", "SliderOrientationProvider", "SliderProvider", "useSliderContext", "useSliderOrientationContext", "convertValueToPercentage", "getClosestValueIndex", "getDecimalCount", "getLabel", "getNextSortedValues", "getThumbInBoundsOffset", "hasMinStepsBetweenValues", "linearScale", "roundValue", "SliderFrame", "SliderImpl", "SliderHorizontal", "props", "forwardedRef", "min", "max", "dir", "onSlideStart", "onSlideMove", "onStepKeyDown", "sliderProps", "direction", "isDirectionLTR", "sliderRef", "state", "setState", "getValueFromPointer", "pointerPosition", "input", "_a", "_x", "_y", "width", "_height", "pageX", "_pageY", "event", "target", "value", "isBackKey", "SliderVertical", "layout", "_width", "height", "_pageX", "pageY", "TRACK_NAME", "SliderTrackFrame", "SliderTrack", "__scopeSlider", "trackProps", "context", "RANGE_NAME", "SliderTrackActiveFrame", "SliderTrackActive", "rangeProps", "orientation", "ref", "composedRefs", "valuesCount", "percentages", "offsetStart", "offsetEnd", "THUMB_NAME", "getThumbSize", "val", "size", "SliderThumbFrame", "SliderThumb", "index", "sizeProp", "thumbProps", "thumb", "setThumb", "node", "percent", "label", "sizeIn", "setSize", "thumbInBoundsOffset", "e", "Slider", "name", "step", "disabled", "minStepsBetweenThumbs", "defaultValue", "onValueChange", "thumbRefs", "valueIndexToChangeRef", "isHorizontal", "values", "setValues", "preventDefault", "handleSlideMove", "updateValues", "atIndex", "decimalCount", "snapToStep", "nextValue", "prevValues", "nextValues", "SliderOriented", "closestIndex", "stepDirection", "multiplier", "stepInDirection", "Track", "Range", "Thumb"]
|
|
7
7
|
}
|