import React from "react"; // headless ui import { Combobox } from "@headlessui/react"; // lucide icons import { ChevronDown, Search, X, Check, Triangle } from "lucide-react"; // mobx import { observer } from "mobx-react-lite"; // components import { Tooltip } from "@plane/ui"; // hooks import useDynamicDropdownPosition from "hooks/use-dynamic-dropdown"; // mobx import { useMobxStore } from "lib/mobx/store-provider"; import { RootStore } from "store/root"; interface IFiltersOption { id: string; title: string; key: string; } export interface IIssuePropertyEstimates { value?: any; onChange?: (id: any) => void; disabled?: boolean; workspaceSlug?: string; projectId?: string; className?: string; buttonClassName?: string; optionsClassName?: string; dropdownArrow?: boolean; } export const IssuePropertyEstimates: React.FC = observer( ({ value, onChange, disabled, workspaceSlug, projectId, className, buttonClassName, optionsClassName, dropdownArrow = true, }) => { const { project: projectStore }: RootStore = useMobxStore(); const dropdownBtn = React.useRef(null); const dropdownOptions = React.useRef(null); const [isOpen, setIsOpen] = React.useState(false); const [search, setSearch] = React.useState(""); const projectDetail = (workspaceSlug && projectId && projectStore?.getProjectById(workspaceSlug, projectId)) || null; const projectEstimateId = (projectDetail && projectDetail?.estimate) || null; const estimates = (projectEstimateId && projectStore?.getProjectEstimateById(projectEstimateId)) || null; const options: IFiltersOption[] | [] = (estimates && estimates.points && estimates.points.length > 0 && estimates.points.map((_estimate) => ({ id: _estimate?.id, title: _estimate?.value, key: _estimate?.key.toString(), }))) || []; useDynamicDropdownPosition(isOpen, () => setIsOpen(false), dropdownBtn, dropdownOptions); const selectedOption: IFiltersOption | null | undefined = (value && options.find((_estimate: IFiltersOption) => _estimate.key === value)) || null; const filteredOptions: IFiltersOption[] = search === "" ? options && options.length > 0 ? options : [] : options && options.length > 0 ? options.filter((_estimate: IFiltersOption) => _estimate.title.toLowerCase().replace(/\s+/g, "").includes(search.toLowerCase().replace(/\s+/g, "")) ) : []; return ( { if (onChange) onChange(data); }} disabled={disabled} > {({ open }: { open: boolean }) => { if (open) { if (!isOpen) setIsOpen(true); } else if (isOpen) setIsOpen(false); return ( <> {selectedOption ? (
{selectedOption?.title}
) : (
Select Estimates
)} {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 || selected ? "bg-custom-background-80" : "" } ${selected ? "text-custom-text-100" : "text-custom-text-200"}` } > {({ selected }) => (
{option.title}
{selected && (
)}
)}
)) ) : (

No matching results

) ) : (

Loading...

)}
) : (

No options available.

)}
); }}
); } );