54f828cbfa
* feat: add navigation dropdown component * chore: enhance title/ description loader and componenet modularity * chore: issue store filter update * chore: added few icons to ui package * chore: improvements for tabs componenet * chore: enhance sidebar modularity * chore: update issue and router store to add support for additional issue layouts * chore: enhanced cycle componenets modularity * feat: added project grouping header for cycles list * chore: enhanced project dropdown componenet by adding multiple selection functionality * chore: enhanced rich text editor modularity by taking members ids as props for mentions * chore: added functionality to filter disabled layouts in issue-layout dropdown * chore: added support to pass project ids as props in project card list * feat: multi select project modal * chore: seperate out project componenet for reusability * chore: command pallete store improvements * fix: build errors
78 lines
2.5 KiB
TypeScript
78 lines
2.5 KiB
TypeScript
"use client";
|
|
|
|
import { FC, useRef, useState } from "react";
|
|
import { observer } from "mobx-react";
|
|
import { Search, X } from "lucide-react";
|
|
// plane hooks
|
|
import { useOutsideClickDetector } from "@plane/hooks";
|
|
// helpers
|
|
import { cn } from "@/helpers/common.helper";
|
|
// hooks
|
|
import { useProjectFilter } from "@/hooks/store";
|
|
|
|
export const ProjectSearch: FC = observer(() => {
|
|
// hooks
|
|
const { searchQuery, updateSearchQuery } = useProjectFilter();
|
|
// refs
|
|
const inputRef = useRef<HTMLInputElement>(null);
|
|
// states
|
|
const [isSearchOpen, setIsSearchOpen] = useState(false);
|
|
// outside click detector hook
|
|
useOutsideClickDetector(inputRef, () => {
|
|
if (isSearchOpen && searchQuery.trim() === "") setIsSearchOpen(false);
|
|
});
|
|
|
|
const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
|
|
if (e.key === "Escape") {
|
|
if (searchQuery && searchQuery.trim() !== "") updateSearchQuery("");
|
|
else setIsSearchOpen(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="flex items-center">
|
|
{!isSearchOpen && (
|
|
<button
|
|
type="button"
|
|
className="-mr-1 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-30 md: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={searchQuery}
|
|
onChange={(e) => updateSearchQuery(e.target.value)}
|
|
onKeyDown={handleInputKeyDown}
|
|
/>
|
|
{isSearchOpen && (
|
|
<button
|
|
type="button"
|
|
className="grid place-items-center"
|
|
onClick={() => {
|
|
updateSearchQuery("");
|
|
setIsSearchOpen(false);
|
|
}}
|
|
>
|
|
<X className="h-3 w-3" />
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
});
|