@tamagui/slider 1.0.1-beta.106 → 1.0.1-beta.109
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 +72 -106
- package/dist/cjs/Slider.js.map +1 -1
- package/dist/cjs/SliderImpl.js +23 -58
- package/dist/cjs/SliderImpl.js.map +1 -1
- package/dist/cjs/constants.js +1 -0
- package/dist/cjs/constants.js.map +1 -1
- package/dist/cjs/helpers.js +1 -0
- package/dist/cjs/helpers.js.map +1 -1
- package/dist/cjs/index.js +1 -0
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/types.js +1 -0
- package/dist/cjs/types.js.map +1 -1
- package/dist/esm/Slider.js +71 -108
- package/dist/esm/Slider.js.map +1 -1
- package/dist/esm/SliderImpl.js +22 -60
- package/dist/esm/SliderImpl.js.map +1 -1
- package/package.json +8 -8
- package/types/constants.d.ts +1 -0
- package/types/constants.d.ts.map +1 -1
package/dist/cjs/Slider.js
CHANGED
|
@@ -1,38 +1,10 @@
|
|
|
1
|
+
"use strict";
|
|
1
2
|
var __create = Object.create;
|
|
2
3
|
var __defProp = Object.defineProperty;
|
|
3
|
-
var __defProps = Object.defineProperties;
|
|
4
4
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
-
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
6
5
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
7
|
-
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
8
6
|
var __getProtoOf = Object.getPrototypeOf;
|
|
9
7
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
10
|
-
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
11
|
-
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
12
|
-
var __spreadValues = (a, b) => {
|
|
13
|
-
for (var prop in b || (b = {}))
|
|
14
|
-
if (__hasOwnProp.call(b, prop))
|
|
15
|
-
__defNormalProp(a, prop, b[prop]);
|
|
16
|
-
if (__getOwnPropSymbols)
|
|
17
|
-
for (var prop of __getOwnPropSymbols(b)) {
|
|
18
|
-
if (__propIsEnum.call(b, prop))
|
|
19
|
-
__defNormalProp(a, prop, b[prop]);
|
|
20
|
-
}
|
|
21
|
-
return a;
|
|
22
|
-
};
|
|
23
|
-
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
24
|
-
var __objRest = (source, exclude) => {
|
|
25
|
-
var target = {};
|
|
26
|
-
for (var prop in source)
|
|
27
|
-
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
28
|
-
target[prop] = source[prop];
|
|
29
|
-
if (source != null && __getOwnPropSymbols)
|
|
30
|
-
for (var prop of __getOwnPropSymbols(source)) {
|
|
31
|
-
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
32
|
-
target[prop] = source[prop];
|
|
33
|
-
}
|
|
34
|
-
return target;
|
|
35
|
-
};
|
|
36
8
|
var __export = (target, all) => {
|
|
37
9
|
for (var name in all)
|
|
38
10
|
__defProp(target, name, { get: all[name], enumerable: true });
|
|
@@ -72,7 +44,7 @@ var import_constants = require("./constants");
|
|
|
72
44
|
var import_helpers2 = require("./helpers");
|
|
73
45
|
var import_SliderImpl = require("./SliderImpl");
|
|
74
46
|
const SliderHorizontal = React.forwardRef((props, forwardedRef) => {
|
|
75
|
-
const
|
|
47
|
+
const { min, max, dir, onSlideStart, onSlideMove, onStepKeyDown, ...sliderProps } = props;
|
|
76
48
|
const direction = (0, import_use_direction.useDirection)(dir);
|
|
77
49
|
const isDirectionLTR = direction === "ltr";
|
|
78
50
|
const sliderRef = React.useRef(null);
|
|
@@ -90,14 +62,14 @@ const SliderHorizontal = React.forwardRef((props, forwardedRef) => {
|
|
|
90
62
|
direction: isDirectionLTR ? 1 : -1,
|
|
91
63
|
sizeProp: "width",
|
|
92
64
|
size: state.size
|
|
93
|
-
}, /* @__PURE__ */ React.createElement(import_SliderImpl.SliderImpl,
|
|
65
|
+
}, /* @__PURE__ */ React.createElement(import_SliderImpl.SliderImpl, {
|
|
94
66
|
ref: (0, import_compose_refs.composeRefs)(forwardedRef, sliderRef),
|
|
95
|
-
dir: direction
|
|
96
|
-
|
|
67
|
+
dir: direction,
|
|
68
|
+
...sliderProps,
|
|
97
69
|
orientation: "horizontal",
|
|
98
70
|
onLayout: () => {
|
|
99
|
-
var
|
|
100
|
-
(
|
|
71
|
+
var _a;
|
|
72
|
+
(_a = sliderRef.current) == null ? void 0 : _a.measure((_x, _y, width, _height, pageX, _pageY) => {
|
|
101
73
|
setState({
|
|
102
74
|
size: width,
|
|
103
75
|
offset: pageX
|
|
@@ -122,10 +94,10 @@ const SliderHorizontal = React.forwardRef((props, forwardedRef) => {
|
|
|
122
94
|
const isBackKey = import_constants.BACK_KEYS[direction].includes(event.key);
|
|
123
95
|
onStepKeyDown == null ? void 0 : onStepKeyDown({ event, direction: isBackKey ? -1 : 1 });
|
|
124
96
|
}
|
|
125
|
-
}))
|
|
97
|
+
}));
|
|
126
98
|
});
|
|
127
99
|
const SliderVertical = React.forwardRef((props, forwardedRef) => {
|
|
128
|
-
const
|
|
100
|
+
const { min, max, onSlideStart, onSlideMove, onStepKeyDown, ...sliderProps } = props;
|
|
129
101
|
const [state, setState] = React.useState(() => ({ size: 0, offset: 0 }));
|
|
130
102
|
const sliderRef = React.useRef(null);
|
|
131
103
|
function getValueFromPointer(pointerPosition) {
|
|
@@ -141,13 +113,13 @@ const SliderVertical = React.forwardRef((props, forwardedRef) => {
|
|
|
141
113
|
sizeProp: "height",
|
|
142
114
|
size: state.size,
|
|
143
115
|
direction: 1
|
|
144
|
-
}, /* @__PURE__ */ React.createElement(import_SliderImpl.SliderImpl,
|
|
145
|
-
ref: (0, import_compose_refs.composeRefs)(forwardedRef, sliderRef)
|
|
146
|
-
|
|
116
|
+
}, /* @__PURE__ */ React.createElement(import_SliderImpl.SliderImpl, {
|
|
117
|
+
ref: (0, import_compose_refs.composeRefs)(forwardedRef, sliderRef),
|
|
118
|
+
...sliderProps,
|
|
147
119
|
orientation: "vertical",
|
|
148
120
|
onLayout: () => {
|
|
149
|
-
var
|
|
150
|
-
(
|
|
121
|
+
var _a;
|
|
122
|
+
(_a = sliderRef.current) == null ? void 0 : _a.measure((_x, _y, _width, height, _pageX, pageY) => {
|
|
151
123
|
setState({
|
|
152
124
|
size: height,
|
|
153
125
|
offset: pageY
|
|
@@ -172,7 +144,7 @@ const SliderVertical = React.forwardRef((props, forwardedRef) => {
|
|
|
172
144
|
const isBackKey = import_constants.BACK_KEYS.ltr.includes(event.key);
|
|
173
145
|
onStepKeyDown == null ? void 0 : onStepKeyDown({ event, direction: isBackKey ? -1 : 1 });
|
|
174
146
|
}
|
|
175
|
-
}))
|
|
147
|
+
}));
|
|
176
148
|
});
|
|
177
149
|
const TRACK_NAME = "SliderTrack";
|
|
178
150
|
const SliderTrackFrame = (0, import_core.styled)(import_SliderImpl.SliderFrame, {
|
|
@@ -185,16 +157,16 @@ const SliderTrackFrame = (0, import_core.styled)(import_SliderImpl.SliderFrame,
|
|
|
185
157
|
overflow: "hidden"
|
|
186
158
|
});
|
|
187
159
|
const SliderTrack = React.forwardRef((props, forwardedRef) => {
|
|
188
|
-
const
|
|
160
|
+
const { __scopeSlider, ...trackProps } = props;
|
|
189
161
|
const context = (0, import_constants.useSliderContext)(TRACK_NAME, __scopeSlider);
|
|
190
|
-
return /* @__PURE__ */ React.createElement(SliderTrackFrame,
|
|
162
|
+
return /* @__PURE__ */ React.createElement(SliderTrackFrame, {
|
|
191
163
|
"data-disabled": context.disabled ? "" : void 0,
|
|
192
164
|
"data-orientation": context.orientation,
|
|
193
165
|
orientation: context.orientation,
|
|
194
|
-
size: context.size
|
|
195
|
-
|
|
166
|
+
size: context.size,
|
|
167
|
+
...trackProps,
|
|
196
168
|
ref: forwardedRef
|
|
197
|
-
})
|
|
169
|
+
});
|
|
198
170
|
});
|
|
199
171
|
SliderTrack.displayName = TRACK_NAME;
|
|
200
172
|
const RANGE_NAME = "SliderTrackActive";
|
|
@@ -204,7 +176,7 @@ const SliderTrackActiveFrame = (0, import_core.styled)(import_SliderImpl.SliderF
|
|
|
204
176
|
position: "absolute"
|
|
205
177
|
});
|
|
206
178
|
const SliderTrackActive = React.forwardRef((props, forwardedRef) => {
|
|
207
|
-
const
|
|
179
|
+
const { __scopeSlider, ...rangeProps } = props;
|
|
208
180
|
const context = (0, import_constants.useSliderContext)(RANGE_NAME, __scopeSlider);
|
|
209
181
|
const orientation = (0, import_constants.useSliderOrientationContext)(RANGE_NAME, __scopeSlider);
|
|
210
182
|
const ref = React.useRef(null);
|
|
@@ -213,22 +185,24 @@ const SliderTrackActive = React.forwardRef((props, forwardedRef) => {
|
|
|
213
185
|
const percentages = context.values.map((value) => (0, import_helpers2.convertValueToPercentage)(value, context.min, context.max));
|
|
214
186
|
const offsetStart = valuesCount > 1 ? Math.min(...percentages) : 0;
|
|
215
187
|
const offsetEnd = 100 - Math.max(...percentages);
|
|
216
|
-
return /* @__PURE__ */ React.createElement(SliderTrackActiveFrame,
|
|
188
|
+
return /* @__PURE__ */ React.createElement(SliderTrackActiveFrame, {
|
|
217
189
|
orientation: context.orientation,
|
|
218
190
|
"data-orientation": context.orientation,
|
|
219
191
|
"data-disabled": context.disabled ? "" : void 0,
|
|
220
|
-
size: context.size
|
|
221
|
-
|
|
222
|
-
ref: composedRefs
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
192
|
+
size: context.size,
|
|
193
|
+
...rangeProps,
|
|
194
|
+
ref: composedRefs,
|
|
195
|
+
...{
|
|
196
|
+
[orientation.startEdge]: offsetStart + "%",
|
|
197
|
+
[orientation.endEdge]: offsetEnd + "%"
|
|
198
|
+
},
|
|
199
|
+
...orientation.sizeProp === "width" ? {
|
|
200
|
+
height: "100%"
|
|
201
|
+
} : {
|
|
202
|
+
left: 0,
|
|
203
|
+
right: 0
|
|
204
|
+
}
|
|
205
|
+
});
|
|
232
206
|
});
|
|
233
207
|
SliderTrackActive.displayName = RANGE_NAME;
|
|
234
208
|
const THUMB_NAME = "SliderThumb";
|
|
@@ -257,7 +231,7 @@ const SliderThumbFrame = (0, import_core.styled)(import_stacks.ThemeableStack, {
|
|
|
257
231
|
}
|
|
258
232
|
});
|
|
259
233
|
const SliderThumb = React.forwardRef((props, forwardedRef) => {
|
|
260
|
-
const
|
|
234
|
+
const { __scopeSlider, index, size: sizeProp, ...thumbProps } = props;
|
|
261
235
|
const context = (0, import_constants.useSliderContext)(THUMB_NAME, __scopeSlider);
|
|
262
236
|
const orientation = (0, import_constants.useSliderOrientationContext)(THUMB_NAME, __scopeSlider);
|
|
263
237
|
const [thumb, setThumb] = React.useState(null);
|
|
@@ -278,7 +252,7 @@ const SliderThumb = React.forwardRef((props, forwardedRef) => {
|
|
|
278
252
|
};
|
|
279
253
|
}
|
|
280
254
|
}, [thumb, context.thumbs]);
|
|
281
|
-
return /* @__PURE__ */ React.createElement(SliderThumbFrame,
|
|
255
|
+
return /* @__PURE__ */ React.createElement(SliderThumbFrame, {
|
|
282
256
|
ref: composedRefs,
|
|
283
257
|
role: "slider",
|
|
284
258
|
"aria-label": props["aria-label"] || label,
|
|
@@ -288,37 +262,40 @@ const SliderThumb = React.forwardRef((props, forwardedRef) => {
|
|
|
288
262
|
"aria-orientation": context.orientation,
|
|
289
263
|
"data-orientation": context.orientation,
|
|
290
264
|
"data-disabled": context.disabled ? "" : void 0,
|
|
291
|
-
tabIndex: context.disabled ? void 0 : 0
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
265
|
+
tabIndex: context.disabled ? void 0 : 0,
|
|
266
|
+
...thumbProps,
|
|
267
|
+
...context.orientation === "horizontal" ? {
|
|
268
|
+
x: thumbInBoundsOffset - size / 2,
|
|
269
|
+
y: -size / 2,
|
|
270
|
+
top: "50%",
|
|
271
|
+
...size === 0 && {
|
|
272
|
+
top: "auto",
|
|
273
|
+
bottom: "auto"
|
|
274
|
+
}
|
|
275
|
+
} : {
|
|
276
|
+
x: -size / 2,
|
|
277
|
+
y: size / 2,
|
|
278
|
+
left: "50%",
|
|
279
|
+
...size === 0 && {
|
|
280
|
+
left: "auto",
|
|
281
|
+
right: "auto"
|
|
282
|
+
}
|
|
283
|
+
},
|
|
307
284
|
size: sizeProp ?? context.size ?? "$4",
|
|
308
285
|
onLayout: (e) => {
|
|
309
286
|
setSize(e.nativeEvent.layout[orientation.sizeProp]);
|
|
310
|
-
}
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
287
|
+
},
|
|
288
|
+
...{
|
|
289
|
+
[orientation.startEdge]: `${percent}%`
|
|
290
|
+
},
|
|
314
291
|
onFocus: (0, import_helpers.composeEventHandlers)(props.onFocus, () => {
|
|
315
292
|
context.valueIndexToChangeRef.current = index;
|
|
316
293
|
})
|
|
317
|
-
})
|
|
294
|
+
});
|
|
318
295
|
});
|
|
319
296
|
SliderThumb.displayName = THUMB_NAME;
|
|
320
297
|
const Slider = (0, import_core.withStaticProperties)(React.forwardRef((props, forwardedRef) => {
|
|
321
|
-
const
|
|
298
|
+
const {
|
|
322
299
|
name,
|
|
323
300
|
min = 0,
|
|
324
301
|
max = 100,
|
|
@@ -330,20 +307,9 @@ const Slider = (0, import_core.withStaticProperties)(React.forwardRef((props, fo
|
|
|
330
307
|
value,
|
|
331
308
|
onValueChange = () => {
|
|
332
309
|
},
|
|
333
|
-
size: sizeProp
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
"min",
|
|
337
|
-
"max",
|
|
338
|
-
"step",
|
|
339
|
-
"orientation",
|
|
340
|
-
"disabled",
|
|
341
|
-
"minStepsBetweenThumbs",
|
|
342
|
-
"defaultValue",
|
|
343
|
-
"value",
|
|
344
|
-
"onValueChange",
|
|
345
|
-
"size"
|
|
346
|
-
]);
|
|
310
|
+
size: sizeProp,
|
|
311
|
+
...sliderProps
|
|
312
|
+
} = props;
|
|
347
313
|
const sliderRef = React.useRef(null);
|
|
348
314
|
const composedRefs = (0, import_compose_refs.useComposedRefs)(sliderRef, forwardedRef);
|
|
349
315
|
const thumbRefs = React.useRef(/* @__PURE__ */ new Set());
|
|
@@ -353,10 +319,10 @@ const Slider = (0, import_core.withStaticProperties)(React.forwardRef((props, fo
|
|
|
353
319
|
prop: value,
|
|
354
320
|
defaultProp: defaultValue,
|
|
355
321
|
onChange: (value2) => {
|
|
356
|
-
var
|
|
322
|
+
var _a;
|
|
357
323
|
if (import_core.isWeb) {
|
|
358
324
|
const thumbs = [...thumbRefs.current];
|
|
359
|
-
(
|
|
325
|
+
(_a = thumbs[valueIndexToChangeRef.current]) == null ? void 0 : _a.focus();
|
|
360
326
|
}
|
|
361
327
|
onValueChange(value2);
|
|
362
328
|
}
|
|
@@ -403,10 +369,10 @@ const Slider = (0, import_core.withStaticProperties)(React.forwardRef((props, fo
|
|
|
403
369
|
values,
|
|
404
370
|
orientation,
|
|
405
371
|
size: sizeProp
|
|
406
|
-
}, /* @__PURE__ */ React.createElement(SliderOriented,
|
|
372
|
+
}, /* @__PURE__ */ React.createElement(SliderOriented, {
|
|
407
373
|
"aria-disabled": disabled,
|
|
408
|
-
"data-disabled": disabled ? "" : void 0
|
|
409
|
-
|
|
374
|
+
"data-disabled": disabled ? "" : void 0,
|
|
375
|
+
...sliderProps,
|
|
410
376
|
ref: composedRefs,
|
|
411
377
|
min,
|
|
412
378
|
max,
|
|
@@ -430,7 +396,7 @@ const Slider = (0, import_core.withStaticProperties)(React.forwardRef((props, fo
|
|
|
430
396
|
updateValues(value2 + stepInDirection, atIndex);
|
|
431
397
|
}
|
|
432
398
|
}
|
|
433
|
-
}))
|
|
399
|
+
}));
|
|
434
400
|
}), {
|
|
435
401
|
Track: SliderTrack,
|
|
436
402
|
TrackActive: SliderTrackActive,
|
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 getSize,\n getVariableValue,\n isWeb,\n styled,\n withStaticProperties,\n} from '@tamagui/core'\nimport { clamp, composeEventHandlers } from '@tamagui/helpers'\nimport { SizableStackProps, ThemeableStack } from '@tamagui/stacks'\nimport { useControllableState } from '@tamagui/use-controllable-state'\nimport { useDirection } from '@tamagui/use-direction'\nimport * as React from 'react'\nimport { View } from 'react-native'\n\nimport {\n ARROW_KEYS,\n BACK_KEYS,\n PAGE_KEYS,\n SLIDER_NAME,\n SliderOrientationProvider,\n SliderProvider,\n useSliderContext,\n useSliderOrientationContext,\n} from './constants'\nimport {\n convertValueToPercentage,\n getClosestValueIndex,\n getDecimalCount,\n getLabel,\n getNextSortedValues,\n getThumbInBoundsOffset,\n hasMinStepsBetweenValues,\n linearScale,\n roundValue,\n} from './helpers'\nimport { SliderFrame, SliderImpl } from './SliderImpl'\nimport {\n ScopedProps,\n SliderContextValue,\n SliderHorizontalProps,\n SliderProps,\n SliderTrackProps,\n SliderVerticalProps,\n} from './types'\n\n/* -------------------------------------------------------------------------------------------------\n * SliderHorizontal\n * -----------------------------------------------------------------------------------------------*/\n\nconst SliderHorizontal = React.forwardRef<View, SliderHorizontalProps>(\n (props: ScopedProps<SliderHorizontalProps>, forwardedRef) => {\n const { min, max, dir, onSlideStart, onSlideMove, onStepKeyDown, ...sliderProps } = props\n const direction = useDirection(dir)\n const isDirectionLTR = direction === 'ltr'\n const sliderRef = React.useRef<View>(null)\n const [state, setState] = React.useState(() => ({ size: 0, offset: 0 }))\n\n function getValueFromPointer(pointerPosition: number) {\n const input: [number, number] = [0, state.size]\n const output: [number, number] = isDirectionLTR ? [min, max] : [max, min]\n const value = linearScale(input, output)\n return value(pointerPosition)\n }\n\n return (\n <SliderOrientationProvider\n scope={props.__scopeSlider}\n startEdge={isDirectionLTR ? 'left' : 'right'}\n endEdge={isDirectionLTR ? 'right' : 'left'}\n direction={isDirectionLTR ? 1 : -1}\n sizeProp=\"width\"\n size={state.size}\n >\n <SliderImpl\n ref={composeRefs(forwardedRef, sliderRef)}\n dir={direction}\n {...sliderProps}\n orientation=\"horizontal\"\n onLayout={() => {\n sliderRef.current?.measure((_x, _y, width, _height, pageX, _pageY) => {\n setState({\n size: width,\n offset: pageX,\n })\n })\n }}\n onSlideStart={(event, target) => {\n const value = getValueFromPointer(event.nativeEvent.locationX)\n if (value) {\n onSlideStart?.(value, target)\n }\n }}\n onSlideMove={(event) => {\n const value = getValueFromPointer(event.nativeEvent.pageX - state.offset)\n if (value) {\n onSlideMove?.(value)\n }\n }}\n onSlideEnd={() => {}}\n onStepKeyDown={(event) => {\n const isBackKey = BACK_KEYS[direction].includes(event.key)\n onStepKeyDown?.({ event, direction: isBackKey ? -1 : 1 })\n }}\n />\n </SliderOrientationProvider>\n )\n }\n)\n\n/* -------------------------------------------------------------------------------------------------\n * SliderVertical\n * -----------------------------------------------------------------------------------------------*/\n\nconst SliderVertical = React.forwardRef<View, SliderVerticalProps>(\n (props: ScopedProps<SliderVerticalProps>, forwardedRef) => {\n const { min, max, onSlideStart, onSlideMove, onStepKeyDown, ...sliderProps } = props\n const [state, setState] = React.useState(() => ({ size: 0, offset: 0 }))\n const sliderRef = React.useRef<View>(null)\n\n function getValueFromPointer(pointerPosition: number) {\n const input: [number, number] = [0, state.size]\n const output: [number, number] = [max, min]\n const value = linearScale(input, output)\n return value(pointerPosition)\n }\n\n return (\n <SliderOrientationProvider\n scope={props.__scopeSlider}\n startEdge=\"bottom\"\n endEdge=\"top\"\n sizeProp=\"height\"\n size={state.size}\n direction={1}\n >\n <SliderImpl\n ref={composeRefs(forwardedRef, sliderRef)}\n {...sliderProps}\n orientation=\"vertical\"\n onLayout={() => {\n sliderRef.current?.measure((_x, _y, _width, height, _pageX, pageY) => {\n setState({\n size: height,\n offset: pageY,\n })\n })\n }}\n onSlideStart={(event, target) => {\n const value = getValueFromPointer(event.nativeEvent.locationY)\n if (value) {\n onSlideStart?.(value, target)\n }\n }}\n onSlideMove={(event) => {\n const value = getValueFromPointer(event.nativeEvent.pageY - state.offset)\n if (value) {\n onSlideMove?.(value)\n }\n }}\n onSlideEnd={() => {}}\n onStepKeyDown={(event) => {\n const isBackKey = BACK_KEYS.ltr.includes(event.key)\n onStepKeyDown?.({ event, direction: isBackKey ? -1 : 1 })\n }}\n />\n </SliderOrientationProvider>\n )\n }\n)\n\n/* -------------------------------------------------------------------------------------------------\n * SliderTrack\n * -----------------------------------------------------------------------------------------------*/\n\nconst TRACK_NAME = 'SliderTrack'\n\ntype SliderTrackElement = HTMLElement | View\n\nexport const SliderTrackFrame = styled(SliderFrame, {\n name: 'SliderTrack',\n height: '100%',\n width: '100%',\n backgroundColor: '$background',\n position: 'relative',\n borderRadius: 100_000,\n overflow: 'hidden',\n})\n\nconst SliderTrack = React.forwardRef<SliderTrackElement, SliderTrackProps>(\n (props: ScopedProps<SliderTrackProps>, forwardedRef) => {\n const { __scopeSlider, ...trackProps } = props\n const context = useSliderContext(TRACK_NAME, __scopeSlider)\n return (\n <SliderTrackFrame\n data-disabled={context.disabled ? '' : undefined}\n data-orientation={context.orientation}\n orientation={context.orientation}\n size={context.size}\n {...trackProps}\n ref={forwardedRef}\n />\n )\n }\n)\n\nSliderTrack.displayName = TRACK_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * SliderTrackActive\n * -----------------------------------------------------------------------------------------------*/\n\nconst RANGE_NAME = 'SliderTrackActive'\n\nexport const SliderTrackActiveFrame = styled(SliderFrame, {\n name: 'SliderTrackActive',\n backgroundColor: '$background',\n position: 'absolute',\n})\n\ntype SliderTrackActiveProps = GetProps<typeof SliderTrackActiveFrame>\n\nconst SliderTrackActive = React.forwardRef<View, SliderTrackActiveProps>(\n (props: ScopedProps<SliderTrackActiveProps>, forwardedRef) => {\n const { __scopeSlider, ...rangeProps } = props\n const context = useSliderContext(RANGE_NAME, __scopeSlider)\n const orientation = useSliderOrientationContext(RANGE_NAME, __scopeSlider)\n const ref = React.useRef<View>(null)\n const composedRefs = useComposedRefs(forwardedRef, ref)\n const valuesCount = context.values.length\n const percentages = context.values.map((value) =>\n convertValueToPercentage(value, context.min, context.max)\n )\n const offsetStart = valuesCount > 1 ? Math.min(...percentages) : 0\n const offsetEnd = 100 - Math.max(...percentages)\n\n return (\n <SliderTrackActiveFrame\n orientation={context.orientation}\n data-orientation={context.orientation}\n data-disabled={context.disabled ? '' : undefined}\n size={context.size}\n {...rangeProps}\n ref={composedRefs}\n {...{\n [orientation.startEdge]: offsetStart + '%',\n [orientation.endEdge]: offsetEnd + '%',\n }}\n {...(orientation.sizeProp === 'width'\n ? {\n height: '100%',\n }\n : {\n left: 0,\n right: 0,\n })}\n />\n )\n }\n)\n\nSliderTrackActive.displayName = RANGE_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * SliderThumb\n * -----------------------------------------------------------------------------------------------*/\n\nconst THUMB_NAME = 'SliderThumb'\n\n// TODO make this customizable through tamagui\n// so we can accurately use it for estimatedSize below\nconst getThumbSize = (val?: SizeTokens | number) => {\n const size = typeof val === 'number' ? val : getSize(val, -1)\n return {\n width: size,\n height: size,\n minWidth: size,\n minHeight: size,\n }\n}\n\nexport const SliderThumbFrame = styled(ThemeableStack, {\n name: 'SliderThumb',\n position: 'absolute',\n // TODO not taking up 2\n bordered: 2,\n // OR THIS\n borderWidth: 2,\n backgrounded: true,\n pressTheme: isWeb,\n focusTheme: isWeb,\n hoverTheme: isWeb,\n\n variants: {\n size: {\n '...size': getThumbSize,\n },\n },\n})\n\ninterface SliderThumbProps extends SizableStackProps {\n index: number\n}\n\nconst SliderThumb = React.forwardRef<View, SliderThumbProps>(\n (props: ScopedProps<SliderThumbProps>, forwardedRef) => {\n const { __scopeSlider, index, size: sizeProp, ...thumbProps } = props\n const context = useSliderContext(THUMB_NAME, __scopeSlider)\n const orientation = useSliderOrientationContext(THUMB_NAME, __scopeSlider)\n const [thumb, setThumb] = React.useState<View | HTMLElement | null>(null)\n const composedRefs = useComposedRefs(forwardedRef, (node) => setThumb(node))\n\n // We cast because index could be `-1` which would return undefined\n const value = context.values[index] as number | undefined\n const percent =\n value === undefined ? 0 : convertValueToPercentage(value, context.min, context.max)\n const label = getLabel(index, context.values.length)\n const [size, setSize] = React.useState(() => {\n // for SSR\n const estimatedSize = getVariableValue(getThumbSize(sizeProp).width)\n return estimatedSize\n })\n\n const thumbInBoundsOffset = size\n ? getThumbInBoundsOffset(size, percent, orientation.direction)\n : 0\n\n React.useEffect(() => {\n if (thumb) {\n context.thumbs.add(thumb)\n return () => {\n context.thumbs.delete(thumb)\n }\n }\n }, [thumb, context.thumbs])\n\n return (\n <SliderThumbFrame\n ref={composedRefs}\n // TODO\n // @ts-ignore\n role=\"slider\"\n aria-label={props['aria-label'] || label}\n aria-valuemin={context.min}\n aria-valuenow={value}\n aria-valuemax={context.max}\n aria-orientation={context.orientation}\n data-orientation={context.orientation}\n data-disabled={context.disabled ? '' : undefined}\n tabIndex={context.disabled ? undefined : 0}\n {...thumbProps}\n {...(context.orientation === 'horizontal'\n ? {\n x: thumbInBoundsOffset - size / 2,\n y: -size / 2,\n top: '50%',\n ...(size === 0 && {\n top: 'auto',\n bottom: 'auto',\n }),\n }\n : {\n x: -size / 2,\n y: size / 2,\n left: '50%',\n ...(size === 0 && {\n left: 'auto',\n right: 'auto',\n }),\n })}\n size={sizeProp ?? context.size ?? '$4'}\n onLayout={(e) => {\n setSize(e.nativeEvent.layout[orientation.sizeProp])\n }}\n {...{\n [orientation.startEdge]: `${percent}%`,\n }}\n /**\n * There will be no value on initial render while we work out the index so we hide thumbs\n * without a value, otherwise SSR will render them in the wrong position before they\n * snap into the correct position during hydration which would be visually jarring for\n * slower connections.\n */\n // style={value === undefined ? { display: 'none' } : props.style}\n onFocus={composeEventHandlers(props.onFocus, () => {\n context.valueIndexToChangeRef.current = index\n })}\n />\n )\n }\n)\n\nSliderThumb.displayName = THUMB_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * Slider\n * -----------------------------------------------------------------------------------------------*/\n\nconst Slider = withStaticProperties(\n React.forwardRef<View, SliderProps>((props: ScopedProps<SliderProps>, forwardedRef) => {\n const {\n name,\n min = 0,\n max = 100,\n step = 1,\n orientation = 'horizontal',\n disabled = false,\n minStepsBetweenThumbs = 0,\n defaultValue = [min],\n value,\n onValueChange = () => {},\n size: sizeProp,\n ...sliderProps\n } = props\n const sliderRef = React.useRef<View>(null)\n const composedRefs = useComposedRefs(sliderRef, forwardedRef)\n const thumbRefs = React.useRef<SliderContextValue['thumbs']>(new Set())\n const valueIndexToChangeRef = React.useRef<number>(0)\n const isHorizontal = orientation === 'horizontal'\n // We set this to true by default so that events bubble to forms without JS (SSR)\n // const isFormControl =\n // sliderRef.current instanceof HTMLElement ? Boolean(sliderRef.current.closest('form')) : true\n\n const [values = [], setValues] = useControllableState({\n prop: value,\n defaultProp: defaultValue,\n onChange: (value) => {\n if (isWeb) {\n const thumbs = [...thumbRefs.current]\n thumbs[valueIndexToChangeRef.current]?.focus()\n }\n onValueChange(value)\n },\n })\n\n if (isWeb) {\n React.useEffect(() => {\n // @ts-ignore\n const node = sliderRef.current as HTMLElement\n if (!node) return\n const preventDefault = (e) => {\n e.preventDefault()\n }\n node.addEventListener('touchstart', preventDefault)\n return () => {\n node.removeEventListener('touchstart', preventDefault)\n }\n }, [])\n }\n\n function handleSlideMove(value: number) {\n updateValues(value, valueIndexToChangeRef.current)\n }\n\n function updateValues(value: number, atIndex: number) {\n const decimalCount = getDecimalCount(step)\n const snapToStep = roundValue(Math.round((value - min) / step) * step + min, decimalCount)\n const nextValue = clamp(snapToStep, [min, max])\n setValues((prevValues = []) => {\n const nextValues = getNextSortedValues(prevValues, nextValue, atIndex)\n if (hasMinStepsBetweenValues(nextValues, minStepsBetweenThumbs * step)) {\n valueIndexToChangeRef.current = nextValues.indexOf(nextValue)\n return String(nextValues) === String(prevValues) ? prevValues : nextValues\n } else {\n return prevValues\n }\n })\n }\n\n const SliderOriented = isHorizontal ? SliderHorizontal : SliderVertical\n\n return (\n <SliderProvider\n scope={props.__scopeSlider}\n disabled={disabled}\n min={min}\n max={max}\n valueIndexToChangeRef={valueIndexToChangeRef}\n thumbs={thumbRefs.current}\n values={values}\n orientation={orientation}\n size={sizeProp}\n >\n <SliderOriented\n aria-disabled={disabled}\n data-disabled={disabled ? '' : undefined}\n {...sliderProps}\n ref={composedRefs}\n min={min}\n max={max}\n onSlideStart={\n disabled\n ? undefined\n : (value: number, target) => {\n // when starting on the track, move it right away\n // when starting on thumb, dont jump until movemenet as it feels weird\n if (target !== 'thumb') {\n const closestIndex = getClosestValueIndex(values, value)\n updateValues(value, closestIndex)\n }\n }\n }\n onSlideMove={disabled ? undefined : handleSlideMove}\n onHomeKeyDown={() => !disabled && updateValues(min, 0)}\n onEndKeyDown={() => !disabled && updateValues(max, values.length - 1)}\n onStepKeyDown={({ event, direction: stepDirection }) => {\n if (!disabled) {\n const isPageKey = PAGE_KEYS.includes(event.key)\n const isSkipKey = isPageKey || (event.shiftKey && ARROW_KEYS.includes(event.key))\n const multiplier = isSkipKey ? 10 : 1\n const atIndex = valueIndexToChangeRef.current\n const value = values[atIndex]\n const stepInDirection = step * multiplier * stepDirection\n updateValues(value + stepInDirection, atIndex)\n }\n }}\n />\n {/* {isFormControl &&\n values.map((value, index) => (\n <BubbleInput\n key={index}\n name={name ? name + (values.length > 1 ? '[]' : '') : undefined}\n value={value}\n />\n ))} */}\n </SliderProvider>\n )\n }),\n {\n Track: SliderTrack,\n TrackActive: SliderTrackActive,\n Thumb: SliderThumb,\n }\n)\n\nSlider.displayName = SLIDER_NAME\n\n/* -----------------------------------------------------------------------------------------------*/\n\n// // TODO\n// const BubbleInput = (props: any) => {\n// const { value, ...inputProps } = props\n// const ref = React.useRef<HTMLInputElement>(null)\n// const prevValue = usePrevious(value)\n\n// // Bubble value change to parents (e.g form change event)\n// React.useEffect(() => {\n// const input = ref.current!\n// const inputProto = window.HTMLInputElement.prototype\n// const descriptor = Object.getOwnPropertyDescriptor(inputProto, 'value') as PropertyDescriptor\n// const setValue = descriptor.set\n// if (prevValue !== value && setValue) {\n// const event = new Event('input', { bubbles: true })\n// setValue.call(input, value)\n// input.dispatchEvent(event)\n// }\n// }, [prevValue, value])\n\n// /**\n// * We purposefully do not use `type=\"hidden\"` here otherwise forms that\n// * wrap it will not be able to access its value via the FormData API.\n// *\n// * We purposefully do not add the `value` attribute here to allow the value\n// * to be set programatically and bubble to any parent form `onChange` event.\n// * Adding the `value` will cause React to consider the programatic\n// * dispatch a duplicate and it will get swallowed.\n// */\n// return <input style={{ display: 'none' }} {...inputProps} ref={ref} defaultValue={value} />\n// }\n\n/* -----------------------------------------------------------------------------------------------*/\n\nconst Track = SliderTrack\nconst Range = SliderTrackActive\nconst Thumb = SliderThumb\n\nexport {\n Slider,\n SliderTrack,\n SliderTrackActive,\n SliderThumb,\n //\n Track,\n Range,\n Thumb,\n}\n\nexport type { SliderProps, SliderTrackProps, SliderTrackActiveProps, SliderThumbProps }\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/cjs/SliderImpl.js
CHANGED
|
@@ -1,38 +1,10 @@
|
|
|
1
|
+
"use strict";
|
|
1
2
|
var __create = Object.create;
|
|
2
3
|
var __defProp = Object.defineProperty;
|
|
3
|
-
var __defProps = Object.defineProperties;
|
|
4
4
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
-
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
6
5
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
7
|
-
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
8
6
|
var __getProtoOf = Object.getPrototypeOf;
|
|
9
7
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
10
|
-
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
11
|
-
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
12
|
-
var __spreadValues = (a, b) => {
|
|
13
|
-
for (var prop in b || (b = {}))
|
|
14
|
-
if (__hasOwnProp.call(b, prop))
|
|
15
|
-
__defNormalProp(a, prop, b[prop]);
|
|
16
|
-
if (__getOwnPropSymbols)
|
|
17
|
-
for (var prop of __getOwnPropSymbols(b)) {
|
|
18
|
-
if (__propIsEnum.call(b, prop))
|
|
19
|
-
__defNormalProp(a, prop, b[prop]);
|
|
20
|
-
}
|
|
21
|
-
return a;
|
|
22
|
-
};
|
|
23
|
-
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
24
|
-
var __objRest = (source, exclude) => {
|
|
25
|
-
var target = {};
|
|
26
|
-
for (var prop in source)
|
|
27
|
-
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
28
|
-
target[prop] = source[prop];
|
|
29
|
-
if (source != null && __getOwnPropSymbols)
|
|
30
|
-
for (var prop of __getOwnPropSymbols(source)) {
|
|
31
|
-
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
32
|
-
target[prop] = source[prop];
|
|
33
|
-
}
|
|
34
|
-
return target;
|
|
35
|
-
};
|
|
36
8
|
var __export = (target, all) => {
|
|
37
9
|
for (var name in all)
|
|
38
10
|
__defProp(target, name, { get: all[name], enumerable: true });
|
|
@@ -88,43 +60,36 @@ const SliderFrame = (0, import_core.styled)(DirectionalYStack, {
|
|
|
88
60
|
}
|
|
89
61
|
});
|
|
90
62
|
const SliderImpl = React.forwardRef((props, forwardedRef) => {
|
|
91
|
-
const
|
|
63
|
+
const {
|
|
92
64
|
__scopeSlider,
|
|
93
65
|
onSlideStart,
|
|
94
66
|
onSlideMove,
|
|
95
67
|
onSlideEnd,
|
|
96
68
|
onHomeKeyDown,
|
|
97
69
|
onEndKeyDown,
|
|
98
|
-
onStepKeyDown
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
"onSlideStart",
|
|
102
|
-
"onSlideMove",
|
|
103
|
-
"onSlideEnd",
|
|
104
|
-
"onHomeKeyDown",
|
|
105
|
-
"onEndKeyDown",
|
|
106
|
-
"onStepKeyDown"
|
|
107
|
-
]);
|
|
70
|
+
onStepKeyDown,
|
|
71
|
+
...sliderProps
|
|
72
|
+
} = props;
|
|
108
73
|
const context = (0, import_constants.useSliderContext)(import_constants.SLIDER_NAME, __scopeSlider);
|
|
109
|
-
return /* @__PURE__ */ React.createElement(SliderFrame,
|
|
110
|
-
size: "$4"
|
|
111
|
-
|
|
74
|
+
return /* @__PURE__ */ React.createElement(SliderFrame, {
|
|
75
|
+
size: "$4",
|
|
76
|
+
...sliderProps,
|
|
112
77
|
"data-orientation": sliderProps.orientation,
|
|
113
|
-
ref: forwardedRef
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
78
|
+
ref: forwardedRef,
|
|
79
|
+
...import_core.isWeb && {
|
|
80
|
+
onKeyDown: (event) => {
|
|
81
|
+
if (event.key === "Home") {
|
|
82
|
+
onHomeKeyDown(event);
|
|
83
|
+
event.preventDefault();
|
|
84
|
+
} else if (event.key === "End") {
|
|
85
|
+
onEndKeyDown(event);
|
|
86
|
+
event.preventDefault();
|
|
87
|
+
} else if (import_constants.PAGE_KEYS.concat(import_constants.ARROW_KEYS).includes(event.key)) {
|
|
88
|
+
onStepKeyDown(event);
|
|
89
|
+
event.preventDefault();
|
|
90
|
+
}
|
|
125
91
|
}
|
|
126
|
-
}
|
|
127
|
-
}), {
|
|
92
|
+
},
|
|
128
93
|
onMoveShouldSetResponderCapture: () => true,
|
|
129
94
|
onScrollShouldSetResponder: () => true,
|
|
130
95
|
onScrollShouldSetResponderCapture: () => true,
|
|
@@ -152,7 +117,7 @@ const SliderImpl = React.forwardRef((props, forwardedRef) => {
|
|
|
152
117
|
onResponderRelease: (0, import_core.composeEventHandlers)(props.onResponderRelease, (event) => {
|
|
153
118
|
onSlideEnd(event);
|
|
154
119
|
})
|
|
155
|
-
})
|
|
120
|
+
});
|
|
156
121
|
});
|
|
157
122
|
// Annotate the CommonJS export names for ESM import in node:
|
|
158
123
|
0 && (module.exports = {
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/SliderImpl.tsx"],
|
|
4
4
|
"sourcesContent": ["/* -------------------------------------------------------------------------------------------------\n * SliderImpl\n * -----------------------------------------------------------------------------------------------*/\n\nimport { composeEventHandlers, getSize, getVariableValue, isWeb, styled } from '@tamagui/core'\nimport { YStack } from '@tamagui/stacks'\nimport * as React from 'react'\nimport { View } from 'react-native'\n\nimport { ARROW_KEYS, PAGE_KEYS, SLIDER_NAME, useSliderContext } from './constants'\nimport { ScopedProps, SliderImplProps } from './types'\n\nexport const DirectionalYStack = styled(YStack, {\n variants: {\n orientation: {\n horizontal: {},\n vertical: {},\n },\n },\n})\n\nexport const SliderFrame = styled(DirectionalYStack, {\n position: 'relative',\n\n variants: {\n size: (val, extras) => {\n const orientation = extras.props.orientation\n const size = Math.round(getVariableValue(getSize(val)) / 6)\n if (orientation === 'horizontal') {\n return {\n height: size,\n borderRadius: size,\n justifyContent: 'center',\n }\n }\n return {\n width: size,\n borderRadius: size,\n alignItems: 'center',\n }\n },\n },\n})\n\nexport const SliderImpl = React.forwardRef<View, SliderImplProps>(\n (props: ScopedProps<SliderImplProps>, forwardedRef) => {\n const {\n __scopeSlider,\n onSlideStart,\n onSlideMove,\n onSlideEnd,\n onHomeKeyDown,\n onEndKeyDown,\n onStepKeyDown,\n ...sliderProps\n } = props\n const context = useSliderContext(SLIDER_NAME, __scopeSlider)\n return (\n <SliderFrame\n size=\"$4\"\n {...sliderProps}\n data-orientation={sliderProps.orientation}\n ref={forwardedRef}\n {...(isWeb && {\n onKeyDown: (event) => {\n if (event.key === 'Home') {\n onHomeKeyDown(event)\n // Prevent scrolling to page start\n event.preventDefault()\n } else if (event.key === 'End') {\n onEndKeyDown(event)\n // Prevent scrolling to page end\n event.preventDefault()\n } else if (PAGE_KEYS.concat(ARROW_KEYS).includes(event.key)) {\n onStepKeyDown(event)\n // Prevent scrolling for directional key presses\n event.preventDefault()\n }\n },\n })}\n onMoveShouldSetResponderCapture={() => true}\n onScrollShouldSetResponder={() => true}\n onScrollShouldSetResponderCapture={() => true}\n onMoveShouldSetResponder={() => true}\n onStartShouldSetResponder={() => true}\n // onStartShouldSetResponderCapture={() => true}\n onResponderTerminationRequest={() => {\n return false\n }}\n onResponderGrant={composeEventHandlers(props.onResponderGrant, (event) => {\n const target = event.target as HTMLElement | number\n console.log('target', target, context.thumbs.has(target), context.thumbs)\n const isStartingOnThumb = context.thumbs.has(target)\n // // Prevent browser focus behaviour because we focus a thumb manually when values change.\n // Touch devices have a delay before focusing so won't focus if touch immediately moves\n // away from target (sliding). We want thumb to focus regardless.\n if (isWeb && target instanceof HTMLElement) {\n if (context.thumbs.has(target)) {\n target.focus()\n }\n }\n onSlideStart(event, isStartingOnThumb ? 'thumb' : 'track')\n })}\n onResponderMove={composeEventHandlers(props.onResponderMove, (event) => {\n event.preventDefault()\n event.stopPropagation()\n\n // const target = event.target as HTMLElement\n onSlideMove(event)\n })}\n onResponderRelease={composeEventHandlers(props.onResponderRelease, (event) => {\n // const target = event.target as HTMLElement\n onSlideEnd(event)\n })}\n />\n )\n }\n)\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAIA,kBAA+E;AAC/E,oBAAuB;AACvB,YAAuB;AAGvB,uBAAqE;AAG9D,MAAM,oBAAoB,wBAAO,sBAAQ;AAAA,EAC9C,UAAU;AAAA,IACR,aAAa;AAAA,MACX,YAAY,CAAC;AAAA,MACb,UAAU,CAAC;AAAA,IACb;AAAA,EACF;AACF,CAAC;AAEM,MAAM,cAAc,wBAAO,mBAAmB;AAAA,EACnD,UAAU;AAAA,EAEV,UAAU;AAAA,IACR,MAAM,CAAC,KAAK,WAAW;AACrB,YAAM,cAAc,OAAO,MAAM;AACjC,YAAM,OAAO,KAAK,MAAM,kCAAiB,yBAAQ,GAAG,CAAC,IAAI,CAAC;AAC1D,UAAI,gBAAgB,cAAc;AAChC,eAAO;AAAA,UACL,QAAQ;AAAA,UACR,cAAc;AAAA,UACd,gBAAgB;AAAA,QAClB;AAAA,MACF;AACA,aAAO;AAAA,QACL,OAAO;AAAA,QACP,cAAc;AAAA,QACd,YAAY;AAAA,MACd;AAAA,IACF;AAAA,EACF;AACF,CAAC;AAEM,MAAM,aAAa,MAAM,WAC9B,CAAC,OAAqC,iBAAiB;AACrD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,OACG;AAAA,MACD;AACJ,QAAM,UAAU,uCAAiB,8BAAa,aAAa;AAC3D,SACE,oCAAC;AAAA,IACC,MAAK;AAAA,IACJ,GAAG;AAAA,IACJ,oBAAkB,YAAY;AAAA,IAC9B,KAAK;AAAA,IACJ,GAAI,qBAAS;AAAA,MACZ,WAAW,CAAC,UAAU;AACpB,YAAI,MAAM,QAAQ,QAAQ;AACxB,wBAAc,KAAK;AAEnB,gBAAM,eAAe;AAAA,QACvB,WAAW,MAAM,QAAQ,OAAO;AAC9B,uBAAa,KAAK;AAElB,gBAAM,eAAe;AAAA,QACvB,WAAW,2BAAU,OAAO,2BAAU,EAAE,SAAS,MAAM,GAAG,GAAG;AAC3D,wBAAc,KAAK;AAEnB,gBAAM,eAAe;AAAA,QACvB;AAAA,MACF;AAAA,IACF;AAAA,IACA,iCAAiC,MAAM;AAAA,IACvC,4BAA4B,MAAM;AAAA,IAClC,mCAAmC,MAAM;AAAA,IACzC,0BAA0B,MAAM;AAAA,IAChC,2BAA2B,MAAM;AAAA,IAEjC,+BAA+B,MAAM;AACnC,aAAO;AAAA,IACT;AAAA,IACA,kBAAkB,sCAAqB,MAAM,kBAAkB,CAAC,UAAU;AACxE,YAAM,SAAS,MAAM;AACrB,cAAQ,IAAI,UAAU,QAAQ,QAAQ,OAAO,IAAI,MAAM,GAAG,QAAQ,MAAM;AACxE,YAAM,oBAAoB,QAAQ,OAAO,IAAI,MAAM;AAInD,UAAI,qBAAS,kBAAkB,aAAa;AAC1C,YAAI,QAAQ,OAAO,IAAI,MAAM,GAAG;AAC9B,iBAAO,MAAM;AAAA,QACf;AAAA,MACF;AACA,mBAAa,OAAO,oBAAoB,UAAU,OAAO;AAAA,IAC3D,CAAC;AAAA,IACD,iBAAiB,sCAAqB,MAAM,iBAAiB,CAAC,UAAU;AACtE,YAAM,eAAe;AACrB,YAAM,gBAAgB;AAGtB,kBAAY,KAAK;AAAA,IACnB,CAAC;AAAA,IACD,oBAAoB,sCAAqB,MAAM,oBAAoB,CAAC,UAAU;AAE5E,iBAAW,KAAK;AAAA,IAClB,CAAC;AAAA,GACH;AAEJ,CACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/cjs/constants.js
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/constants.tsx"],
|
|
4
4
|
"sourcesContent": ["import { SizeTokens } from '@tamagui/core'\nimport { createContextScope } from '@tamagui/create-context'\n\nimport { Direction, SliderContextValue } from './types'\n\nexport const SLIDER_NAME = 'Slider'\n\nexport const [createSliderContext, createSliderScope] = createContextScope(SLIDER_NAME)\n\nexport const [SliderProvider, useSliderContext] =\n createSliderContext<SliderContextValue>(SLIDER_NAME)\n\nexport const [SliderOrientationProvider, useSliderOrientationContext] = createSliderContext<{\n startEdge: 'bottom' | 'left' | 'right'\n endEdge: 'top' | 'right' | 'left'\n sizeProp: 'width' | 'height'\n size: number | SizeTokens\n direction: number\n}>(SLIDER_NAME, {\n startEdge: 'left',\n endEdge: 'right',\n sizeProp: 'width',\n size: 0,\n direction: 1,\n})\n\nexport const PAGE_KEYS = ['PageUp', 'PageDown']\nexport const ARROW_KEYS = ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight']\nexport const BACK_KEYS: Record<Direction, string[]> = {\n ltr: ['ArrowDown', 'Home', 'ArrowLeft', 'PageDown'],\n rtl: ['ArrowDown', 'Home', 'ArrowRight', 'PageDown'],\n}\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,4BAAmC;AAI5B,MAAM,cAAc;AAEpB,MAAM,CAAC,qBAAqB,qBAAqB,8CAAmB,WAAW;AAE/E,MAAM,CAAC,gBAAgB,oBAC5B,oBAAwC,WAAW;AAE9C,MAAM,CAAC,2BAA2B,+BAA+B,oBAMrE,aAAa;AAAA,EACd,WAAW;AAAA,EACX,SAAS;AAAA,EACT,UAAU;AAAA,EACV,MAAM;AAAA,EACN,WAAW;AACb,CAAC;AAEM,MAAM,YAAY,CAAC,UAAU,UAAU;AACvC,MAAM,aAAa,CAAC,WAAW,aAAa,aAAa,YAAY;AACrE,MAAM,YAAyC;AAAA,EACpD,KAAK,CAAC,aAAa,QAAQ,aAAa,UAAU;AAAA,EAClD,KAAK,CAAC,aAAa,QAAQ,cAAc,UAAU;AACrD;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/cjs/helpers.js
CHANGED
package/dist/cjs/helpers.js.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/helpers.tsx"],
|
|
4
4
|
"sourcesContent": ["export function getNextSortedValues(prevValues: number[] = [], nextValue: number, atIndex: number) {\n const nextValues = [...prevValues]\n nextValues[atIndex] = nextValue\n return nextValues.sort((a, b) => a - b)\n}\n\nexport function convertValueToPercentage(value: number, min: number, max: number) {\n const maxSteps = max - min\n const percentPerStep = 100 / maxSteps\n return percentPerStep * (value - min)\n}\n\n/**\n * Returns a label for each thumb when there are two or more thumbs\n */\nexport function getLabel(index: number, totalValues: number) {\n if (totalValues > 2) {\n return `Value ${index + 1} of ${totalValues}`\n } else if (totalValues === 2) {\n return ['Minimum', 'Maximum'][index]\n } else {\n return undefined\n }\n}\n\n/**\n * Given a `values` array and a `nextValue`, determine which value in\n * the array is closest to `nextValue` and return its index.\n *\n * @example\n * // returns 1\n * getClosestValueIndex([10, 30], 25);\n */\nexport function getClosestValueIndex(values: number[], nextValue: number) {\n if (values.length === 1) return 0\n const distances = values.map((value) => Math.abs(value - nextValue))\n const closestDistance = Math.min(...distances)\n return distances.indexOf(closestDistance)\n}\n\n/**\n * Offsets the thumb centre point while sliding to ensure it remains\n * within the bounds of the slider when reaching the edges\n */\nexport function getThumbInBoundsOffset(width: number, left: number, direction: number) {\n const halfWidth = width / 2\n const halfPercent = 50\n const offset = linearScale([0, halfPercent], [0, halfWidth])\n return (halfWidth - offset(left) * direction) * direction\n}\n\n/**\n * Gets an array of steps between each value.\n *\n * @example\n * // returns [1, 9]\n * getStepsBetweenValues([10, 11, 20]);\n */\nfunction getStepsBetweenValues(values: number[]) {\n return values.slice(0, -1).map((value, index) => values[index + 1] - value)\n}\n\n/**\n * Verifies the minimum steps between all values is greater than or equal\n * to the expected minimum steps.\n *\n * @example\n * // returns false\n * hasMinStepsBetweenValues([1,2,3], 2);\n *\n * @example\n * // returns true\n * hasMinStepsBetweenValues([1,2,3], 1);\n */\nexport function hasMinStepsBetweenValues(values: number[], minStepsBetweenValues: number) {\n if (minStepsBetweenValues > 0) {\n const stepsBetweenValues = getStepsBetweenValues(values)\n const actualMinStepsBetweenValues = Math.min(...stepsBetweenValues)\n return actualMinStepsBetweenValues >= minStepsBetweenValues\n }\n return true\n}\n\n// https://github.com/tmcw-up-for-adoption/simple-linear-scale/blob/master/index.js\nexport function linearScale(input: readonly [number, number], output: readonly [number, number]) {\n return (value: number) => {\n if (input[0] === input[1] || output[0] === output[1]) return output[0]\n const ratio = (output[1] - output[0]) / (input[1] - input[0])\n return output[0] + ratio * (value - input[0])\n }\n}\n\nexport function getDecimalCount(value: number) {\n return (String(value).split('.')[1] || '').length\n}\n\nexport function roundValue(value: number, decimalCount: number) {\n const rounder = Math.pow(10, decimalCount)\n return Math.round(value * rounder) / rounder\n}\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAO,6BAA6B,aAAuB,CAAC,GAAG,WAAmB,SAAiB;AACjG,QAAM,aAAa,CAAC,GAAG,UAAU;AACjC,aAAW,WAAW;AACtB,SAAO,WAAW,KAAK,CAAC,GAAG,MAAM,IAAI,CAAC;AACxC;AAEO,kCAAkC,OAAe,KAAa,KAAa;AAChF,QAAM,WAAW,MAAM;AACvB,QAAM,iBAAiB,MAAM;AAC7B,SAAO,iBAAkB,SAAQ;AACnC;AAKO,kBAAkB,OAAe,aAAqB;AAC3D,MAAI,cAAc,GAAG;AACnB,WAAO,SAAS,QAAQ,QAAQ;AAAA,EAClC,WAAW,gBAAgB,GAAG;AAC5B,WAAO,CAAC,WAAW,SAAS,EAAE;AAAA,EAChC,OAAO;AACL,WAAO;AAAA,EACT;AACF;AAUO,8BAA8B,QAAkB,WAAmB;AACxE,MAAI,OAAO,WAAW;AAAG,WAAO;AAChC,QAAM,YAAY,OAAO,IAAI,CAAC,UAAU,KAAK,IAAI,QAAQ,SAAS,CAAC;AACnE,QAAM,kBAAkB,KAAK,IAAI,GAAG,SAAS;AAC7C,SAAO,UAAU,QAAQ,eAAe;AAC1C;AAMO,gCAAgC,OAAe,MAAc,WAAmB;AACrF,QAAM,YAAY,QAAQ;AAC1B,QAAM,cAAc;AACpB,QAAM,SAAS,YAAY,CAAC,GAAG,WAAW,GAAG,CAAC,GAAG,SAAS,CAAC;AAC3D,SAAQ,aAAY,OAAO,IAAI,IAAI,aAAa;AAClD;AASA,+BAA+B,QAAkB;AAC/C,SAAO,OAAO,MAAM,GAAG,EAAE,EAAE,IAAI,CAAC,OAAO,UAAU,OAAO,QAAQ,KAAK,KAAK;AAC5E;AAcO,kCAAkC,QAAkB,uBAA+B;AACxF,MAAI,wBAAwB,GAAG;AAC7B,UAAM,qBAAqB,sBAAsB,MAAM;AACvD,UAAM,8BAA8B,KAAK,IAAI,GAAG,kBAAkB;AAClE,WAAO,+BAA+B;AAAA,EACxC;AACA,SAAO;AACT;AAGO,qBAAqB,OAAkC,QAAmC;AAC/F,SAAO,CAAC,UAAkB;AACxB,QAAI,MAAM,OAAO,MAAM,MAAM,OAAO,OAAO,OAAO;AAAI,aAAO,OAAO;AACpE,UAAM,QAAS,QAAO,KAAK,OAAO,MAAO,OAAM,KAAK,MAAM;AAC1D,WAAO,OAAO,KAAK,QAAS,SAAQ,MAAM;AAAA,EAC5C;AACF;AAEO,yBAAyB,OAAe;AAC7C,SAAQ,QAAO,KAAK,EAAE,MAAM,GAAG,EAAE,MAAM,IAAI;AAC7C;AAEO,oBAAoB,OAAe,cAAsB;AAC9D,QAAM,UAAU,KAAK,IAAI,IAAI,YAAY;AACzC,SAAO,KAAK,MAAM,QAAQ,OAAO,IAAI;AACvC;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/cjs/index.js
CHANGED
package/dist/cjs/index.js.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": "
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAAc,qBAAd;AAEA,wBAA+C;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/cjs/types.js
CHANGED
package/dist/cjs/types.js.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/types.ts"],
|
|
4
4
|
"sourcesContent": ["import type { GestureReponderEvent, SizeTokens } from '@tamagui/core'\nimport type { Scope } from '@tamagui/create-context'\nimport type { SizableStackProps } from '@tamagui/stacks'\n\nexport type ScopedProps<P> = P & { __scopeSlider?: Scope }\n\nexport type Direction = 'ltr' | 'rtl'\n\ntype SliderImplPrivateProps = {\n onSlideStart(event: GestureReponderEvent, target: 'thumb' | 'track'): void\n onSlideMove(event: GestureReponderEvent): void\n onSlideEnd(event: GestureReponderEvent): void\n onHomeKeyDown(event: React.KeyboardEvent): void\n onEndKeyDown(event: React.KeyboardEvent): void\n onStepKeyDown(event: React.KeyboardEvent): void\n}\n\nexport interface SliderTrackProps extends SizableStackProps {}\n\nexport interface SliderImplProps extends SliderTrackProps, SliderImplPrivateProps {\n dir?: Direction\n orientation: 'horizontal' | 'vertical'\n}\n\ntype SliderOrientationPrivateProps = {\n min: number\n max: number\n onSlideStart?(value: number, target: 'thumb' | 'track'): void\n onSlideMove?(value: number): void\n onHomeKeyDown(event: React.KeyboardEvent): void\n onEndKeyDown(event: React.KeyboardEvent): void\n onStepKeyDown(step: { event: React.KeyboardEvent; direction: number }): void\n}\n\ninterface SliderOrientationProps\n extends Omit<SliderImplProps, keyof SliderImplPrivateProps | 'orientation'>,\n SliderOrientationPrivateProps {}\n\nexport interface SliderHorizontalProps extends SliderOrientationProps {\n dir?: Direction\n}\n\nexport interface SliderVerticalProps extends SliderOrientationProps {\n dir?: Direction\n}\n\nexport interface SliderProps\n extends Omit<\n SliderHorizontalProps | SliderVerticalProps,\n keyof SliderOrientationPrivateProps | 'defaultValue'\n > {\n size?: SizeTokens\n name?: string\n disabled?: boolean\n orientation?: React.AriaAttributes['aria-orientation']\n dir?: Direction\n min?: number\n max?: number\n step?: number\n minStepsBetweenThumbs?: number\n value?: number[]\n defaultValue?: number[]\n onValueChange?(value: number[]): void\n}\n\nexport type SliderContextValue = {\n size?: SizeTokens | number | null\n disabled?: boolean\n min: number\n max: number\n values: number[]\n valueIndexToChangeRef: React.MutableRefObject<number>\n thumbs: Set<any>\n orientation: SliderProps['orientation']\n}\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;AAAA;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/Slider.js
CHANGED
|
@@ -1,34 +1,3 @@
|
|
|
1
|
-
var __defProp = Object.defineProperty;
|
|
2
|
-
var __defProps = Object.defineProperties;
|
|
3
|
-
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
4
|
-
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
5
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
-
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
7
|
-
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
8
|
-
var __spreadValues = (a, b) => {
|
|
9
|
-
for (var prop in b || (b = {}))
|
|
10
|
-
if (__hasOwnProp.call(b, prop))
|
|
11
|
-
__defNormalProp(a, prop, b[prop]);
|
|
12
|
-
if (__getOwnPropSymbols)
|
|
13
|
-
for (var prop of __getOwnPropSymbols(b)) {
|
|
14
|
-
if (__propIsEnum.call(b, prop))
|
|
15
|
-
__defNormalProp(a, prop, b[prop]);
|
|
16
|
-
}
|
|
17
|
-
return a;
|
|
18
|
-
};
|
|
19
|
-
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
20
|
-
var __objRest = (source, exclude) => {
|
|
21
|
-
var target = {};
|
|
22
|
-
for (var prop in source)
|
|
23
|
-
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
24
|
-
target[prop] = source[prop];
|
|
25
|
-
if (source != null && __getOwnPropSymbols)
|
|
26
|
-
for (var prop of __getOwnPropSymbols(source)) {
|
|
27
|
-
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
28
|
-
target[prop] = source[prop];
|
|
29
|
-
}
|
|
30
|
-
return target;
|
|
31
|
-
};
|
|
32
1
|
import { composeRefs, useComposedRefs } from "@tamagui/compose-refs";
|
|
33
2
|
import {
|
|
34
3
|
getSize,
|
|
@@ -65,7 +34,7 @@ import {
|
|
|
65
34
|
} from "./helpers";
|
|
66
35
|
import { SliderFrame, SliderImpl } from "./SliderImpl";
|
|
67
36
|
const SliderHorizontal = React.forwardRef((props, forwardedRef) => {
|
|
68
|
-
const
|
|
37
|
+
const { min, max, dir, onSlideStart, onSlideMove, onStepKeyDown, ...sliderProps } = props;
|
|
69
38
|
const direction = useDirection(dir);
|
|
70
39
|
const isDirectionLTR = direction === "ltr";
|
|
71
40
|
const sliderRef = React.useRef(null);
|
|
@@ -83,14 +52,14 @@ const SliderHorizontal = React.forwardRef((props, forwardedRef) => {
|
|
|
83
52
|
direction: isDirectionLTR ? 1 : -1,
|
|
84
53
|
sizeProp: "width",
|
|
85
54
|
size: state.size
|
|
86
|
-
}, /* @__PURE__ */ React.createElement(SliderImpl,
|
|
55
|
+
}, /* @__PURE__ */ React.createElement(SliderImpl, {
|
|
87
56
|
ref: composeRefs(forwardedRef, sliderRef),
|
|
88
|
-
dir: direction
|
|
89
|
-
|
|
57
|
+
dir: direction,
|
|
58
|
+
...sliderProps,
|
|
90
59
|
orientation: "horizontal",
|
|
91
60
|
onLayout: () => {
|
|
92
|
-
var
|
|
93
|
-
(
|
|
61
|
+
var _a;
|
|
62
|
+
(_a = sliderRef.current) == null ? void 0 : _a.measure((_x, _y, width, _height, pageX, _pageY) => {
|
|
94
63
|
setState({
|
|
95
64
|
size: width,
|
|
96
65
|
offset: pageX
|
|
@@ -115,10 +84,10 @@ const SliderHorizontal = React.forwardRef((props, forwardedRef) => {
|
|
|
115
84
|
const isBackKey = BACK_KEYS[direction].includes(event.key);
|
|
116
85
|
onStepKeyDown == null ? void 0 : onStepKeyDown({ event, direction: isBackKey ? -1 : 1 });
|
|
117
86
|
}
|
|
118
|
-
}))
|
|
87
|
+
}));
|
|
119
88
|
});
|
|
120
89
|
const SliderVertical = React.forwardRef((props, forwardedRef) => {
|
|
121
|
-
const
|
|
90
|
+
const { min, max, onSlideStart, onSlideMove, onStepKeyDown, ...sliderProps } = props;
|
|
122
91
|
const [state, setState] = React.useState(() => ({ size: 0, offset: 0 }));
|
|
123
92
|
const sliderRef = React.useRef(null);
|
|
124
93
|
function getValueFromPointer(pointerPosition) {
|
|
@@ -134,13 +103,13 @@ const SliderVertical = React.forwardRef((props, forwardedRef) => {
|
|
|
134
103
|
sizeProp: "height",
|
|
135
104
|
size: state.size,
|
|
136
105
|
direction: 1
|
|
137
|
-
}, /* @__PURE__ */ React.createElement(SliderImpl,
|
|
138
|
-
ref: composeRefs(forwardedRef, sliderRef)
|
|
139
|
-
|
|
106
|
+
}, /* @__PURE__ */ React.createElement(SliderImpl, {
|
|
107
|
+
ref: composeRefs(forwardedRef, sliderRef),
|
|
108
|
+
...sliderProps,
|
|
140
109
|
orientation: "vertical",
|
|
141
110
|
onLayout: () => {
|
|
142
|
-
var
|
|
143
|
-
(
|
|
111
|
+
var _a;
|
|
112
|
+
(_a = sliderRef.current) == null ? void 0 : _a.measure((_x, _y, _width, height, _pageX, pageY) => {
|
|
144
113
|
setState({
|
|
145
114
|
size: height,
|
|
146
115
|
offset: pageY
|
|
@@ -165,7 +134,7 @@ const SliderVertical = React.forwardRef((props, forwardedRef) => {
|
|
|
165
134
|
const isBackKey = BACK_KEYS.ltr.includes(event.key);
|
|
166
135
|
onStepKeyDown == null ? void 0 : onStepKeyDown({ event, direction: isBackKey ? -1 : 1 });
|
|
167
136
|
}
|
|
168
|
-
}))
|
|
137
|
+
}));
|
|
169
138
|
});
|
|
170
139
|
const TRACK_NAME = "SliderTrack";
|
|
171
140
|
const SliderTrackFrame = styled(SliderFrame, {
|
|
@@ -178,16 +147,16 @@ const SliderTrackFrame = styled(SliderFrame, {
|
|
|
178
147
|
overflow: "hidden"
|
|
179
148
|
});
|
|
180
149
|
const SliderTrack = React.forwardRef((props, forwardedRef) => {
|
|
181
|
-
const
|
|
150
|
+
const { __scopeSlider, ...trackProps } = props;
|
|
182
151
|
const context = useSliderContext(TRACK_NAME, __scopeSlider);
|
|
183
|
-
return /* @__PURE__ */ React.createElement(SliderTrackFrame,
|
|
152
|
+
return /* @__PURE__ */ React.createElement(SliderTrackFrame, {
|
|
184
153
|
"data-disabled": context.disabled ? "" : void 0,
|
|
185
154
|
"data-orientation": context.orientation,
|
|
186
155
|
orientation: context.orientation,
|
|
187
|
-
size: context.size
|
|
188
|
-
|
|
156
|
+
size: context.size,
|
|
157
|
+
...trackProps,
|
|
189
158
|
ref: forwardedRef
|
|
190
|
-
})
|
|
159
|
+
});
|
|
191
160
|
});
|
|
192
161
|
SliderTrack.displayName = TRACK_NAME;
|
|
193
162
|
const RANGE_NAME = "SliderTrackActive";
|
|
@@ -197,7 +166,7 @@ const SliderTrackActiveFrame = styled(SliderFrame, {
|
|
|
197
166
|
position: "absolute"
|
|
198
167
|
});
|
|
199
168
|
const SliderTrackActive = React.forwardRef((props, forwardedRef) => {
|
|
200
|
-
const
|
|
169
|
+
const { __scopeSlider, ...rangeProps } = props;
|
|
201
170
|
const context = useSliderContext(RANGE_NAME, __scopeSlider);
|
|
202
171
|
const orientation = useSliderOrientationContext(RANGE_NAME, __scopeSlider);
|
|
203
172
|
const ref = React.useRef(null);
|
|
@@ -206,22 +175,24 @@ const SliderTrackActive = React.forwardRef((props, forwardedRef) => {
|
|
|
206
175
|
const percentages = context.values.map((value) => convertValueToPercentage(value, context.min, context.max));
|
|
207
176
|
const offsetStart = valuesCount > 1 ? Math.min(...percentages) : 0;
|
|
208
177
|
const offsetEnd = 100 - Math.max(...percentages);
|
|
209
|
-
return /* @__PURE__ */ React.createElement(SliderTrackActiveFrame,
|
|
178
|
+
return /* @__PURE__ */ React.createElement(SliderTrackActiveFrame, {
|
|
210
179
|
orientation: context.orientation,
|
|
211
180
|
"data-orientation": context.orientation,
|
|
212
181
|
"data-disabled": context.disabled ? "" : void 0,
|
|
213
|
-
size: context.size
|
|
214
|
-
|
|
215
|
-
ref: composedRefs
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
182
|
+
size: context.size,
|
|
183
|
+
...rangeProps,
|
|
184
|
+
ref: composedRefs,
|
|
185
|
+
...{
|
|
186
|
+
[orientation.startEdge]: offsetStart + "%",
|
|
187
|
+
[orientation.endEdge]: offsetEnd + "%"
|
|
188
|
+
},
|
|
189
|
+
...orientation.sizeProp === "width" ? {
|
|
190
|
+
height: "100%"
|
|
191
|
+
} : {
|
|
192
|
+
left: 0,
|
|
193
|
+
right: 0
|
|
194
|
+
}
|
|
195
|
+
});
|
|
225
196
|
});
|
|
226
197
|
SliderTrackActive.displayName = RANGE_NAME;
|
|
227
198
|
const THUMB_NAME = "SliderThumb";
|
|
@@ -250,7 +221,7 @@ const SliderThumbFrame = styled(ThemeableStack, {
|
|
|
250
221
|
}
|
|
251
222
|
});
|
|
252
223
|
const SliderThumb = React.forwardRef((props, forwardedRef) => {
|
|
253
|
-
const
|
|
224
|
+
const { __scopeSlider, index, size: sizeProp, ...thumbProps } = props;
|
|
254
225
|
const context = useSliderContext(THUMB_NAME, __scopeSlider);
|
|
255
226
|
const orientation = useSliderOrientationContext(THUMB_NAME, __scopeSlider);
|
|
256
227
|
const [thumb, setThumb] = React.useState(null);
|
|
@@ -271,7 +242,7 @@ const SliderThumb = React.forwardRef((props, forwardedRef) => {
|
|
|
271
242
|
};
|
|
272
243
|
}
|
|
273
244
|
}, [thumb, context.thumbs]);
|
|
274
|
-
return /* @__PURE__ */ React.createElement(SliderThumbFrame,
|
|
245
|
+
return /* @__PURE__ */ React.createElement(SliderThumbFrame, {
|
|
275
246
|
ref: composedRefs,
|
|
276
247
|
role: "slider",
|
|
277
248
|
"aria-label": props["aria-label"] || label,
|
|
@@ -281,37 +252,40 @@ const SliderThumb = React.forwardRef((props, forwardedRef) => {
|
|
|
281
252
|
"aria-orientation": context.orientation,
|
|
282
253
|
"data-orientation": context.orientation,
|
|
283
254
|
"data-disabled": context.disabled ? "" : void 0,
|
|
284
|
-
tabIndex: context.disabled ? void 0 : 0
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
255
|
+
tabIndex: context.disabled ? void 0 : 0,
|
|
256
|
+
...thumbProps,
|
|
257
|
+
...context.orientation === "horizontal" ? {
|
|
258
|
+
x: thumbInBoundsOffset - size / 2,
|
|
259
|
+
y: -size / 2,
|
|
260
|
+
top: "50%",
|
|
261
|
+
...size === 0 && {
|
|
262
|
+
top: "auto",
|
|
263
|
+
bottom: "auto"
|
|
264
|
+
}
|
|
265
|
+
} : {
|
|
266
|
+
x: -size / 2,
|
|
267
|
+
y: size / 2,
|
|
268
|
+
left: "50%",
|
|
269
|
+
...size === 0 && {
|
|
270
|
+
left: "auto",
|
|
271
|
+
right: "auto"
|
|
272
|
+
}
|
|
273
|
+
},
|
|
300
274
|
size: sizeProp ?? context.size ?? "$4",
|
|
301
275
|
onLayout: (e) => {
|
|
302
276
|
setSize(e.nativeEvent.layout[orientation.sizeProp]);
|
|
303
|
-
}
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
277
|
+
},
|
|
278
|
+
...{
|
|
279
|
+
[orientation.startEdge]: `${percent}%`
|
|
280
|
+
},
|
|
307
281
|
onFocus: composeEventHandlers(props.onFocus, () => {
|
|
308
282
|
context.valueIndexToChangeRef.current = index;
|
|
309
283
|
})
|
|
310
|
-
})
|
|
284
|
+
});
|
|
311
285
|
});
|
|
312
286
|
SliderThumb.displayName = THUMB_NAME;
|
|
313
287
|
const Slider = withStaticProperties(React.forwardRef((props, forwardedRef) => {
|
|
314
|
-
const
|
|
288
|
+
const {
|
|
315
289
|
name,
|
|
316
290
|
min = 0,
|
|
317
291
|
max = 100,
|
|
@@ -323,20 +297,9 @@ const Slider = withStaticProperties(React.forwardRef((props, forwardedRef) => {
|
|
|
323
297
|
value,
|
|
324
298
|
onValueChange = () => {
|
|
325
299
|
},
|
|
326
|
-
size: sizeProp
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
"min",
|
|
330
|
-
"max",
|
|
331
|
-
"step",
|
|
332
|
-
"orientation",
|
|
333
|
-
"disabled",
|
|
334
|
-
"minStepsBetweenThumbs",
|
|
335
|
-
"defaultValue",
|
|
336
|
-
"value",
|
|
337
|
-
"onValueChange",
|
|
338
|
-
"size"
|
|
339
|
-
]);
|
|
300
|
+
size: sizeProp,
|
|
301
|
+
...sliderProps
|
|
302
|
+
} = props;
|
|
340
303
|
const sliderRef = React.useRef(null);
|
|
341
304
|
const composedRefs = useComposedRefs(sliderRef, forwardedRef);
|
|
342
305
|
const thumbRefs = React.useRef(/* @__PURE__ */ new Set());
|
|
@@ -346,10 +309,10 @@ const Slider = withStaticProperties(React.forwardRef((props, forwardedRef) => {
|
|
|
346
309
|
prop: value,
|
|
347
310
|
defaultProp: defaultValue,
|
|
348
311
|
onChange: (value2) => {
|
|
349
|
-
var
|
|
312
|
+
var _a;
|
|
350
313
|
if (isWeb) {
|
|
351
314
|
const thumbs = [...thumbRefs.current];
|
|
352
|
-
(
|
|
315
|
+
(_a = thumbs[valueIndexToChangeRef.current]) == null ? void 0 : _a.focus();
|
|
353
316
|
}
|
|
354
317
|
onValueChange(value2);
|
|
355
318
|
}
|
|
@@ -396,10 +359,10 @@ const Slider = withStaticProperties(React.forwardRef((props, forwardedRef) => {
|
|
|
396
359
|
values,
|
|
397
360
|
orientation,
|
|
398
361
|
size: sizeProp
|
|
399
|
-
}, /* @__PURE__ */ React.createElement(SliderOriented,
|
|
362
|
+
}, /* @__PURE__ */ React.createElement(SliderOriented, {
|
|
400
363
|
"aria-disabled": disabled,
|
|
401
|
-
"data-disabled": disabled ? "" : void 0
|
|
402
|
-
|
|
364
|
+
"data-disabled": disabled ? "" : void 0,
|
|
365
|
+
...sliderProps,
|
|
403
366
|
ref: composedRefs,
|
|
404
367
|
min,
|
|
405
368
|
max,
|
|
@@ -423,7 +386,7 @@ const Slider = withStaticProperties(React.forwardRef((props, forwardedRef) => {
|
|
|
423
386
|
updateValues(value2 + stepInDirection, atIndex);
|
|
424
387
|
}
|
|
425
388
|
}
|
|
426
|
-
}))
|
|
389
|
+
}));
|
|
427
390
|
}), {
|
|
428
391
|
Track: SliderTrack,
|
|
429
392
|
TrackActive: SliderTrackActive,
|
package/dist/esm/Slider.js.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/Slider.tsx"],
|
|
4
4
|
"sourcesContent": ["// forked from radix-ui\n\nimport { composeRefs, useComposedRefs } from '@tamagui/compose-refs'\nimport {\n GetProps,\n SizeTokens,\n getSize,\n getVariableValue,\n isWeb,\n styled,\n withStaticProperties,\n} from '@tamagui/core'\nimport { clamp, composeEventHandlers } from '@tamagui/helpers'\nimport { SizableStackProps, ThemeableStack } from '@tamagui/stacks'\nimport { useControllableState } from '@tamagui/use-controllable-state'\nimport { useDirection } from '@tamagui/use-direction'\nimport * as React from 'react'\nimport { View } from 'react-native'\n\nimport {\n ARROW_KEYS,\n BACK_KEYS,\n PAGE_KEYS,\n SLIDER_NAME,\n SliderOrientationProvider,\n SliderProvider,\n useSliderContext,\n useSliderOrientationContext,\n} from './constants'\nimport {\n convertValueToPercentage,\n getClosestValueIndex,\n getDecimalCount,\n getLabel,\n getNextSortedValues,\n getThumbInBoundsOffset,\n hasMinStepsBetweenValues,\n linearScale,\n roundValue,\n} from './helpers'\nimport { SliderFrame, SliderImpl } from './SliderImpl'\nimport {\n ScopedProps,\n SliderContextValue,\n SliderHorizontalProps,\n SliderProps,\n SliderTrackProps,\n SliderVerticalProps,\n} from './types'\n\n/* -------------------------------------------------------------------------------------------------\n * SliderHorizontal\n * -----------------------------------------------------------------------------------------------*/\n\nconst SliderHorizontal = React.forwardRef<View, SliderHorizontalProps>(\n (props: ScopedProps<SliderHorizontalProps>, forwardedRef) => {\n const { min, max, dir, onSlideStart, onSlideMove, onStepKeyDown, ...sliderProps } = props\n const direction = useDirection(dir)\n const isDirectionLTR = direction === 'ltr'\n const sliderRef = React.useRef<View>(null)\n const [state, setState] = React.useState(() => ({ size: 0, offset: 0 }))\n\n function getValueFromPointer(pointerPosition: number) {\n const input: [number, number] = [0, state.size]\n const output: [number, number] = isDirectionLTR ? [min, max] : [max, min]\n const value = linearScale(input, output)\n return value(pointerPosition)\n }\n\n return (\n <SliderOrientationProvider\n scope={props.__scopeSlider}\n startEdge={isDirectionLTR ? 'left' : 'right'}\n endEdge={isDirectionLTR ? 'right' : 'left'}\n direction={isDirectionLTR ? 1 : -1}\n sizeProp=\"width\"\n size={state.size}\n >\n <SliderImpl\n ref={composeRefs(forwardedRef, sliderRef)}\n dir={direction}\n {...sliderProps}\n orientation=\"horizontal\"\n onLayout={() => {\n sliderRef.current?.measure((_x, _y, width, _height, pageX, _pageY) => {\n setState({\n size: width,\n offset: pageX,\n })\n })\n }}\n onSlideStart={(event, target) => {\n const value = getValueFromPointer(event.nativeEvent.locationX)\n if (value) {\n onSlideStart?.(value, target)\n }\n }}\n onSlideMove={(event) => {\n const value = getValueFromPointer(event.nativeEvent.pageX - state.offset)\n if (value) {\n onSlideMove?.(value)\n }\n }}\n onSlideEnd={() => {}}\n onStepKeyDown={(event) => {\n const isBackKey = BACK_KEYS[direction].includes(event.key)\n onStepKeyDown?.({ event, direction: isBackKey ? -1 : 1 })\n }}\n />\n </SliderOrientationProvider>\n )\n }\n)\n\n/* -------------------------------------------------------------------------------------------------\n * SliderVertical\n * -----------------------------------------------------------------------------------------------*/\n\nconst SliderVertical = React.forwardRef<View, SliderVerticalProps>(\n (props: ScopedProps<SliderVerticalProps>, forwardedRef) => {\n const { min, max, onSlideStart, onSlideMove, onStepKeyDown, ...sliderProps } = props\n const [state, setState] = React.useState(() => ({ size: 0, offset: 0 }))\n const sliderRef = React.useRef<View>(null)\n\n function getValueFromPointer(pointerPosition: number) {\n const input: [number, number] = [0, state.size]\n const output: [number, number] = [max, min]\n const value = linearScale(input, output)\n return value(pointerPosition)\n }\n\n return (\n <SliderOrientationProvider\n scope={props.__scopeSlider}\n startEdge=\"bottom\"\n endEdge=\"top\"\n sizeProp=\"height\"\n size={state.size}\n direction={1}\n >\n <SliderImpl\n ref={composeRefs(forwardedRef, sliderRef)}\n {...sliderProps}\n orientation=\"vertical\"\n onLayout={() => {\n sliderRef.current?.measure((_x, _y, _width, height, _pageX, pageY) => {\n setState({\n size: height,\n offset: pageY,\n })\n })\n }}\n onSlideStart={(event, target) => {\n const value = getValueFromPointer(event.nativeEvent.locationY)\n if (value) {\n onSlideStart?.(value, target)\n }\n }}\n onSlideMove={(event) => {\n const value = getValueFromPointer(event.nativeEvent.pageY - state.offset)\n if (value) {\n onSlideMove?.(value)\n }\n }}\n onSlideEnd={() => {}}\n onStepKeyDown={(event) => {\n const isBackKey = BACK_KEYS.ltr.includes(event.key)\n onStepKeyDown?.({ event, direction: isBackKey ? -1 : 1 })\n }}\n />\n </SliderOrientationProvider>\n )\n }\n)\n\n/* -------------------------------------------------------------------------------------------------\n * SliderTrack\n * -----------------------------------------------------------------------------------------------*/\n\nconst TRACK_NAME = 'SliderTrack'\n\ntype SliderTrackElement = HTMLElement | View\n\nexport const SliderTrackFrame = styled(SliderFrame, {\n name: 'SliderTrack',\n height: '100%',\n width: '100%',\n backgroundColor: '$background',\n position: 'relative',\n borderRadius: 100_000,\n overflow: 'hidden',\n})\n\nconst SliderTrack = React.forwardRef<SliderTrackElement, SliderTrackProps>(\n (props: ScopedProps<SliderTrackProps>, forwardedRef) => {\n const { __scopeSlider, ...trackProps } = props\n const context = useSliderContext(TRACK_NAME, __scopeSlider)\n return (\n <SliderTrackFrame\n data-disabled={context.disabled ? '' : undefined}\n data-orientation={context.orientation}\n orientation={context.orientation}\n size={context.size}\n {...trackProps}\n ref={forwardedRef}\n />\n )\n }\n)\n\nSliderTrack.displayName = TRACK_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * SliderTrackActive\n * -----------------------------------------------------------------------------------------------*/\n\nconst RANGE_NAME = 'SliderTrackActive'\n\nexport const SliderTrackActiveFrame = styled(SliderFrame, {\n name: 'SliderTrackActive',\n backgroundColor: '$background',\n position: 'absolute',\n})\n\ntype SliderTrackActiveProps = GetProps<typeof SliderTrackActiveFrame>\n\nconst SliderTrackActive = React.forwardRef<View, SliderTrackActiveProps>(\n (props: ScopedProps<SliderTrackActiveProps>, forwardedRef) => {\n const { __scopeSlider, ...rangeProps } = props\n const context = useSliderContext(RANGE_NAME, __scopeSlider)\n const orientation = useSliderOrientationContext(RANGE_NAME, __scopeSlider)\n const ref = React.useRef<View>(null)\n const composedRefs = useComposedRefs(forwardedRef, ref)\n const valuesCount = context.values.length\n const percentages = context.values.map((value) =>\n convertValueToPercentage(value, context.min, context.max)\n )\n const offsetStart = valuesCount > 1 ? Math.min(...percentages) : 0\n const offsetEnd = 100 - Math.max(...percentages)\n\n return (\n <SliderTrackActiveFrame\n orientation={context.orientation}\n data-orientation={context.orientation}\n data-disabled={context.disabled ? '' : undefined}\n size={context.size}\n {...rangeProps}\n ref={composedRefs}\n {...{\n [orientation.startEdge]: offsetStart + '%',\n [orientation.endEdge]: offsetEnd + '%',\n }}\n {...(orientation.sizeProp === 'width'\n ? {\n height: '100%',\n }\n : {\n left: 0,\n right: 0,\n })}\n />\n )\n }\n)\n\nSliderTrackActive.displayName = RANGE_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * SliderThumb\n * -----------------------------------------------------------------------------------------------*/\n\nconst THUMB_NAME = 'SliderThumb'\n\n// TODO make this customizable through tamagui\n// so we can accurately use it for estimatedSize below\nconst getThumbSize = (val?: SizeTokens | number) => {\n const size = typeof val === 'number' ? val : getSize(val, -1)\n return {\n width: size,\n height: size,\n minWidth: size,\n minHeight: size,\n }\n}\n\nexport const SliderThumbFrame = styled(ThemeableStack, {\n name: 'SliderThumb',\n position: 'absolute',\n // TODO not taking up 2\n bordered: 2,\n // OR THIS\n borderWidth: 2,\n backgrounded: true,\n pressTheme: isWeb,\n focusTheme: isWeb,\n hoverTheme: isWeb,\n\n variants: {\n size: {\n '...size': getThumbSize,\n },\n },\n})\n\ninterface SliderThumbProps extends SizableStackProps {\n index: number\n}\n\nconst SliderThumb = React.forwardRef<View, SliderThumbProps>(\n (props: ScopedProps<SliderThumbProps>, forwardedRef) => {\n const { __scopeSlider, index, size: sizeProp, ...thumbProps } = props\n const context = useSliderContext(THUMB_NAME, __scopeSlider)\n const orientation = useSliderOrientationContext(THUMB_NAME, __scopeSlider)\n const [thumb, setThumb] = React.useState<View | HTMLElement | null>(null)\n const composedRefs = useComposedRefs(forwardedRef, (node) => setThumb(node))\n\n // We cast because index could be `-1` which would return undefined\n const value = context.values[index] as number | undefined\n const percent =\n value === undefined ? 0 : convertValueToPercentage(value, context.min, context.max)\n const label = getLabel(index, context.values.length)\n const [size, setSize] = React.useState(() => {\n // for SSR\n const estimatedSize = getVariableValue(getThumbSize(sizeProp).width)\n return estimatedSize\n })\n\n const thumbInBoundsOffset = size\n ? getThumbInBoundsOffset(size, percent, orientation.direction)\n : 0\n\n React.useEffect(() => {\n if (thumb) {\n context.thumbs.add(thumb)\n return () => {\n context.thumbs.delete(thumb)\n }\n }\n }, [thumb, context.thumbs])\n\n return (\n <SliderThumbFrame\n ref={composedRefs}\n // TODO\n // @ts-ignore\n role=\"slider\"\n aria-label={props['aria-label'] || label}\n aria-valuemin={context.min}\n aria-valuenow={value}\n aria-valuemax={context.max}\n aria-orientation={context.orientation}\n data-orientation={context.orientation}\n data-disabled={context.disabled ? '' : undefined}\n tabIndex={context.disabled ? undefined : 0}\n {...thumbProps}\n {...(context.orientation === 'horizontal'\n ? {\n x: thumbInBoundsOffset - size / 2,\n y: -size / 2,\n top: '50%',\n ...(size === 0 && {\n top: 'auto',\n bottom: 'auto',\n }),\n }\n : {\n x: -size / 2,\n y: size / 2,\n left: '50%',\n ...(size === 0 && {\n left: 'auto',\n right: 'auto',\n }),\n })}\n size={sizeProp ?? context.size ?? '$4'}\n onLayout={(e) => {\n setSize(e.nativeEvent.layout[orientation.sizeProp])\n }}\n {...{\n [orientation.startEdge]: `${percent}%`,\n }}\n /**\n * There will be no value on initial render while we work out the index so we hide thumbs\n * without a value, otherwise SSR will render them in the wrong position before they\n * snap into the correct position during hydration which would be visually jarring for\n * slower connections.\n */\n // style={value === undefined ? { display: 'none' } : props.style}\n onFocus={composeEventHandlers(props.onFocus, () => {\n context.valueIndexToChangeRef.current = index\n })}\n />\n )\n }\n)\n\nSliderThumb.displayName = THUMB_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * Slider\n * -----------------------------------------------------------------------------------------------*/\n\nconst Slider = withStaticProperties(\n React.forwardRef<View, SliderProps>((props: ScopedProps<SliderProps>, forwardedRef) => {\n const {\n name,\n min = 0,\n max = 100,\n step = 1,\n orientation = 'horizontal',\n disabled = false,\n minStepsBetweenThumbs = 0,\n defaultValue = [min],\n value,\n onValueChange = () => {},\n size: sizeProp,\n ...sliderProps\n } = props\n const sliderRef = React.useRef<View>(null)\n const composedRefs = useComposedRefs(sliderRef, forwardedRef)\n const thumbRefs = React.useRef<SliderContextValue['thumbs']>(new Set())\n const valueIndexToChangeRef = React.useRef<number>(0)\n const isHorizontal = orientation === 'horizontal'\n // We set this to true by default so that events bubble to forms without JS (SSR)\n // const isFormControl =\n // sliderRef.current instanceof HTMLElement ? Boolean(sliderRef.current.closest('form')) : true\n\n const [values = [], setValues] = useControllableState({\n prop: value,\n defaultProp: defaultValue,\n onChange: (value) => {\n if (isWeb) {\n const thumbs = [...thumbRefs.current]\n thumbs[valueIndexToChangeRef.current]?.focus()\n }\n onValueChange(value)\n },\n })\n\n if (isWeb) {\n React.useEffect(() => {\n // @ts-ignore\n const node = sliderRef.current as HTMLElement\n if (!node) return\n const preventDefault = (e) => {\n e.preventDefault()\n }\n node.addEventListener('touchstart', preventDefault)\n return () => {\n node.removeEventListener('touchstart', preventDefault)\n }\n }, [])\n }\n\n function handleSlideMove(value: number) {\n updateValues(value, valueIndexToChangeRef.current)\n }\n\n function updateValues(value: number, atIndex: number) {\n const decimalCount = getDecimalCount(step)\n const snapToStep = roundValue(Math.round((value - min) / step) * step + min, decimalCount)\n const nextValue = clamp(snapToStep, [min, max])\n setValues((prevValues = []) => {\n const nextValues = getNextSortedValues(prevValues, nextValue, atIndex)\n if (hasMinStepsBetweenValues(nextValues, minStepsBetweenThumbs * step)) {\n valueIndexToChangeRef.current = nextValues.indexOf(nextValue)\n return String(nextValues) === String(prevValues) ? prevValues : nextValues\n } else {\n return prevValues\n }\n })\n }\n\n const SliderOriented = isHorizontal ? SliderHorizontal : SliderVertical\n\n return (\n <SliderProvider\n scope={props.__scopeSlider}\n disabled={disabled}\n min={min}\n max={max}\n valueIndexToChangeRef={valueIndexToChangeRef}\n thumbs={thumbRefs.current}\n values={values}\n orientation={orientation}\n size={sizeProp}\n >\n <SliderOriented\n aria-disabled={disabled}\n data-disabled={disabled ? '' : undefined}\n {...sliderProps}\n ref={composedRefs}\n min={min}\n max={max}\n onSlideStart={\n disabled\n ? undefined\n : (value: number, target) => {\n // when starting on the track, move it right away\n // when starting on thumb, dont jump until movemenet as it feels weird\n if (target !== 'thumb') {\n const closestIndex = getClosestValueIndex(values, value)\n updateValues(value, closestIndex)\n }\n }\n }\n onSlideMove={disabled ? undefined : handleSlideMove}\n onHomeKeyDown={() => !disabled && updateValues(min, 0)}\n onEndKeyDown={() => !disabled && updateValues(max, values.length - 1)}\n onStepKeyDown={({ event, direction: stepDirection }) => {\n if (!disabled) {\n const isPageKey = PAGE_KEYS.includes(event.key)\n const isSkipKey = isPageKey || (event.shiftKey && ARROW_KEYS.includes(event.key))\n const multiplier = isSkipKey ? 10 : 1\n const atIndex = valueIndexToChangeRef.current\n const value = values[atIndex]\n const stepInDirection = step * multiplier * stepDirection\n updateValues(value + stepInDirection, atIndex)\n }\n }}\n />\n {/* {isFormControl &&\n values.map((value, index) => (\n <BubbleInput\n key={index}\n name={name ? name + (values.length > 1 ? '[]' : '') : undefined}\n value={value}\n />\n ))} */}\n </SliderProvider>\n )\n }),\n {\n Track: SliderTrack,\n TrackActive: SliderTrackActive,\n Thumb: SliderThumb,\n }\n)\n\nSlider.displayName = SLIDER_NAME\n\n/* -----------------------------------------------------------------------------------------------*/\n\n// // TODO\n// const BubbleInput = (props: any) => {\n// const { value, ...inputProps } = props\n// const ref = React.useRef<HTMLInputElement>(null)\n// const prevValue = usePrevious(value)\n\n// // Bubble value change to parents (e.g form change event)\n// React.useEffect(() => {\n// const input = ref.current!\n// const inputProto = window.HTMLInputElement.prototype\n// const descriptor = Object.getOwnPropertyDescriptor(inputProto, 'value') as PropertyDescriptor\n// const setValue = descriptor.set\n// if (prevValue !== value && setValue) {\n// const event = new Event('input', { bubbles: true })\n// setValue.call(input, value)\n// input.dispatchEvent(event)\n// }\n// }, [prevValue, value])\n\n// /**\n// * We purposefully do not use `type=\"hidden\"` here otherwise forms that\n// * wrap it will not be able to access its value via the FormData API.\n// *\n// * We purposefully do not add the `value` attribute here to allow the value\n// * to be set programatically and bubble to any parent form `onChange` event.\n// * Adding the `value` will cause React to consider the programatic\n// * dispatch a duplicate and it will get swallowed.\n// */\n// return <input style={{ display: 'none' }} {...inputProps} ref={ref} defaultValue={value} />\n// }\n\n/* -----------------------------------------------------------------------------------------------*/\n\nconst Track = SliderTrack\nconst Range = SliderTrackActive\nconst Thumb = SliderThumb\n\nexport {\n Slider,\n SliderTrack,\n SliderTrackActive,\n SliderThumb,\n //\n Track,\n Range,\n Thumb,\n}\n\nexport type { SliderProps, SliderTrackProps, SliderTrackActiveProps, SliderThumbProps }\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/SliderImpl.js
CHANGED
|
@@ -1,34 +1,3 @@
|
|
|
1
|
-
var __defProp = Object.defineProperty;
|
|
2
|
-
var __defProps = Object.defineProperties;
|
|
3
|
-
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
4
|
-
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
5
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
-
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
7
|
-
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
8
|
-
var __spreadValues = (a, b) => {
|
|
9
|
-
for (var prop in b || (b = {}))
|
|
10
|
-
if (__hasOwnProp.call(b, prop))
|
|
11
|
-
__defNormalProp(a, prop, b[prop]);
|
|
12
|
-
if (__getOwnPropSymbols)
|
|
13
|
-
for (var prop of __getOwnPropSymbols(b)) {
|
|
14
|
-
if (__propIsEnum.call(b, prop))
|
|
15
|
-
__defNormalProp(a, prop, b[prop]);
|
|
16
|
-
}
|
|
17
|
-
return a;
|
|
18
|
-
};
|
|
19
|
-
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
20
|
-
var __objRest = (source, exclude) => {
|
|
21
|
-
var target = {};
|
|
22
|
-
for (var prop in source)
|
|
23
|
-
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
24
|
-
target[prop] = source[prop];
|
|
25
|
-
if (source != null && __getOwnPropSymbols)
|
|
26
|
-
for (var prop of __getOwnPropSymbols(source)) {
|
|
27
|
-
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
28
|
-
target[prop] = source[prop];
|
|
29
|
-
}
|
|
30
|
-
return target;
|
|
31
|
-
};
|
|
32
1
|
import { composeEventHandlers, getSize, getVariableValue, isWeb, styled } from "@tamagui/core";
|
|
33
2
|
import { YStack } from "@tamagui/stacks";
|
|
34
3
|
import * as React from "react";
|
|
@@ -63,43 +32,36 @@ const SliderFrame = styled(DirectionalYStack, {
|
|
|
63
32
|
}
|
|
64
33
|
});
|
|
65
34
|
const SliderImpl = React.forwardRef((props, forwardedRef) => {
|
|
66
|
-
const
|
|
35
|
+
const {
|
|
67
36
|
__scopeSlider,
|
|
68
37
|
onSlideStart,
|
|
69
38
|
onSlideMove,
|
|
70
39
|
onSlideEnd,
|
|
71
40
|
onHomeKeyDown,
|
|
72
41
|
onEndKeyDown,
|
|
73
|
-
onStepKeyDown
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
"onSlideStart",
|
|
77
|
-
"onSlideMove",
|
|
78
|
-
"onSlideEnd",
|
|
79
|
-
"onHomeKeyDown",
|
|
80
|
-
"onEndKeyDown",
|
|
81
|
-
"onStepKeyDown"
|
|
82
|
-
]);
|
|
42
|
+
onStepKeyDown,
|
|
43
|
+
...sliderProps
|
|
44
|
+
} = props;
|
|
83
45
|
const context = useSliderContext(SLIDER_NAME, __scopeSlider);
|
|
84
|
-
return /* @__PURE__ */ React.createElement(SliderFrame,
|
|
85
|
-
size: "$4"
|
|
86
|
-
|
|
46
|
+
return /* @__PURE__ */ React.createElement(SliderFrame, {
|
|
47
|
+
size: "$4",
|
|
48
|
+
...sliderProps,
|
|
87
49
|
"data-orientation": sliderProps.orientation,
|
|
88
|
-
ref: forwardedRef
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
50
|
+
ref: forwardedRef,
|
|
51
|
+
...isWeb && {
|
|
52
|
+
onKeyDown: (event) => {
|
|
53
|
+
if (event.key === "Home") {
|
|
54
|
+
onHomeKeyDown(event);
|
|
55
|
+
event.preventDefault();
|
|
56
|
+
} else if (event.key === "End") {
|
|
57
|
+
onEndKeyDown(event);
|
|
58
|
+
event.preventDefault();
|
|
59
|
+
} else if (PAGE_KEYS.concat(ARROW_KEYS).includes(event.key)) {
|
|
60
|
+
onStepKeyDown(event);
|
|
61
|
+
event.preventDefault();
|
|
62
|
+
}
|
|
100
63
|
}
|
|
101
|
-
}
|
|
102
|
-
}), {
|
|
64
|
+
},
|
|
103
65
|
onMoveShouldSetResponderCapture: () => true,
|
|
104
66
|
onScrollShouldSetResponder: () => true,
|
|
105
67
|
onScrollShouldSetResponderCapture: () => true,
|
|
@@ -127,7 +89,7 @@ const SliderImpl = React.forwardRef((props, forwardedRef) => {
|
|
|
127
89
|
onResponderRelease: composeEventHandlers(props.onResponderRelease, (event) => {
|
|
128
90
|
onSlideEnd(event);
|
|
129
91
|
})
|
|
130
|
-
})
|
|
92
|
+
});
|
|
131
93
|
});
|
|
132
94
|
export {
|
|
133
95
|
DirectionalYStack,
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/SliderImpl.tsx"],
|
|
4
4
|
"sourcesContent": ["/* -------------------------------------------------------------------------------------------------\n * SliderImpl\n * -----------------------------------------------------------------------------------------------*/\n\nimport { composeEventHandlers, getSize, getVariableValue, isWeb, styled } from '@tamagui/core'\nimport { YStack } from '@tamagui/stacks'\nimport * as React from 'react'\nimport { View } from 'react-native'\n\nimport { ARROW_KEYS, PAGE_KEYS, SLIDER_NAME, useSliderContext } from './constants'\nimport { ScopedProps, SliderImplProps } from './types'\n\nexport const DirectionalYStack = styled(YStack, {\n variants: {\n orientation: {\n horizontal: {},\n vertical: {},\n },\n },\n})\n\nexport const SliderFrame = styled(DirectionalYStack, {\n position: 'relative',\n\n variants: {\n size: (val, extras) => {\n const orientation = extras.props.orientation\n const size = Math.round(getVariableValue(getSize(val)) / 6)\n if (orientation === 'horizontal') {\n return {\n height: size,\n borderRadius: size,\n justifyContent: 'center',\n }\n }\n return {\n width: size,\n borderRadius: size,\n alignItems: 'center',\n }\n },\n },\n})\n\nexport const SliderImpl = React.forwardRef<View, SliderImplProps>(\n (props: ScopedProps<SliderImplProps>, forwardedRef) => {\n const {\n __scopeSlider,\n onSlideStart,\n onSlideMove,\n onSlideEnd,\n onHomeKeyDown,\n onEndKeyDown,\n onStepKeyDown,\n ...sliderProps\n } = props\n const context = useSliderContext(SLIDER_NAME, __scopeSlider)\n return (\n <SliderFrame\n size=\"$4\"\n {...sliderProps}\n data-orientation={sliderProps.orientation}\n ref={forwardedRef}\n {...(isWeb && {\n onKeyDown: (event) => {\n if (event.key === 'Home') {\n onHomeKeyDown(event)\n // Prevent scrolling to page start\n event.preventDefault()\n } else if (event.key === 'End') {\n onEndKeyDown(event)\n // Prevent scrolling to page end\n event.preventDefault()\n } else if (PAGE_KEYS.concat(ARROW_KEYS).includes(event.key)) {\n onStepKeyDown(event)\n // Prevent scrolling for directional key presses\n event.preventDefault()\n }\n },\n })}\n onMoveShouldSetResponderCapture={() => true}\n onScrollShouldSetResponder={() => true}\n onScrollShouldSetResponderCapture={() => true}\n onMoveShouldSetResponder={() => true}\n onStartShouldSetResponder={() => true}\n // onStartShouldSetResponderCapture={() => true}\n onResponderTerminationRequest={() => {\n return false\n }}\n onResponderGrant={composeEventHandlers(props.onResponderGrant, (event) => {\n const target = event.target as HTMLElement | number\n console.log('target', target, context.thumbs.has(target), context.thumbs)\n const isStartingOnThumb = context.thumbs.has(target)\n // // Prevent browser focus behaviour because we focus a thumb manually when values change.\n // Touch devices have a delay before focusing so won't focus if touch immediately moves\n // away from target (sliding). We want thumb to focus regardless.\n if (isWeb && target instanceof HTMLElement) {\n if (context.thumbs.has(target)) {\n target.focus()\n }\n }\n onSlideStart(event, isStartingOnThumb ? 'thumb' : 'track')\n })}\n onResponderMove={composeEventHandlers(props.onResponderMove, (event) => {\n event.preventDefault()\n event.stopPropagation()\n\n // const target = event.target as HTMLElement\n onSlideMove(event)\n })}\n onResponderRelease={composeEventHandlers(props.onResponderRelease, (event) => {\n // const target = event.target as HTMLElement\n onSlideEnd(event)\n })}\n />\n )\n }\n)\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": "AAIA;AACA;AACA;AAGA;AAGO,MAAM,oBAAoB,OAAO,QAAQ;AAAA,EAC9C,UAAU;AAAA,IACR,aAAa;AAAA,MACX,YAAY,CAAC;AAAA,MACb,UAAU,CAAC;AAAA,IACb;AAAA,EACF;AACF,CAAC;AAEM,MAAM,cAAc,OAAO,mBAAmB;AAAA,EACnD,UAAU;AAAA,EAEV,UAAU;AAAA,IACR,MAAM,CAAC,KAAK,WAAW;AACrB,YAAM,cAAc,OAAO,MAAM;AACjC,YAAM,OAAO,KAAK,MAAM,iBAAiB,QAAQ,GAAG,CAAC,IAAI,CAAC;AAC1D,UAAI,gBAAgB,cAAc;AAChC,eAAO;AAAA,UACL,QAAQ;AAAA,UACR,cAAc;AAAA,UACd,gBAAgB;AAAA,QAClB;AAAA,MACF;AACA,aAAO;AAAA,QACL,OAAO;AAAA,QACP,cAAc;AAAA,QACd,YAAY;AAAA,MACd;AAAA,IACF;AAAA,EACF;AACF,CAAC;AAEM,MAAM,aAAa,MAAM,WAC9B,CAAC,OAAqC,iBAAiB;AACrD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,OACG;AAAA,MACD;AACJ,QAAM,UAAU,iBAAiB,aAAa,aAAa;AAC3D,SACE,oCAAC;AAAA,IACC,MAAK;AAAA,IACJ,GAAG;AAAA,IACJ,oBAAkB,YAAY;AAAA,IAC9B,KAAK;AAAA,IACJ,GAAI,SAAS;AAAA,MACZ,WAAW,CAAC,UAAU;AACpB,YAAI,MAAM,QAAQ,QAAQ;AACxB,wBAAc,KAAK;AAEnB,gBAAM,eAAe;AAAA,QACvB,WAAW,MAAM,QAAQ,OAAO;AAC9B,uBAAa,KAAK;AAElB,gBAAM,eAAe;AAAA,QACvB,WAAW,UAAU,OAAO,UAAU,EAAE,SAAS,MAAM,GAAG,GAAG;AAC3D,wBAAc,KAAK;AAEnB,gBAAM,eAAe;AAAA,QACvB;AAAA,MACF;AAAA,IACF;AAAA,IACA,iCAAiC,MAAM;AAAA,IACvC,4BAA4B,MAAM;AAAA,IAClC,mCAAmC,MAAM;AAAA,IACzC,0BAA0B,MAAM;AAAA,IAChC,2BAA2B,MAAM;AAAA,IAEjC,+BAA+B,MAAM;AACnC,aAAO;AAAA,IACT;AAAA,IACA,kBAAkB,qBAAqB,MAAM,kBAAkB,CAAC,UAAU;AACxE,YAAM,SAAS,MAAM;AACrB,cAAQ,IAAI,UAAU,QAAQ,QAAQ,OAAO,IAAI,MAAM,GAAG,QAAQ,MAAM;AACxE,YAAM,oBAAoB,QAAQ,OAAO,IAAI,MAAM;AAInD,UAAI,SAAS,kBAAkB,aAAa;AAC1C,YAAI,QAAQ,OAAO,IAAI,MAAM,GAAG;AAC9B,iBAAO,MAAM;AAAA,QACf;AAAA,MACF;AACA,mBAAa,OAAO,oBAAoB,UAAU,OAAO;AAAA,IAC3D,CAAC;AAAA,IACD,iBAAiB,qBAAqB,MAAM,iBAAiB,CAAC,UAAU;AACtE,YAAM,eAAe;AACrB,YAAM,gBAAgB;AAGtB,kBAAY,KAAK;AAAA,IACnB,CAAC;AAAA,IACD,oBAAoB,qBAAqB,MAAM,oBAAoB,CAAC,UAAU;AAE5E,iBAAW,KAAK;AAAA,IAClB,CAAC;AAAA,GACH;AAEJ,CACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tamagui/slider",
|
|
3
|
-
"version": "1.0.1-beta.
|
|
3
|
+
"version": "1.0.1-beta.109",
|
|
4
4
|
"sideEffects": [
|
|
5
5
|
"*.css"
|
|
6
6
|
],
|
|
@@ -21,12 +21,12 @@
|
|
|
21
21
|
"clean:build": "tamagui-build clean:build"
|
|
22
22
|
},
|
|
23
23
|
"dependencies": {
|
|
24
|
-
"@tamagui/compose-refs": "^1.0.1-beta.
|
|
25
|
-
"@tamagui/core": "^1.0.1-beta.
|
|
26
|
-
"@tamagui/create-context": "^1.0.1-beta.
|
|
27
|
-
"@tamagui/stacks": "^1.0.1-beta.
|
|
28
|
-
"@tamagui/use-controllable-state": "^1.0.1-beta.
|
|
29
|
-
"@tamagui/use-direction": "^1.0.1-beta.
|
|
24
|
+
"@tamagui/compose-refs": "^1.0.1-beta.109",
|
|
25
|
+
"@tamagui/core": "^1.0.1-beta.109",
|
|
26
|
+
"@tamagui/create-context": "^1.0.1-beta.109",
|
|
27
|
+
"@tamagui/stacks": "^1.0.1-beta.109",
|
|
28
|
+
"@tamagui/use-controllable-state": "^1.0.1-beta.109",
|
|
29
|
+
"@tamagui/use-direction": "^1.0.1-beta.109"
|
|
30
30
|
},
|
|
31
31
|
"peerDependencies": {
|
|
32
32
|
"react": "*",
|
|
@@ -34,7 +34,7 @@
|
|
|
34
34
|
"react-native": "*"
|
|
35
35
|
},
|
|
36
36
|
"devDependencies": {
|
|
37
|
-
"@tamagui/build": "^1.0.1-beta.
|
|
37
|
+
"@tamagui/build": "^1.0.1-beta.109",
|
|
38
38
|
"@types/react-native": "^0.69.2",
|
|
39
39
|
"react": "*",
|
|
40
40
|
"react-dom": "*",
|
package/types/constants.d.ts
CHANGED
package/types/constants.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../src/constants.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAG1C,OAAO,EAAE,SAAS,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAA;AAEvD,eAAO,MAAM,WAAW,WAAW,CAAA;AAEnC,eAAO,MAAO,mBAAmB;;;;;;8HAAE,iBAAiB,+CAAmC,CAAA;AAEvF,eAAO,MAAO,cAAc;;;;;;GAAE,gBAAgB,8HACQ,CAAA;AAEtD,eAAO,MAAO,yBAAyB;;mBAC1B,QAAQ,GAAG,MAAM,GAAG,OAAO;iBAC7B,KAAK,GAAG,OAAO,GAAG,MAAM;kBACvB,OAAO,GAAG,QAAQ;cACtB,MAAM,GAAG,UAAU;mBACd,MAAM;;;uBAJN,QAAQ,GAAG,MAAM,GAAG,OAAO;qBAC7B,KAAK,GAAG,OAAO,GAAG,MAAM;sBACvB,OAAO,GAAG,QAAQ;kBACtB,MAAM,GAAG,UAAU;uBACd,MAAM;;;;;GALsB,2BAA2B;eACvD,QAAQ,GAAG,MAAM,GAAG,OAAO;aAC7B,KAAK,GAAG,OAAO,GAAG,MAAM;cACvB,OAAO,GAAG,QAAQ;UACtB,MAAM,GAAG,UAAU;eACd,MAAM;;eAJN,QAAQ,GAAG,MAAM,GAAG,OAAO;aAC7B,KAAK,GAAG,OAAO,GAAG,MAAM;cACvB,OAAO,GAAG,QAAQ;UACtB,MAAM,GAAG,UAAU;eACd,MAAM;CAOjB,CAAA;AAEF,eAAO,MAAM,SAAS,UAAyB,CAAA;AAC/C,eAAO,MAAM,UAAU,UAAsD,CAAA;AAC7E,eAAO,MAAM,SAAS,EAAE,MAAM,CAAC,SAAS,EAAE,MAAM,EAAE,CAGjD,CAAA"}
|
|
1
|
+
{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../src/constants.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAG1C,OAAO,EAAE,SAAS,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAA;AAEvD,eAAO,MAAM,WAAW,WAAW,CAAA;AAEnC,eAAO,MAAO,mBAAmB;;;;;;8HAAE,iBAAiB,+CAAmC,CAAA;AAEvF,eAAO,MAAO,cAAc;;;;;;GAAE,gBAAgB,8HACQ,CAAA;AAEtD,eAAO,MAAO,yBAAyB;;mBAC1B,QAAQ,GAAG,MAAM,GAAG,OAAO;iBAC7B,KAAK,GAAG,OAAO,GAAG,MAAM;kBACvB,OAAO,GAAG,QAAQ;cACtB,MAAM,GAAG,UAAU;mBACd,MAAM;;;uBAJN,QAAQ,GAAG,MAAM,GAAG,OAAO;qBAC7B,KAAK,GAAG,OAAO,GAAG,MAAM;sBACvB,OAAO,GAAG,QAAQ;kBACtB,MAAM,GAAG,UAAU;uBACd,MAAM;;;;;GALsB,2BAA2B;eACvD,QAAQ,GAAG,MAAM,GAAG,OAAO;aAC7B,KAAK,GAAG,OAAO,GAAG,MAAM;cACvB,OAAO,GAAG,QAAQ;UACtB,MAAM,GAAG,UAAU;eACd,MAAM;;eAJN,QAAQ,GAAG,MAAM,GAAG,OAAO;aAC7B,KAAK,GAAG,OAAO,GAAG,MAAM;cACvB,OAAO,GAAG,QAAQ;UACtB,MAAM,GAAG,UAAU;eACd,MAAM;CAOjB,CAAA;AAEF,eAAO,MAAM,SAAS,UAAyB,CAAA;AAC/C,eAAO,MAAM,UAAU,UAAsD,CAAA;AAC7E,eAAO,MAAM,SAAS,EAAE,MAAM,CAAC,SAAS,EAAE,MAAM,EAAE,CAGjD,CAAA"}
|