8000 Add UI to show existing search query in header (#461) · joernalraun/python-editor-next@5623807 · GitHub
[go: up one dir, main page]
Skip to content

Commit 5623807

Browse files
microbit-robertmicrobit-robert
authored
Add UI to show existing search query in header (microbit-foundation#461)
See microbit-foundation#440
1 parent ce65842 commit 5623807

File tree

2 files changed

+71
-29
lines changed

2 files changed

+71
-29
lines changed

‎src/documentation/search/SearchDialog.tsx

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -17,28 +17,25 @@ import SearchResultList from "./SearchResultList";
1717
interface SearchDialogProps {
1818
onClose: () => void;
1919
results: SearchResults | undefined;
20-
setResults: React.Dispatch<React.SetStateAction<SearchResults | undefined>>;
2120
query: string;
22-
setQuery: React.Dispatch<React.SetStateAction<string>>;
2321
onQueryChange: React.ChangeEventHandler<HTMLInputElement>;
22+
onClear: () => void;
2423
}
2524

2625
const SearchDialog = ({
2726
onClose,
2827
results,
29-
setRes 10000 ults,
3028
query,
31-
setQuery,
3229
onQueryChange,
30+
onClear,
3331
}: SearchDialogProps) => {
3432
const ref = useRef<HTMLInputElement>(null);
3533
const handleClear = useCallback(() => {
36-
setQuery("");
37-
setResults(undefined);
34+
onClear();
3835
if (ref.current) {
3936
ref.current.focus();
4037
}
41-
}, [setQuery, setResults]);
38+
}, [onClear]);
4239

4340
return (
4441
<Box>

‎src/workbench/SideBarHeader.tsx

Lines changed: 67 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -3,27 +3,28 @@ import {
33
Button,
44
Flex,
55
HStack,
6+
IconButton,
67
Link,
78
Modal,
89
ModalBody,
910
ModalContent,
1011
ModalOverlay,
1112
useDisclosure,
1213
} from "@chakra-ui/react";
13-
import { useRef, useState, useCallback } from "react";
14-
import { RiSearch2Line } from "react-icons/ri";
14+
import { useCallback, useRef, useState } from "react";
15+
import { RiCloseLine, RiSearch2Line } from "react-icons/ri";
1516
import { useIntl } from "react-intl";
17+
import useIsUnmounted from "../common/use-is-unmounted";
1618
import { useDeployment } from "../deployment";
1719
import { topBarHeight } from "../deployment/misc";
18-
import SearchDialog from "../documentation/search/SearchDialog";
20+
import { SearchResults } from "../documentation/search/common";
1921
import { useSearch } from "../documentation/search/search-hooks";
22+
import SearchDialog from "../documentation/search/SearchDialog";
2023
import { flags } from "../flags";
21-
import { SearchResults } from "../documentation/search/common";
22-
import useIsUnmounted from "../common/use-is-unmounted";
2324

2425
const SideBarHeader = () => {
2526
const ref = useRef<HTMLDivElement>(null);
26-
const horizontalLogoRef = useRef<HTMLDivElement>(null);
27+
const faceLogoRef = useRef<HTMLDivElement>(null);
2728
const intl = useIntl();
2829
const brand = useDeployment();
2930
const searchModal = useDisclosure();
@@ -48,15 +49,22 @@ const SideBarHeader = () => {
4849
},
4950
[search, isUnmounted]
5051
);
52+
const handleClear = useCallback(() => {
53+
setQuery("");
54+
setResults(undefined);
55+
}, [setQuery, setResults]);
5156
// Width of the sidebar tabs. Perhaps we can restructure the DOM?
52-
const offset = horizontalLogoRef.current
53-
? horizontalLogoRef.current.getBoundingClientRect().left
57+
const sidebarWidth = useRef<HTMLDivElement>(null);
58+
const offset = faceLogoRef.current
59+
? faceLogoRef.current.getBoundingClientRect().right + 14
5460
: 0;
55-
const width = ref.current
56-
? ref.current!.clientWidth - offset - 14 + "px"
61+
const width = sidebarWidth.current
62+
? sidebarWidth.current!.clientWidth - offset - 14 + "px"
5763
: undefined;
5864
return (
5965
<>
66+
{/* Empty box used to calculate width only. */}
67+
<Box ref={sidebarWidth}></Box>
6068
{flags.search && (
6169
<Modal
6270
isOpen={searchModal.isOpen}
@@ -80,10 +88,9 @@ const SideBarHeader = () => {
8088
<SearchDialog
8189
onClose={searchModal.onClose}
8290
results={results}
83-
setResults={setResults}
8491
query={query}
85-
setQuery={setQuery}
8692
onQueryChange={handleQueryChange}
93+
onClear={handleClear}
8794
/>
8895
</ModalBody>
8996
</ModalContent>
@@ -109,20 +116,17 @@ const SideBarHeader = () => {
109116
aria-label={intl.formatMessage({ id: "visit-dot-org" })}
110117
>
111118
<HStack spacing={3.5} pl={4} pr={4}>
112-
<Box width="3.56875rem" color="white" role="img">
119+
<Box width="3.56875rem" color="white" role="img" ref={faceLogoRef}>
113120
{brand.squareLogo}
114121
</Box>
115-
<Box
116-
ref={horizontalLogoRef}
117-
width="9.098rem"
118-
role="img"
119-
color="white"
120-
>
121-
{brand.horizontalLogo}
122-
</Box>
122+
{!query && (
123+
<Box width="9.098rem" role="img" color="white">
124+
{brand.horizontalLogo}
125+
</Box>
126+
)}
123127
</HStack>
124128
</Link>
125-
{flags.search && (
129+
{flags.search && !query && (
126130
<Button
127131
onClick={searchModal.onOpen}
128132
backgroundColor="#5c40a6"
@@ -140,6 +144,47 @@ const SideBarHeader = () => {
140144
Search
141145
</Button>
142146
)}
147+
{flags.search && query && (
148+
<Flex
149+
backgroundColor="white"
150+
borderRadius="3xl"
151+
width={`calc(100% - ${offset}px)`}
152+
position="relative"
153+
>
154+
<Button
155+
_active={{}}
156+
_hover={{}}
157+
border="unset"
158+
color="gray.800"
159+
flex={1}
160+
fontSize="md"
161+
fontWeight="normal"
162+
justifyContent="flex-start"
163+
leftIcon={
164+
<Box as={RiSearch2Line} fontSize="lg" color="#838383" />
165+
}
166+
onClick={searchModal.onOpen}
167+
overflow="hidden"
168+
>
169+
{query}
170+
</Button>
171+
<IconButton
172+
aria-label="Clear"
173+
backgroundColor="white"
174+
// Also used for Zoom, move to theme.
175+
color="#838383"
176+
fontSize="2xl"
177+
icon={<RiCloseLine />}
178+
isRound={false}
179+
onClick={handleClear}
180+
position="absolute"
181+
right="0"
182+
pr={3}
183+
pl={3}
184+
variant="ghost"
185+
/>
186+
</Flex>
187+
)}
143188
</Flex>
144189
</>
145190
);

0 commit comments

Comments
 (0)
0