import React , { forwardRef } from 'react' ; import { Platform } from 'react-native' ; import { useSliderThumb } from '@react-native-aria/slider' ; import { VisuallyHidden } from '@react-aria/visually-hidden' ; import { useToken } from '../../../hooks' ; import { usePropsResolution } from '../../../hooks/useThemeProps' ; import type { ISliderThumbProps } from './types' ; import Box from '../Box' ; import { SliderContext } from './Context' ; import { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps' ; function SliderThumb ( props , ref ) { const { state , trackLayout , orientation , colorScheme , thumbSize , isReadOnly , isDisabled , } = React . useContext ( SliderContext ) ; const resolvedProps = usePropsResolution ( 'SliderThumb' , { size : thumbSize , colorScheme , ... props , } , { isDisabled , isReadOnly } ) ; const inputRef = React . useRef ( null ) ; const { thumbProps , inputProps } = useSliderThumb ( { index : 0 , trackLayout , inputRef , orientation , } , state ) ; const thumbAbsoluteSize = useToken ( 'sizes' , resolvedProps . size ) ; const thumbStyles = { bottom : orientation === 'vertical' ? `${ state . getThumbPercent ( 0 ) * 100 }%` : undefined , left : orientation !== 'vertical' ? `${ state . getThumbPercent ( 0 ) * 100 }%` : undefined , transform : orientation === 'vertical' ? [ { translateY : parseInt ( thumbAbsoluteSize ) / 2 } ] : [ { translateX : - parseInt ( thumbAbsoluteSize ) / 2 } ] , } ; thumbStyles . transform . push ( { scale : state . isThumbDragging ( 0 ) ? resolvedProps . scaleOnPressed : 1 , } ) ; if ( useHasResponsiveProps ( props ) ) { return null ; } return ( < Box position = "absolute" { ... thumbProps } { ... resolvedProps } ref = { ref } style = { [ thumbStyles , props . style ] } > { props . children } { Platform . OS === 'web' && ( < VisuallyHidden > < input ref = { inputRef } { ... inputProps } /> < /VisuallyHidden>)} < /Box>); } SliderThumb . displayName = 'SliderThumb' ; export default forwardRef ( SliderThumb ) ;