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 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 | import {
Box,
Divider,
Modal,
ModalHeader,
ModalContent,
ModalCloseButton,
ModalBody,
ModalOverlay,
UnorderedList,
} from "@chakra-ui/react";
import {
FormEventHandler,
FunctionComponent,
useCallback,
useRef,
} from "react";
import { useHistory } from "react-router-dom";
import { SearchInput } from "./SearchInput";
import { SearchItem } from "../../../components/SearchItem";
export interface SearchModalProps {
inputValue: string;
isOpen: boolean;
onClose: () => void;
onInputChange: (s: string) => void;
submodules: { name: string; to: string }[];
}
export const SearchModal: FunctionComponent<SearchModalProps> = ({
inputValue,
isOpen,
onClose,
onInputChange,
submodules,
}) => {
const inputRef = useRef<HTMLInputElement>(null);
const { push } = useHistory();
const navigate = useCallback(
(to: string) => {
onClose();
push(to);
},
[onClose, push]
);
const onSubmit = useCallback<FormEventHandler<HTMLFormElement>>(
(e) => {
e.preventDefault();
if (!submodules.length) return;
const { to } = submodules[0];
navigate(to);
},
[navigate, submodules]
);
return (
<Modal initialFocusRef={inputRef} isOpen={isOpen} onClose={onClose}>
<ModalOverlay>
<ModalContent mx={4}>
<ModalCloseButton data-testid="choose-submodule-modal-close" />
<ModalHeader
data-testid="choose-submodule-modal-header"
fontSize="lg"
fontWeight="bold"
>
Choose a submodule
</ModalHeader>
<ModalBody data-testid="choose-submodule-modal-body" p={0}>
<Box pb={4} px={4}>
<SearchInput
onChange={onInputChange}
onSubmit={onSubmit}
ref={inputRef}
value={inputValue}
/>
</Box>
<Divider />
<UnorderedList
data-testid="choose-submodule-modal-results"
m={0}
maxH="50vh"
overflow="hidden auto"
p={0}
role="listbox"
tabIndex={-1}
>
{submodules.map(({ name, to }) => (
<SearchItem
data-testid="choose-submodule-result"
key={name}
name={name}
onClick={() => navigate(to)}
/>
))}
</UnorderedList>
</ModalBody>
</ModalContent>
</ModalOverlay>
</Modal>
);
};
|