karusic/front2/src/components/form/FormInput.tsx

38 lines
836 B
TypeScript

import { RefObject } from 'react';
import { Input } from '@chakra-ui/react';
import { FormGroup } from '@/components/form/FormGroup';
import { UseFormidableReturn } from '@/components/form/Formidable';
export type FormInputProps = {
form: UseFormidableReturn;
variableName: string;
ref?: RefObject<any>;
label?: string;
placeholder?: string;
isRequired?: boolean;
};
export const FormInput = ({
form,
variableName,
ref,
placeholder,
...rest
}: FormInputProps) => {
return (
<FormGroup
isModify={form.isModify[variableName]}
onRestore={() => form.restoreValue({ [variableName]: true })}
{...rest}
>
<Input
ref={ref}
value={form.values[variableName]}
onChange={(e) => form.setValues({ [variableName]: e.target.value })}
/>
</FormGroup>
);
};