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