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 | 2x | import { useRef } from "react";
import useInputFieldFocusListener from "@common/FilePreview/hooks/useInputFieldFocusListener";
import { Box } from "@mui/material";
import HFGiveIntegerInput from "@shared/HFInputs/HFGiveInput/HFGiveIntegerInput";
import { FormProvider, SubmitHandler, useForm } from "react-hook-form";
import { PageInputPropsV2 } from "../types";
type IFormInputs = {
page: string;
};
const PageInputV2 = ({
page,
onChange,
numPages,
onFocus,
pageInputWidth,
}: PageInputPropsV2) => {
const inputRef = useRef<HTMLInputElement>(null);
const methods = useForm<IFormInputs>({
mode: "onChange",
defaultValues: { page: page.toString() },
});
useInputFieldFocusListener({ inputRef, onFocus });
const onSubmit: SubmitHandler<IFormInputs> = (data) => {
const sanitizedInput = parseInt(data.page);
if (!Number.isNaN(sanitizedInput)) {
if (sanitizedInput <= numPages) {
onChange(sanitizedInput);
} else {
onChange(numPages);
}
}
};
return (
<FormProvider {...methods}>
<Box component="form" onSubmit={methods.handleSubmit(onSubmit)}>
<HFGiveIntegerInput
name="page"
inputRef={inputRef}
min={1}
max={numPages}
disabled={numPages === 1}
isFullWidth={false}
containerProps={{
sx: {
"& .MuiInputBase-root": {
width: `${pageInputWidth}px` || "22px",
height: "22px",
padding: "4px",
borderRadius: "4px",
"& input": {
fontSize: "12px",
textAlign: "center",
},
},
display: "flex",
alignItems: "center",
justifyContent: "center",
},
}}
/>
</Box>
</FormProvider>
);
};
export default PageInputV2;
|