import { memo } from 'react' ; import type { IHiddenProps } from './types' ; import { usePropsResolution } from '../../../hooks/useThemeProps' ; import { useBreakpointValue , useTheme , useToken } from '../../../hooks' ; import { useColorMode } from '../../../core/color-mode/hooks' ; import { Platform } from 'react-native' ; export function Hidden ( { children , ... props } ) { const { from , till , only , platform , colorMode } = usePropsResolution ( 'Hidden' , props , { } , { ignoreProps : [ 'only' , 'platform' ] , } ) ; const { breakpoints } = useTheme ( ) ; const currentColorMode = useColorMode ( ) ; const breakpointValueObject = Object . keys ( breakpoints ) . reduce ( ( obj , val ) => { obj [ val ] = val ; return obj ; } , { } ) ; const breakpointValue = useBreakpointValue ( breakpointValueObject ) ; const [ currentBreakpointValue ] = useToken ( 'breakpoints' , [ breakpointValue ] ) ; const [ fromBreakPointValue ] = useToken ( 'breakpoints' , [ from ] ) ; const [ tillBreakPointValue ] = useToken ( 'breakpoints' , [ till ] ) ; if ( ! from && ! till && ! only && ! colorMode && ! platform ) { return null ; } else if ( from && till && currentBreakpointValue >= fromBreakPointValue && currentBreakpointValue < tillBreakPointValue ) { return null ; } else if ( from && ! till && currentBreakpointValue >= fromBreakPointValue ) { return null ; } else if ( till && ! from && currentBreakpointValue < tillBreakPointValue ) { return null ; } else if ( ( Array . isArray ( only ) && only . includes ( breakpointValue ) ) || only === breakpointValue ) { return null ; } else if ( ( Array . isArray ( platform ) && platform . includes ( Platform . OS ) ) || platform === Platform . OS ) { return null ; } else if ( colorMode === currentColorMode . colorMode ) { return null ; } return children ; } export default memo ( Hidden ) ; export type { IHiddenProps } ;