plane/web/components/custom-attributes/object-modal.tsx
2023-09-12 19:36:35 +05:30

114 lines
4.4 KiB
TypeScript

import React from "react";
// headless ui
import { Dialog, Transition } from "@headlessui/react";
import {
TextAttributeForm,
Input,
TypesDropdown,
NumberAttributeForm,
CheckboxAttributeForm,
RelationAttributeForm,
DateTimeAttributeForm,
UrlAttributeForm,
EmailAttributeForm,
FileAttributeForm,
SelectAttributeForm,
} from "components/custom-attributes";
import { CUSTOM_ATTRIBUTES_LIST } from "constants/custom-attributes";
type Props = {
isOpen: boolean;
onClose: () => void;
onSubmit?: () => Promise<void>;
};
export const ObjectModal: React.FC<Props> = ({ isOpen, onClose, onSubmit }) => {
const handleClose = () => {
onClose();
};
return (
<Transition.Root show={isOpen} as={React.Fragment}>
<Dialog as="div" className="relative z-20" onClose={handleClose}>
<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 h-full w-full z-20">
<div className="flex items-center justify-center h-full w-full p-4 sm:p-0">
<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="bg-custom-background-100 p-6 w-1/2 h-[85%] flex flex-col rounded-xl">
<h3 className="text-2xl font-semibold">New Object</h3>
<div className="mt-5 space-y-5 h-full overflow-y-auto">
<div className="space-y-4">
<div className="flex items-center gap-2">
<div className="h-9 w-9 bg-custom-background-80 grid place-items-center rounded text-sm">
🚀
</div>
<Input placeholder="Enter Object Title" />
</div>
<textarea
name="objectDescription"
id="objectDescription"
className="placeholder:text-custom-text-400 text-xs px-3 py-2 rounded bg-custom-background-100 border border-custom-border-200 w-full focus:outline-none"
cols={30}
rows={5}
placeholder="Enter Object Description"
/>
</div>
<div>
<h4 className="font-medium">Attributes</h4>
<div className="mt-2 space-y-2">
{/* TODO: Map over attributes */}
<TextAttributeForm />
<NumberAttributeForm />
<CheckboxAttributeForm />
<RelationAttributeForm />
<DateTimeAttributeForm />
<UrlAttributeForm />
<EmailAttributeForm />
<FileAttributeForm />
<SelectAttributeForm />
{/* <CUSTOM_ATTRIBUTES_LIST.text.component />
<CUSTOM_ATTRIBUTES_LIST.number.component />
<CUSTOM_ATTRIBUTES_LIST.checkbox.component />
<CUSTOM_ATTRIBUTES_LIST.relation.component />
<CUSTOM_ATTRIBUTES_LIST.datetime.component />
<CUSTOM_ATTRIBUTES_LIST.url.component />
<CUSTOM_ATTRIBUTES_LIST.email.component />
<CUSTOM_ATTRIBUTES_LIST.files.component />
<CUSTOM_ATTRIBUTES_LIST.select.component />
<CUSTOM_ATTRIBUTES_LIST.multi_select.component /> */}
</div>
<div className="mt-3">
<TypesDropdown />
</div>
</div>
</div>
</Dialog.Panel>
</Transition.Child>
</div>
</div>
</Dialog>
</Transition.Root>
);
};