import { useCallback, useState } from 'react'; import { useValidatedFields } from './useValidatedFields'; type FieldErrors = Partial>; type UseEditableFormOptions = { initialValues: TValues; validate: (values: TValues) => FieldErrors; }; export function useEditableForm>({ initialValues, validate, }: UseEditableFormOptions) { const [isEditing, setIsEditing] = useState(false); const { values, errors, isValid, setValues, setFieldValue, validateAll, setFieldError, setErrors, clearErrors, } = useValidatedFields({ initialValues, validate, }); const startEditing = useCallback( (sourceValues: TValues) => { setValues(sourceValues, { validate: true }); setIsEditing(true); }, [setValues], ); const discardChanges = useCallback( (sourceValues: TValues) => { setValues(sourceValues, { clearErrors: true }); setIsEditing(false); }, [setValues], ); const loadFromSource = useCallback( (sourceValues: TValues) => { setValues(sourceValues, { clearErrors: true }); }, [setValues], ); const commitSaved = useCallback( (sourceValues: TValues) => { setValues(sourceValues, { clearErrors: true }); setIsEditing(false); }, [setValues], ); return { values, errors, isValid, setValues, setFieldValue, validateAll, setFieldError, setErrors, clearErrors, isEditing, startEditing, discardChanges, loadFromSource, commitSaved, setIsEditing, }; }