import { useMemo , Fragment } from 'react' ; import { omit } from '@proton/shared/lib/helpers/object' ; import Breadcrumb from './Breadcrumb' ; import CollapsedBreadcrumbs from './CollapsedBreadcrumbs' ; import useActiveBreakpoint from '../../hooks/useActiveBreakpoint' ; import Icon from '../icon/Icon' ; import { BreadcrumbInfo } from './interfaces' ; export type GroupedBreadcrumbs = ( BreadcrumbInfo | BreadcrumbInfo [ ] ) [ ] ; interface Props { breadcrumbs : BreadcrumbInfo [ ] ; } const CollapsingBreadcrumbs = ( { breadcrumbs } ) => { const { isTinyMobile , isDesktop } = useActiveBreakpoint ( ) ; const groupedBreadcrumbs = useMemo ( ( ) => breadcrumbs . reduce ( ( grouped , breadcrumb , i , arr ) => { if ( ! isTinyMobile && i === 0 ) { return [ breadcrumb ] ; } const secondToLast = arr . length - 2 ; const last = arr . length - 1 ; if ( i === last || ( isDesktop && i === secondToLast ) ) { return [ ... grouped , breadcrumb ] ; } const lastGrouped = grouped . length - 1 ; const group = grouped [ lastGrouped ] ; return group instanceof Array ? [ ... grouped . slice ( 0 , lastGrouped ) , [ ... group , breadcrumb ] ] : [ ... grouped , [ breadcrumb ] ] ; } , [ ] as GroupedBreadcrumbs ) , [ breadcrumbs , isTinyMobile , isDesktop ] ) ; return ( < ul className = "collapsing-breadcrumbs unstyled" > { groupedBreadcrumbs . map ( ( group , i , arr ) => { const { key , text , highlighted , ... breadcrumbProps } = group instanceof Array ? group [ 0 ] : group ; const isLast = i === arr . length - 1 ; return ( < Fragment key = { key } > { group instanceof Array && group . length > 1 ? ( < CollapsedBreadcrumbs breadcrumbs = { group } / > ) : ( < Breadcrumb { ... omit ( breadcrumbProps , [ 'collapsedText' ] ) } active = { isLast || highlighted } > { text } < /Breadcrumb>)} { ! isLast && ( < li className = "on-rtl-mirror flex-item-noshrink" aria - hidden = "true" > < Icon size = { 16 } name = "angle-down" rotate = { 270 } / > < /li>)} < /Fragment>); } ) } < /ul>); } ; export default CollapsingBreadcrumbs ;