@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>
  );
}