import { FC, useRef, useState } from "react"; import { Combobox } from "@headlessui/react"; import { ChevronDown, Search, X, Check } from "lucide-react"; import { observer } from "mobx-react-lite"; // components import { Tooltip } from "@plane/ui"; // hooks import useDynamicDropdownPosition from "hooks/use-dynamic-dropdown"; interface IFiltersOption { id: string; title: string; avatar: string; } export interface IIssuePropertyAssignee { value?: any; onChange?: (id: any, data: any) => void; disabled?: boolean; list?: any; className?: string; buttonClassName?: string; optionsClassName?: string; dropdownArrow?: boolean; } export const IssuePropertyAssignee: FC = observer((props) => { const { value, onChange, disabled, list, className, buttonClassName, optionsClassName, dropdownArrow = true } = props; const dropdownBtn = useRef(null); const dropdownOptions = useRef(null); const [isOpen, setIsOpen] = useState(false); const [search, setSearch] = useState(""); const options: IFiltersOption[] | [] = (list && list?.length > 0 && list.map((_member: any) => ({ id: _member?.member?.id, title: _member?.member?.display_name, avatar: _member?.member?.avatar && _member?.member?.avatar !== "" ? _member?.member?.avatar : null, }))) || []; useDynamicDropdownPosition(isOpen, () => setIsOpen(false), dropdownBtn, dropdownOptions); const selectedOption: IFiltersOption[] = (value && value?.length > 0 && options.filter((_member: IFiltersOption) => value.includes(_member.id))) || []; const filteredOptions: IFiltersOption[] = search === "" ? options && options.length > 0 ? options : [] : options && options.length > 0 ? options.filter((_member: IFiltersOption) => _member.title.toLowerCase().replace(/\s+/g, "").includes(search.toLowerCase().replace(/\s+/g, "")) ) : []; const assigneeRenderLength = 5; return ( _member.id) as string[]} onChange={(data: string[]) => { if (onChange && selectedOption) onChange(data, selectedOption); }} disabled={disabled} > {({ open }: { open: boolean }) => { if (open) { if (!isOpen) setIsOpen(true); } else if (isOpen) setIsOpen(false); return ( <> {selectedOption && selectedOption?.length > 0 ? ( <> {selectedOption?.length > 1 ? ( _label.title) || []).join(", ")} >
{selectedOption.slice(0, assigneeRenderLength).map((_assignee) => (
{_assignee && _assignee.avatar ? ( {_assignee.title} ) : ( _assignee.title[0] )}
))} {selectedOption.length > assigneeRenderLength && (
+{selectedOption?.length - assigneeRenderLength}
)}
) : ( _label.title) || []).join(", ")} >
{selectedOption[0] && selectedOption[0].avatar ? ( {selectedOption[0].title} ) : (
{selectedOption[0].title[0]}
)}
{selectedOption[0].title}
)} ) : (
Select Assignees
)} {dropdownArrow && !disabled && (
)}
{options && options.length > 0 ? ( <>
setSearch(e.target.value)} placeholder="Search" displayValue={(assigned: any) => assigned?.name} />
{search && search.length > 0 && (
setSearch("")} className="flex-shrink-0 flex justify-center items-center w-[16px] h-[16px] rounded-sm cursor-pointer hover:bg-custom-background-80" >
)}
{filteredOptions ? ( filteredOptions.length > 0 ? ( filteredOptions.map((option) => ( `cursor-pointer select-none truncate rounded px-1 py-1.5 ${ active || (value && value.length > 0 && value.includes(option?.id)) ? "bg-custom-background-80" : "" } ${ value && value.length > 0 && value.includes(option?.id) ? "text-custom-text-100" : "text-custom-text-200" }` } >
{option && option.avatar ? ( {option.title} ) : (
{option.title[0]}
)}
{option.title}
{value && value.length > 0 && value.includes(option?.id) && (
)}
)) ) : (

No matching results

) ) : (

Loading...

)}
) : (

No options available.

)}
); }}
); });