adjust search box style

iamping · Dec 27, 2024 · 7275def · 7275def
1 parent 749bb53
commit 7275def
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 19 deletions.
diff --git a/src/components/app/search-box.tsx b/src/components/app/search-box.tsx
@@ -4,14 +4,14 @@ import { PiMagnifyingGlassBold, PiArrowCounterClockwiseDuotone, PiXDuotone } fro
 import { InputGroup } from '../ui/input-group';
 import { useDebounceCallback, useEventListener, useMediaQuery, useOnClickOutside } from 'usehooks-ts';
 import { mobileMediaQuery } from '../../utils/constant';
-import { useAtomValue, useSetAtom } from 'jotai';
-import { fuzzyListAtom, preFilteredListAtom } from '../../state/atom';
+import { useAtom, useAtomValue, useSetAtom } from 'jotai';
+import { fuzzyListAtom, preFilteredListAtom, searchBoxOpenAtom } from '../../state/atom';
 import { Stock } from '../../models/stock';
 import fuzzysort from 'fuzzysort';
 
 export const SearchBox = () => {
   // console.log('SearchBox');
-  const [open, setOpen] = useState(false);
+  const [open, setOpen] = useAtom(searchBoxOpenAtom);
   const [keyword, setKeyword] = useState('');
 
   const preFilteredList = useAtomValue(preFilteredListAtom);
@@ -21,9 +21,7 @@ export const SearchBox = () => {
   const inputRef = useRef<HTMLInputElement>(null);
 
   const isMobile = useMediaQuery(mobileMediaQuery);
-  const styleForMobile: CSSProperties = isMobile
-    ? { position: 'absolute', left: 78, right: 44, top: 8 }
-    : { flexGrow: 0, minWidth: 250 };
+  const styleForMobile: CSSProperties = isMobile ? { flexGrow: 1 } : { flexGrow: 0, minWidth: 250 };
 
   const openSearch = () => {
     setOpen((val) => !val);
@@ -88,6 +86,9 @@ export const SearchBox = () => {
         });
       }
       if (event.key === 'Escape') {
+        if (keyword.length === 0) {
+          setOpen(false);
+        }
         setKeyword('');
       }
       setTimeout(() => {
@@ -122,9 +123,9 @@ export const SearchBox = () => {
 
   return (
     <>
-      <Show when={!open}>{MagnifyIcon}</Show>
-      <Show when={open}>
-        <div ref={divRef}>
+      <div ref={divRef} style={{ flexGrow: open && isMobile ? 1 : undefined, display: 'flex', alignItems: 'flex-end' }}>
+        <Show when={!open}>{MagnifyIcon}</Show>
+        <Show when={open}>
           <InputGroup flex="1" style={styleForMobile} endElement={MagnifyIcon} endElementProps={{ padding: 0 }}>
             <Input
               ref={inputRef}
@@ -139,8 +140,8 @@ export const SearchBox = () => {
               onChange={onInputChange}
             />
           </InputGroup>
-        </div>
-      </Show>
+        </Show>
+      </div>
     </>
   );
 };
diff --git a/src/components/app/topbar.tsx b/src/components/app/topbar.tsx
@@ -1,6 +1,6 @@
-import { Heading, HStack, Separator, Spacer, Text } from '@chakra-ui/react';
+import { Heading, HStack, Separator, Show, Spacer, Text } from '@chakra-ui/react';
 import { useAtomValue } from 'jotai';
-import { rowCountAtom } from '../../state/atom';
+import { rowCountAtom, searchBoxOpenAtom } from '../../state/atom';
 import { presetOptions, viewOptions } from '../../utils/table.util';
 import { Dropdown } from './dropdown';
 import { Settings } from './settings';
@@ -11,6 +11,7 @@ import { mobileMediaQuery } from '../../utils/constant';
 
 export const Topbar = () => {
   const rowCount = useAtomValue(rowCountAtom);
+  const isSearchBoxOpen = useAtomValue(searchBoxOpenAtom);
 
   const isSmallScreen = useMediaQuery(mobileMediaQuery);
   const rowCountFormat = useMemo(() => {
@@ -38,12 +39,14 @@ export const Topbar = () => {
           </>
         )}
       </Heading>
-      <Separator orientation="vertical" height={5} />
-      <Dropdown type="Preset" optionList={presetOptions} />
-      <Separator orientation="vertical" height={5} />
-      <Dropdown type="View" optionList={viewOptions} />
-      <Separator orientation="vertical" height={5} />
-      <Spacer />
+      <Show when={(!isSearchBoxOpen && isSmallScreen) || !isSmallScreen}>
+        <Separator orientation="vertical" height={5} />
+        <Dropdown type="Preset" optionList={presetOptions} />
+        <Separator orientation="vertical" height={5} />
+        <Dropdown type="View" optionList={viewOptions} />
+        <Separator orientation="vertical" height={5} />
+        <Spacer />
+      </Show>
       <SearchBox />
       <Settings />
     </HStack>

diff --git a/src/state/atom.ts b/src/state/atom.ts
@@ -24,6 +24,7 @@ export const dropdownFnAtom = atom<{
 
 export const stockListAtom = atom<Stock[]>([]);
 export const fuzzyListAtom = atom<Stock[]>([]);
+export const searchBoxOpenAtom = atom(false);
 
 // stock list after exclude (OTC & Biotechnology)
 export const preFilteredListAtom = atom((get) => {