@gluestack-ui/slider/lib/SliderThumb.jsx

A universal headless slider component for React Native, Next.js & React

import React, { forwardRef, useEffect } from 'react';
import { Platform } from 'react-native';
import { useSliderThumb } from '@react-native-aria/slider';
import { VisuallyHidden } from '@react-aria/visually-hidden';
import { SliderContext } from './Context';
import { useHover } from '@react-native-aria/interactions';
import { mergeRefs } from '@gluestack-ui/utils';
import { useFocusRing, useFocus } from '@react-native-aria/focus';
import { composeEventHandlers } from '@gluestack-ui/utils';
const positionMap = new Map([
    ['horizontal true', 'right'],
    ['horizontal false', 'left'],
    ['vertical true', 'top'],
    ['vertical false', 'bottom'],
]);
function SliderThumb(StyledSliderThumb, StyledSliderThumbInteraction) {
    return forwardRef(({ children, scaleOnPressed = 1, style, ...props }, ref) => {
        const [thumbSize, setThumbSize] = React.useState({
            height: 0,
            width: 0,
        });
        const _ref = React.useRef(null);
        const { isHovered } = useHover({}, _ref);
        const { state, trackLayout, orientation, isDisabled, isReversed, isPressed, setIsHovered, setIsPressed, setIsFocused, setIsFocusVisible, } = React.useContext(SliderContext);
        const inputRef = React.useRef(null);
        const { thumbProps, inputProps } = useSliderThumb({
            index: 0,
            trackLayout,
            inputRef,
            isDisabled,
            orientation: orientation,
        }, state, isReversed);
        const { isFocusVisible, focusProps: focusRingProps } = useFocusRing();
        const { isFocused, focusProps } = useFocus();
        const thumbStyles = {
            transform: orientation === 'vertical'
                ? [
                    {
                        translateY: isReversed
                            ? -thumbSize?.height / 2
                            : thumbSize?.height / 2,
                    },
                ]
                : [
                    {
                        translateX: isReversed
                            ? thumbSize?.height / 2
                            : -thumbSize?.height / 2,
                    },
                ],
        };
        thumbStyles[`${positionMap.get(`${orientation} ${isReversed}`)}`] = `${state.getThumbPercent(0) * 100}%`;
        thumbStyles?.transform?.push({
            scale: state.isThumbDragging(0) ? scaleOnPressed : 1,
        });
        useEffect(() => {
            setIsPressed(state.isThumbDragging(0));
        }, [state, setIsPressed, isPressed]);
        useEffect(() => {
            setIsFocused(isFocused);
        }, [isFocused, setIsFocused]);
        useEffect(() => {
            setIsFocusVisible(isFocusVisible);
        }, [isFocusVisible, setIsFocusVisible]);
        useEffect(() => {
            setIsHovered(isHovered);
        }, [isHovered, setIsHovered]);
        return (<StyledSliderThumb onLayout={(layout) => {
                setThumbSize({
                    height: layout?.nativeEvent?.layout?.height,
                    width: layout?.nativeEvent?.layout?.width,
                });
            }} states={{
                hover: isHovered,
                disabled: isDisabled,
                focus: isFocused,
                focusVisible: isFocusVisible,
                active: isPressed,
            }} dataSet={{
                hover: isHovered ? 'true' : 'false',
                disabled: isDisabled ? 'true' : 'false',
                focus: isFocused ? 'true' : 'false',
                focusVisible: isFocusVisible ? 'true' : 'false',
                active: isPressed ? 'true' : 'false',
            }} disabled={isDisabled} {...thumbProps} style={[style, thumbStyles]} 
        // @ts-ignore - web only
        onFocus={composeEventHandlers(composeEventHandlers(props?.onFocus, focusProps.onFocus), focusRingProps.onFocus)} 
        // @ts-ignore - web only
        onBlur={composeEventHandlers(composeEventHandlers(props?.onBlur, focusProps.onBlur), focusRingProps.onBlur)} ref={mergeRefs([_ref, ref])} {...props}>
          {/* @ts-ignore */}
          <StyledSliderThumbInteraction states={{
                hover: isHovered,
                focus: isFocused,
                focusVisible: isFocusVisible,
                disabled: isDisabled,
                active: isPressed,
            }} dataSet={{
                hover: isHovered ? 'true' : 'false',
                focus: isFocused ? 'true' : 'false',
                focusVisible: isFocusVisible ? 'true' : 'false',
                disabled: isDisabled ? 'true' : 'false',
                active: isPressed ? 'true' : 'false',
            }}>
            {children}
            {Platform.OS === 'web' && (<VisuallyHidden>
                <input ref={inputRef} {...inputProps}/>
              </VisuallyHidden>)}
          </StyledSliderThumbInteraction>
        </StyledSliderThumb>);
    });
}
export default SliderThumb;