@gluestack-ui/core/lib/esm/slider/aria/useSliderThumb.js

Universal UI components for React Native, Expo, and Next.js

import { clamp } from '@react-aria/utils';
import { getSliderThumbId, sliderIds } from './utils';
import { useRef, useState } from 'react';
import { useLabel } from '@react-aria/label';
import { useMove } from './useMove';
import { isRTL } from '@gluestack-ui-nightly/utils/aria';
export function useSliderThumb(opts, state, isReversed) {
    var _a;
    let { index, isDisabled, trackLayout } = opts;
    let isVertical = opts.orientation === 'vertical';
    const direction = isRTL() ? 'rtl' : undefined;
    let labelId = sliderIds.get(state);
    const { labelProps, fieldProps } = useLabel(Object.assign(Object.assign({}, opts), { 'id': getSliderThumbId(state, index), 'aria-labelledby': `${labelId} ${(_a = opts['aria-labelledby']) !== null && _a !== void 0 ? _a : ''}`.trim() }));
    const stateRef = useRef(null);
    stateRef.current = state;
    let reverseX = isReversed || direction === 'rtl';
    let currentPosition = useRef(null);
    const [startPosition, setStartPosition] = useState(0);
    let { moveProps } = useMove({
        onMoveStart() {
            state.setThumbDragging(index, true);
            let size = isVertical ? trackLayout.height : trackLayout.width;
            setStartPosition(stateRef.current.getThumbPercent(index) * size);
        },
        onMove({ deltaX, deltaY }) {
            let size = isVertical ? trackLayout.height : trackLayout.width;
            if (currentPosition.current == null) {
                currentPosition.current =
                    stateRef.current.getThumbPercent(index) * size;
            }
            let delta = isVertical ? deltaY : deltaX;
            if (reverseX) {
                if (!isVertical) {
                    delta = -delta;
                }
            }
            else {
                if (isVertical) {
                    delta = -delta;
                }
            }
            const position = startPosition + delta;
            stateRef.current.setThumbPercent(index, clamp(position / size, 0, 1));
        },
        onMoveEnd() {
            state.setThumbDragging(index, false);
        },
    });
    state.setThumbEditable(index, !isDisabled);
    const onAccessibilityAction = (event) => {
        var _a, _b;
        const max = state.getThumbMinValue(index);
        const min = state.getThumbMaxValue(index);
        const value = state.getThumbValue(index);
        const incrementValue = Math.min(value + ((_a = state.step) !== null && _a !== void 0 ? _a : 1), max);
        const decrementValue = Math.max(value - ((_b = state.step) !== null && _b !== void 0 ? _b : 1), min);
        switch (event.nativeEvent.actionName) {
            case 'increment':
                state.setThumbValue(index, incrementValue);
                break;
            case 'decrement':
                state.setThumbValue(index, decrementValue);
                break;
            default:
                break;
        }
    };
    return {
        inputProps: Object.assign(Object.assign({}, fieldProps), { 'disabled': isDisabled, 'role': 'adjustable', 'aria-value': {
                min: state.getThumbMinValue(index),
                max: state.getThumbMaxValue(index),
                now: state.getThumbValue(index),
            }, 'accessibilityActions': [
                {
                    name: 'increment',
                    label: 'Increment',
                },
                {
                    name: 'decrement',
                    label: 'Decrement',
                },
            ], onAccessibilityAction }),
        thumbProps: !isDisabled ? moveProps : {},
        labelProps,
    };
}
//# sourceMappingURL=useSliderThumb.js.map