diff --git a/demo/FormExamples.jsx b/demo/FormExamples.jsx index 951bea8..2c70c1e 100644 --- a/demo/FormExamples.jsx +++ b/demo/FormExamples.jsx @@ -20,6 +20,7 @@ import { export function FormExamples() { const [bootstrapFormValidation, setBootstrapFormValidation] = useState(false); const [changeCustomValidation, setChangeCustomValidation] = useState(false); + const [useCustomActions, setUseCustomActions] = useState(false); const validations = useMemo( () => ({ @@ -138,6 +139,20 @@ export function FormExamples() { }} customValidation={bootstrapFormValidation} validations={validations} + customActions={ + useCustomActions + ? (isSubmiting, { onCancel, resetForm }) => ( +
+ + +
+ ) + : undefined + } >
Form configuration:
setChangeCustomValidation(value)} /> + setUseCustomActions(value)} + />
@@ -734,10 +755,28 @@ export function FormExamples() { includeEmptyItem={false} menuClassName="p-4 w-100" /> + + ); } +const ResetForm = () => { + const formControl = useFormControl(); + + const reset = () => { + console.log('reset form'); + + formControl.resetFormData(); + }; + + return ( + + ); +}; + const FormSwitchExample = () => { const autocompleteField1FormControl = useFormControl('autocompleteField1'); diff --git a/src/forms/Form.jsx b/src/forms/Form.jsx index 8c61184..23ded04 100644 --- a/src/forms/Form.jsx +++ b/src/forms/Form.jsx @@ -76,7 +76,7 @@ export function Form({
{children} - + ); } @@ -92,7 +92,7 @@ Form.defaultProps = { Form.propTypes = { cancelLabel: PropTypes.string, children: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)]), - customActions: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)]), + customActions: PropTypes.oneOfType([PropTypes.func, PropTypes.node, PropTypes.arrayOf(PropTypes.node)]), customValidation: PropTypes.bool, initialValues: PropTypes.object, onCancel: PropTypes.func, diff --git a/src/forms/FormActions.jsx b/src/forms/FormActions.jsx index fde1c87..9bb07c1 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 }) { +export function FormActions({ submitLabel, cancelLabel, onCancel, isSubmiting, customActions, resetForm }) { if (customActions) { - return isFunction(customActions) ? customActions(isSubmiting) : customActions; + return isFunction(customActions) ? customActions(isSubmiting, { onCancel, resetForm }) : customActions; } return ( @@ -24,5 +24,6 @@ FormActions.propTypes = { cancelLabel: PropTypes.oneOfType([PropTypes.func, PropTypes.node]), onCancel: PropTypes.func.isRequired, isSubmiting: PropTypes.bool, - customActions: PropTypes.oneOfType([PropTypes.func, PropTypes.node]), + customActions: PropTypes.oneOfType([PropTypes.func, PropTypes.node, PropTypes.arrayOf(PropTypes.node)]), + resetForm: PropTypes.func, }; diff --git a/src/forms/helpers/useFormControl.js b/src/forms/helpers/useFormControl.js index 2121ed8..bff92e9 100644 --- a/src/forms/helpers/useFormControl.js +++ b/src/forms/helpers/useFormControl.js @@ -48,6 +48,7 @@ export function useFormControl(name, type) { handleOnChange, register, getFormData: () => formState.getFormData(), + resetFormData: () => formState.reset(), isValid: () => formState.getValidationMessage(name) === '', getFormSubmitedAttempted: () => formState.getSubmitedAttempted(), };