WIP: Simple legacyConditionsMapper implemented, only handles visible-conditions for now

Author: msageryd

packages/react-form-renderer/demo/index.js

@@ -16,6 +16,7 @@ const fileSchema = {
       component: 'text-field',
       name: 'field2',
       label: 'Field2  (try "xyz")',
+      hideField: true,
     },
     {
       component: 'text-field',
@@ -27,10 +28,20 @@ const fileSchema = {
       name: 'field4',
       label: 'Field4',
     },
+
+    {
+      component: 'text-field',
+      name: 'field5',
+      label: 'Field5',
+      condition: {
+        when: 'field1',
+        is: 'cba',
+      },
+    },
   ],
   conditions: {
     cond1: {
-      when: 'field1',
+      when: 'fieldx',
       is: 'abc',
       then: {
         field4: {
@@ -40,6 +51,9 @@ const fileSchema = {
         field3: {
           disabled: true,
         },
+        field2: {
+          visible: true,
+        },
       },
     },
     cond2: {

packages/react-form-renderer/src/files/legacy-conditions.js

@@ -0,0 +1,71 @@
+/*
+We need to collect all field-level conditions (legacy conditions) and remap those to the new
+conditions structure.
+
+Legacy example:
+fields: [
+    {
+      name: 'Foo', // controlled field
+      component: 'text-field',
+    }, {
+      name: 'BarFoo',
+      label: 'Foo is Bar!',
+      component: 'text-field',
+      condition: {
+        when: 'Foo', // name of controlled field
+        is: 'Bar', // condition
+      },
+    },
+  ]
+
+Remapped condition
+- unique key for each condition needs to be generated
+- fieldName needed as key under then/else:
+
+"legacy-BarFoo-0": {
+  when: 'Foo',
+  is: 'Bar',
+  then: {
+    BarFoo: {
+      visible: true
+    }
+  }
+  else: {
+    BarFoo: {
+      visible: false
+    }
+  }
+},
+
+
+*/
+
+export const collectLegacyConditions = ({fields}) => {
+  const conditions = {};
+  let counter = 0;
+  let prevName;
+
+  fields.forEach(field => {
+    const {name, condition} = field;
+    if (name !== prevName) counter = 0;
+    if (!condition) return;
+
+    const key = `legacy-${name}-${counter}`;
+
+    conditions[key] = {
+      when: condition.when,
+      is: condition.is,
+      then: {
+        [name]: {visible: false},
+      },
+      else: {
+        [name]: {visible: true},
+      },
+    };
+
+    prevName = name;
+    counter++;
+  });
+
+  return conditions;
+};

packages/react-form-renderer/src/files/register-conditions.js

@@ -4,12 +4,15 @@ import {Field} from 'react-final-form';
 
 import {conditionsMapper} from './conditions-mapper';
 import {parseCondition} from '../form-renderer/condition';
+import {collectLegacyConditions} from './legacy-conditions';
 
 const RegisterConditions = ({schema}) => {
   const {getState, registerField, dispatchUIState} = useFormApi();
 
   useEffect(() => {
-    const indexedConditions = conditionsMapper({conditions: schema.conditions});
+    const legacyConditions = collectLegacyConditions({fields: schema.fields});
+    const mergedConditions = {...legacyConditions, ...schema.conditions};
+    const indexedConditions = conditionsMapper({conditions: mergedConditions});
 
     //We need an array of conditions, including the fieldName
     const unsubscribeFields = Object.entries(indexedConditions)
@@ -29,25 +32,26 @@ const RegisterConditions = ({schema}) => {
 
             console.log('Parsing conditions for field ' + field.fieldName);
 
+            const values = getState().values;
             fieldState.data.conditions.map(condition => {
-              const conditionResult = parseCondition(condition, getState().values);
+              const conditionResult = parseCondition(condition, values);
               const {
                 uiState: {add, remove},
               } = conditionResult;
 
-              if (add) {
+              //remove needs to happen before add. Otherwise an added "then" will be overwritten by a removed "else"
+              if (remove) {
                 dispatchUIState({
-                  type: 'addUIState',
+                  type: 'removeUIState',
                   source: condition.key,
-                  uiState: add,
+                  uiState: remove,
                 });
               }
-
-              if (remove) {
+              if (add) {
                 dispatchUIState({
-                  type: 'removeUIState',
+                  type: 'addUIState',
                   source: condition.key,
-                  uiState: remove,
+                  uiState: add,
                 });
               }
             });

packages/react-form-renderer/src/form-renderer/condition.js

@@ -28,8 +28,8 @@ const fieldCondition = (value, {is, isNotEmpty, isEmpty, pattern, notMatch, flag
 };
 
 export const parseCondition = (condition, values) => {
-  //Positive result is alwaus a triggering condition
-  //since a the clause always exists
+  //Positive result is always a triggering condition
+  //since a then clause always exists
   let positiveResult = {
     uiState: {
       add: condition.then,