feat(renderer): enhance conditions

- adds sequence condition
- adds then, else branches
- adds set action
- optimize condition to listen values changes

Author: rvsia

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

@@ -49,6 +49,44 @@ const asyncValidatorSchema = {
   ]
 };
 
+const conditionLogicDemo = {
+  title: 'Testing Conditions',
+  description: 'Write X in both',
+  fields: [
+    {
+      name: 'text_box_1',
+      label: 'Text Box 1',
+      title: 'Text Box',
+      component: 'text-field',
+      clearOnUnmount: true,
+      condition: {
+        sequence: [
+          { when: 'a', is: 'x', then: { visible: true, set: { password: 'defaultPassword' } }, else: { set: { password: 'no password' } } },
+          { when: 'b', is: 'x', then: { visible: true, set: { text_box_1: 'defaultText' } } }
+        ]
+      }
+    },
+    {
+      name: 'a',
+      label: 'a',
+      title: 'a',
+      component: 'text-field'
+    },
+    {
+      name: 'b',
+      label: 'b',
+      title: 'b',
+      component: 'text-field'
+    },
+    {
+      name: 'password',
+      label: 'password',
+      title: 'password',
+      component: 'text-field'
+    }
+  ]
+};
+
 const App = () => {
   // const [values, setValues] = useState({});
   return (
@@ -57,7 +95,7 @@ const App = () => {
         validatorMapper={validatorMapper}
         componentMapper={componentMapper}
         onSubmit={(values) => console.log(values)}
-        schema={asyncValidatorSchema}
+        schema={conditionLogicDemo}
         FormTemplate={FormTemplate}
         actionMapper={actionMapper}
         schemaValidatorMapper={{

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

@@ -1,8 +1,10 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
 import lodashIsEmpty from 'lodash/isEmpty';
-import { FormSpy } from 'react-final-form';
 import get from 'lodash/get';
+import isEqual from 'lodash/isEqual';
+
+import useFormApi from '../files/use-form-api';
 
 const isEmptyValue = (value) => (typeof value === 'number' || value === true ? false : lodashIsEmpty(value));
 
@@ -27,48 +29,125 @@ const fieldCondition = (value, { is, isNotEmpty, isEmpty, pattern, notMatch, fla
 };
 
 export const parseCondition = (condition, values) => {
+  let positiveResult = {
+    visible: true,
+    ...condition.then
+  };
+
+  let negativeResult = {
+    visible: false,
+    ...condition.else
+  };
+
   if (Array.isArray(condition)) {
-    return !condition.map((condition) => parseCondition(condition, values)).some((result) => result === false);
+    return !condition.map((condition) => parseCondition(condition, values)).some((result) => result === false) ? positiveResult : negativeResult;
   }
 
   if (condition.and) {
-    return condition.and.map((condition) => parseCondition(condition, values)).every((result) => result === true);
+    return !condition.and.map((condition) => parseCondition(condition, values)).some((result) => result === false) ? positiveResult : negativeResult;
+  }
+
+  if (condition.sequence) {
+    return condition.sequence.reduce(
+      (acc, curr) => {
+        const result = parseCondition(curr, values);
+
+        return {
+          sets: [...acc.sets, ...[result.set ? result.set : []]],
+          visible: acc.visible || result.visible
+        };
+      },
+      { ...negativeResult, sets: [] }
+    );
   }
 
   if (condition.or) {
-    return condition.or.map((condition) => parseCondition(condition, values)).some((result) => result === true);
+    return condition.or.map((condition) => parseCondition(condition, values)).some((result) => result === true) ? positiveResult : negativeResult;
   }
 
   if (condition.not) {
-    return !parseCondition(condition.not, values);
+    return !parseCondition(condition.not, values) ? positiveResult : negativeResult;
   }
 
   if (typeof condition.when === 'string') {
-    return fieldCondition(get(values, condition.when), condition);
+    return fieldCondition(get(values, condition.when), condition) ? positiveResult : negativeResult;
   }
 
   if (Array.isArray(condition.when)) {
-    return !!condition.when.map((fieldName) => fieldCondition(get(values, fieldName), condition)).find((condition) => !!condition);
+    return condition.when.map((fieldName) => fieldCondition(get(values, fieldName), condition)).find((condition) => !!condition)
+      ? positiveResult
+      : negativeResult;
   }
 
-  return false;
+  return negativeResult;
 };
 
-const Condition = ({ condition, children }) => <FormSpy>{({ values }) => (parseCondition(condition, values) ? children : null)}</FormSpy>;
+const Condition = React.memo(({ condition, children, values }) => {
+  const formOptions = useFormApi();
+  const dirty = formOptions.getState().dirty;
+
+  const [lastSets, setSets] = React.useState([]);
+
+  const conditionResult = parseCondition(condition, values, formOptions);
+  const setters = conditionResult.set ? [conditionResult.set] : conditionResult.sets;
+
+  useEffect(() => {
+    if (!dirty) {
+      setSets([]);
+    }
+  }, [dirty]);
+
+  useEffect(() => {
+    if (setters && setters.length > 0 && (!dirty || !isEqual(setters, lastSets))) {
+      setters.forEach((setter, index) => {
+        if (setter && (!dirty || !isEqual(setter, lastSets[index]))) {
+          formOptions.batch(() => {
+            Object.entries(setter).forEach(([name, value]) => {
+              formOptions.change(name, value);
+            });
+          });
+        }
+      });
+      setSets(setters);
+    }
+  }, [setters, dirty]);
+
+  return conditionResult.visible ? children : null;
+}, isEqual);
 
 const conditionProps = {
-  when: PropTypes.string.isRequired,
-  is: PropTypes.oneOfType([PropTypes.array, PropTypes.string, PropTypes.object, PropTypes.number, PropTypes.bool]).isRequired,
+  when: PropTypes.string,
+  is: PropTypes.oneOfType([PropTypes.array, PropTypes.string, PropTypes.object, PropTypes.number, PropTypes.bool]),
   isNotEmpty: PropTypes.bool,
   isEmpty: PropTypes.bool,
-  children: PropTypes.oneOf([PropTypes.node, PropTypes.arrayOf(PropTypes.node)]).isRequired,
   pattern: PropTypes.oneOf([PropTypes.string, PropTypes.instanceOf(RegExp)]),
-  notMatch: PropTypes.any
+  notMatch: PropTypes.any,
+  then: PropTypes.shape({
+    visible: PropTypes.bool,
+    set: PropTypes.object
+  }),
+  else: PropTypes.shape({
+    visible: PropTypes.bool,
+    set: PropTypes.object
+  })
+};
+
+const nestedConditions = {
+  or: PropTypes.oneOfType([PropTypes.shape(conditionProps), PropTypes.arrayOf(PropTypes.shape(conditionProps))]),
+  and: PropTypes.oneOfType([PropTypes.shape(conditionProps), PropTypes.arrayOf(PropTypes.shape(conditionProps))]),
+  not: PropTypes.oneOfType([PropTypes.shape(conditionProps), PropTypes.arrayOf(PropTypes.shape(conditionProps))]),
+  sequence: PropTypes.arrayOf(PropTypes.shape(conditionProps))
+};
+
+const conditionsProps = {
+  ...conditionProps,
+  ...nestedConditions
 };
 
 Condition.propTypes = {
-  condition: PropTypes.oneOfType([PropTypes.shape(conditionProps), PropTypes.arrayOf(PropTypes.shape(conditionProps))]),
-  children: PropTypes.oneOf([PropTypes.node, PropTypes.arrayOf(PropTypes.node)]).isRequired
+  condition: PropTypes.oneOfType([PropTypes.shape(conditionsProps), PropTypes.arrayOf(PropTypes.shape(conditionsProps))]),
+  children: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)]).isRequired,
+  values: PropTypes.object.isRequired
 };
 
 export default Condition;

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

@@ -8,6 +8,7 @@ import { memoize } from '../validators/helpers';
 import componentTypes from '../files/component-types';
 import composeValidators from '../files/compose-validators';
 import convertInitialValue from './convert-initial-value';
+import FormSpy from '../files/form-spy';
 
 const assignSpecialType = (componentType) => ([componentTypes.CHECKBOX, componentTypes.RADIO].includes(componentType) ? componentType : undefined);
 
@@ -22,7 +23,18 @@ FormFieldHideWrapper.defaultProps = {
   hideField: false
 };
 
-const FormConditionWrapper = ({ condition, children }) => (condition ? <Condition condition={condition}>{children}</Condition> : children);
+const FormConditionWrapper = ({ condition, children }) =>
+  condition ? (
+    <FormSpy>
+      {({ values }) => (
+        <Condition condition={condition} values={values}>
+          {children}
+        </Condition>
+      )}
+    </FormSpy>
+  ) : (
+    children
+  );
 
 FormConditionWrapper.propTypes = {
   condition: PropTypes.object,