forked from github/plane
114 lines
4.4 KiB
TypeScript
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>
|
|
);
|
|
};
|