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