Add reset button react component

src/@optimizely/forms-react/src/components/elements/PredefinedHiddenElementBlock.tsx

@@ -1,24 +1,25 @@
-import { PredefinedHidden } from "@optimizely/forms-sdk"
+import { PredefinedHidden } from "@optimizely/forms-sdk";
 import React from "react";
-import ElementWrapper from "../ElementWrapper";
 import { useElement } from "../../hooks/useElement";
 
-export interface PredefinedHiddenElementBlockProps {
+interface PredefinedHiddenElementBlockProps {
     element: PredefinedHidden
 }
 
 export const PredefinedHiddenElementBlock = (props: PredefinedHiddenElementBlockProps) => {
     const { element } = props;
-    const { elementContext, checkVisible } = useElement(element);
+    const { elementContext, extraAttr } = useElement(element);
 
     return (
-        <ElementWrapper className={`Form__Element FormHidden FormHideInSummarized`} isVisible={checkVisible()}>
-            <input
-                value={elementContext.value}
-                name={element.key}
-                id={element.key}
+        <>
+            <input 
+                name={element.key} 
+                id={element.key} 
                 type="hidden"
+                value={elementContext.value}
+                className="Form__Element FormHidden FormHideInSummarized" 
+                {...extraAttr} 
             />
-        </ElementWrapper>
+        </>
     );
 }

src/@optimizely/forms-react/src/components/elements/ResetButtonElementBlock.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import { ResetButton } from "@optimizely/forms-sdk";
+import { useElement } from "../../hooks/useElement";
+
+interface ResetButtonElementBlockProps {
+    element: ResetButton
+}
+
+export const ResetButtonElementBlock = (props: ResetButtonElementBlockProps) => {
+    const { element } = props;
+    const { extraAttr, handleReset } = useElement(element);
+
+    return (
+        <>
+            <input 
+                type="reset" 
+                className="Form__Element FormResetButton Form__Element--NonData" 
+                {...extraAttr}
+                value={element.properties.label} 
+                onClick={handleReset}
+            />
+        </>
+    );
+}

src/@optimizely/forms-react/src/components/elements/SelectionElementBlock.tsx

@@ -4,14 +4,14 @@ import ElementWrapper from "../ElementWrapper";
 import { useElement } from "../../hooks/useElement";
 import { ElementCaption, ValidationMessage } from "./shared";
 
-export interface SelectionElementBlockProps {
+interface SelectionElementBlockProps {
     element: Selection
 }
 
 export const SelectionElementBlock = (props: SelectionElementBlockProps) => {
     const { element } = props;
     const { elementContext, extraAttr, validatorClasses, handleChange, handleBlur, checkVisible } = useElement(element);
-    const defaultOptionSelected = !element.properties.allowMultiSelect && !element.properties.items.some(i => i.checked);
+
     return (
         <ElementWrapper className={`FormSelection ${validatorClasses}`} isVisible={checkVisible()}>
             <ElementCaption element={element}></ElementCaption>
@@ -24,8 +24,9 @@ export const SelectionElementBlock = (props: SelectionElementBlockProps) => {
                 autoComplete={element.properties.autoComplete}
                 onChange={handleChange}
                 onBlur={handleBlur}
+                value={elementContext.value}
             >
-                <option disabled selected={defaultOptionSelected} value="">
+                <option value="" disabled={elementContext.value !== ""}>
                     {isNullOrEmpty(element.properties.placeHolder) 
                         ? element.localizations["selectionDefaultPlaceholder"]
                         : element.properties.placeHolder

src/@optimizely/forms-react/src/components/elements/index.ts

@@ -9,6 +9,7 @@ import { SelectionElementBlock } from "./SelectionElementBlock";
 import { UrlElementBlock } from "./UrlElementBlock";
 import { ImageChoiceElementBlock } from "./ImageChoiceElementBlock";
 import { FileUploadElementBlock } from "./FileUploadElementBlock";
+import { ResetButtonElementBlock } from "./ResetButtonElementBlock";
 
 export const components: Record<string, any> = {
     TextboxElementBlock,
@@ -21,5 +22,6 @@ export const components: Record<string, any> = {
     SelectionElementBlock,
     UrlElementBlock,
     ImageChoiceElementBlock,
-    FileUploadElementBlock
+    FileUploadElementBlock,
+    ResetButtonElementBlock
 };

src/@optimizely/forms-react/src/context/initState.ts

@@ -11,7 +11,7 @@ import { ConditionProperties,
     StepDependencies } from "@optimizely/forms-sdk";
 
 interface InitStateProps{
-    formContainer: FormContainer
+    formContainer: FormContainer | undefined
 }
 
 export function initState(props: InitStateProps): FormState{
@@ -22,7 +22,7 @@ export function initState(props: InitStateProps): FormState{
     let formDependencies = [] as FormDependencies[];
     let stepDependencies = [] as StepDependencies[];
 
-    formContainer.steps.forEach(s => {
+    formContainer?.steps.forEach(s => {
         s.elements.forEach(e => {
             //init form submission
             formSubmissions =  formSubmissions.concat({ elementKey: e.key, value: getDefaultValue(e) } as FormSubmission)
@@ -57,6 +57,6 @@ export function initState(props: InitStateProps): FormState{
 
 
     return {
-        formSubmissions, formDependencies, formValidations, stepDependencies
+        isReset: false, formSubmissions, formDependencies, formValidations, stepDependencies, formContainer
     } as FormState;
 }

src/@optimizely/forms-react/src/context/reducer.ts

@@ -7,7 +7,9 @@ import { equals,
 export enum ActionType {
     UpdateValue = "UpdateValue",
     UpdateValidation = "UpdateValidation",
-    UpdateDependencies = "UpdateDependencies"
+    UpdateDependencies = "UpdateDependencies",
+    ResetForm = "ResetForm",
+    ResetedForm = "ResetedForm"
 }
 
 export function formReducer(formState: FormState, action: any) {
@@ -39,6 +41,15 @@ export function formReducer(formState: FormState, action: any) {
             } as FormDependencies : fd)
         } as FormState;
       }
+      case ActionType.ResetForm: {
+        return action.formState;
+      }
+      case ActionType.ResetedForm: {
+        return {
+          ...formState,
+          isReset: false
+        } as FormState;
+      }
       default: {
         return formState;
       }

src/@optimizely/forms-react/src/hooks/useElement.ts

@@ -19,6 +19,7 @@ import {
     //class
     FormValidator
     } from "@optimizely/forms-sdk";
+import { initState } from "../context/initState";
 
 export interface ElementContext{
     value: any,
@@ -33,10 +34,11 @@ export const useElement = (element: FormElementBase) => {
     const extraAttr = useRef<any>({});
     const formValidation = new FormValidator(element);
     const defaultValue = getDefaultValue(element);
+    const failClass = "ValidationFail";
 
     //build element state
     const value = (formContext?.formSubmissions ?? [])
-                    .filter(s => equals(s.elementKey, element.key))[0]?.value ?? defaultValue;
+                    .filter(s => equals(s.elementKey, element.key))[0]?.value ?? defaultValue ?? "";
     const validationResults = (formContext?.formValidations ?? [])
                     .filter(s => equals(s.elementKey, element.key))[0]?.results ?? [];
     const isDependenciesSatisfied = (formContext?.formDependencies ?? [])
@@ -73,6 +75,26 @@ export const useElement = (element: FormElementBase) => {
         } as ElementContext);
     },[element.key]);
 
+    //reset form
+    useEffect(()=>{
+        if(formContext?.isReset){
+            //reset class
+            validatorClasses.current = validatorClasses.current.split(" ").filter(c => c !== failClass).join(" ");
+            //reset element state
+            setElementContext({
+                ...elementContext,
+                value,
+                defaultValue,
+                validationResults,
+                isDependenciesSatisfied
+            } as ElementContext);
+            //update form state
+            dispatch({
+                type: ActionType.ResetedForm
+            });
+        }
+    },[formContext?.isReset]);
+
     const dispatchUpdateValidation = (validationResults: FormValidationResult[]) => {
         dispatch({
             type: ActionType.UpdateValidation,
@@ -111,7 +133,7 @@ export const useElement = (element: FormElementBase) => {
 
         if(/file/.test(type)){
             submissionValue = files;
-            validationResults = doValidate(name, files);
+            validationResults = doValidate(files);
             dispatchUpdateValidation(validationResults);
         }
 
@@ -129,7 +151,7 @@ export const useElement = (element: FormElementBase) => {
     const handleBlur = (e: any) => {
         const {name} = e.target;
         //call validation from form-sdk
-        let validationResults = doValidate(name, elementContext.value);
+        let validationResults = doValidate(elementContext.value);
 
         //call dependencies from form-sdk
 
@@ -143,12 +165,22 @@ export const useElement = (element: FormElementBase) => {
         } as ElementContext);
     }
 
-    const doValidate = (elementKey: string, value: any) => {
+    const handleReset = () => {
+        dispatch({
+            type: ActionType.ResetForm,
+            formState: {
+                ...initState({formContainer: formContext?.formContainer}),
+                isReset: true
+            }
+        });
+    }
+
+    const doValidate = (value: any) => {
         let validationResults = formValidation.validate(value);
 
         let isValidationFail = !isNull(validationResults) && validationResults.some(r => !r.valid);
         let arrClass = validatorClasses.current.split(" ");
-        let failClass = "ValidationFail";
+
         if(isValidationFail){
             if(!isInArray(failClass, arrClass)){
                 arrClass.push(failClass);
@@ -181,5 +213,8 @@ export const useElement = (element: FormElementBase) => {
         }
     }
 
-    return { elementContext, extraAttr: extraAttr.current, validatorClasses: validatorClasses.current, handleChange, handleBlur, checkVisible };
+    return { 
+        elementContext, extraAttr: extraAttr.current, validatorClasses: validatorClasses.current, 
+        handleChange, handleBlur, checkVisible, handleReset 
+    };
 }

src/@optimizely/forms-sdk/src/models/states/FormState.ts

@@ -1,11 +1,14 @@
+import { FormContainer } from "../FormContainer"
 import { FormDependencies } from "./FormDependencies"
 import { FormSubmission } from "./FormSubmission"
 import { FormValidation } from "./FormValidation"
 import { StepDependencies } from "./StepDependencies"
 
 export interface FormState {
+    isReset: boolean
     formSubmissions: FormSubmission[]
     formValidations: FormValidation[]
     formDependencies: FormDependencies[]
     stepDependencies: StepDependencies[]
+    formContainer: FormContainer
 }