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 | import { Flex, Input, Text } from "@chakra-ui/react";
import {
FormEventHandler,
FunctionComponent,
SyntheticEvent,
useEffect,
useState,
} from "react";
import { useUpdateSearchParam } from "./useUpdateSearchParam";
import { clickEvent, useAnalytics } from "../../contexts/Analytics";
export interface GoToPageProps {
"data-event"?: string;
"data-testid"?: string;
pageLimit: number;
offset: number;
}
export const GoToPage: FunctionComponent<GoToPageProps> = ({
"data-event": dataEvent,
"data-testid": dataTestid,
pageLimit,
offset,
}) => {
const updateSearch = useUpdateSearchParam();
const { trackCustomEvent } = useAnalytics();
const [inputValue, setInputValue] = useState((offset + 1).toString());
useEffect(() => {
setInputValue((offset + 1).toString());
}, [offset]);
const onInputChange = (e: SyntheticEvent<HTMLInputElement>) => {
e.preventDefault();
setInputValue((e.target as HTMLInputElement).value);
};
const onSubmit: FormEventHandler<HTMLInputElement> = (e) => {
e.preventDefault();
updateSearch({ offset: parseInt(inputValue) - 1 });
};
return (
<Flex align="center" as="form" mx={2} onSubmit={onSubmit}>
<Input
aria-label="Jump to page"
colorScheme="brand"
data-testid={dataTestid}
h={10}
max={pageLimit + 1}
min={1}
name="page"
onChange={onInputChange}
onFocus={() => {
if (dataEvent) {
trackCustomEvent(clickEvent({ name: dataEvent }));
}
}}
p={0}
textAlign="center"
type="number"
value={inputValue}
w={10}
/>
<Text ml={2} w="max-content">
of {pageLimit + 1}
</Text>
</Flex>
);
};
|