From 688586df4561d660ed00a3dc68ee5f8c771a5fe7 Mon Sep 17 00:00:00 2001 From: Phu Nguyen Date: Wed, 4 Sep 2024 13:43:06 +0700 Subject: [PATCH 01/10] Update README.md --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index eda3889..810d5f2 100644 --- a/README.md +++ b/README.md @@ -13,11 +13,11 @@ ref: https://docs.developers.optimizely.com/content-management-system/v1.2.0-for ### Installation **From Azure Artifacts** -Source https://dev.azure.com/EpiserverEngineering/netCore/_artifacts/feed/headless_forms_beta +Source https://dev.azure.com/EpiserverEngineering/netCore/_artifacts/feed/HeadlessForms To use packages from Azure Artifacts, configure your project to reference this feed. Create a new text file called .npmrc in the same directory as your package.json, then copy the snippet below. ``` - @episerver:registry=https://pkgs.dev.azure.com/EpiserverEngineering/netCore/_packaging/headless_forms_beta/npm/registry/ + @episerver:registry=https://pkgs.dev.azure.com/EpiserverEngineering/netCore/_packaging/HeadlessForms/npm/registry/ ``` Install from the command line ``` From 8092d59de6f659dac876636fecb6c69b14f6af4b Mon Sep 17 00:00:00 2001 From: Phu Nguyen Date: Thu, 5 Sep 2024 10:56:09 +0700 Subject: [PATCH 02/10] Update .npmrc --- .npmrc | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/.npmrc b/.npmrc index 8e8d539..71084ef 100644 --- a/.npmrc +++ b/.npmrc @@ -1,10 +1,10 @@ -@episerver:registry=https://pkgs.dev.azure.com/EpiserverEngineering/netCore/_packaging/headless_forms_beta/npm/registry/ +@episerver:registry=https://pkgs.dev.azure.com/EpiserverEngineering/netCore/_packaging/HeadlessForms/npm/registry/ always-auth=true ; begin auth token -//pkgs.dev.azure.com/EpiserverEngineering/netCore/_packaging/headless_forms_beta/npm/registry/:username=Phu.nguyen -//pkgs.dev.azure.com/EpiserverEngineering/netCore/_packaging/headless_forms_beta/npm/registry/:_password=${AZURE_TOKEN} -//pkgs.dev.azure.com/EpiserverEngineering/netCore/_packaging/headless_forms_beta/npm/registry/:email=Phu.nguyen@optimizely.com -//pkgs.dev.azure.com/EpiserverEngineering/netCore/_packaging/headless_forms_beta/npm/:username=Phu.nguyen -//pkgs.dev.azure.com/EpiserverEngineering/netCore/_packaging/headless_forms_beta/npm/:_password=${AZURE_TOKEN} -//pkgs.dev.azure.com/EpiserverEngineering/netCore/_packaging/headless_forms_beta/npm/:email=Phu.nguyen@optimizely.com -; end auth token \ No newline at end of file +//pkgs.dev.azure.com/EpiserverEngineering/netCore/_packaging/HeadlessForms/npm/registry/:username=Phu.nguyen +//pkgs.dev.azure.com/EpiserverEngineering/netCore/_packaging/HeadlessForms/npm/registry/:_password=${AZURE_TOKEN} +//pkgs.dev.azure.com/EpiserverEngineering/netCore/_packaging/HeadlessForms/npm/registry/:email=Phu.nguyen@optimizely.com +//pkgs.dev.azure.com/EpiserverEngineering/netCore/_packaging/HeadlessForms/npm/:username=Phu.nguyen +//pkgs.dev.azure.com/EpiserverEngineering/netCore/_packaging/HeadlessForms/npm/:_password=${AZURE_TOKEN} +//pkgs.dev.azure.com/EpiserverEngineering/netCore/_packaging/HeadlessForms/npm/:email=Phu.nguyen@optimizely.com +; end auth token From f85244348c85c00d7d995f702bae846a1ec173f1 Mon Sep 17 00:00:00 2001 From: "EP\\qang2" Date: Thu, 19 Sep 2024 16:59:12 +0700 Subject: [PATCH 03/10] Update hidden element when a condition change Fixes: AFORM-4375 --- .../forms-react/src/hooks/useElement.ts | 22 +++++++++++-------- 1 file changed, 13 insertions(+), 9 deletions(-) diff --git a/src/@episerver/forms-react/src/hooks/useElement.ts b/src/@episerver/forms-react/src/hooks/useElement.ts index fadfb42..ed6e293 100644 --- a/src/@episerver/forms-react/src/hooks/useElement.ts +++ b/src/@episerver/forms-react/src/hooks/useElement.ts @@ -82,13 +82,14 @@ export const useElement = (element: FormElementBase) => { //update form state dispatchFuncs.resetFormDone(); } - },[formContext?.isReset]); + }, [formContext?.isReset]); //update visible - useEffect(()=>{ + useEffect(() => { const conditionProps = (element.properties as unknown) as ConditionProperties; - if (isNull(conditionProps.satisfiedAction)) { + if (isNull(conditionProps.satisfiedAction) || isNull(conditionProps.conditions)) { + // No conditions and satisfied actions to take, no need to update dependencies return; } @@ -102,16 +103,19 @@ export const useElement = (element: FormElementBase) => { //if isDependenciesSatisfied = false, and if SatisfiedAction = hide, then show element. otherwise hide element. isVisible.current = equals(conditionProps.satisfiedAction, SatisfiedActionType.Hide); } + var currentCondition = formContext?.elementDependencies.find(e => e.elementKey === element.key)?.isSatisfied; + + if (currentCondition != checkConditions) { + // Update element dependencies state + dispatchFuncs.UpdateElementDependencies(element.key, checkConditions); + } - // Update element dependencies state - dispatchFuncs.UpdateElementDependencies(element.key,checkConditions); - - },[formContext?.formSubmissions]); + }, [formContext?.formSubmissions, formContext?.elementDependencies]); //focus on element if validate fail before submitting - useEffect(()=>{ + useEffect(() => { let focusOn = formContext?.focusOn ?? ""; - if(equals(focusOn, element.key)){ + if (equals(focusOn, element.key)) { elementRef.current && elementRef.current.focus(); dispatchFuncs.updateFocusOn(""); } From acf0740bf40bb136ef3a5913b3d229d00f8e428a Mon Sep 17 00:00:00 2001 From: "EP\\qang2" Date: Thu, 19 Sep 2024 17:11:00 +0700 Subject: [PATCH 04/10] Update dependency checking to factor in hidden/invalid element Fixes: AFORM-4375 Stories: AFORM-4406 --- src/@episerver/forms-react/src/hooks/useElement.ts | 2 +- .../form-depend-conditions/formDependConditions.ts | 9 +++++---- .../forms-sdk/src/form-loader/formLoader.ts | 1 - .../forms-sdk/src/helpers/dependencyHelper.ts | 13 +++++++++++++ 4 files changed, 19 insertions(+), 6 deletions(-) diff --git a/src/@episerver/forms-react/src/hooks/useElement.ts b/src/@episerver/forms-react/src/hooks/useElement.ts index ed6e293..d4fe354 100644 --- a/src/@episerver/forms-react/src/hooks/useElement.ts +++ b/src/@episerver/forms-react/src/hooks/useElement.ts @@ -94,7 +94,7 @@ export const useElement = (element: FormElementBase) => { } //check form field dependencies - const checkConditions = formCondition.checkConditions(formContext?.formSubmissions as FormSubmission[]); + const checkConditions = formCondition.checkConditions(formContext?.formSubmissions as FormSubmission[], formContext?.elementDependencies); if (checkConditions) { //if isDependenciesSatisfied = true, and if SatisfiedAction = show, then show element. otherwise hide element. isVisible.current = equals(conditionProps.satisfiedAction, SatisfiedActionType.Show); diff --git a/src/@episerver/forms-sdk/src/form-depend-conditions/formDependConditions.ts b/src/@episerver/forms-sdk/src/form-depend-conditions/formDependConditions.ts index 18ef905..27d63f7 100644 --- a/src/@episerver/forms-sdk/src/form-depend-conditions/formDependConditions.ts +++ b/src/@episerver/forms-sdk/src/form-depend-conditions/formDependConditions.ts @@ -1,5 +1,6 @@ import { equals, isNull } from "../helpers"; -import { ConditionCombinationType, ConditionProperties, FormElementBase, FormSubmission } from "../models"; +import { getValueOfDependeeElement } from "../helpers/dependencyHelper"; +import { Condition, ConditionCombinationType, ConditionProperties, ElementDependencies, FormElementBase, FormSubmission } from "../models"; import { ConditionFunctions } from "./ConditionFunctions"; /** * Class to check if a element conditions is met @@ -14,7 +15,7 @@ export class FormDependConditions { * @param formSubmissions * @returns */ - checkConditions = (formSubmissions: FormSubmission[]): boolean => { + checkConditions = (formSubmissions: FormSubmission[], elementDependencies: ElementDependencies[] = []): boolean => { if (!isNull(formSubmissions)) { const conditionProps = (this._element.properties as unknown) as ConditionProperties; if (isNull(conditionProps?.conditions)) { @@ -23,10 +24,10 @@ export class FormDependConditions { } for (let i = 0; i < conditionProps.conditions.length; i++) { const condition = conditionProps.conditions[i] - const fieldValue = formSubmissions.filter(s => equals(s.elementKey, condition.field))[0]?.value; + const dependeeFieldValue = getValueOfDependeeElement(condition,formSubmissions,elementDependencies); const conditionFunction = ConditionFunctions[condition.operator]; if (!isNull(conditionFunction)){ - let checkResult = conditionFunction(fieldValue == null? "":fieldValue.toString(), condition.fieldValue) + let checkResult = conditionFunction(dependeeFieldValue == null? "" : dependeeFieldValue.toString(), condition.fieldValue) if (conditionProps.conditionCombination === ConditionCombinationType.Any && checkResult) { return true } diff --git a/src/@episerver/forms-sdk/src/form-loader/formLoader.ts b/src/@episerver/forms-sdk/src/form-loader/formLoader.ts index df7674f..20751b3 100644 --- a/src/@episerver/forms-sdk/src/form-loader/formLoader.ts +++ b/src/@episerver/forms-sdk/src/form-loader/formLoader.ts @@ -87,7 +87,6 @@ export class FormLoader { if (response.ok) { let json = await response.json(); let formStr = json.data.FormContainer.items[0]; - console.log(formStr) let convertedFormStr = this.convertFirstLetterToLowerCase(formStr) as T resolve(convertedFormStr) } diff --git a/src/@episerver/forms-sdk/src/helpers/dependencyHelper.ts b/src/@episerver/forms-sdk/src/helpers/dependencyHelper.ts index 5d29bff..fc4b75b 100644 --- a/src/@episerver/forms-sdk/src/helpers/dependencyHelper.ts +++ b/src/@episerver/forms-sdk/src/helpers/dependencyHelper.ts @@ -1,3 +1,16 @@ +import { Condition, ElementDependencies, FormSubmission } from "../models"; +import { equals } from "./utils"; + export function getConcatString(srcObject: any, seperator: string): string { return (srcObject instanceof Array) ? srcObject.join(seperator) : srcObject as string; +} + +export function getValueOfDependeeElement(condition: Condition ,formSubmissions: FormSubmission[], elementDependencies: ElementDependencies[]) : any { + var dependeeFieldValue = formSubmissions.filter(s => equals(s.elementKey, condition.field))[0]?.value; + const dependeeElement = elementDependencies.find(e => e.elementKey === condition.field) + if (dependeeElement && !dependeeElement.isSatisfied ) { + // if element is in the inactive list, consider its value as undefined + dependeeFieldValue = undefined; + } + return dependeeFieldValue; } \ No newline at end of file From 6967e0d41a3e0673d4fd32a88d877bb283a8645c Mon Sep 17 00:00:00 2001 From: tsng Date: Fri, 20 Sep 2024 10:09:41 +0700 Subject: [PATCH 05/10] Fix react music festival render wrong form non master version Fix: AFORM-4391 --- samples/musicfestival-backend-dotnet/Startup.cs | 4 +++- .../musicfestival-frontend-react/src/pages/BuyTicketPage.tsx | 2 +- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/samples/musicfestival-backend-dotnet/Startup.cs b/samples/musicfestival-backend-dotnet/Startup.cs index eb3a653..e7537ee 100644 --- a/samples/musicfestival-backend-dotnet/Startup.cs +++ b/samples/musicfestival-backend-dotnet/Startup.cs @@ -1,5 +1,6 @@ using System.Runtime.InteropServices; using EPiServer.Cms.Shell; +using EPiServer.Cms.Shell.UI; using EPiServer.Cms.UI.AspNetIdentity; using EPiServer.ContentApi.Cms; using EPiServer.ContentApi.Core.DependencyInjection; @@ -59,7 +60,8 @@ public void ConfigureServices(IServiceCollection services) services .AddCmsAspNetIdentity() .AddCms() - .AddAdminUserRegistration() + .AddAdminUserRegistration(options => options.Behavior = RegisterAdminUserBehaviors.Enabled | + RegisterAdminUserBehaviors.LocalRequestsOnly) .AddEmbeddedLocalization() .ConfigureForExternalTemplates() .Configure(options => options.OptimizeForDelivery = true) diff --git a/samples/musicfestival-frontend-react/src/pages/BuyTicketPage.tsx b/samples/musicfestival-frontend-react/src/pages/BuyTicketPage.tsx index c5f0249..7e4a4ba 100644 --- a/samples/musicfestival-frontend-react/src/pages/BuyTicketPage.tsx +++ b/samples/musicfestival-frontend-react/src/pages/BuyTicketPage.tsx @@ -59,7 +59,7 @@ function BuyTicketPage({ content }: BuyTicketPageProps) {
Date: Wed, 25 Sep 2024 16:57:51 +0700 Subject: [PATCH 06/10] Add compatible for UseHistory of react-router v5 Fix: AFORM-4388 --- .gitignore | 3 +++ .../src/hooks/useHistoryCompatible.tsx | 14 ++++++++++++++ .../src/pages/BuyTicketPage.tsx | 7 ++----- 3 files changed, 19 insertions(+), 5 deletions(-) create mode 100644 samples/musicfestival-frontend-react/src/hooks/useHistoryCompatible.tsx diff --git a/.gitignore b/.gitignore index c153578..05e1bca 100644 --- a/.gitignore +++ b/.gitignore @@ -14,3 +14,6 @@ coverage/ /samples/epiCloud/ /samples/musicfestival-frontend-react/build/ /samples/musicfestival-backend-dotnet/App_Data/ + +.env.local +appsettings.development.json \ No newline at end of file diff --git a/samples/musicfestival-frontend-react/src/hooks/useHistoryCompatible.tsx b/samples/musicfestival-frontend-react/src/hooks/useHistoryCompatible.tsx new file mode 100644 index 0000000..2776e19 --- /dev/null +++ b/samples/musicfestival-frontend-react/src/hooks/useHistoryCompatible.tsx @@ -0,0 +1,14 @@ +import { useNavigate, useLocation } from 'react-router-dom'; + +export const useHistoryCompatible = () => { + const navigate = useNavigate(); + const location = useLocation(); + + return { + push: (path: any, state: any) => navigate(path, { state }), + replace: (path: any, state: any) => navigate(path, { replace: true, state }), + location: location, + goBack: () => navigate(-1), + goForward: () => navigate(1), + }; +}; \ No newline at end of file diff --git a/samples/musicfestival-frontend-react/src/pages/BuyTicketPage.tsx b/samples/musicfestival-frontend-react/src/pages/BuyTicketPage.tsx index c5f0249..302393e 100644 --- a/samples/musicfestival-frontend-react/src/pages/BuyTicketPage.tsx +++ b/samples/musicfestival-frontend-react/src/pages/BuyTicketPage.tsx @@ -1,11 +1,8 @@ import { Form, FormContainerBlock, FormLogin } from '@episerver/forms-react'; import { FormCache, FormConstants, IdentityInfo, extractParams } from '@episerver/forms-sdk'; import { useEffect, useState } from 'react'; -import { useNavigate, useLocation } from 'react-router-dom'; -import { useFetch } from '../useFetch'; +import { useHistoryCompatible } from '../hooks/useHistoryCompatible'; import SearchButton from '../components/SearchButton'; -import { getImageUrl } from '../helpers/urlHelper'; -import authService from '../authService'; type BuyTicketPageProps = { content: any, @@ -24,7 +21,7 @@ function BuyTicketPage({ content }: BuyTicketPageProps) { } as IdentityInfo) }, [formCache.get(FormConstants.FormAccessToken)]); - const history = useNavigate() + const history = useHistoryCompatible() return ( <> {content && From 0eaae58b6d074714a98500261306b3f7211c1c92 Mon Sep 17 00:00:00 2001 From: Linh Hoang Date: Fri, 4 Oct 2024 09:18:01 +0700 Subject: [PATCH 07/10] Update CODEOWNERS --- .github/CODEOWNERS | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS index 4966ef6..b7c7447 100644 --- a/.github/CODEOWNERS +++ b/.github/CODEOWNERS @@ -1 +1 @@ -* @episerver/addons-developers @longle91 +* @episerver/cms-addons From 8fee9f1ce1905ac8e123deba093c74f0167361f5 Mon Sep 17 00:00:00 2001 From: Linh Hoang Date: Fri, 4 Oct 2024 13:50:13 +0700 Subject: [PATCH 08/10] bump version --- package-lock.json | 4 ++-- package.json | 2 +- src/@episerver/forms-react/package.json | 2 +- src/@episerver/forms-sdk/package.json | 2 +- 4 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package-lock.json b/package-lock.json index 2855b08..f859081 100644 --- a/package-lock.json +++ b/package-lock.json @@ -23737,7 +23737,7 @@ } }, "src/@episerver/forms-react": { - "version": "1.0.0", + "version": "1.0.1", "license": "ISC", "dependencies": { "@episerver/forms-sdk": "file:../forms-sdk" @@ -23757,7 +23757,7 @@ } }, "src/@episerver/forms-sdk": { - "version": "1.0.0", + "version": "1.0.1", "license": "ISC", "devDependencies": { "@types/jest": "^29.5.6", diff --git a/package.json b/package.json index 37f78cb..e4e3e65 100644 --- a/package.json +++ b/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", diff --git a/src/@episerver/forms-react/package.json b/src/@episerver/forms-react/package.json index 98a576f..e2345bf 100644 --- a/src/@episerver/forms-react/package.json +++ b/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", diff --git a/src/@episerver/forms-sdk/package.json b/src/@episerver/forms-sdk/package.json index 881bbad..968f96a 100644 --- a/src/@episerver/forms-sdk/package.json +++ b/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", From 54736a1221fbef3f8875f1f8e6c8a605445e5cc9 Mon Sep 17 00:00:00 2001 From: Thach Nguyen Date: Mon, 28 Oct 2024 11:16:29 +0700 Subject: [PATCH 09/10] Convert to string before call toLocaleUpperCase AFORM-4451 --- .../src/form-depend-conditions/ConditionFunctions.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/@episerver/forms-sdk/src/form-depend-conditions/ConditionFunctions.ts b/src/@episerver/forms-sdk/src/form-depend-conditions/ConditionFunctions.ts index 0d3cbe6..435d68d 100644 --- a/src/@episerver/forms-sdk/src/form-depend-conditions/ConditionFunctions.ts +++ b/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)); } \ No newline at end of file From 967040ed97af265d0f7742c44f0d087539cbfc9e Mon Sep 17 00:00:00 2001 From: Thach Nguyen Date: Wed, 30 Oct 2024 14:06:36 +0700 Subject: [PATCH 10/10] Check satisfiedAction when query inactive elements AFORM-4452 --- src/@episerver/forms-react/src/components/FormBody.tsx | 8 ++++++-- .../forms-react/src/context/dispatchFunctions.ts | 5 +++-- src/@episerver/forms-react/src/context/reducer.ts | 3 ++- src/@episerver/forms-react/src/hooks/useElement.ts | 2 +- src/@episerver/forms-sdk/src/helpers/initFormState.ts | 2 +- .../forms-sdk/src/models/states/ElementDependencies.ts | 1 + 6 files changed, 14 insertions(+), 7 deletions(-) diff --git a/src/@episerver/forms-react/src/components/FormBody.tsx b/src/@episerver/forms-react/src/components/FormBody.tsx index 87b531e..099d49a 100644 --- a/src/@episerver/forms-react/src/components/FormBody.tsx +++ b/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 diff --git a/src/@episerver/forms-react/src/context/dispatchFunctions.ts b/src/@episerver/forms-react/src/context/dispatchFunctions.ts index 6a43b43..4148d9a 100644 --- a/src/@episerver/forms-react/src/context/dispatchFunctions.ts +++ b/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 }); } diff --git a/src/@episerver/forms-react/src/context/reducer.ts b/src/@episerver/forms-react/src/context/reducer.ts index 37416e9..4550a31 100644 --- a/src/@episerver/forms-react/src/context/reducer.ts +++ b/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; } diff --git a/src/@episerver/forms-react/src/hooks/useElement.ts b/src/@episerver/forms-react/src/hooks/useElement.ts index d4fe354..19a3d6c 100644 --- a/src/@episerver/forms-react/src/hooks/useElement.ts +++ b/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]); diff --git a/src/@episerver/forms-sdk/src/helpers/initFormState.ts b/src/@episerver/forms-sdk/src/helpers/initFormState.ts index 1d9ea6e..e8fe8b6 100644 --- a/src/@episerver/forms-sdk/src/helpers/initFormState.ts +++ b/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 }); diff --git a/src/@episerver/forms-sdk/src/models/states/ElementDependencies.ts b/src/@episerver/forms-sdk/src/models/states/ElementDependencies.ts index 4ec28f4..73fe0ec 100644 --- a/src/@episerver/forms-sdk/src/models/states/ElementDependencies.ts +++ b/src/@episerver/forms-sdk/src/models/states/ElementDependencies.ts @@ -1,4 +1,5 @@ export interface ElementDependencies{ elementKey: string isSatisfied: boolean + sastisfiedAction?: string } \ No newline at end of file