react-aria
Version:
Spectrum UI components in React
206 lines (189 loc) • 10.1 kB
JavaScript
import {focusWithoutScrolling as $d559d872031c749f$export$de79e2c695e052f3} from "../utils/focusWithoutScrolling.js";
import {getEventTarget as $d8ac7ed472840322$export$e58f029f0fbfdb29} from "../utils/shadowdom/DOMFunctions.js";
import {getSliderThumbId as $1b9c3fe237249a6a$export$68e648cbec363a18, sliderData as $1b9c3fe237249a6a$export$d6c8d9636a3dc49c} from "./utils.js";
import {mergeProps as $64c36edd757dfa16$export$9d1611c77c2fe928} from "../utils/mergeProps.js";
import {useFocusable as $088f27a386bc4a8f$export$4c014de7c8940b4c} from "../interactions/useFocusable.js";
import {useFormReset as $5dfd40f1661a7fc3$export$5add1d006293d136} from "../utils/useFormReset.js";
import {useGlobalListeners as $0d742958be022209$export$4eaf04e54aa8eed6} from "../utils/useGlobalListeners.js";
import {useKeyboard as $bf74df7506f65576$export$8f71654801c2f7cd} from "../interactions/useKeyboard.js";
import {useLabel as $6dc0ccf02415c0af$export$8467354a121f1b9f} from "../label/useLabel.js";
import {useLocale as $4defb058003b3e05$export$43bb16f9c6d9e3f7} from "../i18n/I18nProvider.js";
import {useMove as $e7c7f5ffbc8157af$export$36da96379f79f245} from "../interactions/useMove.js";
import {clamp as $jbuYP$clamp} from "react-stately/private/utils/number";
import {useCallback as $jbuYP$useCallback, useEffect as $jbuYP$useEffect, useRef as $jbuYP$useRef} from "react";
function $299655936625c2f6$export$8d15029008292ae(opts, state) {
let { index: index = 0, isRequired: isRequired, validationState: validationState, isInvalid: isInvalid, trackRef: trackRef, inputRef: inputRef, orientation: orientation = state.orientation, name: name, form: form } = opts;
let isDisabled = opts.isDisabled || state.isDisabled;
let isVertical = orientation === 'vertical';
let { direction: direction } = (0, $4defb058003b3e05$export$43bb16f9c6d9e3f7)();
let { addGlobalListener: addGlobalListener, removeGlobalListener: removeGlobalListener } = (0, $0d742958be022209$export$4eaf04e54aa8eed6)();
let data = (0, $1b9c3fe237249a6a$export$d6c8d9636a3dc49c).get(state);
var _opts_arialabelledby;
const { labelProps: labelProps, fieldProps: fieldProps } = (0, $6dc0ccf02415c0af$export$8467354a121f1b9f)({
...opts,
id: (0, $1b9c3fe237249a6a$export$68e648cbec363a18)(state, index),
'aria-labelledby': `${data.id} ${(_opts_arialabelledby = opts['aria-labelledby']) !== null && _opts_arialabelledby !== void 0 ? _opts_arialabelledby : ''}`.trim()
});
const value = state.values[index];
const focusInput = (0, $jbuYP$useCallback)(()=>{
if (inputRef.current) (0, $d559d872031c749f$export$de79e2c695e052f3)(inputRef.current);
}, [
inputRef
]);
const isFocused = state.focusedThumb === index;
(0, $jbuYP$useEffect)(()=>{
if (isFocused) focusInput();
}, [
isFocused,
focusInput
]);
let reverseX = direction === 'rtl';
let currentPosition = (0, $jbuYP$useRef)(null);
let { keyboardProps: keyboardProps } = (0, $bf74df7506f65576$export$8f71654801c2f7cd)({
onKeyDown (e) {
let { getThumbMaxValue: getThumbMaxValue, getThumbMinValue: getThumbMinValue, decrementThumb: decrementThumb, incrementThumb: incrementThumb, setThumbValue: setThumbValue, setThumbDragging: setThumbDragging, pageSize: pageSize } = state;
// these are the cases that useMove or useSlider don't handle
if (!/^(PageUp|PageDown|Home|End)$/.test(e.key)) {
e.continuePropagation();
return;
}
// same handling as useMove, stopPropagation to prevent useSlider from handling the event as well.
e.preventDefault();
// remember to set this so that onChangeEnd is fired
setThumbDragging(index, true);
switch(e.key){
case 'PageUp':
incrementThumb(index, pageSize);
break;
case 'PageDown':
decrementThumb(index, pageSize);
break;
case 'Home':
setThumbValue(index, getThumbMinValue(index));
break;
case 'End':
setThumbValue(index, getThumbMaxValue(index));
break;
}
setThumbDragging(index, false);
}
});
let { moveProps: moveProps } = (0, $e7c7f5ffbc8157af$export$36da96379f79f245)({
onMoveStart () {
currentPosition.current = null;
state.setThumbDragging(index, true);
},
onMove ({ deltaX: deltaX, deltaY: deltaY, pointerType: pointerType, shiftKey: shiftKey }) {
const { getThumbPercent: getThumbPercent, setThumbPercent: setThumbPercent, decrementThumb: decrementThumb, incrementThumb: incrementThumb, step: step, pageSize: pageSize } = state;
if (!trackRef.current) return;
let { width: width, height: height } = trackRef.current.getBoundingClientRect();
let size = isVertical ? height : width;
if (currentPosition.current == null) currentPosition.current = getThumbPercent(index) * size;
if (pointerType === 'keyboard') {
if (deltaX > 0 && reverseX || deltaX < 0 && !reverseX || deltaY > 0) decrementThumb(index, shiftKey ? pageSize : step);
else incrementThumb(index, shiftKey ? pageSize : step);
} else {
let delta = isVertical ? deltaY : deltaX;
if (isVertical || reverseX) delta = -delta;
currentPosition.current += delta;
setThumbPercent(index, (0, $jbuYP$clamp)(currentPosition.current / size, 0, 1));
}
},
onMoveEnd () {
state.setThumbDragging(index, false);
}
});
// Immediately register editability with the state
state.setThumbEditable(index, !isDisabled);
const { focusableProps: focusableProps } = (0, $088f27a386bc4a8f$export$4c014de7c8940b4c)((0, $64c36edd757dfa16$export$9d1611c77c2fe928)(opts, {
onFocus: ()=>state.setFocusedThumb(index),
onBlur: ()=>state.setFocusedThumb(undefined)
}), inputRef);
let currentPointer = (0, $jbuYP$useRef)(undefined);
let onDown = (id)=>{
focusInput();
currentPointer.current = id;
state.setThumbDragging(index, true);
addGlobalListener(window, 'mouseup', onUp, false);
addGlobalListener(window, 'touchend', onUp, false);
addGlobalListener(window, 'pointerup', onUp, false);
};
let onUp = (e)=>{
var _e_changedTouches;
var _e_pointerId;
let id = (_e_pointerId = e.pointerId) !== null && _e_pointerId !== void 0 ? _e_pointerId : (_e_changedTouches = e.changedTouches) === null || _e_changedTouches === void 0 ? void 0 : _e_changedTouches[0].identifier;
if (id === currentPointer.current) {
focusInput();
state.setThumbDragging(index, false);
removeGlobalListener(window, 'mouseup', onUp, false);
removeGlobalListener(window, 'touchend', onUp, false);
removeGlobalListener(window, 'pointerup', onUp, false);
}
};
let thumbPosition = state.getThumbPercent(index);
if (isVertical || direction === 'rtl') thumbPosition = 1 - thumbPosition;
let interactions = !isDisabled ? (0, $64c36edd757dfa16$export$9d1611c77c2fe928)(keyboardProps, moveProps, {
onMouseDown: (e)=>{
if (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey) return;
onDown();
},
onPointerDown: (e)=>{
if (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey) return;
onDown(e.pointerId);
},
onTouchStart: (e)=>{
onDown(e.changedTouches[0].identifier);
}
}) : {};
(0, $5dfd40f1661a7fc3$export$5add1d006293d136)(inputRef, state.defaultValues[index], (v)=>{
state.setThumbValue(index, v);
});
// We install mouse handlers for the drag motion on the thumb div, but
// not the key handler for moving the thumb with the slider. Instead,
// we focus the range input, and let the browser handle the keyboard
// interactions; we then listen to input's onChange to update state.
return {
inputProps: (0, $64c36edd757dfa16$export$9d1611c77c2fe928)(focusableProps, fieldProps, {
type: 'range',
tabIndex: !isDisabled ? 0 : undefined,
min: state.getThumbMinValue(index),
max: state.getThumbMaxValue(index),
step: state.step,
value: value,
name: name,
form: form,
disabled: isDisabled,
'aria-orientation': orientation,
'aria-valuetext': state.getThumbValueLabel(index),
'aria-required': isRequired || undefined,
'aria-invalid': isInvalid || validationState === 'invalid' || undefined,
'aria-errormessage': opts['aria-errormessage'],
'aria-describedby': [
data['aria-describedby'],
opts['aria-describedby']
].filter(Boolean).join(' '),
'aria-details': [
data['aria-details'],
opts['aria-details']
].filter(Boolean).join(' '),
onChange: (e)=>{
state.setThumbValue(index, parseFloat((0, $d8ac7ed472840322$export$e58f029f0fbfdb29)(e).value));
}
}),
thumbProps: {
...interactions,
style: {
position: 'absolute',
[isVertical ? 'top' : 'left']: `${thumbPosition * 100}%`,
transform: 'translate(-50%, -50%)',
touchAction: 'none'
}
},
labelProps: labelProps,
isDragging: state.isThumbDragging(index),
isDisabled: isDisabled,
isFocused: isFocused
};
}
export {$299655936625c2f6$export$8d15029008292ae as useSliderThumb};
//# sourceMappingURL=useSliderThumb.js.map