diff --git a/demo/FormExamples.jsx b/demo/FormExamples.jsx index 2c70c1e..b815a31 100644 --- a/demo/FormExamples.jsx +++ b/demo/FormExamples.jsx @@ -129,6 +129,8 @@ export function FormExamples() { }); }} transform={(formData, _, update) => { + console.log('transform >> formData:', formData); + formData.__v = formData.__v ? formData.__v + 1 : 1; update(formData); @@ -141,14 +143,17 @@ export function FormExamples() { validations={validations} customActions={ useCustomActions - ? (isSubmiting, { onCancel, resetForm }) => ( + ? (isSubmiting, { onCancel, resetForm, clearForm }) => (
- - +
) : undefined @@ -757,6 +762,7 @@ export function FormExamples() { /> + ); } @@ -765,7 +771,7 @@ const ResetForm = () => { const formControl = useFormControl(); const reset = () => { - console.log('reset form'); + console.log('reset form - resets to initial state'); formControl.resetFormData(); }; @@ -777,6 +783,22 @@ const ResetForm = () => { ); }; +const ClearForm = () => { + const formControl = useFormControl(); + + const clear = () => { + console.log('clear form - sets empty state'); + + formControl.clearFormData(); + }; + + return ( + + ); +}; + const FormSwitchExample = () => { const autocompleteField1FormControl = useFormControl('autocompleteField1'); diff --git a/src/forms/Form.jsx b/src/forms/Form.jsx index 23ded04..c0b0c7d 100644 --- a/src/forms/Form.jsx +++ b/src/forms/Form.jsx @@ -22,6 +22,7 @@ export function Form({ const formRef = useRef(null); const [isSubmiting, setIsSubmiting] = useState(false); + /* Resets to initial values/state */ function resetForm() { if (formRef.current && formRef.current.classList) { formRef.current.classList.remove('was-validated'); @@ -30,6 +31,14 @@ export function Form({ formState.reset(); } + function clearForm() { + if (formRef.current && formRef.current.classList) { + formRef.current.classList.remove('was-validated'); + } + + formState.clear(); + } + function handleSubmit(e) { e.preventDefault(); e.stopPropagation(); @@ -76,7 +85,17 @@ export function Form({
{children} - + ); } diff --git a/src/forms/FormActions.jsx b/src/forms/FormActions.jsx index 9bb07c1..4a41bf8 100644 --- a/src/forms/FormActions.jsx +++ b/src/forms/FormActions.jsx @@ -2,9 +2,9 @@ import React from 'react'; import PropTypes from 'prop-types'; import { isFunction } from 'js-var-type'; -export function FormActions({ submitLabel, cancelLabel, onCancel, isSubmiting, customActions, resetForm }) { +export function FormActions({ submitLabel, cancelLabel, clearForm, onCancel, isSubmiting, customActions, resetForm }) { if (customActions) { - return isFunction(customActions) ? customActions(isSubmiting, { onCancel, resetForm }) : customActions; + return isFunction(customActions) ? customActions(isSubmiting, { clearForm, onCancel, resetForm }) : customActions; } return ( @@ -22,6 +22,7 @@ export function FormActions({ submitLabel, cancelLabel, onCancel, isSubmiting, c FormActions.propTypes = { submitLabel: PropTypes.oneOfType([PropTypes.func, PropTypes.node]), cancelLabel: PropTypes.oneOfType([PropTypes.func, PropTypes.node]), + clearForm: PropTypes.func, onCancel: PropTypes.func.isRequired, isSubmiting: PropTypes.bool, customActions: PropTypes.oneOfType([PropTypes.func, PropTypes.node, PropTypes.arrayOf(PropTypes.node)]), diff --git a/src/forms/helpers/useForm.js b/src/forms/helpers/useForm.js index 00e73ac..35f594f 100644 --- a/src/forms/helpers/useForm.js +++ b/src/forms/helpers/useForm.js @@ -44,15 +44,30 @@ function useFormState(initialState, { onChange, transform }) { return nextFormState; }); }, + /* Resets to initial values/state */ resetState() { setIsDirty(false); setFormState(initialState); }, + /* Sets empty state */ + clearState() { + setIsDirty(true); + + setFormState(() => { + const nextFormState = {}; + + setTimeout(() => { + transformRef.current(nextFormState); + }); + + return nextFormState; + }); + }, }; } export function useForm(initialState, { validations, onChange, transform }) { - const { getState, updateState, resetState } = useFormState(initialState, { onChange, transform }); + const { getState, updateState, resetState, clearState } = useFormState(initialState, { onChange, transform }); const [submitAttempted, setSubmitAttempted] = useState(false); const [, setRefreshForm] = useState(false); const { getAllKeys: getElementNames, get: getElementRefs, push: registerElementRef } = useArrayValueMap(); @@ -125,6 +140,9 @@ export function useForm(initialState, { validations, onChange, transform }) { getValue(name) { return getValueByPath(formState, name); }, + clear() { + clearState(); + }, reset() { resetState(); setSubmitAttempted(false); diff --git a/src/forms/helpers/useFormControl.js b/src/forms/helpers/useFormControl.js index bff92e9..228d5ae 100644 --- a/src/forms/helpers/useFormControl.js +++ b/src/forms/helpers/useFormControl.js @@ -48,7 +48,8 @@ export function useFormControl(name, type) { handleOnChange, register, getFormData: () => formState.getFormData(), - resetFormData: () => formState.reset(), + resetFormData: () => formState.reset() /* Resets to initial values/state */, + clearFormData: () => formState.clear() /* Sets empty state */, isValid: () => formState.getValidationMessage(name) === '', getFormSubmitedAttempted: () => formState.getSubmitedAttempted(), };