Merge pull request #164 from episerver/master

Merger Master to Develop

package.json

@@ -1,6 +1,6 @@
 {
   "name": "content-headless-form-js-sdk",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Workspace root",
   "workspaces": [
     "src/@episerver/forms-react",

src/@episerver/forms-react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@episerver/forms-react",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Forms react components render a form from JSON data",
   "author": "Optimizely",
   "license": "ISC",

src/@episerver/forms-react/src/components/FormBody.tsx

@@ -2,7 +2,8 @@ import React, { useEffect, useRef } from "react";
 import { useForms } from "../context/store";
 import { StepHelper, FormContainer, FormSubmitter, IdentityInfo, isInArray, isNull, 
     isNullOrEmpty, FormSubmitModel, FormSubmitResult, SubmitButton, FormCache, 
-    FormConstants, ProblemDetail, StepDependCondition, getConfirmationData } from "@episerver/forms-sdk";
+    FormConstants, ProblemDetail, StepDependCondition, getConfirmationData, 
+    SatisfiedActionType} from "@episerver/forms-sdk";
 import { RenderElementInStep } from "./RenderElementInStep";
 import { DispatchFunctions } from "../context/dispatchFunctions";
 import { FormStepNavigation } from "./FormStepNavigation";
@@ -102,7 +103,10 @@ export const FormBody = (props: FormBodyProps) => {
 
         //get inactives element
         let inactives = (formContext?.elementDependencies ?? [])
-            .filter(dependency => !dependency.isSatisfied)
+            .filter(dependency =>
+                (!dependency.isSatisfied && dependency.sastisfiedAction === SatisfiedActionType.Show)
+                || (dependency.isSatisfied && dependency.sastisfiedAction === SatisfiedActionType.Hide)
+            )
             .map(dependency => dependency.elementKey);
 
         //filter submissions by active elements and current step

src/@episerver/forms-react/src/context/dispatchFunctions.ts

@@ -16,11 +16,12 @@ export class DispatchFunctions {
         });
     }
 
-    UpdateElementDependencies = (elementKey: string, condition: boolean) => {
+    UpdateElementDependencies = (elementKey: string, condition: boolean, satisfiedAction: string) => {
         this._dispatch({
             type: ActionType.UpdateElementDependencies,
             elementKey: elementKey,
-            condition
+            condition,
+            satisfiedAction
         });
     }
 

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

@@ -36,7 +36,8 @@ export function formReducer(formState: FormState, action: any) {
             ...formState,
             elementDependencies: formState.elementDependencies.map(fs => equals(fs.elementKey, action.elementKey)  ? { 
                 elementKey: action.elementKey, 
-                isSatisfied: action.condition 
+                isSatisfied: action.condition,
+                sastisfiedAction: action.satisfiedAction
             } as ElementDependencies : fs)
         } as FormState;
       }

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

@@ -107,7 +107,7 @@ export const useElement = (element: FormElementBase) => {
 
         if (currentCondition != checkConditions) {
             // Update element dependencies state
-            dispatchFuncs.UpdateElementDependencies(element.key, checkConditions);
+            dispatchFuncs.UpdateElementDependencies(element.key, checkConditions, conditionProps.satisfiedAction);
         }
 
     }, [formContext?.formSubmissions, formContext?.elementDependencies]);

src/@episerver/forms-sdk/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@episerver/forms-sdk",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Forms SDK with client validation, step navigation, submit form, element depends",
   "author": "Optimizely",
   "license": "ISC",

src/@episerver/forms-sdk/src/form-depend-conditions/ConditionFunctions.ts

@@ -29,7 +29,7 @@ function Equals(actualValue: any, dependencyFieldValue: string): boolean {
  * @returns 
 */
 function NotEquals(actualValue: any, dependencyFieldValue: string): boolean {
-    const _actualValue = !actualValue ? "" : getConcatString(actualValue, ",").toLocaleUpperCase();
+    const _actualValue = !actualValue ? "" : getConcatString(actualValue.toString(), ",").toLocaleUpperCase();
     dependencyFieldValue = !dependencyFieldValue ? "" : dependencyFieldValue.toLocaleUpperCase();
     return _actualValue !== dependencyFieldValue;
 }
@@ -40,7 +40,7 @@ function NotEquals(actualValue: any, dependencyFieldValue: string): boolean {
  * @returns 
  */
 function Contains(actualValue: any, dependencyFieldValue: string): boolean {
-    const _actualValue = isNull(actualValue) ? "" : getConcatString(actualValue, ",").toLocaleUpperCase();
+    const _actualValue = isNull(actualValue) ? "" : getConcatString(actualValue.toString(), ",").toLocaleUpperCase();
     dependencyFieldValue = !dependencyFieldValue ? "" : dependencyFieldValue.toLocaleUpperCase();
     return _actualValue.indexOf(dependencyFieldValue) >= 0;
 }
@@ -51,7 +51,7 @@ function Contains(actualValue: any, dependencyFieldValue: string): boolean {
  * @returns 
  */
 function NotContains(actualValue: any, dependencyFieldValue: string): boolean {
-    const _actualValue = !actualValue ? "" : getConcatString(actualValue, ",").toLocaleUpperCase();
+    const _actualValue = !actualValue ? "" : getConcatString(actualValue.toString(), ",").toLocaleUpperCase();
     const actualValueNull = isNullOrEmpty(_actualValue)
     const dependencyFieldValueNull = isNullOrEmpty(dependencyFieldValue)
     return (!actualValueNull && dependencyFieldValueNull) ||
@@ -66,6 +66,6 @@ function NotContains(actualValue: any, dependencyFieldValue: string): boolean {
  */
 function MatchRegularExpression(actualValue: any, patternOfExpected: string): boolean {
     var regex = new RegExp(patternOfExpected, "igm");
-    const _actualValue = !actualValue ? "" : getConcatString(actualValue, ",");
+    const _actualValue = !actualValue ? "" : getConcatString(actualValue.toString(), ",");
     return isNullOrEmpty(patternOfExpected) || (!isNullOrEmpty(patternOfExpected) && regex.test(_actualValue));
 }

src/@episerver/forms-sdk/src/helpers/initFormState.ts

@@ -29,7 +29,7 @@ export function initFormState(formContainer: FormContainer, currentPageUrl?: str
                 //init form submission
                 formSubmissions = formSubmissions.concat({ elementKey: e.key, value: getDefaultValue(e) } as FormSubmission);
                 //init form elements dependencies
-                elementDependencies = elementDependencies.concat({ elementKey: e.key, isSatisfied: true });
+                elementDependencies = elementDependencies.concat({ elementKey: e.key, isSatisfied: true, sastisfiedAction : (e.properties as any).satisfiedAction });
             }
         });
         stepDependencies = stepDependencies.concat({ elementKey: s.formStep.key, isSatisfied: false });

src/@episerver/forms-sdk/src/models/states/ElementDependencies.ts

@@ -1,4 +1,5 @@
 export interface ElementDependencies{
     elementKey: string
     isSatisfied: boolean
+    sastisfiedAction?: string
 }