import React , { memo , forwardRef } from 'react' ; import { AccessibilityRole , Platform } from 'react-native' ; import { HStack } from '../../primitives/Stack' ; import { useControllableState } from '../../../hooks' ; import { Pressable } from '../../primitives/Pressable' ; import type { IBreadcrumbProps } from './types' ; import { usePropsResolution } from '../../../hooks/useThemeProps/usePropsResolution' ; import Text from '../../primitives/Text' ; import type { IFlexProps } from '../../primitives' ; import { ThreeDotsIcon } from '../../primitives/Icon/Icons' ; import { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps' ; const Breadcrumb = ( { style , children , separator , _text , maxItems , _button , isCollapsed , onCollapseChange , ... props } , ref ) => { const textProps = { ... _text } ; const [ collapsed , setCollapsed ] = useControllableState ( { value : isCollapsed , defaultValue : false , onChange : ( value ) => { onCollapseChange && onCollapseChange ( value ) ; } , } ) ; const { spacing , ... newProps } = usePropsResolution ( 'Breadcrumb' , props ) ; const separatorProps = { accessibilityRole : ( Platform . OS === 'web' ? 'presentation' : undefined ) as AccessibilityRole , } ; const separatorElement = separator ? ( typeof separator === 'string' ? ( < Text { ... separatorProps } mx = { spacing } > { separator } < /Text>) : (React.cloneElement(separator, { mx : spacing , ... separatorProps , } ) ) ) : ( < Text mx = { spacing } { ... separatorProps } > { '/' } < /Text>); if ( useHasResponsiveProps ( props ) ) { return null ; } return ( < HStack display = "flex" flexWrap = "wrap" { ... newProps } ref = { ref } style = { style } divider = { separatorElement } space = { spacing } accessibilityRole = { Platform . OS === 'web' ? 'navigation' : undefined } accessibilityLabel = "Breadcrumb" > { children && ! children . length ? children : getBreadcrumbSeparator ( children , textProps , maxItems , _button , collapsed , setCollapsed ) } < /HStack>); } ; const getBreadcrumbSeparator = ( children , props , maxItems , _button , collapsed , setCollapsed ) => { if ( Array . isArray ( children ) ) { if ( children . length === 1 ) { return children ; } let result = [ ] ; if ( maxItems ) { let buttonAdded = false ; if ( typeof maxItems == 'number' ) { if ( children . length > 2 * maxItems ) { for ( let i = 0 ; i < children . length ; i ++ ) { if ( i < maxItems || i >= children . length - maxItems ) { result . push ( children [ i ] ) ; } else { if ( ! buttonAdded ) { result . push ( < CollapseButton { ... _button } setCollapsed = { setCollapsed } / > ) ; buttonAdded = true ; } } } buttonAdded = false ; } } else if ( typeof maxItems == 'object' ) { if ( children . length > maxItems [ 0 ] + maxItems [ 1 ] ) for ( let i = 0 ; i < children . length ; i ++ ) { if ( i < maxItems [ 0 ] || i >= children . length - maxItems [ 1 ] ) { result . push ( children [ i ] ) ; } else { if ( ! buttonAdded ) { result . push ( < CollapseButton { ... _button } setCollapsed = { setCollapsed } / > ) ; buttonAdded = true ; } } } buttonAdded = false ; } } else { result = children ; } if ( ! collapsed ) { result = children ; } return result . map ( ( child , index ) => { return React . cloneElement ( child , { _text : { ... props } , ... props , key : `breadcrumb-separator-${ index }` , } ) ; } ) ; } else { return children ; } } ; const CollapseButton = ( props ) => { const { ... remainingProps } = props ; return ( < Pressable { ... remainingProps } onPress = { ( ) => { props . setCollapsed ( false ) ; } } > < ThreeDotsIcon size = { 4 } /> < /Pressable>); } ; export default memo ( forwardRef ( Breadcrumb ) ) ; export type { IBreadcrumbProps } ;