binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

[WEB-1690] fix: always show the search input if search query is present (#4901)

Browse source 
* fix: don't hide search input if search query is present

* chore: update logic

* chore: update dependency aray
This commit is contained in:
Aaryan Khandelwal 2024-06-21 15:08:57 +05:30 • committed by GitHub
parent efab68b19d
commit 367ccba17e
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 26 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

6
web/app/[workspaceSlug]/(projects)/projects/(list)/header.tsx
View file

@ -1,6 +1,6 @@
"use client";
import { useCallback, useRef, useState } from "react";
import { useCallback, useEffect, useRef, useState } from "react";
import { observer } from "mobx-react";
import { useParams } from "next/navigation";
import { Search, Briefcase, X, ListFilter } from "lucide-react";
@ -82,6 +82,10 @@ export const ProjectsListHeader = observer(() => {
}
};
useEffect(() => {
if (searchQuery.trim() !== "") setIsSearchOpen(true);
}, [searchQuery]);
const isFiltersApplied = calculateTotalFilters(filters ?? {}) !== 0;
return (

6
web/core/components/cycles/cycles-view-header.tsx
View file

@ -1,4 +1,4 @@
import { useCallback, useRef, useState } from "react";
import { useCallback, useEffect, useRef, useState } from "react";
import { observer } from "mobx-react";
// icons
import { ListFilter, Search, X } from "lucide-react";
@ -63,6 +63,10 @@ export const CyclesViewHeader: React.FC<Props> = observer((props) => {
const isFiltersApplied = calculateTotalFilters(currentProjectFilters ?? {}) !== 0;
useEffect(() => {
if (searchQuery.trim() !== "") setIsSearchOpen(true);
}, [searchQuery]);
return (
<div className="flex items-center gap-3">
{!isSearchOpen && (

9
web/core/components/modules/module-view-header.tsx
View file

@ -1,6 +1,6 @@
"use client";
import React, { FC, useCallback, useRef, useState } from "react";
import React, { FC, useCallback, useEffect, useRef, useState } from "react";
import { observer } from "mobx-react";
import { useParams } from "next/navigation";
// icons
@ -26,13 +26,10 @@ import { usePlatformOS } from "@/hooks/use-platform-os";
export const ModuleViewHeader: FC = observer(() => {
// refs
const inputRef = useRef<HTMLInputElement>(null);
// router
const { projectId } = useParams();
// hooks
const { isMobile } = usePlatformOS();
// store hooks
const {
workspace: { workspaceMemberIds },
@ -85,6 +82,10 @@ export const ModuleViewHeader: FC = observer(() => {
if (isSearchOpen && searchQuery.trim() === "") setIsSearchOpen(false);
});
useEffect(() => {
if (searchQuery.trim() !== "") setIsSearchOpen(true);
}, [searchQuery]);
const isFiltersApplied = calculateTotalFilters(filters ?? {}) !== 0 || displayFilters?.favorites;
return (

6
web/core/components/pages/list/search-input.tsx
View file

@ -1,4 +1,4 @@
import { FC, useState, useRef } from "react";
import { FC, useState, useRef, useEffect } from "react";
import { Search, X } from "lucide-react";
// helpers
import { cn } from "@/helpers/common.helper";
@ -31,6 +31,10 @@ export const PageSearchInput: FC<Props> = (props) => {
}
};
useEffect(() => {
if (searchQuery.trim() !== "") setIsSearchOpen(true);
}, [searchQuery]);
return (
<>
{!isSearchOpen && (

9
web/core/components/views/view-list-header.tsx
View file

@ -1,4 +1,4 @@
import React, { useRef, useState } from "react";
import React, { useEffect, useRef, useState } from "react";
import { observer } from "mobx-react";
// icons
import { Search, X } from "lucide-react";
@ -11,10 +11,9 @@ import useOutsideClickDetector from "@/hooks/use-outside-click-detector";
export const ViewListHeader = observer(() => {
// states
const [isSearchOpen, setIsSearchOpen] = useState(false);
// const [isSearchOpen, setIsSearchOpen] = useState(searchQuery !== "" ? true : false);
// refs
const inputRef = useRef<HTMLInputElement>(null);
// store hooks
const { searchQuery, updateSearchQuery } = useProjectView();
// handlers
@ -33,6 +32,10 @@ export const ViewListHeader = observer(() => {
if (isSearchOpen && searchQuery.trim() === "") setIsSearchOpen(false);
});
useEffect(() => {
if (searchQuery.trim() !== "") setIsSearchOpen(true);
}, [searchQuery]);
return (
<div className="h-full flex items-center gap-2">
<div className="flex items-center">