forked from nodejs/nodejs.org
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.tsx
69 lines (61 loc) · 1.97 KB
/
index.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
import type { FC } from 'react';
import { useMemo } from 'react';
import BreadcrumbHomeLink from '@/components/Common/Breadcrumbs/BreadcrumbHomeLink';
import BreadcrumbItem from '@/components/Common/Breadcrumbs/BreadcrumbItem';
import BreadcrumbLink from '@/components/Common/Breadcrumbs/BreadcrumbLink';
import BreadcrumbRoot from '@/components/Common/Breadcrumbs/BreadcrumbRoot';
import BreadcrumbTruncatedItem from '@/components/Common/Breadcrumbs/BreadcrumbTruncatedItem';
import type { FormattedMessage } from '@/types';
type BreadcrumbLink = {
label: FormattedMessage;
href: string | undefined;
};
type BreadcrumbsProps = {
links: Array<BreadcrumbLink>;
maxLength?: number;
hideHome?: boolean;
};
const Breadcrumbs: FC<BreadcrumbsProps> = ({
links = [],
maxLength = 5,
hideHome = false,
}) => {
const totalLength = links.length + +!hideHome;
const lengthOffset = maxLength - totalLength;
const isOverflow = lengthOffset < 0;
const items = useMemo(
() =>
links.map((link, index, items) => {
const position = index + 1;
const isLastItem = index === items.length - 1;
const hidden =
// We add 1 here to take into account of the truncated breadcrumb.
position <= Math.abs(lengthOffset) + 1 && isOverflow && !isLastItem;
return (
<BreadcrumbItem
key={link.label.toString()}
hidden={hidden}
hideSeparator={isLastItem}
position={position + +!hideHome}
>
<BreadcrumbLink href={link.href} active={isLastItem}>
{link.label}
</BreadcrumbLink>
</BreadcrumbItem>
);
}),
[hideHome, isOverflow, lengthOffset, links]
);
return (
<BreadcrumbRoot>
{!hideHome && (
<BreadcrumbItem position={1}>
<BreadcrumbHomeLink />
</BreadcrumbItem>
)}
{isOverflow && <BreadcrumbTruncatedItem />}
{items}
</BreadcrumbRoot>
);
};
export default Breadcrumbs;