thunderstrike/plane
thunderstrike/plane
2
0
Fork 0
forked from github/plane
Code Pull Requests Activity

[WEB-800] fix: issue peekview, and detail page create label colour selector autoplacement (#4032)

Browse Source 
* fix: issue peekview, and detail label colour selector autoplacement

* fix: build errors
This commit is contained in:
Lakhan Baheti 2024-03-22 18:30:23 +05:30 committed by GitHub
parent 60aea62739
commit d262eb4ffb
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 36 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
web/components/issues/issue-detail/label/create-label.tsx
View File

@ -1,14 +1,13 @@
import { FC, useState, Fragment, useEffect } from "react";
import { TwitterPicker } from "react-color";
import { Controller, useForm } from "react-hook-form";
import { usePopper } from "react-popper";
import { Plus, X, Loader } from "lucide-react";
import { Popover, Transition } from "@headlessui/react";
import { Popover } from "@headlessui/react";
import { IIssueLabel } from "@plane/types";
// hooks
import { Input, TOAST_TYPE, setToast } from "@plane/ui";
import { useIssueDetail } from "@/hooks/store";
// helpers
import { cn } from "helpers/common.helper";
// ui
// types
import { TLabelOperations } from "./root";
@ -31,11 +30,12 @@ export const LabelCreate: FC<ILabelCreate> = (props) => {
// hooks
const {
issue: { getIssueById },
peekIssue,
} = useIssueDetail();
// state
const [isCreateToggle, setIsCreateToggle] = useState(false);
const handleIsCreateToggle = () => setIsCreateToggle(!isCreateToggle);
const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
// react hook form
const {
handleSubmit,
@ -47,6 +47,18 @@ export const LabelCreate: FC<ILabelCreate> = (props) => {
defaultValues,
});
const { styles, attributes } = usePopper(referenceElement, popperElement, {
placement: "bottom-start",
modifiers: [
{
name: "preventOverflow",
options: {
padding: 12,
},
},
],
});
useEffect(() => {
if (!isCreateToggle) return;
@ -93,36 +105,28 @@ export const LabelCreate: FC<ILabelCreate> = (props) => {
render={({ field: { value, onChange } }) => (
<Popover>
<>
<Popover.Button className="grid place-items-center outline-none">
{value && value?.trim() !== "" && (
<span
className="h-6 w-6 rounded"
style={{
backgroundColor: value ?? "black",
}}
/>
)}
<Popover.Button as={Fragment}>
<button type="button" ref={setReferenceElement} className="grid place-items-center outline-none">
{value && value?.trim() !== "" && (
<span
className="h-6 w-6 rounded"
style={{
backgroundColor: value ?? "black",
}}
/>
)}
</button>
</Popover.Button>
<Transition
as={Fragment}
enter="transition ease-out duration-200"
enterFrom="opacity-0 translate-y-1"
enterTo="opacity-100 translate-y-0"
leave="transition ease-in duration-150"
leaveFrom="opacity-100 translate-y-0"
leaveTo="opacity-0 translate-y-1"
>
<Popover.Panel
className={cn("absolute z-10 mt-1.5 max-w-xs px-2 sm:px-0", !peekIssue ? "right-0" : "")}
<Popover.Panel className="fixed z-10">
<div
className="p-2 max-w-xs sm:px-0"
ref={setPopperElement}
style={styles.popper}
{...attributes.popper}
>
<TwitterPicker
triangle={!peekIssue ? "hide" : "top-left"}
color={value}
onChange={(value) => onChange(value.hex)}
/>
</Popover.Panel>
</Transition>
<TwitterPicker triangle={"hide"} color={value} onChange={(value) => onChange(value.hex)} />
</div>
</Popover.Panel>
</>
</Popover>
)}