@react-aria/slider 3.0.5 → 3.0.6-nightly.3113
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/main.js +47 -47
- package/dist/module.js +46 -46
- package/package.json +10 -10
package/dist/main.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
var $
|
|
2
|
-
var $
|
|
3
|
-
var $
|
|
4
|
-
var $
|
|
5
|
-
var $
|
|
6
|
-
var $
|
|
1
|
+
var $coMqq$reactariautils = require("@react-aria/utils");
|
|
2
|
+
var $coMqq$react = require("react");
|
|
3
|
+
var $coMqq$reactariainteractions = require("@react-aria/interactions");
|
|
4
|
+
var $coMqq$reactarialabel = require("@react-aria/label");
|
|
5
|
+
var $coMqq$reactariai18n = require("@react-aria/i18n");
|
|
6
|
+
var $coMqq$reactariafocus = require("@react-aria/focus");
|
|
7
7
|
|
|
8
8
|
function $parcel$exportWildcard(dest, source) {
|
|
9
9
|
Object.keys(source).forEach(function(key) {
|
|
@@ -24,13 +24,13 @@ function $parcel$exportWildcard(dest, source) {
|
|
|
24
24
|
function $parcel$export(e, n, v, s) {
|
|
25
25
|
Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
|
|
26
26
|
}
|
|
27
|
-
var $
|
|
27
|
+
var $481f97d830e3ede6$exports = {};
|
|
28
28
|
|
|
29
|
-
$parcel$export($
|
|
29
|
+
$parcel$export($481f97d830e3ede6$exports, "useSlider", () => $481f97d830e3ede6$export$56b2c08e277f365);
|
|
30
30
|
|
|
31
|
-
const $
|
|
32
|
-
function $
|
|
33
|
-
let id = $
|
|
31
|
+
const $28db8d634be2fa58$export$7a8d2b02c9371cbf = new WeakMap();
|
|
32
|
+
function $28db8d634be2fa58$export$68e648cbec363a18(state, index) {
|
|
33
|
+
let id = $28db8d634be2fa58$export$7a8d2b02c9371cbf.get(state);
|
|
34
34
|
if (!id) throw new Error('Unknown slider state');
|
|
35
35
|
return `${id}-${index}`;
|
|
36
36
|
}
|
|
@@ -40,24 +40,24 @@ function $6228e523e3103081$export$68e648cbec363a18(state, index) {
|
|
|
40
40
|
|
|
41
41
|
|
|
42
42
|
|
|
43
|
-
function $
|
|
44
|
-
let { labelProps: labelProps , fieldProps: fieldProps } = $
|
|
43
|
+
function $481f97d830e3ede6$export$56b2c08e277f365(props, state, trackRef) {
|
|
44
|
+
let { labelProps: labelProps , fieldProps: fieldProps } = $coMqq$reactarialabel.useLabel(props);
|
|
45
45
|
let isVertical = props.orientation === 'vertical';
|
|
46
46
|
var _id;
|
|
47
47
|
// Attach id of the label to the state so it can be accessed by useSliderThumb.
|
|
48
|
-
$
|
|
49
|
-
let { direction: direction } = $
|
|
50
|
-
let { addGlobalListener: addGlobalListener , removeGlobalListener: removeGlobalListener } = $
|
|
48
|
+
$28db8d634be2fa58$export$7a8d2b02c9371cbf.set(state, (_id = labelProps.id) !== null && _id !== void 0 ? _id : fieldProps.id);
|
|
49
|
+
let { direction: direction } = $coMqq$reactariai18n.useLocale();
|
|
50
|
+
let { addGlobalListener: addGlobalListener , removeGlobalListener: removeGlobalListener } = $coMqq$reactariautils.useGlobalListeners();
|
|
51
51
|
// When the user clicks or drags the track, we want the motion to set and drag the
|
|
52
52
|
// closest thumb. Hence we also need to install useMove() on the track element.
|
|
53
53
|
// Here, we keep track of which index is the "closest" to the drag start point.
|
|
54
54
|
// It is set onMouseDown/onTouchDown; see trackProps below.
|
|
55
|
-
const realTimeTrackDraggingIndex = $
|
|
56
|
-
const stateRef = $
|
|
55
|
+
const realTimeTrackDraggingIndex = $coMqq$react.useRef(null);
|
|
56
|
+
const stateRef = $coMqq$react.useRef(null);
|
|
57
57
|
stateRef.current = state;
|
|
58
58
|
const reverseX = direction === 'rtl';
|
|
59
|
-
const currentPosition = $
|
|
60
|
-
const { moveProps: moveProps } = $
|
|
59
|
+
const currentPosition = $coMqq$react.useRef(null);
|
|
60
|
+
const { moveProps: moveProps } = $coMqq$reactariainteractions.useMove({
|
|
61
61
|
onMoveStart () {
|
|
62
62
|
currentPosition.current = null;
|
|
63
63
|
},
|
|
@@ -68,7 +68,7 @@ function $8410f0d3cc2f072a$export$56b2c08e277f365(props, state, trackRef) {
|
|
|
68
68
|
if (isVertical || reverseX) delta = -delta;
|
|
69
69
|
currentPosition.current += delta;
|
|
70
70
|
if (realTimeTrackDraggingIndex.current != null && trackRef.current) {
|
|
71
|
-
const percent = $
|
|
71
|
+
const percent = $coMqq$reactariautils.clamp(currentPosition.current / size, 0, 1);
|
|
72
72
|
stateRef.current.setThumbPercent(realTimeTrackDraggingIndex.current, percent);
|
|
73
73
|
}
|
|
74
74
|
},
|
|
@@ -79,7 +79,7 @@ function $8410f0d3cc2f072a$export$56b2c08e277f365(props, state, trackRef) {
|
|
|
79
79
|
}
|
|
80
80
|
}
|
|
81
81
|
});
|
|
82
|
-
let currentPointer = $
|
|
82
|
+
let currentPointer = $coMqq$react.useRef(undefined);
|
|
83
83
|
let onDownTrack = (e, id, clientX, clientY)=>{
|
|
84
84
|
// We only trigger track-dragging if the user clicks on the track itself and nothing is currently being dragged.
|
|
85
85
|
if (trackRef.current && !props.isDisabled && state.values.every((_, i)=>!state.isThumbDragging(i)
|
|
@@ -144,8 +144,8 @@ function $8410f0d3cc2f072a$export$56b2c08e277f365(props, state, trackRef) {
|
|
|
144
144
|
var // Safari does not focus <input type="range"> elements when clicking on an associated <label>,
|
|
145
145
|
// so do it manually. In addition, make sure we show the focus ring.
|
|
146
146
|
ref;
|
|
147
|
-
(ref = document.getElementById($
|
|
148
|
-
$
|
|
147
|
+
(ref = document.getElementById($28db8d634be2fa58$export$68e648cbec363a18(state, 0))) === null || ref === void 0 ? void 0 : ref.focus();
|
|
148
|
+
$coMqq$reactariainteractions.setInteractionModality('keyboard');
|
|
149
149
|
};
|
|
150
150
|
}
|
|
151
151
|
return {
|
|
@@ -157,7 +157,7 @@ function $8410f0d3cc2f072a$export$56b2c08e277f365(props, state, trackRef) {
|
|
|
157
157
|
role: 'group',
|
|
158
158
|
...fieldProps
|
|
159
159
|
},
|
|
160
|
-
trackProps: $
|
|
160
|
+
trackProps: $coMqq$reactariautils.mergeProps({
|
|
161
161
|
onMouseDown (e) {
|
|
162
162
|
if (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey) return;
|
|
163
163
|
onDownTrack(e, undefined, e.clientX, e.clientY);
|
|
@@ -171,7 +171,7 @@ function $8410f0d3cc2f072a$export$56b2c08e277f365(props, state, trackRef) {
|
|
|
171
171
|
}
|
|
172
172
|
}, moveProps),
|
|
173
173
|
outputProps: {
|
|
174
|
-
htmlFor: state.values.map((_, index)=>$
|
|
174
|
+
htmlFor: state.values.map((_, index)=>$28db8d634be2fa58$export$68e648cbec363a18(state, index)
|
|
175
175
|
).join(' '),
|
|
176
176
|
'aria-live': 'off'
|
|
177
177
|
}
|
|
@@ -179,9 +179,9 @@ function $8410f0d3cc2f072a$export$56b2c08e277f365(props, state, trackRef) {
|
|
|
179
179
|
}
|
|
180
180
|
|
|
181
181
|
|
|
182
|
-
var $
|
|
182
|
+
var $5eb806b626475377$exports = {};
|
|
183
183
|
|
|
184
|
-
$parcel$export($
|
|
184
|
+
$parcel$export($5eb806b626475377$exports, "useSliderThumb", () => $5eb806b626475377$export$8d15029008292ae);
|
|
185
185
|
|
|
186
186
|
|
|
187
187
|
|
|
@@ -189,36 +189,36 @@ $parcel$export($e198e8de7fbcfebb$exports, "useSliderThumb", () => $e198e8de7fbcf
|
|
|
189
189
|
|
|
190
190
|
|
|
191
191
|
|
|
192
|
-
function $
|
|
192
|
+
function $5eb806b626475377$export$8d15029008292ae(opts, state) {
|
|
193
193
|
let { index: index , isRequired: isRequired , isDisabled: isDisabled , validationState: validationState , trackRef: trackRef , inputRef: inputRef } = opts;
|
|
194
194
|
let isVertical = opts.orientation === 'vertical';
|
|
195
|
-
let { direction: direction } = $
|
|
196
|
-
let { addGlobalListener: addGlobalListener , removeGlobalListener: removeGlobalListener } = $
|
|
197
|
-
let labelId = $
|
|
195
|
+
let { direction: direction } = $coMqq$reactariai18n.useLocale();
|
|
196
|
+
let { addGlobalListener: addGlobalListener , removeGlobalListener: removeGlobalListener } = $coMqq$reactariautils.useGlobalListeners();
|
|
197
|
+
let labelId = $28db8d634be2fa58$export$7a8d2b02c9371cbf.get(state);
|
|
198
198
|
var ref1;
|
|
199
|
-
const { labelProps: labelProps , fieldProps: fieldProps } = $
|
|
199
|
+
const { labelProps: labelProps , fieldProps: fieldProps } = $coMqq$reactarialabel.useLabel({
|
|
200
200
|
...opts,
|
|
201
|
-
id: $
|
|
201
|
+
id: $28db8d634be2fa58$export$68e648cbec363a18(state, index),
|
|
202
202
|
'aria-labelledby': `${labelId} ${(ref1 = opts['aria-labelledby']) !== null && ref1 !== void 0 ? ref1 : ''}`.trim()
|
|
203
203
|
});
|
|
204
204
|
const value = state.values[index];
|
|
205
|
-
const focusInput = $
|
|
206
|
-
if (inputRef.current) $
|
|
205
|
+
const focusInput = $coMqq$react.useCallback(()=>{
|
|
206
|
+
if (inputRef.current) $coMqq$reactariautils.focusWithoutScrolling(inputRef.current);
|
|
207
207
|
}, [
|
|
208
208
|
inputRef
|
|
209
209
|
]);
|
|
210
210
|
const isFocused = state.focusedThumb === index;
|
|
211
|
-
$
|
|
211
|
+
$coMqq$react.useEffect(()=>{
|
|
212
212
|
if (isFocused) focusInput();
|
|
213
213
|
}, [
|
|
214
214
|
isFocused,
|
|
215
215
|
focusInput
|
|
216
216
|
]);
|
|
217
|
-
const stateRef = $
|
|
217
|
+
const stateRef = $coMqq$react.useRef(null);
|
|
218
218
|
stateRef.current = state;
|
|
219
219
|
let reverseX = direction === 'rtl';
|
|
220
|
-
let currentPosition = $
|
|
221
|
-
let { moveProps: moveProps } = $
|
|
220
|
+
let currentPosition = $coMqq$react.useRef(null);
|
|
221
|
+
let { moveProps: moveProps } = $coMqq$reactariainteractions.useMove({
|
|
222
222
|
onMoveStart () {
|
|
223
223
|
currentPosition.current = null;
|
|
224
224
|
state.setThumbDragging(index, true);
|
|
@@ -235,7 +235,7 @@ function $e198e8de7fbcfebb$export$8d15029008292ae(opts, state) {
|
|
|
235
235
|
let delta = isVertical ? deltaY : deltaX;
|
|
236
236
|
if (isVertical || reverseX) delta = -delta;
|
|
237
237
|
currentPosition.current += delta;
|
|
238
|
-
stateRef.current.setThumbPercent(index, $
|
|
238
|
+
stateRef.current.setThumbPercent(index, $coMqq$reactariautils.clamp(currentPosition.current / size, 0, 1));
|
|
239
239
|
}
|
|
240
240
|
},
|
|
241
241
|
onMoveEnd () {
|
|
@@ -244,12 +244,12 @@ function $e198e8de7fbcfebb$export$8d15029008292ae(opts, state) {
|
|
|
244
244
|
});
|
|
245
245
|
// Immediately register editability with the state
|
|
246
246
|
state.setThumbEditable(index, !isDisabled);
|
|
247
|
-
const { focusableProps: focusableProps } = $
|
|
247
|
+
const { focusableProps: focusableProps } = $coMqq$reactariafocus.useFocusable($coMqq$reactariautils.mergeProps(opts, {
|
|
248
248
|
onFocus: ()=>state.setFocusedThumb(index)
|
|
249
249
|
,
|
|
250
250
|
onBlur: ()=>state.setFocusedThumb(undefined)
|
|
251
251
|
}), inputRef);
|
|
252
|
-
let currentPointer = $
|
|
252
|
+
let currentPointer = $coMqq$react.useRef(undefined);
|
|
253
253
|
let onDown = (id)=>{
|
|
254
254
|
focusInput();
|
|
255
255
|
currentPointer.current = id;
|
|
@@ -275,7 +275,7 @@ function $e198e8de7fbcfebb$export$8d15029008292ae(opts, state) {
|
|
|
275
275
|
// we focus the range input, and let the browser handle the keyboard
|
|
276
276
|
// interactions; we then listen to input's onChange to update state.
|
|
277
277
|
return {
|
|
278
|
-
inputProps: $
|
|
278
|
+
inputProps: $coMqq$reactariautils.mergeProps(focusableProps, fieldProps, {
|
|
279
279
|
type: 'range',
|
|
280
280
|
tabIndex: !isDisabled ? 0 : undefined,
|
|
281
281
|
min: state.getThumbMinValue(index),
|
|
@@ -292,7 +292,7 @@ function $e198e8de7fbcfebb$export$8d15029008292ae(opts, state) {
|
|
|
292
292
|
state.setThumbValue(index, parseFloat(e.target.value));
|
|
293
293
|
}
|
|
294
294
|
}),
|
|
295
|
-
thumbProps: !isDisabled ? $
|
|
295
|
+
thumbProps: !isDisabled ? $coMqq$reactariautils.mergeProps(moveProps, {
|
|
296
296
|
onMouseDown: (e)=>{
|
|
297
297
|
if (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey) return;
|
|
298
298
|
onDown();
|
|
@@ -311,8 +311,8 @@ function $e198e8de7fbcfebb$export$8d15029008292ae(opts, state) {
|
|
|
311
311
|
}
|
|
312
312
|
|
|
313
313
|
|
|
314
|
-
$parcel$exportWildcard(module.exports, $
|
|
315
|
-
$parcel$exportWildcard(module.exports, $
|
|
314
|
+
$parcel$exportWildcard(module.exports, $481f97d830e3ede6$exports);
|
|
315
|
+
$parcel$exportWildcard(module.exports, $5eb806b626475377$exports);
|
|
316
316
|
|
|
317
317
|
|
|
318
318
|
//# sourceMappingURL=main.js.map
|
package/dist/module.js
CHANGED
|
@@ -1,20 +1,20 @@
|
|
|
1
|
-
import {useGlobalListeners as $
|
|
2
|
-
import {useRef as $
|
|
3
|
-
import {useMove as $
|
|
4
|
-
import {useLabel as $
|
|
5
|
-
import {useLocale as $
|
|
6
|
-
import {useFocusable as $
|
|
1
|
+
import {useGlobalListeners as $fA3fN$useGlobalListeners, clamp as $fA3fN$clamp, mergeProps as $fA3fN$mergeProps, focusWithoutScrolling as $fA3fN$focusWithoutScrolling} from "@react-aria/utils";
|
|
2
|
+
import {useRef as $fA3fN$useRef, useCallback as $fA3fN$useCallback, useEffect as $fA3fN$useEffect} from "react";
|
|
3
|
+
import {useMove as $fA3fN$useMove, setInteractionModality as $fA3fN$setInteractionModality} from "@react-aria/interactions";
|
|
4
|
+
import {useLabel as $fA3fN$useLabel} from "@react-aria/label";
|
|
5
|
+
import {useLocale as $fA3fN$useLocale} from "@react-aria/i18n";
|
|
6
|
+
import {useFocusable as $fA3fN$useFocusable} from "@react-aria/focus";
|
|
7
7
|
|
|
8
8
|
function $parcel$export(e, n, v, s) {
|
|
9
9
|
Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
|
|
10
10
|
}
|
|
11
|
-
var $
|
|
11
|
+
var $bcca50147b47f54d$exports = {};
|
|
12
12
|
|
|
13
|
-
$parcel$export($
|
|
13
|
+
$parcel$export($bcca50147b47f54d$exports, "useSlider", () => $bcca50147b47f54d$export$56b2c08e277f365);
|
|
14
14
|
|
|
15
|
-
const $
|
|
16
|
-
function $
|
|
17
|
-
let id = $
|
|
15
|
+
const $aa519ee6cf463259$export$7a8d2b02c9371cbf = new WeakMap();
|
|
16
|
+
function $aa519ee6cf463259$export$68e648cbec363a18(state, index) {
|
|
17
|
+
let id = $aa519ee6cf463259$export$7a8d2b02c9371cbf.get(state);
|
|
18
18
|
if (!id) throw new Error('Unknown slider state');
|
|
19
19
|
return `${id}-${index}`;
|
|
20
20
|
}
|
|
@@ -24,24 +24,24 @@ function $8983e12064147eaf$export$68e648cbec363a18(state, index) {
|
|
|
24
24
|
|
|
25
25
|
|
|
26
26
|
|
|
27
|
-
function $
|
|
28
|
-
let { labelProps: labelProps , fieldProps: fieldProps } = $
|
|
27
|
+
function $bcca50147b47f54d$export$56b2c08e277f365(props, state, trackRef) {
|
|
28
|
+
let { labelProps: labelProps , fieldProps: fieldProps } = $fA3fN$useLabel(props);
|
|
29
29
|
let isVertical = props.orientation === 'vertical';
|
|
30
30
|
var _id;
|
|
31
31
|
// Attach id of the label to the state so it can be accessed by useSliderThumb.
|
|
32
|
-
$
|
|
33
|
-
let { direction: direction } = $
|
|
34
|
-
let { addGlobalListener: addGlobalListener , removeGlobalListener: removeGlobalListener } = $
|
|
32
|
+
$aa519ee6cf463259$export$7a8d2b02c9371cbf.set(state, (_id = labelProps.id) !== null && _id !== void 0 ? _id : fieldProps.id);
|
|
33
|
+
let { direction: direction } = $fA3fN$useLocale();
|
|
34
|
+
let { addGlobalListener: addGlobalListener , removeGlobalListener: removeGlobalListener } = $fA3fN$useGlobalListeners();
|
|
35
35
|
// When the user clicks or drags the track, we want the motion to set and drag the
|
|
36
36
|
// closest thumb. Hence we also need to install useMove() on the track element.
|
|
37
37
|
// Here, we keep track of which index is the "closest" to the drag start point.
|
|
38
38
|
// It is set onMouseDown/onTouchDown; see trackProps below.
|
|
39
|
-
const realTimeTrackDraggingIndex = $
|
|
40
|
-
const stateRef = $
|
|
39
|
+
const realTimeTrackDraggingIndex = $fA3fN$useRef(null);
|
|
40
|
+
const stateRef = $fA3fN$useRef(null);
|
|
41
41
|
stateRef.current = state;
|
|
42
42
|
const reverseX = direction === 'rtl';
|
|
43
|
-
const currentPosition = $
|
|
44
|
-
const { moveProps: moveProps } = $
|
|
43
|
+
const currentPosition = $fA3fN$useRef(null);
|
|
44
|
+
const { moveProps: moveProps } = $fA3fN$useMove({
|
|
45
45
|
onMoveStart () {
|
|
46
46
|
currentPosition.current = null;
|
|
47
47
|
},
|
|
@@ -52,7 +52,7 @@ function $330dff91662306eb$export$56b2c08e277f365(props, state, trackRef) {
|
|
|
52
52
|
if (isVertical || reverseX) delta = -delta;
|
|
53
53
|
currentPosition.current += delta;
|
|
54
54
|
if (realTimeTrackDraggingIndex.current != null && trackRef.current) {
|
|
55
|
-
const percent = $
|
|
55
|
+
const percent = $fA3fN$clamp(currentPosition.current / size, 0, 1);
|
|
56
56
|
stateRef.current.setThumbPercent(realTimeTrackDraggingIndex.current, percent);
|
|
57
57
|
}
|
|
58
58
|
},
|
|
@@ -63,7 +63,7 @@ function $330dff91662306eb$export$56b2c08e277f365(props, state, trackRef) {
|
|
|
63
63
|
}
|
|
64
64
|
}
|
|
65
65
|
});
|
|
66
|
-
let currentPointer = $
|
|
66
|
+
let currentPointer = $fA3fN$useRef(undefined);
|
|
67
67
|
let onDownTrack = (e, id, clientX, clientY)=>{
|
|
68
68
|
// We only trigger track-dragging if the user clicks on the track itself and nothing is currently being dragged.
|
|
69
69
|
if (trackRef.current && !props.isDisabled && state.values.every((_, i)=>!state.isThumbDragging(i)
|
|
@@ -128,8 +128,8 @@ function $330dff91662306eb$export$56b2c08e277f365(props, state, trackRef) {
|
|
|
128
128
|
var // Safari does not focus <input type="range"> elements when clicking on an associated <label>,
|
|
129
129
|
// so do it manually. In addition, make sure we show the focus ring.
|
|
130
130
|
ref;
|
|
131
|
-
(ref = document.getElementById($
|
|
132
|
-
$
|
|
131
|
+
(ref = document.getElementById($aa519ee6cf463259$export$68e648cbec363a18(state, 0))) === null || ref === void 0 ? void 0 : ref.focus();
|
|
132
|
+
$fA3fN$setInteractionModality('keyboard');
|
|
133
133
|
};
|
|
134
134
|
}
|
|
135
135
|
return {
|
|
@@ -141,7 +141,7 @@ function $330dff91662306eb$export$56b2c08e277f365(props, state, trackRef) {
|
|
|
141
141
|
role: 'group',
|
|
142
142
|
...fieldProps
|
|
143
143
|
},
|
|
144
|
-
trackProps: $
|
|
144
|
+
trackProps: $fA3fN$mergeProps({
|
|
145
145
|
onMouseDown (e) {
|
|
146
146
|
if (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey) return;
|
|
147
147
|
onDownTrack(e, undefined, e.clientX, e.clientY);
|
|
@@ -155,7 +155,7 @@ function $330dff91662306eb$export$56b2c08e277f365(props, state, trackRef) {
|
|
|
155
155
|
}
|
|
156
156
|
}, moveProps),
|
|
157
157
|
outputProps: {
|
|
158
|
-
htmlFor: state.values.map((_, index)=>$
|
|
158
|
+
htmlFor: state.values.map((_, index)=>$aa519ee6cf463259$export$68e648cbec363a18(state, index)
|
|
159
159
|
).join(' '),
|
|
160
160
|
'aria-live': 'off'
|
|
161
161
|
}
|
|
@@ -163,9 +163,9 @@ function $330dff91662306eb$export$56b2c08e277f365(props, state, trackRef) {
|
|
|
163
163
|
}
|
|
164
164
|
|
|
165
165
|
|
|
166
|
-
var $
|
|
166
|
+
var $47b897dc8cdb026b$exports = {};
|
|
167
167
|
|
|
168
|
-
$parcel$export($
|
|
168
|
+
$parcel$export($47b897dc8cdb026b$exports, "useSliderThumb", () => $47b897dc8cdb026b$export$8d15029008292ae);
|
|
169
169
|
|
|
170
170
|
|
|
171
171
|
|
|
@@ -173,36 +173,36 @@ $parcel$export($661f0f6c696c467d$exports, "useSliderThumb", () => $661f0f6c696c4
|
|
|
173
173
|
|
|
174
174
|
|
|
175
175
|
|
|
176
|
-
function $
|
|
176
|
+
function $47b897dc8cdb026b$export$8d15029008292ae(opts, state) {
|
|
177
177
|
let { index: index , isRequired: isRequired , isDisabled: isDisabled , validationState: validationState , trackRef: trackRef , inputRef: inputRef } = opts;
|
|
178
178
|
let isVertical = opts.orientation === 'vertical';
|
|
179
|
-
let { direction: direction } = $
|
|
180
|
-
let { addGlobalListener: addGlobalListener , removeGlobalListener: removeGlobalListener } = $
|
|
181
|
-
let labelId = $
|
|
179
|
+
let { direction: direction } = $fA3fN$useLocale();
|
|
180
|
+
let { addGlobalListener: addGlobalListener , removeGlobalListener: removeGlobalListener } = $fA3fN$useGlobalListeners();
|
|
181
|
+
let labelId = $aa519ee6cf463259$export$7a8d2b02c9371cbf.get(state);
|
|
182
182
|
var ref1;
|
|
183
|
-
const { labelProps: labelProps , fieldProps: fieldProps } = $
|
|
183
|
+
const { labelProps: labelProps , fieldProps: fieldProps } = $fA3fN$useLabel({
|
|
184
184
|
...opts,
|
|
185
|
-
id: $
|
|
185
|
+
id: $aa519ee6cf463259$export$68e648cbec363a18(state, index),
|
|
186
186
|
'aria-labelledby': `${labelId} ${(ref1 = opts['aria-labelledby']) !== null && ref1 !== void 0 ? ref1 : ''}`.trim()
|
|
187
187
|
});
|
|
188
188
|
const value = state.values[index];
|
|
189
|
-
const focusInput = $
|
|
190
|
-
if (inputRef.current) $
|
|
189
|
+
const focusInput = $fA3fN$useCallback(()=>{
|
|
190
|
+
if (inputRef.current) $fA3fN$focusWithoutScrolling(inputRef.current);
|
|
191
191
|
}, [
|
|
192
192
|
inputRef
|
|
193
193
|
]);
|
|
194
194
|
const isFocused = state.focusedThumb === index;
|
|
195
|
-
$
|
|
195
|
+
$fA3fN$useEffect(()=>{
|
|
196
196
|
if (isFocused) focusInput();
|
|
197
197
|
}, [
|
|
198
198
|
isFocused,
|
|
199
199
|
focusInput
|
|
200
200
|
]);
|
|
201
|
-
const stateRef = $
|
|
201
|
+
const stateRef = $fA3fN$useRef(null);
|
|
202
202
|
stateRef.current = state;
|
|
203
203
|
let reverseX = direction === 'rtl';
|
|
204
|
-
let currentPosition = $
|
|
205
|
-
let { moveProps: moveProps } = $
|
|
204
|
+
let currentPosition = $fA3fN$useRef(null);
|
|
205
|
+
let { moveProps: moveProps } = $fA3fN$useMove({
|
|
206
206
|
onMoveStart () {
|
|
207
207
|
currentPosition.current = null;
|
|
208
208
|
state.setThumbDragging(index, true);
|
|
@@ -219,7 +219,7 @@ function $661f0f6c696c467d$export$8d15029008292ae(opts, state) {
|
|
|
219
219
|
let delta = isVertical ? deltaY : deltaX;
|
|
220
220
|
if (isVertical || reverseX) delta = -delta;
|
|
221
221
|
currentPosition.current += delta;
|
|
222
|
-
stateRef.current.setThumbPercent(index, $
|
|
222
|
+
stateRef.current.setThumbPercent(index, $fA3fN$clamp(currentPosition.current / size, 0, 1));
|
|
223
223
|
}
|
|
224
224
|
},
|
|
225
225
|
onMoveEnd () {
|
|
@@ -228,12 +228,12 @@ function $661f0f6c696c467d$export$8d15029008292ae(opts, state) {
|
|
|
228
228
|
});
|
|
229
229
|
// Immediately register editability with the state
|
|
230
230
|
state.setThumbEditable(index, !isDisabled);
|
|
231
|
-
const { focusableProps: focusableProps } = $
|
|
231
|
+
const { focusableProps: focusableProps } = $fA3fN$useFocusable($fA3fN$mergeProps(opts, {
|
|
232
232
|
onFocus: ()=>state.setFocusedThumb(index)
|
|
233
233
|
,
|
|
234
234
|
onBlur: ()=>state.setFocusedThumb(undefined)
|
|
235
235
|
}), inputRef);
|
|
236
|
-
let currentPointer = $
|
|
236
|
+
let currentPointer = $fA3fN$useRef(undefined);
|
|
237
237
|
let onDown = (id)=>{
|
|
238
238
|
focusInput();
|
|
239
239
|
currentPointer.current = id;
|
|
@@ -259,7 +259,7 @@ function $661f0f6c696c467d$export$8d15029008292ae(opts, state) {
|
|
|
259
259
|
// we focus the range input, and let the browser handle the keyboard
|
|
260
260
|
// interactions; we then listen to input's onChange to update state.
|
|
261
261
|
return {
|
|
262
|
-
inputProps: $
|
|
262
|
+
inputProps: $fA3fN$mergeProps(focusableProps, fieldProps, {
|
|
263
263
|
type: 'range',
|
|
264
264
|
tabIndex: !isDisabled ? 0 : undefined,
|
|
265
265
|
min: state.getThumbMinValue(index),
|
|
@@ -276,7 +276,7 @@ function $661f0f6c696c467d$export$8d15029008292ae(opts, state) {
|
|
|
276
276
|
state.setThumbValue(index, parseFloat(e.target.value));
|
|
277
277
|
}
|
|
278
278
|
}),
|
|
279
|
-
thumbProps: !isDisabled ? $
|
|
279
|
+
thumbProps: !isDisabled ? $fA3fN$mergeProps(moveProps, {
|
|
280
280
|
onMouseDown: (e)=>{
|
|
281
281
|
if (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey) return;
|
|
282
282
|
onDown();
|
|
@@ -297,5 +297,5 @@ function $661f0f6c696c467d$export$8d15029008292ae(opts, state) {
|
|
|
297
297
|
|
|
298
298
|
|
|
299
299
|
|
|
300
|
-
export {$
|
|
300
|
+
export {$bcca50147b47f54d$export$56b2c08e277f365 as useSlider, $47b897dc8cdb026b$export$8d15029008292ae as useSliderThumb};
|
|
301
301
|
//# sourceMappingURL=module.js.map
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@react-aria/slider",
|
|
3
|
-
"version": "3.0.
|
|
3
|
+
"version": "3.0.6-nightly.3113+404d41859",
|
|
4
4
|
"description": "Slider",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"main": "dist/main.js",
|
|
@@ -18,15 +18,15 @@
|
|
|
18
18
|
},
|
|
19
19
|
"dependencies": {
|
|
20
20
|
"@babel/runtime": "^7.6.2",
|
|
21
|
-
"@react-aria/focus": "
|
|
22
|
-
"@react-aria/i18n": "
|
|
23
|
-
"@react-aria/interactions": "
|
|
24
|
-
"@react-aria/label": "
|
|
25
|
-
"@react-aria/utils": "
|
|
26
|
-
"@react-stately/radio": "
|
|
27
|
-
"@react-stately/slider": "
|
|
28
|
-
"@react-types/radio": "
|
|
29
|
-
"@react-types/slider": "
|
|
21
|
+
"@react-aria/focus": "3.0.0-nightly.1417+404d41859",
|
|
22
|
+
"@react-aria/i18n": "3.0.0-nightly.1417+404d41859",
|
|
23
|
+
"@react-aria/interactions": "3.0.0-nightly.1417+404d41859",
|
|
24
|
+
"@react-aria/label": "3.0.0-nightly.1417+404d41859",
|
|
25
|
+
"@react-aria/utils": "3.0.0-nightly.1417+404d41859",
|
|
26
|
+
"@react-stately/radio": "3.0.0-nightly.1417+404d41859",
|
|
27
|
+
"@react-stately/slider": "3.0.6-nightly.3113+404d41859",
|
|
28
|
+
"@react-types/radio": "3.0.0-nightly.1417+404d41859",
|
|
29
|
+
"@react-types/slider": "3.0.5-nightly.3113+404d41859"
|
|
30
30
|
},
|
|
31
31
|
"peerDependencies": {
|
|
32
32
|
"react": "^16.8.0 || ^17.0.0-rc.1"
|