diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/index.js b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/index.js index b8114461f9..2c9023714f 100644 --- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/index.js +++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/index.js @@ -42,4 +42,7 @@ export default [ name: "Log Out", component: LogOut, }, + { + name: "Clear Form", + }, ] diff --git a/packages/client/src/constants.js b/packages/client/src/constants.js index e0595c0ce9..049b16801b 100644 --- a/packages/client/src/constants.js +++ b/packages/client/src/constants.js @@ -6,6 +6,7 @@ export const ActionTypes = { ValidateForm: "ValidateForm", RefreshDatasource: "RefreshDatasource", SetDataProviderQuery: "SetDataProviderQuery", + ClearForm: "ClearForm" } export const ApiVersion = "1" diff --git a/packages/client/src/utils/buttonActions.js b/packages/client/src/utils/buttonActions.js index af4826a1c4..d7707bfb11 100644 --- a/packages/client/src/utils/buttonActions.js +++ b/packages/client/src/utils/buttonActions.js @@ -77,6 +77,14 @@ const refreshDatasourceHandler = async (action, context) => { ) } +const clearFormHandler = async (action, context) => { + return await executeActionHandler( + context, + action.parameters.componentId, + ActionTypes.ClearForm + ) +} + const handlerMap = { ["Save Row"]: saveRowHandler, ["Delete Row"]: deleteRowHandler, @@ -85,6 +93,7 @@ const handlerMap = { ["Trigger Automation"]: triggerAutomationHandler, ["Validate Form"]: validateFormHandler, ["Refresh Datasource"]: refreshDatasourceHandler, + ["Clear Form"]: clearFormHandler } const confirmTextMap = { diff --git a/packages/standard-components/src/forms/InnerForm.svelte b/packages/standard-components/src/forms/InnerForm.svelte index 3a63b63bdc..55e14217e1 100644 --- a/packages/standard-components/src/forms/InnerForm.svelte +++ b/packages/standard-components/src/forms/InnerForm.svelte @@ -64,6 +64,13 @@ }) return get(formState).valid }, + clear: () => { + const fields = Object.keys(fieldMap) + fields.forEach(field => { + const { fieldApi } = fieldMap[field] + fieldApi.clearValue(); + }) + } } // Provide both form API and state to children @@ -72,6 +79,7 @@ // Action context to pass to children const actions = [ { type: ActionTypes.ValidateForm, callback: formApi.validate }, + { type: ActionTypes.ClearForm, callback: formApi.clear }, ] // Creates an API for a specific field @@ -108,8 +116,28 @@ return !newError } + + const clearValue = () => { + const { fieldState } = fieldMap[field] + fieldState.update(state => { + state.value = defaultValue + state.error = null + return state + }) + + formState.update(state => { + state.values = { ...state.values, [field]: defaultValue } + delete state.errors[field] + state.valid = Object.keys(state.errors).length === 0 + return state + }) + + return true + } + return { setValue, + clearValue, validate: () => { const { fieldState } = fieldMap[field] setValue(get(fieldState).value, true)