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

91 lines
3.6 KiB
TypeScript
Raw Normal View History

2023-08-31 11:05:26 +00:00
import React, { useEffect, useMemo } from "react";
2023-08-30 18:42:45 +00:00
import { useRouter } from "next/router";
import { Dialog, Transition } from "@headlessui/react";
2023-08-30 18:42:45 +00:00
import { observer } from "mobx-react-lite";
// components
import { FullScreenPeekView, SidePeekView } from "components/issues/peek-overview";
// types
2023-08-30 18:42:45 +00:00
import type { IIssue } from "types/issue";
// lib
import { useMobxStore } from "lib/mobx/store-provider";
type Props = {
isOpen: boolean;
onClose: () => void;
};
2023-08-30 18:42:45 +00:00
export const IssuePeekOverview: React.FC<Props> = observer((props) => {
const { isOpen, onClose } = props;
// router
const router = useRouter();
2023-08-31 11:05:26 +00:00
const { workspace_slug, project_slug, peekId } = router.query;
2023-08-30 18:42:45 +00:00
// store
2023-08-31 11:05:26 +00:00
const { issueDetails: issueDetailStore, issue: issueStore } = useMobxStore();
2023-08-30 18:42:45 +00:00
2023-08-31 11:05:26 +00:00
const issueDetails = issueDetailStore.peekId && peekId ? issueDetailStore.details[peekId.toString()] : null;
2023-08-30 18:42:45 +00:00
useEffect(() => {
2023-08-31 11:05:26 +00:00
if (workspace_slug && project_slug && peekId && issueStore.issues && issueStore.issues.length > 0) {
2023-08-30 18:42:45 +00:00
if (!issueDetails) {
2023-08-31 11:05:26 +00:00
issueDetailStore.fetchIssueDetails(workspace_slug.toString(), project_slug.toString(), peekId.toString());
2023-08-30 18:42:45 +00:00
}
}
2023-08-31 11:05:26 +00:00
}, [workspace_slug, project_slug, issueDetailStore, issueDetails, peekId, issueStore.issues]);
const handleClose = () => {
onClose();
2023-08-30 18:42:45 +00:00
issueDetailStore.setPeekMode("side");
};
return (
<Transition.Root show={isOpen} as={React.Fragment}>
<Dialog as="div" className="relative z-20" onClose={handleClose}>
{/* add backdrop conditionally */}
2023-08-30 18:42:45 +00:00
{(issueDetailStore.peekMode === "modal" || issueDetailStore.peekMode === "full") && (
<Transition.Child
as={React.Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0"
enterTo="opacity-100"
leave="ease-in duration-200"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 transition-opacity" />
</Transition.Child>
)}
<div className="fixed inset-0 z-20 overflow-y-auto">
<div className="relative h-full w-full">
<Transition.Child
as={React.Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
enterTo="opacity-100 translate-y-0 sm:scale-100"
leave="ease-in duration-200"
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
>
<Dialog.Panel
className={`absolute z-20 bg-custom-background-100 ${
2023-08-30 18:42:45 +00:00
issueDetailStore.peekMode === "side"
? "top-0 right-0 h-full w-1/2 shadow-custom-shadow-md"
2023-08-30 18:42:45 +00:00
: issueDetailStore.peekMode === "modal"
? "top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 h-[70%] w-3/5 rounded-lg shadow-custom-shadow-xl"
: "top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 h-[95%] w-[95%] rounded-lg shadow-custom-shadow-xl"
}`}
>
2023-08-30 18:42:45 +00:00
{(issueDetailStore.peekMode === "side" || issueDetailStore.peekMode === "modal") && (
<SidePeekView handleClose={handleClose} issueDetails={issueDetails} />
)}
2023-08-30 18:42:45 +00:00
{issueDetailStore.peekMode === "full" && (
<FullScreenPeekView handleClose={handleClose} issueDetails={issueDetails} />
)}
</Dialog.Panel>
</Transition.Child>
</div>
</div>
</Dialog>
</Transition.Root>
);
2023-08-30 18:42:45 +00:00
});