github/plane
0
0
Fork 1
mirror of https://github.com/makeplane/plane synced 2024-06-14 14:31:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore: update page search input

Browse Source
This commit is contained in:
Aaryan Khandelwal 2024-06-13 16:39:59 +05:30
parent 0b4b092eaa
commit e6753a4d05
2 changed files with 17 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
web/core/components/pages/header/root.tsx
View File

@ -52,7 +52,10 @@ export const PagesListHeaderRoot: React.FC<Props> = observer((props) => {
<div className="flex-shrink-0 h-[50px] w-full border-b border-custom-border-200 px-6 relative flex items-center gap-4 justify-between"> <div className="flex-shrink-0 h-[50px] w-full border-b border-custom-border-200 px-6 relative flex items-center gap-4 justify-between">
<PageTabNavigation workspaceSlug={workspaceSlug} projectId={projectId} pageType={pageType} /> <PageTabNavigation workspaceSlug={workspaceSlug} projectId={projectId} pageType={pageType} />
<div className="h-full flex items-center gap-2 self-end"> <div className="h-full flex items-center gap-2 self-end">
<PageSearchInput /> <PageSearchInput
searchQuery={filters.searchQuery}
updateSearchQuery={(val) => updateFilters("searchQuery", val)}
/>
<PageOrderByDropdown <PageOrderByDropdown
sortBy={filters.sortBy} sortBy={filters.sortBy}
sortKey={filters.sortKey} sortKey={filters.sortKey}

25
web/core/components/pages/list/search-input.tsx
View File

@ -1,16 +1,17 @@
import { FC, useState, useRef } from "react"; import { FC, useState, useRef } from "react";
import { observer } from "mobx-react-lite";
import { Search, X } from "lucide-react"; import { Search, X } from "lucide-react";
// helpers
import { cn } from "@/helpers/common.helper"; import { cn } from "@/helpers/common.helper";
import { useProjectPages } from "@/hooks/store"; // hooks
import useOutsideClickDetector from "@/hooks/use-outside-click-detector"; import useOutsideClickDetector from "@/hooks/use-outside-click-detector";
export const PageSearchInput: FC = observer(() => { type Props = {
// hooks searchQuery: string;
const { updateSearchQuery: (val: string) => void;
filters: { searchQuery }, };
updateFilters,
} = useProjectPages(); export const PageSearchInput: FC<Props> = (props) => {
const { searchQuery, updateSearchQuery } = props;
// states // states
const [isSearchOpen, setIsSearchOpen] = useState(false); const [isSearchOpen, setIsSearchOpen] = useState(false);
// refs // refs
@ -22,7 +23,7 @@ export const PageSearchInput: FC = observer(() => {
const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => { const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
if (e.key === "Escape") { if (e.key === "Escape") {
if (searchQuery && searchQuery.trim() !== "") updateFilters("searchQuery", ""); if (searchQuery && searchQuery.trim() !== "") updateSearchQuery("");
else { else {
setIsSearchOpen(false); setIsSearchOpen(false);
inputRef.current?.blur(); inputRef.current?.blur();
@ -59,7 +60,7 @@ export const PageSearchInput: FC = observer(() => {
className="w-full max-w-[234px] border-none bg-transparent text-sm text-custom-text-100 placeholder:text-custom-text-400 focus:outline-none" 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 pages" placeholder="Search pages"
value={searchQuery} value={searchQuery}
onChange={(e) => updateFilters("searchQuery", e.target.value)} onChange={(e) => updateSearchQuery(e.target.value)}
onKeyDown={handleInputKeyDown} onKeyDown={handleInputKeyDown}
/> />
{isSearchOpen && ( {isSearchOpen && (
@ -67,7 +68,7 @@ export const PageSearchInput: FC = observer(() => {
type="button" type="button"
className="grid place-items-center" className="grid place-items-center"
onClick={() => { onClick={() => {
updateFilters("searchQuery", ""); updateSearchQuery("");
setIsSearchOpen(false); setIsSearchOpen(false);
}} }}
> >
@ -77,4 +78,4 @@ export const PageSearchInput: FC = observer(() => {
</div> </div>
</> </>
); );
}); };