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

chore: dynamic postion dropdown

Browse Source
This commit is contained in:
Anmol Singh Bhatia 2023-08-21 16:31:59 +05:30
parent d470adf262
commit 81710e97cc
1 changed files with 120 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
apps/app/components/ui/dropdowns/custom-search-select.tsx
View File

@ -1,7 +1,9 @@
import React, { useState } from "react";
import React, { useState, useEffect, useRef } from "react";
// headless ui
import { Combobox, Transition } from "@headlessui/react";
// hooks
import useOutsideClickDetector from "hooks/use-outside-click-detector";
// icons
import { ChevronDownIcon } from "@heroicons/react/20/solid";
import { CheckIcon, MagnifyingGlassIcon } from "@heroicons/react/24/outline";
@ -47,6 +49,12 @@ export const CustomSearchSelect = ({
verticalPosition = "bottom",
width = "auto",
}: CustomSearchSelectProps) => {
const [isOpen, setIsOpen] = useState(false);
const dropdownContainer = useRef<any>(null);
const dropdownOptions = useRef<any>(null);
const dropdownBtn = useRef<any>(null);
const [query, setQuery] = useState("");
const filteredOptions =
@ -62,21 +70,52 @@ export const CustomSearchSelect = ({
if (multiple) props.multiple = true;
const handleOnOpen = () => {
const dropdownContainerRef = dropdownContainer.current;
const dropdownOptionsRef = dropdownOptions.current;
const dropdownBtnRef = dropdownBtn.current;
const dropdownWidth = dropdownOptionsRef?.clientWidth || 225;
const dropdownHeight = dropdownOptionsRef?.clientHeight || 206;
const dropdownBtnX = dropdownBtnRef.getBoundingClientRect().x || 0;
const dropdownBtnY = dropdownBtnRef.getBoundingClientRect().y || 0;
const dropdownBtnHeight = dropdownBtnRef?.clientHeight || 32;
let top = dropdownBtnY + dropdownBtnHeight;
if (dropdownBtnY + dropdownHeight > window.innerHeight)
top = dropdownBtnY - dropdownHeight - 10;
let left = dropdownBtnX;
if (dropdownBtnX + dropdownWidth > window.innerWidth) left = dropdownBtnX - dropdownWidth;
if (dropdownContainerRef) {
dropdownContainerRef.style.top = `${Math.round(top)}px`;
dropdownContainerRef.style.left = `${Math.round(left)}px`;
}
};
useOutsideClickDetector(dropdownOptions, () => {
if (isOpen) setIsOpen(false);
});
return (
<Combobox
as="div"
className={`${selfPositioned ? "" : "relative"} flex-shrink-0 text-left ${className}`}
{...props}
>
<Combobox as="div" className={`relative flex-shrink-0 text-left ${className}`} {...props}>
{({ open }: { open: boolean }) => {
if (open && onOpen) onOpen();
if (open) {
handleOnOpen();
if (onOpen) onOpen();
}
return (
<>
{customButton ? (
<Combobox.Button as="div">{customButton}</Combobox.Button>
<Combobox.Button as="div" ref={dropdownBtn}>
{customButton}
</Combobox.Button>
) : (
<Combobox.Button
ref={dropdownBtn}
type="button"
className={`flex items-center justify-between gap-1 w-full rounded-md shadow-sm border border-custom-border-300 duration-300 focus:outline-none ${
input ? "px-3 py-2 text-sm" : "px-2.5 py-1 text-xs"
@ -102,10 +141,10 @@ export const CustomSearchSelect = ({
leaveFrom="opacity-100 translate-y-0"
leaveTo="opacity-0 translate-y-1"
>
<div ref={dropdownContainer} className={`fixed z-20 h-full w-full`}>
<Combobox.Options
className={`absolute z-10 min-w-[10rem] border border-custom-border-300 p-2 rounded-md bg-custom-background-90 text-xs shadow-lg focus:outline-none ${
position === "left" ? "left-0 origin-top-left" : "right-0 origin-top-right"
} ${verticalPosition === "top" ? "bottom-full mb-1" : "mt-1"} ${
ref={dropdownOptions}
className={`fixed z-10 min-w-[10rem] border border-custom-border-300 p-2 rounded-md bg-custom-background-90 text-xs shadow-lg focus:outline-none ${
width === "auto" ? "min-w-[8rem] whitespace-nowrap" : width
} ${optionsClassName}`}
>
@ -154,7 +193,9 @@ export const CustomSearchSelect = ({
}`}
>
<CheckIcon
className={`h-3 w-3 ${selected ? "opacity-100" : "opacity-0"}`}
className={`h-3 w-3 ${
selected ? "opacity-100" : "opacity-0"
}`}
/>
</div>
) : (
@ -177,6 +218,7 @@ export const CustomSearchSelect = ({
</div>
{footerOption}
</Combobox.Options>
</div>
</Transition>
</>
);