import React , { memo , forwardRef } from 'react' ; import { Pressable } from '../../primitives/Pressable' ; import { Icon } from '../../primitives/Icon' ; import { usePropsResolution } from '../../../hooks/useThemeProps' ; import { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps' ; import { composeEventHandlers } from '../../../utils' ; import type { IIconButtonProps } from './types' ; import { useHover , useFocus , useIsPressed , } from '../../primitives/Pressable/Pressable' ; import { useFocusRing } from '@react-native-aria/focus' ; const IconButton = ( { icon , children , ... props } , ref ) => { const { hoverProps , isHovered } = useHover ( ) ; const { pressableProps , isPressed } = useIsPressed ( ) ; const { focusProps , isFocused } = useFocus ( ) ; const { isFocusVisible , focusProps : focusRingProps } = useFocusRing ( ) ; const { _icon , onPressIn , onPressOut , onHoverIn , onHoverOut , onFocus , onBlur , ... resolvedProps } = usePropsResolution ( 'IconButton' , props , { isHovered , isPressed , isFocused , isFocusVisible , } ) ; let clonedIcon ; if ( icon ) { clonedIcon = React . cloneElement ( icon , { ... _icon , } ) ; } if ( useHasResponsiveProps ( props ) ) { return null ; } return ( < Pressable accessibilityRole = "button" ref = { ref } 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 ) , focusRingProps . onFocus ) } onBlur = { composeEventHandlers ( composeEventHandlers ( onBlur , focusProps . onBlur ) , focusRingProps . onBlur ) } { ... resolvedProps } > { clonedIcon || < Icon { ... _icon } > { children } < /Icon>} < /Pressable>); } ; export default memo ( forwardRef ( IconButton ) ) ; export type { IIconButtonProps } ;