@gluestack-ui-nightly/core
Version:
Universal UI components for React Native, Expo, and Next.js
72 lines • 2.82 kB
JavaScript
import { sliderIds } from './utils';
import { useRef } from 'react';
import { useLabel } from '@react-aria/label';
import { isRTL } from '@gluestack-ui-nightly/utils/aria';
export function useSlider(props, state, trackLayout, isReversed) {
var _a;
let { labelProps, fieldProps } = useLabel(props);
let isVertical = props.orientation === 'vertical';
sliderIds.set(state, (_a = labelProps.id) !== null && _a !== void 0 ? _a : fieldProps.id);
let currentPointer = useRef(undefined);
let onDownTrack = (e, id, clientX, clientY) => {
const direction = isRTL() ? 'rtl' : undefined;
const reverseX = isReversed || direction === 'rtl';
if (!props.isDisabled &&
state.values.every((_, i) => !state.isThumbDragging(i))) {
let size = isVertical ? trackLayout.height : trackLayout.width;
const trackPosition = trackLayout[isVertical ? 'y' : 'x'];
const clickPosition = isVertical ? clientY : clientX;
const offset = clickPosition - trackPosition;
let percent = offset / size;
if (reverseX) {
if (!isVertical) {
percent = 1 - percent;
}
}
else {
if (isVertical) {
percent = 1 - percent;
}
}
let value = state.getPercentValue(percent);
let closestThumb;
let split = state.values.findIndex((v) => value - v < 0);
if (split === 0) {
closestThumb = split;
}
else if (split === -1) {
closestThumb = state.values.length - 1;
}
else {
let lastLeft = state.values[split - 1];
let firstRight = state.values[split];
if (Math.abs(lastLeft - value) < Math.abs(firstRight - value)) {
closestThumb = split - 1;
}
else {
closestThumb = split;
}
}
if (closestThumb >= 0 && state.isThumbEditable(closestThumb)) {
e.preventDefault();
state.setFocusedThumb(closestThumb);
currentPointer.current = id;
state.setThumbDragging(closestThumb, true);
state.setThumbValue(closestThumb, value);
state.setThumbDragging(closestThumb, false);
}
}
};
return {
labelProps,
groupProps: {},
trackProps: {
onPress: (e) => {
const { locationX, locationY } = e.nativeEvent;
onDownTrack(e, undefined, locationX, locationY);
},
},
outputProps: {},
};
}
//# sourceMappingURL=useSlider.js.map