60 lines
1.7 KiB
TypeScript
60 lines
1.7 KiB
TypeScript
"use client";
|
|
|
|
/**
|
|
* Copyright (c) 2023-present Plane Software, Inc. and contributors
|
|
* SPDX-License-Identifier: AGPL-3.0-only
|
|
* See the LICENSE file for details.
|
|
*/
|
|
|
|
import { useEffect, useState } from "react";
|
|
import type { ReactNode } from "react";
|
|
import { createPortal } from "react-dom";
|
|
import { observer } from "mobx-react";
|
|
import { Breadcrumbs } from "@plane/ui";
|
|
import { useUserProfile } from "@/hooks/store/user";
|
|
|
|
type TExpandedToolbarBreadcrumbsProps = {
|
|
children: ReactNode;
|
|
isLoading?: boolean;
|
|
onBack?: () => void;
|
|
};
|
|
|
|
export const ExpandedToolbarBreadcrumbs = observer(function ExpandedToolbarBreadcrumbs(
|
|
props: TExpandedToolbarBreadcrumbsProps
|
|
) {
|
|
const { children, isLoading = false, onBack } = props;
|
|
const { data: userProfile } = useUserProfile();
|
|
const [target, setTarget] = useState<HTMLElement | null>(null);
|
|
|
|
const isCompactToolbar = userProfile?.theme?.nodedcCompactToolbar === true;
|
|
|
|
useEffect(() => {
|
|
if (isCompactToolbar || typeof document === "undefined") {
|
|
setTarget(null);
|
|
return;
|
|
}
|
|
|
|
const animationFrame = window.requestAnimationFrame(() => {
|
|
setTarget(document.querySelector<HTMLElement>("[data-nodedc-expanded-breadcrumbs-slot]"));
|
|
});
|
|
|
|
return () => window.cancelAnimationFrame(animationFrame);
|
|
}, [isCompactToolbar]);
|
|
|
|
const content = (
|
|
<div className="flex min-w-0 items-center gap-2.5 overflow-visible">
|
|
<Breadcrumbs
|
|
onBack={onBack}
|
|
isLoading={isLoading}
|
|
className={isCompactToolbar ? "flex-grow-0" : "nodedc-expanded-breadcrumbs flex-grow-0"}
|
|
>
|
|
{children}
|
|
</Breadcrumbs>
|
|
</div>
|
|
);
|
|
|
|
if (!isCompactToolbar && target) return createPortal(content, target);
|
|
|
|
return content;
|
|
});
|