import { FC, useCallback, useRef, useState } from "react"; import { observer } from "mobx-react-lite"; import { useRouter } from "next/router"; // icons import { ListFilter, Search, X } from "lucide-react"; // types import type { TCycleFilters } from "@plane/types"; // components import { ArchiveTabsList } from "@/components/archives"; import { CycleFiltersSelection } from "@/components/cycles"; import { FiltersDropdown } from "@/components/issues"; // helpers import { cn } from "@/helpers/common.helper"; // hooks import { useCycleFilter } from "@/hooks/store"; import useOutsideClickDetector from "@/hooks/use-outside-click-detector"; export const ArchivedCyclesHeader: FC = observer(() => { // router const router = useRouter(); const { projectId } = router.query; // refs const inputRef = useRef<HTMLInputElement>(null); // hooks const { currentProjectArchivedFilters, archivedCyclesSearchQuery, updateFilters, updateArchivedCyclesSearchQuery } = useCycleFilter(); // states const [isSearchOpen, setIsSearchOpen] = useState(archivedCyclesSearchQuery !== "" ? true : false); // outside click detector hook useOutsideClickDetector(inputRef, () => { if (isSearchOpen && archivedCyclesSearchQuery.trim() === "") setIsSearchOpen(false); }); const handleFilters = useCallback( (key: keyof TCycleFilters, value: string | string[]) => { if (!projectId) return; const newValues = currentProjectArchivedFilters?.[key] ?? []; if (Array.isArray(value)) value.forEach((val) => { if (!newValues.includes(val)) newValues.push(val); else newValues.splice(newValues.indexOf(val), 1); }); else { if (currentProjectArchivedFilters?.[key]?.includes(value)) newValues.splice(newValues.indexOf(value), 1); else newValues.push(value); } updateFilters(projectId.toString(), { [key]: newValues }, "archived"); }, [currentProjectArchivedFilters, projectId, updateFilters] ); const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => { if (e.key === "Escape") { if (archivedCyclesSearchQuery && archivedCyclesSearchQuery.trim() !== "") updateArchivedCyclesSearchQuery(""); else { setIsSearchOpen(false); inputRef.current?.blur(); } } }; return ( <div className="group relative flex border-b border-custom-border-200"> <div className="flex w-full items-center overflow-x-auto px-4 gap-2 horizontal-scrollbar scrollbar-sm"> <ArchiveTabsList /> </div> {/* filter options */} <div className="h-full flex items-center gap-3 self-end px-8"> {!isSearchOpen && ( <button type="button" className="-mr-5 p-2 hover:bg-custom-background-80 rounded text-custom-text-400 grid place-items-center" onClick={() => { setIsSearchOpen(true); inputRef.current?.focus(); }} > <Search className="h-3.5 w-3.5" /> </button> )} <div className={cn( "ml-auto flex items-center justify-start gap-1 rounded-md border border-transparent bg-custom-background-100 text-custom-text-400 w-0 transition-[width] ease-linear overflow-hidden opacity-0", { "w-64 px-2.5 py-1.5 border-custom-border-200 opacity-100": isSearchOpen, } )} > <Search className="h-3.5 w-3.5" /> <input ref={inputRef} className="w-full max-w-[234px] border-none bg-transparent text-sm text-custom-text-100 placeholder:text-custom-text-400 focus:outline-none" placeholder="Search" value={archivedCyclesSearchQuery} onChange={(e) => updateArchivedCyclesSearchQuery(e.target.value)} onKeyDown={handleInputKeyDown} /> {isSearchOpen && ( <button type="button" className="grid place-items-center" onClick={() => { updateArchivedCyclesSearchQuery(""); setIsSearchOpen(false); }} > <X className="h-3 w-3" /> </button> )} </div> <FiltersDropdown icon={<ListFilter className="h-3 w-3" />} title="Filters" placement="bottom-end"> <CycleFiltersSelection filters={currentProjectArchivedFilters ?? {}} handleFiltersUpdate={handleFilters} isArchived /> </FiltersDropdown> </div> </div> ); });