First commit on new conditions handler

msageryd · msageryd · commit b69cd3434c59 · 2020-07-15T22:48:47.000+02:00
diff --git a/packages/react-form-renderer/demo/index.js b/packages/react-form-renderer/demo/index.js
@@ -9,17 +9,63 @@ const fileSchema = {
   fields: [
     {
       component: 'text-field',
-      name: 'file-upload',
-      type: 'file',
-      label: 'file upload'
-    }
-  ]
+      name: 'field1',
+      label: 'Field1',
+      initialValue: '"abc" to trigger condition "cond1"',
+      type: 'search',
+    },
+    {
+      component: 'text-field',
+      name: 'field2',
+      label: 'Field2',
+      initialValue: '"xyz" to trigger condition "cond1"',
+      type: 'search',
+      condition: {when: 'field2', is: 'aaa'},
+    },
+    {
+      component: 'text-field',
+      name: 'field3',
+      label: 'Field3',
+      initialValue: '"123" to trigger condition "cond2"',
+      type: 'search',
+    },
+    {
+      component: 'text-field',
+      name: 'field4',
+      label: 'Field4',
+      initialValue: 'Visible when field3="aa" (old style condition)',
+    },
+  ],
+  conditions: {
+    cond1: {
+      when: 'field1',
+      is: 'abc',
+      then: {
+        field3: {
+          disabled: true,
+          set: 'New value for field3',
+        },
+        field4: {
+          visible: false,
+        },
+      },
+    },
+    cond2: {
+      when: 'field3',
+      is: '123',
+      then: {
+        field1: {
+          hidden: true,
+        },
+      },
+    },
+  },
 };
 
 const App = () => {
   // const [values, setValues] = useState({});
   return (
-    <div style={{ padding: 20 }}>
+    <div style={{padding: 20}}>
       <FormRenderer
         componentMapper={componentMapper}
         onSubmit={(values, ...args) => console.log(values, args)}
diff --git a/packages/react-form-renderer/src/files/conditions-mapper.js b/packages/react-form-renderer/src/files/conditions-mapper.js
@@ -0,0 +1,89 @@
+/*
+  conditionsMapper will remap a conditions object and create an object with each depending fieldName as a key.
+
+  Since one field can be involed in more than one condition, an array of condition references will be created under each fieldName key
+
+  Since more than one field can be involved in the same condition, the same condition might be referenced from
+  several condition arrays.
+*/
+
+export const conditionsMapper = ({conditions}) => {
+  if (!conditions) return {};
+
+  function isObject(obj) {
+    return obj !== null && typeof obj === 'object' && !Array.isArray(obj);
+  }
+
+  function isArray(obj) {
+    return Array.isArray(obj);
+  }
+
+  function traverse({obj, fnc, key}) {
+    fnc && fnc({obj, key});
+
+    if (isArray(obj)) {
+      traverseArray({
+        obj,
+        fnc,
+        key,
+      });
+    } else if (isObject(obj)) {
+      traverseObject({
+        obj,
+        fnc,
+        key,
+      });
+    }
+  }
+
+  function traverseArray({obj, fnc, key}) {
+    for (var index = 0, len = obj.length; index < len; index++) {
+      const item = obj[index];
+      traverse({
+        obj: item,
+        fnc,
+        key: index,
+      });
+    }
+  }
+
+  function traverseObject({obj, fnc, key}) {
+    for (var index in obj) {
+      if (obj.hasOwnProperty(index)) {
+        const item = obj[index];
+        traverse({
+          obj: item,
+          fnc,
+          key: index,
+        });
+      }
+    }
+  }
+
+  const indexedConditions = {};
+  const conditionArray = Object.entries(conditions);
+
+  conditionArray
+    .map(([key, condition]) => {
+      return {
+        key: key,
+        ...condition,
+      };
+    })
+    .forEach(condition => {
+      traverse({
+        obj: condition,
+        fnc: ({obj, key}) => {
+          if (key === 'when') {
+            const fieldNames = isArray(obj) ? obj : [obj];
+            fieldNames.map(fieldName => {
+              indexedConditions[fieldName] = indexedConditions[fieldName] || [];
+              indexedConditions[fieldName].push(condition);
+            });
+          }
+        },
+      });
+    });
+
+  return indexedConditions;
+};
diff --git a/packages/react-form-renderer/src/files/form-renderer.js b/packages/react-form-renderer/src/files/form-renderer.js
@@ -1,4 +1,4 @@
-import React, { useState, useRef } from 'react';
+import React, {useState, useRef, useReducer} from 'react';
 import Form from './form';
 import arrayMutators from 'final-form-arrays';
 import PropTypes from 'prop-types';
@@ -9,6 +9,9 @@ import renderForm from '../form-renderer/render-form';
 import defaultSchemaValidator from './default-schema-validator';
 import SchemaErrorComponent from '../form-renderer/schema-error-component';
 import defaultValidatorMapper from './validator-mapper';
+import RegisterConditions from './register-conditions';
+import SetFieldValues from './set-field-values';
+import uiStateReducer from './ui-state-reducer';
 
 const FormRenderer = ({
   componentMapper,
@@ -26,15 +29,25 @@ const FormRenderer = ({
   ...props
 }) => {
   const [fileInputs, setFileInputs] = useState([]);
+  const [uiState, dispatchCondition] = useReducer(uiStateReducer, {
+    fields: {},
+    setFieldValues: {},
+  });
   const focusDecorator = useRef(createFocusDecorator());
   let schemaError;
 
-  const validatorMapperMerged = { ...defaultValidatorMapper, ...validatorMapper };
+  const validatorMapperMerged = {...defaultValidatorMapper, ...validatorMapper};
 
   try {
     const validatorTypes = Object.keys(validatorMapperMerged);
     const actionTypes = actionMapper ? Object.keys(actionMapper) : [];
-    defaultSchemaValidator(schema, componentMapper, validatorTypes, actionTypes, schemaValidatorMapper);
+    defaultSchemaValidator(
+      schema,
+      componentMapper,
+      validatorTypes,
+      actionTypes,
+      schemaValidatorMapper
+    );
   } catch (error) {
     schemaError = error;
     console.error(error);
@@ -45,18 +58,24 @@ const FormRenderer = ({
     return <SchemaErrorComponent name={schemaError.name} message={schemaError.message} />;
   }
 
-  const registerInputFile = (name) => setFileInputs((prevFiles) => [...prevFiles, name]);
+  const registerInputFile = name => setFileInputs(prevFiles => [...prevFiles, name]);
 
-  const unRegisterInputFile = (name) => setFileInputs((prevFiles) => [...prevFiles.splice(prevFiles.indexOf(name))]);
+  const unRegisterInputFile = name =>
+    setFileInputs(prevFiles => [...prevFiles.splice(prevFiles.indexOf(name))]);
 
   return (
     <Form
       {...props}
-      onSubmit={(values, formApi, ...args) => onSubmit(values, { ...formApi, fileInputs }, ...args)}
-      mutators={{ ...arrayMutators }}
+      onSubmit={(values, formApi, ...args) => onSubmit(values, {...formApi, fileInputs}, ...args)}
+      mutators={{...arrayMutators}}
       decorators={[focusDecorator.current]}
-      subscription={{ pristine: true, submitting: true, valid: true, ...subscription }}
-      render={({ handleSubmit, pristine, valid, form: { reset, mutators, getState, submit, ...form } }) => (
+      subscription={{pristine: true, submitting: true, valid: true, ...subscription}}
+      render={({
+        handleSubmit,
+        pristine,
+        valid,
+        form: {reset, mutators, getState, submit, registerField, ...form},
+      }) => (
         <RendererContext.Provider
           value={{
             componentMapper,
@@ -73,6 +92,9 @@ const FormRenderer = ({
                 reset();
               },
               getState,
+              registerField,
+              uiState,
+              dispatchCondition,
               valid,
               clearedValue,
               submit,
@@ -81,11 +103,14 @@ const FormRenderer = ({
               clearOnUnmount,
               renderForm,
               ...mutators,
-              ...form
-            }
+              ...form,
+            },
           }}
         >
+          <RegisterConditions schema={schema} />
+          <SetFieldValues />
           <FormTemplate formFields={renderForm(schema.fields)} schema={schema} />
+          <div>{JSON.stringify(uiState, null, 2)}</div>
         </RendererContext.Provider>
       )}
     />
@@ -98,34 +123,34 @@ FormRenderer.propTypes = {
   onReset: PropTypes.func,
   schema: PropTypes.object.isRequired,
   clearOnUnmount: PropTypes.bool,
-  subscription: PropTypes.shape({ [PropTypes.string]: PropTypes.bool }),
+  subscription: PropTypes.shape({[PropTypes.string]: PropTypes.bool}),
   clearedValue: PropTypes.any,
   componentMapper: PropTypes.shape({
-    [PropTypes.string]: PropTypes.oneOfType([PropTypes.node, PropTypes.element, PropTypes.func])
+    [PropTypes.string]: PropTypes.oneOfType([PropTypes.node, PropTypes.element, PropTypes.func]),
   }).isRequired,
   FormTemplate: PropTypes.func.isRequired,
   validatorMapper: PropTypes.shape({
-    [PropTypes.string]: PropTypes.func
+    [PropTypes.string]: PropTypes.func,
   }),
   actionMapper: PropTypes.shape({
-    [PropTypes.string]: PropTypes.func
+    [PropTypes.string]: PropTypes.func,
   }),
   schemaValidatorMapper: PropTypes.shape({
     components: PropTypes.shape({
-      [PropTypes.string]: PropTypes.func
+      [PropTypes.string]: PropTypes.func,
     }),
     validators: PropTypes.shape({
-      [PropTypes.string]: PropTypes.func
+      [PropTypes.string]: PropTypes.func,
     }),
     actions: PropTypes.shape({
-      [PropTypes.string]: PropTypes.func
-    })
-  })
+      [PropTypes.string]: PropTypes.func,
+    }),
+  }),
 };
 
 FormRenderer.defaultProps = {
   initialValues: {},
-  clearOnUnmount: false
+  clearOnUnmount: false,
 };
 
 export default FormRenderer;
diff --git a/packages/react-form-renderer/src/files/register-conditions.js b/packages/react-form-renderer/src/files/register-conditions.js
@@ -0,0 +1,59 @@
+import React, {useEffect} from 'react';
+import {useFormApi} from '../';
+import {Field} from 'react-final-form';
+
+import {conditionsMapper} from './conditions-mapper';
+import {parseCondition} from '../form-renderer/condition2';
+
+const RegisterConditions = ({schema}) => {
+  const {getState, registerField, dispatchCondition} = useFormApi();
+
+  useEffect(() => {
+    const indexedConditions = conditionsMapper({conditions: schema.conditions});
+    console.log(indexedConditions);
+
+    //We need an array of conditions, including the fieldName
+    const unsubscribeFields = Object.entries(indexedConditions)
+      .map(([fieldName, fieldValue]) => {
+        return {
+          fieldName,
+          ...fieldValue,
+        };
+      })
+      .map(field => {
+        console.log('creating field-listener for condition parsing: ' + field.fieldName);
+
+        return registerField(
+          field.fieldName,
+          fieldState => {
+            if (!fieldState || !fieldState.data || !fieldState.data.conditions) return;
+
+            console.log('Parsing conditions for field ' + field.fieldName);
+
+            fieldState.data.conditions.map(condition => {
+              const conditionResult = parseCondition(condition, getState().values);
+              dispatchCondition({
+                type: 'conditionResult',
+                source: condition.key,
+                uiState: conditionResult.uiState,
+              });
+            });
+          },
+          {value: true, data: true},
+          {
+            data: {
+              conditions: indexedConditions[field.fieldName]
+                ? indexedConditions[field.fieldName]
+                : null,
+            },
+          }
+        );
+      });
+
+    return () => unsubscribeFields.map(unsubscribeField => unsubscribeField());
+  }, [schema]);
+
+  return null;
+};
+
+export default RegisterConditions;
diff --git a/packages/react-form-renderer/src/files/set-field-values.js b/packages/react-form-renderer/src/files/set-field-values.js
@@ -0,0 +1,25 @@
+import React, {useEffect} from 'react';
+import lodashIsEmpty from 'lodash/isEmpty';
+
+import {useFormApi} from '../';
+
+const SetFieldValues = () => {
+  const {batch, change, uiState, dispatchCondition} = useFormApi();
+  useEffect(() => {
+    if (lodashIsEmpty(uiState.setFieldValues)) return;
+
+    setTimeout(() => {
+      batch(() => {
+        Object.entries(uiState.setFieldValues).forEach(([name, value]) => {
+          console.log('Setting new value for field ' + name);
+          change(name, value);
+        });
+        dispatchCondition({type: 'fieldValuesUpdated'});
+      });
+    });
+  }, [uiState.setFieldValues]);
+
+  return null;
+};
+
+export default SetFieldValues;
diff --git a/packages/react-form-renderer/src/files/ui-state-reducer.js b/packages/react-form-renderer/src/files/ui-state-reducer.js
diff --git a/packages/react-form-renderer/src/form-renderer/condition2.js b/packages/react-form-renderer/src/form-renderer/condition2.js
