OpenNeo/impress-2020
OpenNeo/impress-2020
1
0
Fork 0
Code Pull requests Activity

Hide other search bar when search footer is visible

Browse source
This commit is contained in:
Emi Matchu 2022-10-14 20:24:26 -07:00
parent eb18fd54b6
commit 589e6c35b4
1 changed files with 21 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
src/app/WardrobePage/ItemsAndSearchPanels.js
View file

@ -1,5 +1,5 @@
import React from "react"; import React from "react";
import { Box, Flex } from "@chakra-ui/react"; import { Box, Flex, useBreakpointValue } from "@chakra-ui/react";
import * as Sentry from "@sentry/react"; import * as Sentry from "@sentry/react";
import ItemsPanel from "./ItemsPanel"; import ItemsPanel from "./ItemsPanel";
@ -8,7 +8,7 @@ import SearchToolbar, {
searchQueryIsEmpty, searchQueryIsEmpty,
} from "./SearchToolbar"; } from "./SearchToolbar";
import SearchPanel from "./SearchPanel"; import SearchPanel from "./SearchPanel";
import { MajorErrorMessage, TestErrorSender } from "../util"; import { MajorErrorMessage, TestErrorSender, useLocalStorage } from "../util";
/** /**
* ItemsAndSearchPanels manages the shared layout and state for: * ItemsAndSearchPanels manages the shared layout and state for:
@ -34,19 +34,29 @@ function ItemsAndSearchPanels({
const searchQueryRef = React.useRef(); const searchQueryRef = React.useRef();
const firstSearchResultRef = React.useRef(); const firstSearchResultRef = React.useRef();
const hasRoomForSearchFooter = useBreakpointValue({ base: false, md: true });
const [canUseSearchFooter] = useLocalStorage(
"DTIFeatureFlagCanUseSearchFooter",
false
);
const isShowingSearchFooter = canUseSearchFooter && hasRoomForSearchFooter;
return ( return (
<Sentry.ErrorBoundary fallback={MajorErrorMessage}> <Sentry.ErrorBoundary fallback={MajorErrorMessage}>
<TestErrorSender /> <TestErrorSender />
<Flex direction="column" height="100%"> <Flex direction="column" height="100%">
<Box paddingX="5" paddingTop="3" paddingBottom="2" boxShadow="sm"> {isShowingSearchFooter && <Box height="2" />}
<SearchToolbar {!isShowingSearchFooter && (
query={searchQuery} <Box paddingX="5" paddingTop="3" paddingBottom="2" boxShadow="sm">
searchQueryRef={searchQueryRef} <SearchToolbar
firstSearchResultRef={firstSearchResultRef} query={searchQuery}
onChange={setSearchQuery} searchQueryRef={searchQueryRef}
/> firstSearchResultRef={firstSearchResultRef}
</Box> onChange={setSearchQuery}
{!searchQueryIsEmpty(searchQuery) ? ( />
</Box>
)}
{!isShowingSearchFooter && !searchQueryIsEmpty(searchQuery) ? (
<Box <Box
key="search-panel" key="search-panel"
flex="1 0 0" flex="1 0 0"