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

chore: integrate react-popper

Browse Source
This commit is contained in:
Aaryan Khandelwal 2023-10-03 16:51:03 +05:30
parent 2d3c1f93c1
commit 639a30abb5
10 changed files with 266 additions and 271 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
web/components/custom-attributes/attribute-display/email.tsx
View File

@ -50,10 +50,10 @@ export const CustomEmailAttribute: React.FC<Props> = ({ attributeDetails, onChan
});
return (
<div className="flex-shrink-0">
<div className="flex-shrink-0 flex">
{!isEditing && (
<div
className="cursor-pointer text-xs truncate bg-custom-background-80 px-2.5 py-0.5 w-min max-w-full whitespace-nowrap rounded"
className="cursor-pointer text-xs truncate bg-custom-background-80 px-2.5 py-0.5 rounded"
onClick={() => setIsEditing(true)}
>
{value && value !== "" ? (
@ -66,7 +66,11 @@ export const CustomEmailAttribute: React.FC<Props> = ({ attributeDetails, onChan
</div>
)}
{isEditing && (
<form onSubmit={handleSubmit(handleFormSubmit)} className="flex items-center" ref={formRef}>
<form
onSubmit={handleSubmit(handleFormSubmit)}
className="flex items-center flex-grow"
ref={formRef}
>
<Controller
control={control}
name="email"

17
web/components/custom-attributes/attribute-display/number.tsx
View File

@ -59,9 +59,12 @@ export const CustomNumberAttribute: React.FC<Props> = ({ attributeDetails, onCha
const extraSettings = attributeDetails.extra_settings;
return (
<div className="flex-shrink-0">
<div className="flex-shrink-0 flex">
{!isEditing && (
<div className="cursor-pointer text-xs truncate flex" onClick={() => setIsEditing(true)}>
<div
className="cursor-pointer text-xs truncate flex w-full"
onClick={() => setIsEditing(true)}
>
{value ? (
<>
{extraSettings?.representation === "bar" ? (
@ -91,14 +94,14 @@ export const CustomNumberAttribute: React.FC<Props> = ({ attributeDetails, onCha
/>
</div>
) : (
<span className="font-medium truncate bg-custom-background-80 px-2.5 py-0.5 rounded w-min max-w-full whitespace-nowrap">
<span className="font-medium truncate bg-custom-background-80 px-2.5 py-0.5 rounded">
{value}
</span>
)}
</>
) : (
<div
className="text-xs truncate bg-custom-background-80 px-2.5 py-0.5 w-min max-w-full whitespace-nowrap"
className="text-xs truncate bg-custom-background-80 px-2.5 py-0.5"
onClick={() => setIsEditing(true)}
>
{value ?? "Empty"}
@ -107,7 +110,11 @@ export const CustomNumberAttribute: React.FC<Props> = ({ attributeDetails, onCha
</div>
)}
{isEditing && (
<form onSubmit={handleSubmit(handleFormSubmit)} className="flex items-center" ref={formRef}>
<form
onSubmit={handleSubmit(handleFormSubmit)}
className="flex items-center flex-grow"
ref={formRef}
>
<Controller
control={control}
name="number"

38
web/components/custom-attributes/attribute-display/relation.tsx
View File

@ -1,17 +1,14 @@
import React, { useRef, useState } from "react";
import React, { useState } from "react";
import { useRouter } from "next/router";
import useSWR from "swr";
// headless ui
import { usePopper } from "react-popper";
import { Combobox } from "@headlessui/react";
// services
import cyclesService from "services/cycles.service";
import modulesService from "services/modules.service";
// hooks
import useProjectMembers from "hooks/use-project-members";
import useDynamicDropdownPosition from "hooks/use-dynamic-dropdown";
// ui
import { Avatar } from "components/ui";
// icons
@ -39,11 +36,14 @@ export const CustomRelationAttribute: React.FC<Props> = ({
const router = useRouter();
const { workspaceSlug } = router.query;
const [isOpen, setIsOpen] = useState(false);
const [query, setQuery] = useState("");
const dropdownButtonRef = useRef<HTMLButtonElement>(null);
const dropdownOptionsRef = useRef<HTMLUListElement>(null);
const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
const { styles, attributes } = usePopper(referenceElement, popperElement, {
placement: "bottom-start",
});
const { data: cycles } = useSWR(
workspaceSlug && projectId && attributeDetails.unit === "cycle"
@ -90,8 +90,6 @@ export const CustomRelationAttribute: React.FC<Props> = ({
option.query.toLowerCase().includes(query.toLowerCase())
);
useDynamicDropdownPosition(isOpen, () => setIsOpen(false), dropdownButtonRef, dropdownOptionsRef);
return (
<Combobox
as="div"
@ -99,17 +97,20 @@ export const CustomRelationAttribute: React.FC<Props> = ({
onChange={(val) => onChange(val)}
className="flex-shrink-0 text-left flex items-center"
>
{({ open }: { open: boolean }) => (
<>
<Combobox.Button
ref={dropdownButtonRef}
<Combobox.Button as={React.Fragment}>
<button
ref={setReferenceElement}
className={`flex items-center text-xs rounded px-2.5 py-0.5 truncate w-min max-w-full text-left bg-custom-background-80 ${className}`}
>
{selectedOption?.label ?? `Select ${attributeDetails.unit}`}
</button>
</Combobox.Button>
<Combobox.Options
ref={dropdownOptionsRef}
<Combobox.Options>
<div
className="fixed z-10 border border-custom-border-300 px-2 py-2.5 rounded bg-custom-background-100 text-xs shadow-custom-shadow-rg focus:outline-none w-48 whitespace-nowrap mt-1"
ref={setPopperElement}
style={styles.popper}
{...attributes.popper}
>
<div className="flex w-full items-center justify-start rounded-sm border-[0.6px] border-custom-border-200 bg-custom-background-90 px-2 mb-1">
<Search className="text-custom-text-400" size={12} strokeWidth={1.5} />
@ -142,9 +143,8 @@ export const CustomRelationAttribute: React.FC<Props> = ({
<p className="text-custom-text-300 text-center py-1">Loading...</p>
)}
</div>
</div>
</Combobox.Options>
</>
)}
</Combobox>
);
};

43
web/components/custom-attributes/attribute-display/select.tsx
View File

@ -1,9 +1,7 @@
import React, { useRef, useState } from "react";
// headless ui
import React, { useState } from "react";
import { usePopper } from "react-popper";
import { Combobox } from "@headlessui/react";
// hooks
import useDynamicDropdownPosition from "hooks/use-dynamic-dropdown";
// icons
import { Check, Search, XIcon } from "lucide-react";
// types
@ -24,11 +22,14 @@ type Props = {
export const CustomSelectAttribute: React.FC<Props> = (props) => {
const { attributeDetails, className = "", multiple = false, onChange, value } = props;
const [isOpen, setIsOpen] = useState(false);
const [query, setQuery] = useState("");
const dropdownButtonRef = useRef<HTMLButtonElement>(null);
const dropdownOptionsRef = useRef<HTMLUListElement>(null);
const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
const { styles, attributes } = usePopper(referenceElement, popperElement, {
placement: "bottom-start",
});
const options = attributeDetails.children.filter((option) =>
option.display_name.toLowerCase().includes(query.toLowerCase())
@ -39,20 +40,12 @@ export const CustomSelectAttribute: React.FC<Props> = (props) => {
value,
};
useDynamicDropdownPosition(isOpen, () => setIsOpen(false), dropdownButtonRef, dropdownOptionsRef);
if (multiple) comboboxProps.multiple = true;
return (
<Combobox as="div" className="flex-shrink-0 text-left flex items-center" {...comboboxProps}>
{({ open }: { open: boolean }) => {
if (open) {
if (!isOpen) setIsOpen(true);
} else if (isOpen) setIsOpen(false);
return (
<>
<Combobox.Button ref={dropdownButtonRef}>
<Combobox.Button as={React.Fragment}>
<button type="button" ref={setReferenceElement}>
{value ? (
Array.isArray(value) ? (
value.length > 0 ? (
@ -122,13 +115,14 @@ export const CustomSelectAttribute: React.FC<Props> = (props) => {
Select {attributeDetails.display_name}
</div>
)}
</button>
</Combobox.Button>
<Combobox.Options>
<div
className={`${open ? "fixed z-20 top-0 left-0 h-screen w-screen cursor-auto" : ""}`}
>
<Combobox.Options
ref={dropdownOptionsRef}
className="fixed z-10 border border-custom-border-300 px-2 py-2.5 rounded bg-custom-background-100 text-xs shadow-custom-shadow-rg focus:outline-none w-48 whitespace-nowrap mt-1"
ref={setPopperElement}
style={styles.popper}
{...attributes.popper}
>
<div className="flex w-full items-center justify-start rounded-sm border-[0.5px] border-custom-border-200 bg-custom-background-90 px-2 mb-1">
<Search className="text-custom-text-400" size={12} strokeWidth={1.5} />
@ -165,11 +159,8 @@ export const CustomSelectAttribute: React.FC<Props> = (props) => {
</Combobox.Option>
))}
</div>
</Combobox.Options>
</div>
</>
);
}}
</Combobox.Options>
</Combobox>
);
};

15
web/components/custom-attributes/attribute-display/text.tsx
View File

@ -56,17 +56,22 @@ export const CustomTextAttribute: React.FC<Props & { value: string | undefined }
});
return (
<div className="flex-shrink-0">
<div className="flex-shrink-0 flex">
{!isEditing && (
<div
className="cursor-pointer text-xs truncate bg-custom-background-80 px-2.5 py-0.5 w-min max-w-full whitespace-nowrap rounded"
<button
type="button"
onClick={() => setIsEditing(true)}
className="cursor-pointer text-xs truncate bg-custom-background-80 px-2.5 py-0.5 rounded"
>
{value && value !== "" ? value : "Empty"}
</div>
</button>
)}
{isEditing && (
<form onSubmit={handleSubmit(handleFormSubmit)} className="flex items-center" ref={formRef}>
<form
onSubmit={handleSubmit(handleFormSubmit)}
className="flex items-center flex-grow"
ref={formRef}
>
<Controller
control={control}
name="text"

10
web/components/custom-attributes/attribute-display/url.tsx
View File

@ -54,10 +54,10 @@ export const CustomUrlAttribute: React.FC<Props & { value: string | undefined }>
});
return (
<div className="flex-shrink-0">
<div className="flex-shrink-0 flex">
{!isEditing && (
<div
className="cursor-pointer text-xs truncate bg-custom-background-80 px-2.5 py-0.5 w-min max-w-full whitespace-nowrap rounded"
className="cursor-pointer text-xs truncate bg-custom-background-80 px-2.5 py-0.5 rounded"
onClick={() => setIsEditing(true)}
>
{value && value !== "" ? (
@ -70,7 +70,11 @@ export const CustomUrlAttribute: React.FC<Props & { value: string | undefined }>
</div>
)}
{isEditing && (
<form onSubmit={handleSubmit(handleFormSubmit)} className="flex items-center" ref={formRef}>
<form
onSubmit={handleSubmit(handleFormSubmit)}
className="flex items-center flex-grow"
ref={formRef}
>
<Controller
control={control}
name="url"

47
web/components/custom-attributes/dropdowns/types-dropdown.tsx
View File

@ -1,9 +1,7 @@
import React, { useRef, useState } from "react";
// headless ui
import React, { useState } from "react";
import { Menu } from "@headlessui/react";
// hooks
import useDynamicDropdownPosition from "hooks/use-dynamic-dropdown";
import { usePopper } from "react-popper";
// icons
import { Plus } from "lucide-react";
// types
@ -16,37 +14,31 @@ type Props = {
};
export const TypesDropdown: React.FC<Props> = ({ onClick }) => {
const [isOpen, setIsOpen] = useState(false);
const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
const buttonRef = useRef<HTMLButtonElement>(null);
const optionsRef = useRef<HTMLDivElement>(null);
useDynamicDropdownPosition(isOpen, () => setIsOpen(false), buttonRef, optionsRef);
const { styles, attributes } = usePopper(referenceElement, popperElement, {
placement: "top",
});
return (
<Menu as="div" className="flex-shrink-0 text-left">
{({ open }: { open: boolean }) => {
if (open) {
if (!isOpen) setIsOpen(true);
} else if (isOpen) setIsOpen(false);
return (
<>
<Menu.Button
ref={buttonRef}
<Menu.Button as={React.Fragment}>
<button
type="button"
ref={setReferenceElement}
className="flex items-center gap-1 text-xs font-medium text-custom-primary-100"
>
<Plus size={14} strokeWidth={1.5} />
Add Attribute
</button>
</Menu.Button>
<Menu.Items>
<div
className={`${
open ? "" : "hidden"
} fixed z-20 top-0 left-0 h-full w-full cursor-auto`}
>
<Menu.Items
ref={optionsRef}
ref={setPopperElement}
className="fixed z-10 border-[0.5px] border-custom-border-300 p-1 min-w-[10rem] max-h-60 rounded bg-custom-background-100 text-xs shadow-custom-shadow-rg focus:outline-none overflow-y-auto"
style={styles.popper}
{...attributes.popper}
>
{Object.keys(CUSTOM_ATTRIBUTES_LIST).map((type) => {
const typeMetaData = CUSTOM_ATTRIBUTES_LIST[type as TCustomAttributeTypes];
@ -64,11 +56,8 @@ export const TypesDropdown: React.FC<Props> = ({ onClick }) => {
</Menu.Item>
);
})}
</Menu.Items>
</div>
</>
);
}}
</Menu.Items>
</Menu>
);
};

6
web/components/issues/peek-overview/layout.tsx
View File

@ -102,6 +102,7 @@ export const IssuePeekOverview: React.FC<Props> = observer(
/>
<Transition.Root appear show={isSidePeekOpen} as={React.Fragment}>
<Dialog as="div" className="relative z-20" onClose={handleClose}>
<div className="fixed inset-0 z-20 h-full w-full overflow-y-auto">
<Transition.Child
as={React.Fragment}
enter="transition-transform duration-300"
@ -111,8 +112,7 @@ export const IssuePeekOverview: React.FC<Props> = observer(
leaveFrom="translate-x-0"
leaveTo="translate-x-full"
>
<Dialog.Panel className="fixed inset-0 z-20 h-full w-full overflow-y-auto">
<div className="fixed z-20 bg-custom-background-100 top-0 right-0 h-full w-1/2 shadow-custom-shadow-md">
<Dialog.Panel className="fixed z-20 bg-custom-background-100 top-0 right-0 h-full w-1/2 shadow-custom-shadow-md">
<SidePeekView
handleClose={handleClose}
handleDeleteIssue={() => setDeleteIssueModal(true)}
@ -123,9 +123,9 @@ export const IssuePeekOverview: React.FC<Props> = observer(
setMode={(mode) => setPeekOverviewMode(mode)}
workspaceSlug={workspaceSlug}
/>
</div>
</Dialog.Panel>
</Transition.Child>
</div>
</Dialog>
</Transition.Root>
<Transition.Root appear show={isModalPeekOpen} as={React.Fragment}>

2
web/package.json
View File

@ -25,6 +25,7 @@
"@nivo/line": "0.80.0",
"@nivo/pie": "0.80.0",
"@nivo/scatterplot": "0.80.0",
"@popperjs/core": "^2.11.8",
"@sentry/nextjs": "^7.36.0",
"@tiptap/extension-code-block-lowlight": "^2.0.4",
"@tiptap/extension-color": "^2.0.4",
@ -72,6 +73,7 @@
"react-hook-form": "^7.38.0",
"react-markdown": "^8.0.7",
"react-moveable": "^0.54.1",
"react-popper": "^2.3.0",
"sharp": "^0.32.1",
"sonner": "^0.6.2",
"swr": "^2.1.3",

9
yarn.lock
View File

@ -6628,20 +6628,13 @@ prosemirror-menu@^1.2.1:
prosemirror-history "^1.0.0"
prosemirror-state "^1.0.0"
prosemirror-model@^1.0.0, prosemirror-model@^1.16.0, prosemirror-model@^1.18.1, prosemirror-model@^1.8.1:
prosemirror-model@1.18.1, prosemirror-model@^1.0.0, prosemirror-model@^1.16.0, prosemirror-model@^1.18.1, prosemirror-model@^1.19.0, prosemirror-model@^1.8.1:
version "1.18.1"
resolved "https://registry.yarnpkg.com/prosemirror-model/-/prosemirror-model-1.18.1.tgz#1d5d6b6de7b983ee67a479dc607165fdef3935bd"
integrity sha512-IxSVBKAEMjD7s3n8cgtwMlxAXZrC7Mlag7zYsAKDndAqnDScvSmp/UdnRTV/B33lTCVU3CCm7dyAn/rVVD0mcw==
dependencies:
orderedmap "^2.0.0"
prosemirror-model@^1.19.0:
version "1.19.3"
resolved "https://registry.yarnpkg.com/prosemirror-model/-/prosemirror-model-1.19.3.tgz#f0d55285487fefd962d0ac695f716f4ec6705006"
integrity sha512-tgSnwN7BS7/UM0sSARcW+IQryx2vODKX4MI7xpqY2X+iaepJdKBPc7I4aACIsDV/LTaTjt12Z56MhDr9LsyuZQ==
dependencies:
orderedmap "^2.0.0"
prosemirror-schema-basic@^1.2.0:
version "1.2.2"
resolved "https://registry.yarnpkg.com/prosemirror-schema-basic/-/prosemirror-schema-basic-1.2.2.tgz#6695f5175e4628aab179bf62e5568628b9cfe6c7"