Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 | import {
Modal,
ModalBody,
ModalCloseButton,
ModalContent,
ModalHeader,
ModalOverlay,
Portal,
Stack,
Button,
} from "@chakra-ui/react";
import { FunctionComponent } from "react";
import testIds from "./testIds";
import { useAnalytics } from "../../contexts/Analytics";
import { clickEvent } from "../../contexts/Analytics/util";
import { useCatalogSearch } from "../../hooks/useCatalogSearch";
import { HEADER_ANALYTICS } from "../Header/constants";
import { SearchBar } from "../SearchBar";
export interface SearchModalProps {
isOpen: boolean;
onClose: () => void;
}
export const SearchModal: FunctionComponent<SearchModalProps> = ({
isOpen,
onClose,
}) => {
const { trackCustomEvent } = useAnalytics();
const { query, onQueryChange, onSubmit, onSearch } = useCatalogSearch();
return (
<Portal>
<Modal isOpen={isOpen} onClose={onClose}>
<ModalOverlay>
<ModalContent data-testid={testIds.container} mx={4}>
<ModalCloseButton
data-event={HEADER_ANALYTICS.SEARCH_MODAL.CLOSE}
onClick={() => {
trackCustomEvent(
clickEvent({ name: HEADER_ANALYTICS.SEARCH_MODAL.CLOSE })
);
}}
/>
<ModalHeader>Search</ModalHeader>
<ModalBody>
<Stack pb={4} spacing={4}>
<SearchBar
data-event={HEADER_ANALYTICS.SEARCH_MODAL.SEARCH}
onChange={onQueryChange}
onSubmit={(e) => {
onClose();
onSubmit(e);
}}
value={query}
></SearchBar>
<Button colorScheme="brand" onClick={() => onSearch()}>
Find Constructs
</Button>
</Stack>
</ModalBody>
</ModalContent>
</ModalOverlay>
</Modal>
</Portal>
);
};
|