import * as React from 'react' ; import { ViewProps as RNViewProps } from 'react-native' ; import { useActive , useFocus , useHover } from 'react-native-web-hooks' ; import { CSSProperties } from 'bumbag/types' ; import { mergeRefs , createComponent , createElement , createHook , omitCSSProps } from 'bumbag/utils' ; import { useStyle } from '../utils/useStyle' ; import { css } from '../styled' ; import { ThemeConfig } from '../types/theme' ; import * as styles from './Box.styles' ; export type LocalBoxProps = { animated ? : boolean ; children ? : React . ReactNode | ( ( props : BoxProps ) => React . ReactNode ) ; alignX ? : 'left' | 'center' | 'right' ; alignY ? : 'top' | 'center' | 'bottom' ; altitude ? : string ; variant ? : string ; colorMode ? : string ; disabled ? : boolean ; style ? : any ; overrides ? : ThemeConfig ; elementRef ? : React . Ref < any > ; themeKey ? : string ; } ; export type BoxProps = Omit < CSSProperties , 'pointerEvents' > & RNViewProps & LocalBoxProps & { active ? : boolean ; focus ? : boolean ; hover ? : boolean ; hoveractive ? : boolean ; } ; const useProps = createHook < BoxProps > ( ( _props , { disableCSSProps } ) => { let props = _props ; const boxRef = React . useRef ( ) ; props . elementRef = mergeRefs ( boxRef , props . elementRef ) ; if ( props . _hover ) { props . hover = useHover ( boxRef ) ; } if ( props . _active ) { props . active = useActive ( boxRef ) ; } if ( props . _focus ) { props . focus = useFocus ( boxRef ) ; } if ( props . _hoveractive ) { props . hoveractive = props . hover && props . active ; } const animationStyles = React . useMemo ( ( ) => Object . entries ( props ) . reduce ( ( styles , [ key , value ] ) => { if ( value && typeof value === 'object' && '_listeners' in value ) { return { ... styles , [ key ] : value , } ; } return styles ; } , { } ) , [ props ] ) ; let style = useStyle ( { ... props , ... props . style } , { disableCSSProps , events : { hover : props . hover , active : props . active , focus : props . focus , hoveractive : props . hoveractive , } , } ) ; if ( Array . isArray ( props . style ) || typeof props . style !== 'object' ) { props . style = [ css `
          ${ style }
        ` , animationStyles , ... ( props . style || [ ] ) , ] ; } props = omitCSSProps ( props ) ; if ( props . elementRef ) { props . ref = mergeRefs ( props . elementRef , props . ref ) ; } return props ; } , { themeKey : 'native.Box' } ) ; export const Box = createComponent < BoxProps > ( ( props ) => { const boxProps = useProps ( props ) ; return createElement ( { children : props . children , component : styles . StyledBox , htmlProps : boxProps , } ) ; } , { attach : { displayName : 'native.Box' , useProps } , themeKey : 'native.Box' , } ) ;