clear form action - draft

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",
+  },
 ]

packages/client/src/constants.js

@@ -6,6 +6,7 @@ export const ActionTypes = {
   ValidateForm: "ValidateForm",
   RefreshDatasource: "RefreshDatasource",
   SetDataProviderQuery: "SetDataProviderQuery",
+  ClearForm: "ClearForm"
 }
 
 export const ApiVersion = "1"

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 = {

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)