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 | 39x 39x 212x 212x 212x 212x 212x 212x 212x 212x 26x 212x 212x | import { ReactElement, useEffect, useState } from "react";
import {
ControllerFieldState,
ControllerRenderProps,
FieldValues,
UseFormStateReturn,
useFormContext,
} from "react-hook-form";
import { Controller } from "react-hook-form";
import { navigationKeys } from "@constants/constants";
import { RenderBuilderProps } from "./types";
import { IDocumentype } from "@components/ProfilePage/BusinessProfileSetupNew/types";
export interface Props {
identificationName?: string;
render: ({
open,
setOpen,
isFocused,
setIsFocused,
setIsHovered,
isHovered,
handleChange,
selectValue,
options,
handleKeyDown,
}: RenderBuilderProps) => ({
field,
fieldState,
formState,
}: {
field: ControllerRenderProps<FieldValues, any>;
fieldState: ControllerFieldState;
formState: UseFormStateReturn<FieldValues>;
}) => ReactElement;
}
const options = {
passport_id: "Passport",
national_id: "ID Number",
};
export const WithIdentificationLogic = ({
identificationName = "documentNumber",
render,
}: Props) => {
const { control, setValue, getValues } = useFormContext();
const [open, setOpen] = useState(false);
const [isFocused, setIsFocused] = useState(false);
const [isHovered, setIsHovered] = useState(false);
const [selectValue, setSelectValue] = useState(options.passport_id);
const handleChange = (event: any) => {
setValue(
"documentType",
Object.entries(options).find((x) => x[1] === event.target.value)?.[0] ??
"passport_id",
);
setIsHovered(false);
setValue(identificationName, "", { shouldDirty: true });
setValue("documentNumber", "");
};
const documentTypeFormStateValue: IDocumentype = getValues("documentType") ?? "passport_id";
useEffect(() => {
setSelectValue(options[documentTypeFormStateValue]);
}, [documentTypeFormStateValue]);
const handleKeyDown = (event: any, value: string) => {
const key = event.key;
const isMaxLength = value?.length === 20;
if (!navigationKeys.some((item) => item === key) && isMaxLength) {
event.preventDefault();
}
};
return (
<Controller
name={identificationName}
key={identificationName}
control={control}
render={render({
open,
setOpen,
isFocused,
setIsFocused,
setIsHovered,
isHovered,
handleChange,
selectValue,
options,
handleKeyDown,
})}
/>
);
};
|