All checks were successful
continuous-integration/drone/push Build is passing
81 lines
1.9 KiB
TypeScript
81 lines
1.9 KiB
TypeScript
import { useCallback, useState } from 'react';
|
|
import { useValidatedFields } from './useValidatedFields';
|
|
|
|
type FieldErrors<TValues> = Partial<Record<keyof TValues, string | undefined>>;
|
|
|
|
type UseEditableFormOptions<TValues> = {
|
|
initialValues: TValues;
|
|
validate: (values: TValues) => FieldErrors<TValues>;
|
|
};
|
|
|
|
export function useEditableForm<TValues extends Record<string, string>>({
|
|
initialValues,
|
|
validate,
|
|
}: UseEditableFormOptions<TValues>) {
|
|
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,
|
|
};
|
|
}
|