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 ( return (
<div className="flex-shrink-0"> <div className="flex-shrink-0 flex">
{!isEditing && ( {!isEditing && (
<div <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)} onClick={() => setIsEditing(true)}
> >
{value && value !== "" ? ( {value && value !== "" ? (
@ -66,7 +66,11 @@ export const CustomEmailAttribute: React.FC<Props> = ({ attributeDetails, onChan
</div> </div>
)} )}
{isEditing && ( {isEditing && (
<form onSubmit={handleSubmit(handleFormSubmit)} className="flex items-center" ref={formRef}> <form
onSubmit={handleSubmit(handleFormSubmit)}
className="flex items-center flex-grow"
ref={formRef}
>
<Controller <Controller
control={control} control={control}
name="email" 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; const extraSettings = attributeDetails.extra_settings;
return ( return (
<div className="flex-shrink-0"> <div className="flex-shrink-0 flex">
{!isEditing && ( {!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 ? ( {value ? (
<> <>
{extraSettings?.representation === "bar" ? ( {extraSettings?.representation === "bar" ? (
@ -91,14 +94,14 @@ export const CustomNumberAttribute: React.FC<Props> = ({ attributeDetails, onCha
/> />
</div> </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} {value}
</span> </span>
)} )}
</> </>
) : ( ) : (
<div <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)} onClick={() => setIsEditing(true)}
> >
{value ?? "Empty"} {value ?? "Empty"}
@ -107,7 +110,11 @@ export const CustomNumberAttribute: React.FC<Props> = ({ attributeDetails, onCha
</div> </div>
)} )}
{isEditing && ( {isEditing && (
<form onSubmit={handleSubmit(handleFormSubmit)} className="flex items-center" ref={formRef}> <form
onSubmit={handleSubmit(handleFormSubmit)}
className="flex items-center flex-grow"
ref={formRef}
>
<Controller <Controller
control={control} control={control}
name="number" name="number"

112
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 { useRouter } from "next/router";
import useSWR from "swr"; import useSWR from "swr";
import { usePopper } from "react-popper";
// headless ui
import { Combobox } from "@headlessui/react"; import { Combobox } from "@headlessui/react";
// services // services
import cyclesService from "services/cycles.service"; import cyclesService from "services/cycles.service";
import modulesService from "services/modules.service"; import modulesService from "services/modules.service";
// hooks // hooks
import useProjectMembers from "hooks/use-project-members"; import useProjectMembers from "hooks/use-project-members";
import useDynamicDropdownPosition from "hooks/use-dynamic-dropdown";
// ui // ui
import { Avatar } from "components/ui"; import { Avatar } from "components/ui";
// icons // icons
@ -39,11 +36,14 @@ export const CustomRelationAttribute: React.FC<Props> = ({
const router = useRouter(); const router = useRouter();
const { workspaceSlug } = router.query; const { workspaceSlug } = router.query;
const [isOpen, setIsOpen] = useState(false);
const [query, setQuery] = useState(""); const [query, setQuery] = useState("");
const dropdownButtonRef = useRef<HTMLButtonElement>(null); const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
const dropdownOptionsRef = useRef<HTMLUListElement>(null); const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
const { styles, attributes } = usePopper(referenceElement, popperElement, {
placement: "bottom-start",
});
const { data: cycles } = useSWR( const { data: cycles } = useSWR(
workspaceSlug && projectId && attributeDetails.unit === "cycle" workspaceSlug && projectId && attributeDetails.unit === "cycle"
@ -90,8 +90,6 @@ export const CustomRelationAttribute: React.FC<Props> = ({
option.query.toLowerCase().includes(query.toLowerCase()) option.query.toLowerCase().includes(query.toLowerCase())
); );
useDynamicDropdownPosition(isOpen, () => setIsOpen(false), dropdownButtonRef, dropdownOptionsRef);
return ( return (
<Combobox <Combobox
as="div" as="div"
@ -99,52 +97,54 @@ export const CustomRelationAttribute: React.FC<Props> = ({
onChange={(val) => onChange(val)} onChange={(val) => onChange(val)}
className="flex-shrink-0 text-left flex items-center" className="flex-shrink-0 text-left flex items-center"
> >
{({ open }: { open: boolean }) => ( <Combobox.Button as={React.Fragment}>
<> <button
<Combobox.Button ref={setReferenceElement}
ref={dropdownButtonRef} 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}`}
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}`}
{selectedOption?.label ?? `Select ${attributeDetails.unit}`} </button>
</Combobox.Button> </Combobox.Button>
<Combobox.Options <Combobox.Options>
ref={dropdownOptionsRef} <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" 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}
<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"> style={styles.popper}
<Search className="text-custom-text-400" size={12} strokeWidth={1.5} /> {...attributes.popper}
<Combobox.Input >
className="w-full bg-transparent py-1 px-2 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none" <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">
value={query} <Search className="text-custom-text-400" size={12} strokeWidth={1.5} />
onChange={(e) => setQuery(e.target.value)} <Combobox.Input
placeholder="Type to search..." className="w-full bg-transparent py-1 px-2 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
displayValue={(assigned: any) => assigned?.name} value={query}
/> onChange={(e) => setQuery(e.target.value)}
</div> placeholder="Type to search..."
<div className="mt-1 overflow-y-auto"> displayValue={(assigned: any) => assigned?.name}
{options ? ( />
options.length > 0 ? ( </div>
options.map((option) => ( <div className="mt-1 overflow-y-auto">
<Combobox.Option {options ? (
key={option.id} options.length > 0 ? (
value={option.id} options.map((option) => (
className="flex items-center gap-1 cursor-pointer select-none truncate rounded px-1 py-1.5 hover:bg-custom-background-80 w-full" <Combobox.Option
> key={option.id}
{option.label} value={option.id}
</Combobox.Option> className="flex items-center gap-1 cursor-pointer select-none truncate rounded px-1 py-1.5 hover:bg-custom-background-80 w-full"
)) >
) : ( {option.label}
<p className="text-custom-text-300 text-center py-1"> </Combobox.Option>
No {attributeDetails.unit}s found ))
</p>
)
) : ( ) : (
<p className="text-custom-text-300 text-center py-1">Loading...</p> <p className="text-custom-text-300 text-center py-1">
)} No {attributeDetails.unit}s found
</div> </p>
</Combobox.Options> )
</> ) : (
)} <p className="text-custom-text-300 text-center py-1">Loading...</p>
)}
</div>
</div>
</Combobox.Options>
</Combobox> </Combobox>
); );
}; };

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

@ -1,9 +1,7 @@
import React, { useRef, useState } from "react"; import React, { useState } from "react";
import { usePopper } from "react-popper";
// headless ui
import { Combobox } from "@headlessui/react"; import { Combobox } from "@headlessui/react";
// hooks
import useDynamicDropdownPosition from "hooks/use-dynamic-dropdown";
// icons // icons
import { Check, Search, XIcon } from "lucide-react"; import { Check, Search, XIcon } from "lucide-react";
// types // types
@ -24,11 +22,14 @@ type Props = {
export const CustomSelectAttribute: React.FC<Props> = (props) => { export const CustomSelectAttribute: React.FC<Props> = (props) => {
const { attributeDetails, className = "", multiple = false, onChange, value } = props; const { attributeDetails, className = "", multiple = false, onChange, value } = props;
const [isOpen, setIsOpen] = useState(false);
const [query, setQuery] = useState(""); const [query, setQuery] = useState("");
const dropdownButtonRef = useRef<HTMLButtonElement>(null); const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
const dropdownOptionsRef = useRef<HTMLUListElement>(null); const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
const { styles, attributes } = usePopper(referenceElement, popperElement, {
placement: "bottom-start",
});
const options = attributeDetails.children.filter((option) => const options = attributeDetails.children.filter((option) =>
option.display_name.toLowerCase().includes(query.toLowerCase()) option.display_name.toLowerCase().includes(query.toLowerCase())
@ -39,137 +40,127 @@ export const CustomSelectAttribute: React.FC<Props> = (props) => {
value, value,
}; };
useDynamicDropdownPosition(isOpen, () => setIsOpen(false), dropdownButtonRef, dropdownOptionsRef);
if (multiple) comboboxProps.multiple = true; if (multiple) comboboxProps.multiple = true;
return ( return (
<Combobox as="div" className="flex-shrink-0 text-left flex items-center" {...comboboxProps}> <Combobox as="div" className="flex-shrink-0 text-left flex items-center" {...comboboxProps}>
{({ open }: { open: boolean }) => { <Combobox.Button as={React.Fragment}>
if (open) { <button type="button" ref={setReferenceElement}>
if (!isOpen) setIsOpen(true); {value ? (
} else if (isOpen) setIsOpen(false); Array.isArray(value) ? (
value.length > 0 ? (
<div className="flex items-center gap-1 flex-wrap">
{value.map((val) => {
const optionDetails = options.find((o) => o.id === val);
return ( return (
<> <div
<Combobox.Button ref={dropdownButtonRef}> key={val}
{value ? ( className="px-2.5 py-0.5 rounded text-xs flex items-center justify-between gap-1"
Array.isArray(value) ? ( style={{
value.length > 0 ? ( backgroundColor: `${optionDetails?.color}40`,
<div className="flex items-center gap-1 flex-wrap">
{value.map((val) => {
const optionDetails = options.find((o) => o.id === val);
return (
<div
key={val}
className="px-2.5 py-0.5 rounded text-xs flex items-center justify-between gap-1"
style={{
backgroundColor: `${optionDetails?.color}40`,
}}
>
{optionDetails?.display_name}
{((attributeDetails.is_required && value.length > 1) ||
!attributeDetails.is_required) && (
<span
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
onChange(value.filter((v) => v !== val));
}}
>
<XIcon size={10} strokeWidth={1.5} />
</span>
)}
</div>
);
})}
</div>
) : (
<div
className={`text-xs px-2.5 py-0.5 rounded bg-custom-background-80 ${className}`}
>
Select {attributeDetails.display_name}
</div>
)
) : (
<div
className="px-2.5 py-0.5 rounded text-xs flex items-center justify-between gap-1"
style={{
backgroundColor: `${options.find((o) => o.id === value)?.color}40`,
}}
>
{options.find((o) => o.id === value)?.display_name}
{!attributeDetails.is_required && (
<span
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
onChange(undefined);
}} }}
> >
<XIcon size={10} strokeWidth={1.5} /> {optionDetails?.display_name}
</span> {((attributeDetails.is_required && value.length > 1) ||
)} !attributeDetails.is_required) && (
</div> <span
) onClick={(e) => {
e.preventDefault();
e.stopPropagation();
onChange(value.filter((v) => v !== val));
}}
>
<XIcon size={10} strokeWidth={1.5} />
</span>
)}
</div>
);
})}
</div>
) : ( ) : (
<div <div
className={`cursor-pointer text-xs truncate bg-custom-background-80 px-2.5 py-0.5 rounded ${className}`} className={`text-xs px-2.5 py-0.5 rounded bg-custom-background-80 ${className}`}
> >
Select {attributeDetails.display_name} Select {attributeDetails.display_name}
</div> </div>
)} )
</Combobox.Button> ) : (
<div <div
className={`${open ? "fixed z-20 top-0 left-0 h-screen w-screen cursor-auto" : ""}`} className="px-2.5 py-0.5 rounded text-xs flex items-center justify-between gap-1"
> style={{
<Combobox.Options backgroundColor: `${options.find((o) => o.id === value)?.color}40`,
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"
> >
<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"> {options.find((o) => o.id === value)?.display_name}
<Search className="text-custom-text-400" size={12} strokeWidth={1.5} /> {!attributeDetails.is_required && (
<Combobox.Input <span
className="w-full bg-transparent py-1 px-2 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none" onClick={(e) => {
value={query} e.preventDefault();
onChange={(e) => setQuery(e.target.value)} e.stopPropagation();
placeholder="Type to search..."
displayValue={(assigned: any) => assigned?.name} onChange(undefined);
/> }}
</div> >
<div className="mt-1 overflow-y-auto"> <XIcon size={10} strokeWidth={1.5} />
{(options ?? []).map((option) => ( </span>
<Combobox.Option )}
key={option.id} </div>
value={option.id} )
className={({ active }) => ) : (
`flex items-center justify-between gap-1 cursor-pointer select-none truncate rounded px-1 py-1.5 w-full ${ <div
active ? "bg-custom-background-80" : "" className={`cursor-pointer text-xs truncate bg-custom-background-80 px-2.5 py-0.5 rounded ${className}`}
}` >
} Select {attributeDetails.display_name}
>
{({ selected }) => (
<>
<span
className="px-1 rounded-sm truncate"
style={{ backgroundColor: `${option.color}40` }}
>
{option.display_name}
</span>
{selected && <Check size={14} strokeWidth={1.5} />}
</>
)}
</Combobox.Option>
))}
</div>
</Combobox.Options>
</div> </div>
</> )}
); </button>
}} </Combobox.Button>
<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.5px] border-custom-border-200 bg-custom-background-90 px-2 mb-1">
<Search className="text-custom-text-400" size={12} strokeWidth={1.5} />
<Combobox.Input
className="w-full bg-transparent py-1 px-2 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
value={query}
onChange={(e) => setQuery(e.target.value)}
placeholder="Type to search..."
displayValue={(assigned: any) => assigned?.name}
/>
</div>
<div className="mt-1 overflow-y-auto">
{(options ?? []).map((option) => (
<Combobox.Option
key={option.id}
value={option.id}
className={({ active }) =>
`flex items-center justify-between gap-1 cursor-pointer select-none truncate rounded px-1 py-1.5 w-full ${
active ? "bg-custom-background-80" : ""
}`
}
>
{({ selected }) => (
<>
<span
className="px-1 rounded-sm truncate"
style={{ backgroundColor: `${option.color}40` }}
>
{option.display_name}
</span>
{selected && <Check size={14} strokeWidth={1.5} />}
</>
)}
</Combobox.Option>
))}
</div>
</div>
</Combobox.Options>
</Combobox> </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 ( return (
<div className="flex-shrink-0"> <div className="flex-shrink-0 flex">
{!isEditing && ( {!isEditing && (
<div <button
className="cursor-pointer text-xs truncate bg-custom-background-80 px-2.5 py-0.5 w-min max-w-full whitespace-nowrap rounded" type="button"
onClick={() => setIsEditing(true)} onClick={() => setIsEditing(true)}
className="cursor-pointer text-xs truncate bg-custom-background-80 px-2.5 py-0.5 rounded"
> >
{value && value !== "" ? value : "Empty"} {value && value !== "" ? value : "Empty"}
</div> </button>
)} )}
{isEditing && ( {isEditing && (
<form onSubmit={handleSubmit(handleFormSubmit)} className="flex items-center" ref={formRef}> <form
onSubmit={handleSubmit(handleFormSubmit)}
className="flex items-center flex-grow"
ref={formRef}
>
<Controller <Controller
control={control} control={control}
name="text" 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 ( return (
<div className="flex-shrink-0"> <div className="flex-shrink-0 flex">
{!isEditing && ( {!isEditing && (
<div <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)} onClick={() => setIsEditing(true)}
> >
{value && value !== "" ? ( {value && value !== "" ? (
@ -70,7 +70,11 @@ export const CustomUrlAttribute: React.FC<Props & { value: string | undefined }>
</div> </div>
)} )}
{isEditing && ( {isEditing && (
<form onSubmit={handleSubmit(handleFormSubmit)} className="flex items-center" ref={formRef}> <form
onSubmit={handleSubmit(handleFormSubmit)}
className="flex items-center flex-grow"
ref={formRef}
>
<Controller <Controller
control={control} control={control}
name="url" name="url"

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

@ -1,9 +1,7 @@
import React, { useRef, useState } from "react"; import React, { useState } from "react";
// headless ui
import { Menu } from "@headlessui/react"; import { Menu } from "@headlessui/react";
// hooks import { usePopper } from "react-popper";
import useDynamicDropdownPosition from "hooks/use-dynamic-dropdown";
// icons // icons
import { Plus } from "lucide-react"; import { Plus } from "lucide-react";
// types // types
@ -16,59 +14,50 @@ type Props = {
}; };
export const TypesDropdown: React.FC<Props> = ({ onClick }) => { 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 { styles, attributes } = usePopper(referenceElement, popperElement, {
const optionsRef = useRef<HTMLDivElement>(null); placement: "top",
});
useDynamicDropdownPosition(isOpen, () => setIsOpen(false), buttonRef, optionsRef);
return ( return (
<Menu as="div" className="flex-shrink-0 text-left"> <Menu as="div" className="flex-shrink-0 text-left">
{({ open }: { open: boolean }) => { <Menu.Button as={React.Fragment}>
if (open) { <button
if (!isOpen) setIsOpen(true); type="button"
} else if (isOpen) setIsOpen(false); 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
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];
return ( return (
<> <Menu.Item
<Menu.Button key={type}
ref={buttonRef} as="button"
className="flex items-center gap-1 text-xs font-medium text-custom-primary-100" type="button"
> onClick={() => onClick(type as TCustomAttributeTypes)}
<Plus size={14} strokeWidth={1.5} /> className="flex items-center gap-1 cursor-pointer select-none truncate rounded px-1 py-1.5 hover:bg-custom-background-80 w-full"
Add Attribute
</Menu.Button>
<div
className={`${
open ? "" : "hidden"
} fixed z-20 top-0 left-0 h-full w-full cursor-auto`}
>
<Menu.Items
ref={optionsRef}
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"
> >
{Object.keys(CUSTOM_ATTRIBUTES_LIST).map((type) => { <typeMetaData.icon size={14} strokeWidth={1.5} />
const typeMetaData = CUSTOM_ATTRIBUTES_LIST[type as TCustomAttributeTypes]; {typeMetaData.label}
</Menu.Item>
return ( );
<Menu.Item })}
key={type} </div>
as="button" </Menu.Items>
type="button"
onClick={() => onClick(type as TCustomAttributeTypes)}
className="flex items-center gap-1 cursor-pointer select-none truncate rounded px-1 py-1.5 hover:bg-custom-background-80 w-full"
>
<typeMetaData.icon size={14} strokeWidth={1.5} />
{typeMetaData.label}
</Menu.Item>
);
})}
</Menu.Items>
</div>
</>
);
}}
</Menu> </Menu>
); );
}; };

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

@ -102,17 +102,17 @@ export const IssuePeekOverview: React.FC<Props> = observer(
/> />
<Transition.Root appear show={isSidePeekOpen} as={React.Fragment}> <Transition.Root appear show={isSidePeekOpen} as={React.Fragment}>
<Dialog as="div" className="relative z-20" onClose={handleClose}> <Dialog as="div" className="relative z-20" onClose={handleClose}>
<Transition.Child <div className="fixed inset-0 z-20 h-full w-full overflow-y-auto">
as={React.Fragment} <Transition.Child
enter="transition-transform duration-300" as={React.Fragment}
enterFrom="translate-x-full" enter="transition-transform duration-300"
enterTo="translate-x-0" enterFrom="translate-x-full"
leave="transition-transform duration-200" enterTo="translate-x-0"
leaveFrom="translate-x-0" leave="transition-transform duration-200"
leaveTo="translate-x-full" 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 <SidePeekView
handleClose={handleClose} handleClose={handleClose}
handleDeleteIssue={() => setDeleteIssueModal(true)} handleDeleteIssue={() => setDeleteIssueModal(true)}
@ -123,9 +123,9 @@ export const IssuePeekOverview: React.FC<Props> = observer(
setMode={(mode) => setPeekOverviewMode(mode)} setMode={(mode) => setPeekOverviewMode(mode)}
workspaceSlug={workspaceSlug} workspaceSlug={workspaceSlug}
/> />
</div> </Dialog.Panel>
</Dialog.Panel> </Transition.Child>
</Transition.Child> </div>
</Dialog> </Dialog>
</Transition.Root> </Transition.Root>
<Transition.Root appear show={isModalPeekOpen} as={React.Fragment}> <Transition.Root appear show={isModalPeekOpen} as={React.Fragment}>

2
web/package.json
View File

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

9
yarn.lock
View File

@ -6628,20 +6628,13 @@ prosemirror-menu@^1.2.1:
prosemirror-history "^1.0.0" prosemirror-history "^1.0.0"
prosemirror-state "^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" version "1.18.1"
resolved "https://registry.yarnpkg.com/prosemirror-model/-/prosemirror-model-1.18.1.tgz#1d5d6b6de7b983ee67a479dc607165fdef3935bd" resolved "https://registry.yarnpkg.com/prosemirror-model/-/prosemirror-model-1.18.1.tgz#1d5d6b6de7b983ee67a479dc607165fdef3935bd"
integrity sha512-IxSVBKAEMjD7s3n8cgtwMlxAXZrC7Mlag7zYsAKDndAqnDScvSmp/UdnRTV/B33lTCVU3CCm7dyAn/rVVD0mcw== integrity sha512-IxSVBKAEMjD7s3n8cgtwMlxAXZrC7Mlag7zYsAKDndAqnDScvSmp/UdnRTV/B33lTCVU3CCm7dyAn/rVVD0mcw==
dependencies: dependencies:
orderedmap "^2.0.0" 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: prosemirror-schema-basic@^1.2.0:
version "1.2.2" version "1.2.2"
resolved "https://registry.yarnpkg.com/prosemirror-schema-basic/-/prosemirror-schema-basic-1.2.2.tgz#6695f5175e4628aab179bf62e5568628b9cfe6c7" resolved "https://registry.yarnpkg.com/prosemirror-schema-basic/-/prosemirror-schema-basic-1.2.2.tgz#6695f5175e4628aab179bf62e5568628b9cfe6c7"