plane/apps/space/components/issues/peek-overview/header.tsx

146 lines
4.9 KiB
TypeScript
Raw Normal View History

import React from "react";
import { useRouter } from "next/router";
// headless ui
import { Listbox, Transition } from "@headlessui/react";
// hooks
import useToast from "hooks/use-toast";
// ui
import { Icon } from "components/ui";
// icons
import { East } from "@mui/icons-material";
// helpers
import { copyTextToClipboard } from "helpers/string.helper";
// store
import { IPeekMode } from "store/issue_details";
import { RootStore } from "store/root";
// lib
import { useMobxStore } from "lib/mobx/store-provider";
// types
import { IIssue } from "types/issue";
type Props = {
handleClose: () => void;
issueDetails: IIssue | undefined;
};
const peekModes: {
key: IPeekMode;
icon: string;
label: string;
}[] = [
{ key: "side", icon: "side_navigation", label: "Side Peek" },
{
key: "modal",
icon: "dialogs",
label: "Modal Peek",
},
{
key: "full",
icon: "nearby",
label: "Full Screen Peek",
},
];
export const PeekOverviewHeader: React.FC<Props> = (props) => {
const { handleClose, issueDetails } = props;
const { issueDetails: issueDetailStore }: RootStore = useMobxStore();
const router = useRouter();
const { workspace_slug } = router.query;
const { setToastAlert } = useToast();
const handleCopyLink = () => {
const originURL = typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
copyTextToClipboard(`${originURL}/${workspace_slug}/projects/${issueDetails?.project}/`).then(() => {
setToastAlert({
type: "success",
title: "Link copied!",
message: "Issue link copied to clipboard",
});
});
};
return (
<>
<div className="flex justify-between items-center">
<div className="flex items-center gap-4">
{issueDetailStore.peekMode === "side" && (
<button type="button" onClick={handleClose}>
<East
sx={{
fontSize: "14px",
}}
/>
</button>
)}
<Listbox
as="div"
value={issueDetailStore.peekMode}
onChange={(val) => issueDetailStore.setPeekMode(val)}
className="relative flex-shrink-0 text-left"
>
<Listbox.Button
className={`grid place-items-center ${issueDetailStore.peekMode === "full" ? "rotate-45" : ""}`}
>
<Icon iconName={peekModes.find((m) => m.key === issueDetailStore.peekMode)?.icon ?? ""} />
</Listbox.Button>
<Transition
as={React.Fragment}
enter="transition ease-out duration-100"
enterFrom="transform opacity-0 scale-95"
enterTo="transform opacity-100 scale-100"
leave="transition ease-in duration-75"
leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95"
>
<Listbox.Options className="absolute z-10 border border-custom-border-300 mt-1 overflow-y-auto rounded-md bg-custom-background-90 text-xs shadow-lg focus:outline-none left-0 origin-top-left min-w-[8rem] whitespace-nowrap">
<div className="space-y-1 p-2">
{peekModes.map((mode) => (
<Listbox.Option
key={mode.key}
value={mode.key}
className={({ active, selected }) =>
`cursor-pointer select-none truncate rounded px-1 py-1.5 ${
active || selected ? "bg-custom-background-80" : ""
} ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
}
>
{({ selected }) => (
<div className="flex items-center justify-between gap-2">
<div className="flex items-center gap-2">
<div className="flex items-center gap-1.5">
<Icon
iconName={mode.icon}
className={`!text-base flex-shrink-0 -my-1 ${mode.key === "full" ? "rotate-45" : ""}`}
/>
{mode.label}
</div>
</div>
{selected && <Icon iconName="done" />}
</div>
)}
</Listbox.Option>
))}
</div>
</Listbox.Options>
</Transition>
</Listbox>
</div>
{(issueDetailStore.peekMode === "side" || issueDetailStore.peekMode === "modal") && (
<div className="flex items-center gap-2 flex-shrink-0">
<button type="button" onClick={handleCopyLink} className="-rotate-45 focus:outline-none" tabIndex={1}>
<Icon iconName="link" />
</button>
</div>
)}
</div>
</>
);
};