112 lines
3.3 KiB
TypeScript
112 lines
3.3 KiB
TypeScript
import { useState } from 'react'
|
|
import { Box, Breadcrumbs, Link, Theme, Typography } from '@mui/material'
|
|
import { makeStyles } from '@mui/styles'
|
|
import { useEffect } from 'react'
|
|
import { useGlobalState } from '../state/GlobalState'
|
|
import { ItemWithLocale } from '../dto/ItemWithLocale'
|
|
|
|
const useStyles = makeStyles((theme: Theme) => ({
|
|
breadcrumbHolder: {
|
|
display: 'flex',
|
|
flex: '0 1 3vh',
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
padding: '0 10vw 0 10vw',
|
|
borderBottom: `1px solid ${theme.palette.background.paper}`,
|
|
},
|
|
breadcrumb: {
|
|
display: 'flex',
|
|
flex: '0 1 3vh',
|
|
flexDirection: 'row',
|
|
flexGrow: 1,
|
|
},
|
|
link: {
|
|
color: theme.palette.text.secondary,
|
|
display: 'flex',
|
|
padding: '0 1vw 0 1vw',
|
|
height: '100%',
|
|
alignItems: 'center',
|
|
borderBottom: `1px solid transparent`,
|
|
'&:hover': {
|
|
color: theme.palette.action.hover,
|
|
cursor: 'pointer',
|
|
},
|
|
},
|
|
currentItem: {
|
|
cursor: 'default',
|
|
borderBottom: `1px solid ${theme.palette.action.hover}`,
|
|
},
|
|
}))
|
|
|
|
export const NavigationBreadcrumb = () => {
|
|
const classes = useStyles()
|
|
const setSelectedItem = useGlobalState((state) => state.setSelectedItem)
|
|
const itemHierachyState = useGlobalState((state) => state.itemsHierarchy)
|
|
const [searchInputState, setSearchInput] = useGlobalState((state) => [
|
|
state.searchInput,
|
|
state.setSearchInput,
|
|
])
|
|
const selectedItem = useGlobalState((state) => state.selectedItem)
|
|
const [currentHierarchy, setCurrentHierarchy] = useState<ItemWithLocale[]>([])
|
|
|
|
useEffect(() => {
|
|
if (!selectedItem) return;
|
|
|
|
const hierarchy: ItemWithLocale[] = [selectedItem]
|
|
let currItemID: string | undefined = selectedItem?.item?._parent
|
|
while (currItemID) {
|
|
const item: ItemWithLocale = itemHierachyState[currItemID]!
|
|
hierarchy.push(item)
|
|
currItemID = item?.item?._parent
|
|
}
|
|
setCurrentHierarchy(hierarchy.filter(elt => elt !== undefined && elt !== null).reverse())
|
|
}, [selectedItem, itemHierachyState])
|
|
|
|
const formatLink = (item: ItemWithLocale, idx: string) => {
|
|
if (
|
|
searchInputState === item.locale.Name ||
|
|
searchInputState === item.item._id ||
|
|
searchInputState === item.item._name
|
|
) {
|
|
return (
|
|
<Typography key={item.item._id} variant="body2" className={classes.currentItem}>
|
|
{item.locale.Name ? item.locale.Name : item.item._name}
|
|
</Typography>
|
|
)
|
|
} else {
|
|
return (
|
|
<Link
|
|
underline="hover"
|
|
color="inherit"
|
|
key={idx}
|
|
onClick={() => {
|
|
setSearchInput(item.item._id)
|
|
setSelectedItem(undefined)
|
|
}}
|
|
className={classes.link}
|
|
>
|
|
<Typography variant="body2">{item.locale.Name ? item.locale.Name : item.item._name}</Typography>
|
|
</Link>
|
|
)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<Box className={classes.breadcrumbHolder}>
|
|
<Breadcrumbs aria-label="breadcrumb" className={classes.breadcrumb} id='navigation-breadcrumb'>
|
|
<Link
|
|
underline="hover"
|
|
color="inherit"
|
|
key={'home'}
|
|
href="/"
|
|
id='home-breadcrumb'
|
|
className={classes.link}
|
|
>
|
|
<Typography variant="body2">Home</Typography>
|
|
</Link>
|
|
{currentHierarchy.map((item, idx) => formatLink(item, idx.toString()))}
|
|
</Breadcrumbs>
|
|
</Box>
|
|
)
|
|
}
|