forked from tl-its-umich-edu/canvas-course-manager-next
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Breadcrumbs.tsx
75 lines (65 loc) · 2.22 KB
/
Breadcrumbs.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
import React from 'react'
import { styled } from '@mui/material/styles'
import { Link as RouterLink } from 'react-router-dom'
import { Breadcrumbs as MuiBreadcrumbs, Link, Typography } from '@mui/material'
import {NavigateNext as NavigateNextIcon} from '@mui/icons-material'
import { FeatureUIProps } from '../models/FeatureUIData.js'
const PREFIX = 'Breadcrumbs'
const classes = {
breadcrumbs: `${PREFIX}-breadcrumbs`
}
const StyledMuiBreadcrumbs = styled(MuiBreadcrumbs)(() => ({
[`& .${classes.breadcrumbs}`]: {
fontSize: '1.125rem'
}
}))
interface HomeBreadcrumbProps {
isLink: boolean
className: string
}
interface TitleTypographyProps {
to?: string
}
const HomeBreadcrumb = (props: HomeBreadcrumbProps): JSX.Element => {
const typography = (
<Typography className={props.className} color='textPrimary'>
Canvas Course Manager
</Typography>
)
return props.isLink
? (<Link component={RouterLink} to='/'>{typography}</Link>)
: (typography)
}
export interface BreadcrumbsProps {
pathnames?: string[]
features?: FeatureUIProps[]
}
function Breadcrumbs (props: BreadcrumbsProps): JSX.Element {
const { features, pathnames } = props
return (
<StyledMuiBreadcrumbs
aria-label='breadcrumb'
separator={<NavigateNextIcon fontSize='small' />}
>
<HomeBreadcrumb isLink={pathnames !== undefined && pathnames.length > 0} className={classes.breadcrumbs} />
{
(pathnames !== undefined && features !== undefined) && (
pathnames.map((value, index) => {
const last = index === pathnames.length - 1
const to = `/${pathnames.slice(0, index + 1).join('/')}`
const matches = features.filter(f => f.route.substring(1) === value)
if (matches.length === 0) return undefined
const feature = matches[0]
const titleTypographyProps: TitleTypographyProps = last ? { to: to } : {}
return (
<Typography className={classes.breadcrumbs} color='textPrimary' key={to} {...titleTypographyProps}>
{feature.data.title}
</Typography>
)
})
)
}
</StyledMuiBreadcrumbs>
)
}
export default Breadcrumbs