@material-ui/core#BreadcrumbsProps TypeScript Examples
The following examples show how to use
@material-ui/core#BreadcrumbsProps.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: Breadcrumbs.tsx From firetable with Apache License 2.0 | 4 votes |
export default function Breadcrumbs(props: BreadcrumbsProps) {
const classes = useStyles();
const { tables, tableState } = useFiretableContext();
const collection = tableState?.tablePath || "";
const router = useRouter();
const parentLabel = decodeURIComponent(
queryString.parse(router.location.search).parentLabel as string
);
const breadcrumbs = collection.split("/");
const section = _find(tables, ["collection", breadcrumbs[0]])?.section || "";
const getLabel = (collection: string) =>
_find(tables, ["collection", collection])?.name || collection;
return (
<MuiBreadcrumbs
separator={<ArrowRightIcon />}
aria-label="sub-table breadcrumbs"
classes={classes}
component="div"
{...(props as any)}
>
{/* Section name */}
{section && (
<Link
component={RouterLink}
to={`${routes.home}#${section}`}
variant="h6"
color="textPrimary"
>
{section}
</Link>
)}
{breadcrumbs.map((crumb: string, index) => {
// If it’s the first breadcrumb, show with specific style
const crumbProps = {
key: index,
variant: index === 0 ? "h6" : "subtitle2",
component: index === 0 ? "h2" : "div",
color: index === 0 ? "textPrimary" : "textSecondary",
} as const;
// If it’s the last crumb, just show the label without linking
if (index === breadcrumbs.length - 1)
return (
<Typography {...crumbProps}>
{getLabel(crumb) || crumb.replace(/([A-Z])/g, " $1")}
</Typography>
);
// If odd: breadcrumb points to a document — don’t show a link
// TODO: show a picker here to switch between sub tables
if (index % 2 === 1)
return (
<Typography {...crumbProps}>
{getLabel(
parentLabel.split(",")[Math.ceil(index / 2) - 1] || crumb
)}
</Typography>
);
// Otherwise, even: breadcrumb points to a Firestore collection
return (
<Link
key={crumbProps.key}
component={RouterLink}
to={`${routes.table}/${encodeURIComponent(
breadcrumbs.slice(0, index + 1).join("/")
)}`}
variant={crumbProps.variant}
color={crumbProps.color}
>
{getLabel(crumb) || crumb.replace(/([A-Z])/g, " $1")}
</Link>
);
})}
</MuiBreadcrumbs>
);
}