fix(renderer): add missing condition mapper attribute

data-driven-forms · Dec 5, 2023 · d09ef98 · d09ef98
1 parent a6b85fd
commit d09ef98
Show file tree

Hide file tree

Showing 5 changed files with 106 additions and 18 deletions.
diff --git a/packages/mui-component-mapper/demo/index.js b/packages/mui-component-mapper/demo/index.js
@@ -139,8 +139,94 @@ const selectSchema = {
   ],
 };
 
+const schema = {
+  fields: [
+    {
+      name: 'foo',
+      label: 'bar',
+      component: 'text-field',
+    },
+    {
+      name: 'list',
+      label: 'List',
+      component: 'field-array', //our name for a field-array
+      fields: [
+        {
+          name: 'status',
+          label: 'Status',
+          component: 'select',
+          clearedValue: null,
+          dataType: 'integer',
+          options: [
+            {
+              label: 'Status 1',
+              value: 1,
+            },
+            {
+              label: 'Status 2',
+              value: 2,
+            },
+            {
+              label: 'Status 3',
+              value: 3,
+            },
+          ],
+        },
+        {
+          name: 'test',
+          label: 'Test',
+          component: 'radio',
+          dataType: 'boolean',
+          options: [
+            {
+              label: 'No',
+              value: false,
+            },
+            {
+              label: 'Yes',
+              value: true,
+            },
+          ],
+          condition: {
+            or: [
+              {
+                mappedAttributes: {
+                  when: ['ResolveItem'],
+                },
+                is: 1,
+              },
+              {
+                mappedAttributes: {
+                  when: ['ResolveItem'],
+                },
+                is: 2,
+              },
+            ],
+            then: {
+              visible: true,
+            },
+          },
+        },
+      ],
+    },
+  ],
+};
+
+const conditionMapper = {
+  ResolveItem: () => (field, _conditionConfig) => {
+    console.log('Resolve item: ', `${field.name.split('.').shift()}.status`);
+    return `${field.name.split('.').shift()}.status`;
+  },
+  CheckItem: (requiredValue) => (value, _conditionConfig) => {
+    console.log('check item: ', requiredValue, value, requiredValue === value);
+    return requiredValue === value;
+  },
+};
+
+console.log(conditionMapper)
+
 const App = () => {
-  const [schema, setSchema] = useState(wizardSchema);
+  // const [schema, setSchema] = useState(wizardSchema);
 
   return (
     <StyledEngineProvider injectFirst>
@@ -151,14 +237,16 @@ const App = () => {
               <Typography variant="h3">Material UI component mapper</Typography>
             </Grid>
             <Grid item xs={12}>
-              <Button onClick={() => setSchema(demoSchema)}>Demo schema</Button>
+              {/* <Button onClick={() => setSchema(demoSchema)}>Demo schema</Button>
               <Button onClick={() => setSchema(fieldArraySchema)}>Field array</Button>
               <Button onClick={() => setSchema(wizardSchema)}>Wizard</Button>
-              <Button onClick={() => setSchema(selectSchema)}>Select</Button>
+              <Button onClick={() => setSchema(selectSchema)}>Select</Button> */}
             </Grid>
             <FormRenderer
+              // subscription={{ values: true }}
               onSubmit={console.log}
               componentMapper={compositeMapper}
+              conditionMapper={conditionMapper}
               FormTemplate={(props) => <FormTemplate {...props} />}
               schema={schema}
               onCancel={() => console.log('canceling')}

diff --git a/packages/react-form-renderer/src/get-condition-triggers/get-condition-triggers.js b/packages/react-form-renderer/src/get-condition-triggers/get-condition-triggers.js
@@ -13,7 +13,7 @@ const mergeFunctionTrigger = (fn, 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
@@ -58,13 +58,13 @@ const getConditionTriggers = (condition, field, conditionMapper = {}) => {
   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));

diff --git a/packages/react-form-renderer/src/get-visible-fields/get-visible-fields.js b/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) }),
   };
 };
 

diff --git a/packages/react-form-renderer/src/parse-condition/parse-condition.js b/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;

diff --git a/packages/react-form-renderer/src/validation/validation.js b/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 });