import React , { memo , forwardRef } from 'react' ; import Box from '../Box' ; import type { IListItemProps } from './types' ; import { usePropsResolution } from '../../../hooks/useThemeProps' ; import { mergeRefs } from '../../../utils' ; import { Pressable } from '../Pressable' ; import { extractInObject } from '../../../theme/tools' ; import { composeEventHandlers } from '../../../utils' ; import { useHover , useFocus , useIsPressed , } from '../../primitives/Pressable/Pressable' ; import { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps' ; const ListItem = ( { children , ... props } , ref ) => { const { hoverProps , isHovered } = useHover ( ) ; const { pressableProps , isPressed } = useIsPressed ( ) ; const { focusProps , isFocused } = useFocus ( ) ; const { index , start , unordered , ul , ordered , ol , _text , borderTopWidth , onPressIn , onPressOut , onHoverIn , onHoverOut , onFocus , onBlur , ... resolvedProps } = usePropsResolution ( 'ListItem' , props , { isHovered , isPressed , isFocused , } ) ; const _ref = React . useRef ( null ) ; if ( useHasResponsiveProps ( props ) ) { return null ; } const [ pressableComponentProps , nonPressableProps , ] = extractInObject ( resolvedProps , [ 'onPress' , 'unstable_pressDelay' , 'android_ripple' , 'android_disableSound' , 'delayLongPress' , 'hitSlop' , 'disabled' , 'onLongPress' , 'onPressIn' , 'onPressOut' , 'pressRetentionOffset' , 'testOnly_pressed' , 'onHoverIn' , 'onHoverOut' , 'onFocus' , 'onBlur' , '_pressed' , '_focus' , ] ) ; return Object . keys ( pressableComponentProps ) . length !== 0 ? ( < Pressable accessibilityRole = "button" accessibilityLabel = { `List-Item-${ index + start }` } flexDirection = "row" alignItems = "center" { ... resolvedProps } onPressIn = { composeEventHandlers ( onPressIn , pressableProps . onPressIn ) } onPressOut = { composeEventHandlers ( onPressOut , pressableProps . onPressOut ) } onHoverIn = { composeEventHandlers ( onHoverIn , hoverProps . onHoverIn ) } onHoverOut = { composeEventHandlers ( onHoverOut , hoverProps . onHoverOut ) } onFocus = { composeEventHandlers ( composeEventHandlers ( onFocus , focusProps . onFocus ) ) } onBlur = { composeEventHandlers ( composeEventHandlers ( onBlur , focusProps . onBlur ) ) } borderTopWidth = { index ? borderTopWidth : 0 } ref = { ref } > { } < > < Box flexDirection = "row" alignItems = "center" pl = { 2 } > { ul || unordered ? ( < Box style = { { transform : [ { scale : 1.5 } ] } } mr = { 2 } > • < /Box>) : null} { ol || ordered ? ( < Box mr = { 2 } > { index + start + '.' } < /Box>) : null} < /Box> < Box flexDirection = "row" alignItems = "center" > { children } < /Box> < /> { } { } < /Pressable>) : ( < Box accessibilityRole = "text" accessibilityLabel = { `List-Item-${ index + start }` } flexDirection = "row" alignItems = "center" { ... nonPressableProps } borderTopWidth = { index ? borderTopWidth : 0 } ref = { mergeRefs ( [ ref , _ref ] ) } { ... ( isHovered && resolvedProps . _hover ) } { ... ( isPressed && resolvedProps . _pressed ) } { ... ( isFocused && resolvedProps . _focus ) } > < Box flexDirection = "row" alignItems = "center" pl = { 2 } > { ul || unordered ? ( < Box style = { { transform : [ { scale : 1.5 } ] } } mr = { 2 } _text = { { fontWeight : 'bold' , ... _text } } > • < /Box>) : null} { ol || ordered ? ( < Box mr = { 2 } _text = { { fontWeight : 'bold' , ... _text } } > { index + start + '.' } < /Box>) : null} < /Box> < Box flex = { 1 } flexDirection = "row" alignItems = "center" _text = { _text } > { children } < /Box> < /Box>); } ; export default memo ( forwardRef ( ListItem ) ) ;