Merge pull request #1429 from data-driven-forms/conditional-field-array

fix(renderer): add mapped conditions to condition triggers

Author: Hyperkid123

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

@@ -67,9 +67,9 @@ ConditionTriggerDetector.propTypes = {
   field: PropTypes.object.isRequired,
 };
 
-const FormConditionWrapper = ({ condition, children, field }) => {
+const FormConditionWrapper = ({ condition, children, field, conditionMapper }) => {
   if (condition) {
-    const triggers = getConditionTriggers(condition, field);
+    const triggers = getConditionTriggers(condition, field, conditionMapper);
     return (
       <ConditionTriggerDetector triggers={triggers} condition={condition} field={field}>
         {children}
@@ -84,10 +84,11 @@ FormConditionWrapper.propTypes = {
   condition: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
   children: PropTypes.node.isRequired,
   field: PropTypes.object,
+  conditionMapper: PropTypes.object,
 };
 
 const SingleField = ({ component, ...rest }) => {
-  const { actionMapper, componentMapper } = useContext(RendererContext);
+  const { actionMapper, componentMapper, conditionMapper } = useContext(RendererContext);
 
   const { componentProps, Component, overrideProps, mergedResolveProps } = prepareComponentProps({ component, rest, componentMapper, actionMapper });
 
@@ -98,7 +99,7 @@ const SingleField = ({ component, ...rest }) => {
   };
 
   return (
-    <FormConditionWrapper condition={condition} field={restProps}>
+    <FormConditionWrapper condition={condition} field={restProps} conditionMapper={conditionMapper}>
       <FormFieldHideWrapper hideField={hideField}>
         <Component {...restProps} />
       </FormFieldHideWrapper>

packages/react-form-renderer/src/get-condition-triggers/get-condition-triggers.d.ts

@@ -1,5 +1,7 @@
+import { Field } from "../common-types";
 import { ConditionDefinition } from "../condition";
+import { ConditionMapper } from "../form-renderer/condition-mapper";
 
-declare function getConditionTriggers(params:ConditionDefinition | ConditionDefinition[]): string[];
+declare function getConditionTriggers(params:ConditionDefinition | ConditionDefinition[], field: Extract<Field, 'condition' | 'hideField'>, conditionMapper: ConditionMapper): string[];
 
 export default getConditionTriggers;

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

@@ -10,10 +10,27 @@ const mergeFunctionTrigger = (fn, field) => {
   return internalTriggers;
 };
 
-const getConditionTriggers = (condition, field) => {
+const getConditionTriggers = (condition, field, conditionMapper = {}) => {
   let triggers = [];
   if (Array.isArray(condition)) {
-    return condition.reduce((acc, item) => [...acc, ...getConditionTriggers(item, field)], []);
+    return condition.reduce((acc, item) => [...acc, ...getConditionTriggers(item, field, conditionMapper)], []);
+  }
+
+  // extract mapped attributes to a new static condition object
+  if (typeof condition.mappedAttributes === 'object') {
+    try {
+      const newCondition = { ...condition, mappedAttributes: undefined };
+      Object.entries(condition.mappedAttributes).forEach(([attribute, [functionName, ...args]]) => {
+        if (!conditionMapper[functionName]) {
+          throw new Error(`Missing condition mapper function "${functionName}" for field ${field.name}!`);
+        }
+
+        newCondition[attribute] = conditionMapper[functionName](...args);
+      });
+      return getConditionTriggers(newCondition, field, conditionMapper);
+    } catch (error) {
+      console.error(error.toString());
+    }
   }
 
   const { when, ...rest } = condition;
@@ -41,13 +58,13 @@ const getConditionTriggers = (condition, field) => {
   nestedKeys.forEach((key) => {
     if (typeof rest[key] !== 'undefined') {
       rest[key].forEach((item) => {
-        triggers = [...triggers, ...getConditionTriggers(item, field)];
+        triggers = [...triggers, ...getConditionTriggers(item, field, conditionMapper)];
       });
     }
   });
 
   if (typeof condition.not === 'object') {
-    triggers = [...triggers, ...getConditionTriggers(condition.not, field)];
+    triggers = [...triggers, ...getConditionTriggers(condition.not, field, conditionMapper)];
   }
 
   return Array.from(new Set(triggers));

packages/react-form-renderer/src/get-visible-fields/get-visible-fields.js

@@ -1,17 +1,17 @@
 import parseCondition from '../parse-condition';
 
-const getVisibleFields = (schema, values) => {
+const getVisibleFields = (schema, values, conditionMapper) => {
   if (Array.isArray(schema)) {
-    return schema.map((field) => getVisibleFields(field, values)).filter(Boolean);
+    return schema.map((field) => getVisibleFields(field, values, undefined, conditionMapper)).filter(Boolean);
   }
 
   if (schema.condition) {
-    const result = parseCondition(schema.condition, values, schema);
+    const result = parseCondition(schema.condition, values, schema, conditionMapper);
 
     if (result.visible) {
       return {
         ...schema,
-        ...(schema.fields && { fields: getVisibleFields(schema.fields, values).filter(Boolean) }),
+        ...(schema.fields && { fields: getVisibleFields(schema.fields, values, undefined, conditionMapper).filter(Boolean) }),
       };
     } else {
       return null;
@@ -20,7 +20,7 @@ const getVisibleFields = (schema, values) => {
 
   return {
     ...schema,
-    ...(schema.fields && { fields: getVisibleFields(schema.fields, values).filter(Boolean) }),
+    ...(schema.fields && { fields: getVisibleFields(schema.fields, values, undefined, conditionMapper).filter(Boolean) }),
   };
 };
 

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

@@ -89,23 +89,23 @@ export const parseCondition = (condition, values, field, conditionMapper = {}) =
   };
 
   if (Array.isArray(condition)) {
-    return !condition.map((condition) => parseCondition(condition, values, field)).some(({ result }) => result === false)
+    return !condition.map((condition) => parseCondition(condition, values, field, conditionMapper)).some(({ result }) => result === false)
       ? positiveResult
       : negativeResult;
   }
 
   const conditionInternal = unpackMappedCondition(condition, conditionMapper);
 
   if (conditionInternal.and) {
-    return !conditionInternal.and.map((condition) => parseCondition(condition, values, field)).some(({ result }) => result === false)
+    return !conditionInternal.and.map((condition) => parseCondition(condition, values, field, conditionMapper)).some(({ result }) => result === false)
       ? positiveResult
       : negativeResult;
   }
 
   if (conditionInternal.sequence) {
     return conditionInternal.sequence.reduce(
       (acc, curr) => {
-        const result = parseCondition(curr, values, field);
+        const result = parseCondition(curr, values, field, conditionMapper);
 
         return {
           sets: [...acc.sets, ...(result.set ? [result.set] : [])],
@@ -118,13 +118,13 @@ export const parseCondition = (condition, values, field, conditionMapper = {}) =
   }
 
   if (conditionInternal.or) {
-    return conditionInternal.or.map((condition) => parseCondition(condition, values, field)).some(({ result }) => result === true)
+    return conditionInternal.or.map((condition) => parseCondition(condition, values, field, conditionMapper)).some(({ result }) => result === true)
       ? positiveResult
       : negativeResult;
   }
 
   if (conditionInternal.not) {
-    return !parseCondition(conditionInternal.not, values, field).result ? positiveResult : negativeResult;
+    return !parseCondition(conditionInternal.not, values, field, conditionMapper).result ? positiveResult : negativeResult;
   }
 
   const finalWhen = typeof conditionInternal.when === 'function' ? conditionInternal.when(field) : conditionInternal.when;

packages/react-form-renderer/src/tests/get-condition-triggers/get-condition-triggers.test.js

@@ -32,4 +32,32 @@ describe('getConditionTriggers', () => {
   test('should extract name from array of conditions', () => {
     expect(getConditionTriggers([{ when: 'a' }, { when: 'b' }])).toEqual(['a', 'b']);
   });
+
+  describe('mappedAttributes', () => {
+    it(`should extract the 'when' attribute from mappedAttributes`, () => {
+      expect(
+        getConditionTriggers(
+          { mappedAttributes: { when: ['equals', 'a'] } },
+          {},
+          {
+            equals: (a) => () => a,
+          }
+        )
+      ).toEqual(['a']);
+    });
+    it(`should log error if mapped condition is missing from condition mapper`, () => {
+      const consoleSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+      expect(
+        getConditionTriggers(
+          { mappedAttributes: { when: ['equals', 'a'] } },
+          { name: 'foo' },
+          // conditionMapper is deliberately empty
+          {}
+        )
+      ).toEqual([]);
+      expect(consoleSpy).toHaveBeenCalledTimes(1);
+      expect(consoleSpy).toHaveBeenCalledWith(`Error: Missing condition mapper function "equals" for field foo!`);
+      consoleSpy.mockRestore();
+    });
+  });
 });

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

@@ -32,7 +32,7 @@ const validation = async (schema, options) => {
     throw new Error(`options argument has to be type of object, provided: ${typeof options}`);
   }
 
-  const { values, componentMapper, validatorMapper, actionMapper, schemaValidatorMapper, omitWarnings } = options;
+  const { values, componentMapper, validatorMapper, actionMapper, schemaValidatorMapper, omitWarnings, conditionMapper } = options;
 
   const validatorMapperMerged = { ...defaultValidatorMapper, ...validatorMapper };
 
@@ -49,7 +49,7 @@ const validation = async (schema, options) => {
 
   defaultSchemaValidator(finalSchema, finalComponentMapper, validatorTypes, actionTypes, schemaValidatorMapper);
 
-  finalSchema = getVisibleFields(finalSchema, values);
+  finalSchema = getVisibleFields(finalSchema, values, undefined, conditionMapper);
 
   const validates = getValidates(finalSchema, { componentMapper: finalComponentMapper, actionMapper, values });