77 lines
2.2 KiB
TypeScript
77 lines
2.2 KiB
TypeScript
"use client";
|
|
|
|
import type { ReactNode, FC } from "react";
|
|
import React, { useMemo } from "react";
|
|
import { observer } from "mobx-react";
|
|
import Link from "next/link";
|
|
import { Breadcrumbs } from "@plane/ui";
|
|
import { usePlatformOS } from "@/hooks/use-platform-os";
|
|
|
|
type Props = {
|
|
label?: string;
|
|
href?: string;
|
|
icon?: React.ReactNode;
|
|
disableTooltip?: boolean;
|
|
isLast?: boolean;
|
|
};
|
|
|
|
const IconWrapper = React.memo(({ icon }: { icon: React.ReactNode }) => (
|
|
<div className="flex size-4 items-center justify-center overflow-hidden !text-[1rem]">{icon}</div>
|
|
));
|
|
|
|
IconWrapper.displayName = "IconWrapper";
|
|
|
|
const LabelWrapper = React.memo(({ label }: { label: ReactNode }) => (
|
|
<div className="relative line-clamp-1 block max-w-[150px] overflow-hidden truncate">{label}</div>
|
|
));
|
|
|
|
LabelWrapper.displayName = "LabelWrapper";
|
|
|
|
const BreadcrumbContent = React.memo(({ icon, label }: { icon?: React.ReactNode; label?: ReactNode }) => {
|
|
if (!icon && !label) return null;
|
|
|
|
return (
|
|
<>
|
|
{icon && <IconWrapper icon={icon} />}
|
|
{label && <LabelWrapper label={label} />}
|
|
</>
|
|
);
|
|
});
|
|
|
|
BreadcrumbContent.displayName = "BreadcrumbContent";
|
|
|
|
const ItemWrapper = React.memo(({ children, ...props }: React.ComponentProps<typeof Breadcrumbs.ItemWrapper>) => (
|
|
<Breadcrumbs.ItemWrapper {...props}>{children}</Breadcrumbs.ItemWrapper>
|
|
));
|
|
|
|
ItemWrapper.displayName = "ItemWrapper";
|
|
|
|
export const BreadcrumbLink: FC<Props> = observer((props) => {
|
|
const { href, label, icon, disableTooltip = false, isLast = false } = props;
|
|
const { isMobile } = usePlatformOS();
|
|
|
|
const itemWrapperProps = useMemo(
|
|
() => ({
|
|
label: label?.toString(),
|
|
disableTooltip: isMobile || disableTooltip,
|
|
type: (href && href !== "" ? "link" : "text") as "link" | "text",
|
|
isLast,
|
|
}),
|
|
[href, label, isMobile, disableTooltip, isLast]
|
|
);
|
|
|
|
const content = useMemo(() => <BreadcrumbContent icon={icon} label={label} />, [icon, label]);
|
|
|
|
if (href) {
|
|
return (
|
|
<Link href={href}>
|
|
<ItemWrapper {...itemWrapperProps}>{content}</ItemWrapper>
|
|
</Link>
|
|
);
|
|
}
|
|
|
|
return <ItemWrapper {...itemWrapperProps}>{content}</ItemWrapper>;
|
|
});
|
|
|
|
BreadcrumbLink.displayName = "BreadcrumbLink";
|