157 lines
4.5 KiB
TypeScript
157 lines
4.5 KiB
TypeScript
"use client"
|
|
|
|
import { cx } from "class-variance-authority"
|
|
import { useEffect, useState } from "react"
|
|
import {
|
|
Breadcrumbs as AriaBreadcrumbs,
|
|
Button,
|
|
Dialog,
|
|
DialogTrigger,
|
|
OverlayArrow,
|
|
Popover,
|
|
} from "react-aria-components"
|
|
|
|
import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
|
|
import { Typography } from "@scandic-hotels/design-system/Typography"
|
|
|
|
import { debounce } from "@/utils/debounce"
|
|
|
|
import Link from "../Link"
|
|
import { Arrow } from "../Popover/Arrow"
|
|
import Footnote from "../Text/Footnote"
|
|
import { Breadcrumb } from "./Breadcrumb"
|
|
import { splitBreadcrumbs } from "./utils"
|
|
import { breadcrumbsVariants } from "./variants"
|
|
|
|
import styles from "./breadcrumbs.module.css"
|
|
|
|
import type { BreadcrumbsProps } from "./breadcrumbs"
|
|
|
|
export default function Breadcrumbs({
|
|
breadcrumbs,
|
|
variant,
|
|
}: BreadcrumbsProps) {
|
|
// using a ref instead to detect when the element is available and forcing a render
|
|
const [element, attachRef] = useState<HTMLButtonElement | null>(null)
|
|
const [isTooltipDisabled, setIsTooltipDisabled] = useState(false)
|
|
|
|
useEffect(() => {
|
|
const observer = new ResizeObserver(
|
|
debounce(([entry]) => {
|
|
const el = entry.target
|
|
setIsTooltipDisabled(el.clientWidth >= el.scrollWidth)
|
|
}, 200)
|
|
)
|
|
|
|
if (element) {
|
|
observer.observe(element)
|
|
}
|
|
|
|
return () => {
|
|
if (element) {
|
|
observer.unobserve(element)
|
|
}
|
|
}
|
|
}, [element])
|
|
|
|
if (!breadcrumbs?.length) {
|
|
return null
|
|
}
|
|
|
|
const classNames = breadcrumbsVariants({
|
|
variant,
|
|
})
|
|
|
|
const [homeBreadcrumb, remainingBreadcrumbs, lastBreadcrumb] =
|
|
splitBreadcrumbs(breadcrumbs)
|
|
|
|
return (
|
|
<nav aria-label="Breadcrumbs" className={classNames}>
|
|
<AriaBreadcrumbs className={styles.list}>
|
|
<Breadcrumb
|
|
href={homeBreadcrumb.href}
|
|
aria-label={homeBreadcrumb.title}
|
|
>
|
|
<MaterialIcon icon="home" size={16} color="CurrentColor" />
|
|
</Breadcrumb>
|
|
|
|
{remainingBreadcrumbs.length >= 3 ? (
|
|
<>
|
|
<Breadcrumb
|
|
href={remainingBreadcrumbs[0].href!}
|
|
className={styles.mobile}
|
|
>
|
|
{remainingBreadcrumbs[0].title}
|
|
</Breadcrumb>
|
|
<Breadcrumb className={styles.mobile}>
|
|
<DialogTrigger>
|
|
<Footnote color="burgundy" type="bold" asChild>
|
|
<Button className={styles.button}>…</Button>
|
|
</Footnote>
|
|
<Popover>
|
|
<Dialog className={styles.dialog}>
|
|
{remainingBreadcrumbs.slice(1).map((breadcrumb) => (
|
|
<Link
|
|
href={breadcrumb.href!}
|
|
size="tiny"
|
|
key={breadcrumb.uid}
|
|
className={styles.dialogLink}
|
|
>
|
|
{breadcrumb.title}
|
|
</Link>
|
|
))}
|
|
</Dialog>
|
|
</Popover>
|
|
</DialogTrigger>
|
|
<MaterialIcon
|
|
icon="chevron_right"
|
|
size={20}
|
|
aria-hidden="true"
|
|
color="Icon/Interactive/Secondary"
|
|
/>
|
|
</Breadcrumb>
|
|
</>
|
|
) : (
|
|
remainingBreadcrumbs.map((breadcrumb) => (
|
|
<Breadcrumb key={breadcrumb.uid} href={breadcrumb.href}>
|
|
{breadcrumb.title}
|
|
</Breadcrumb>
|
|
))
|
|
)}
|
|
{remainingBreadcrumbs.map((breadcrumb) => (
|
|
<Breadcrumb
|
|
key={breadcrumb.uid}
|
|
href={breadcrumb.href}
|
|
className={styles.desktop}
|
|
>
|
|
{breadcrumb.title}
|
|
</Breadcrumb>
|
|
))}
|
|
<Breadcrumb>
|
|
<DialogTrigger>
|
|
<Footnote color="burgundy" type="bold" asChild>
|
|
<Button
|
|
className={cx(styles.button, styles.tooltipTrigger)}
|
|
ref={attachRef}
|
|
isDisabled={isTooltipDisabled}
|
|
>
|
|
{lastBreadcrumb.title}
|
|
</Button>
|
|
</Footnote>
|
|
<Popover placement="bottom" offset={16}>
|
|
<Dialog className={styles.tooltip}>
|
|
<OverlayArrow>
|
|
<Arrow color="black" size="small" />
|
|
</OverlayArrow>
|
|
<Typography variant="Label/xsRegular">
|
|
<span>{lastBreadcrumb.title}</span>
|
|
</Typography>
|
|
</Dialog>
|
|
</Popover>
|
|
</DialogTrigger>
|
|
</Breadcrumb>
|
|
</AriaBreadcrumbs>
|
|
</nav>
|
|
)
|
|
}
|