Rev 3719 | AutorÃa | Comparar con el anterior | Ultima modificación | Ver Log |
import React from 'react';
import { Box, useTheme } from '@mui/material';
import { useForm, FormProvider } from 'react-hook-form';
import { Spinner } from '..';
export function Form({ children, onSubmit, defaultValues, reset: propReset = false, ...rest }) {
const theme = useTheme();
const methods = useForm({ defaultValues });
const {
handleSubmit,
reset,
formState: { isSubmitting }
} = methods;
const handleFormSubmit = async (data) => {
if (onSubmit) {
await onSubmit(data);
}
if (propReset) {
reset(undefined, { keepDefaultValues: true });
}
};
return (
<FormProvider {...methods}>
<Box
component='form'
onSubmit={handleSubmit(handleFormSubmit)}
sx={{
position: 'relative',
display: 'flex',
flexDirection: 'column',
alignItems: 'flex-start',
gap: theme.spacing(0.5),
width: '100%',
'& > *:not(button)': {
width: '100%'
}
}}
{...rest}
>
{children}
{isSubmitting && <Spinner absolute />}
</Box>
</FormProvider>
);
}