feat(renderer): add proper not, and, or conditions

Author: rvsia

packages/react-form-renderer/src/files/default-schema-validator.js

@@ -24,51 +24,67 @@ const checkCondition = (condition, fieldName) => {
     return condition.forEach((item) => checkCondition(item, fieldName));
   }
 
+  if (condition.hasOwnProperty('and') && !Array.isArray(condition.and)) {
+    throw new DefaultSchemaError(`
+      Error occured in field definition with "name" property: "${fieldName}".
+      'and' property in a field condition must be an array! Received: ${typeof condition.and}.
+    `);
+  }
+
+  if (condition.hasOwnProperty('or') && !Array.isArray(condition.and)) {
+    throw new DefaultSchemaError(`
+      Error occured in field definition with "name" property: "${fieldName}".
+      'or' propery in a field condition must be an array! Received: ${typeof condition.and}.
+    `);
+  }
+
   if (typeof condition !== 'object') {
     throw new DefaultSchemaError(`
       Error occured in field definition with name: "${fieldName}".
       Field condition must be an object, received ${Array.isArray(condition) ? 'array' : typeof condition}!
     `);
   }
 
-  if (!condition.hasOwnProperty('when')) {
-    throw new DefaultSchemaError(`
+  if (!condition.hasOwnProperty('and') && !condition.hasOwnProperty('or') && !condition.hasOwnProperty('not')) {
+    if (!condition.hasOwnProperty('when')) {
+      throw new DefaultSchemaError(`
       Error occured in field definition with "name" property: "${fieldName}".
       Field condition must have "when" property! Properties received: [${Object.keys(condition)}].
     `);
-  }
+    }
 
-  if (!(typeof condition.when === 'string' || Array.isArray(condition.when))) {
-    throw new DefaultSchemaError(`
+    if (!(typeof condition.when === 'string' || Array.isArray(condition.when))) {
+      throw new DefaultSchemaError(`
       Error occured in field definition with name: "${fieldName}".
       Field condition property "when" must be oof type "string", ${typeof condition.when} received!].
     `);
-  }
+    }
 
-  if (
-    !condition.hasOwnProperty('is') &&
-    !condition.hasOwnProperty('isEmpty') &&
-    !condition.hasOwnProperty('isNotEmpty') &&
-    !condition.hasOwnProperty('pattern')
-  ) {
-    throw new DefaultSchemaError(`
+    if (
+      !condition.hasOwnProperty('is') &&
+      !condition.hasOwnProperty('isEmpty') &&
+      !condition.hasOwnProperty('isNotEmpty') &&
+      !condition.hasOwnProperty('pattern')
+    ) {
+      throw new DefaultSchemaError(`
       Error occured in field definition with name: "${fieldName}".
       Field condition must have one of "is", "isEmpty", "isNotEmpty", "pattern" property! Properties received: [${Object.keys(condition)}].
     `);
-  }
+    }
 
-  if (condition.hasOwnProperty('notMatch') && !condition.hasOwnProperty('pattern') && !condition.hasOwnProperty('is')) {
-    throw new DefaultSchemaError(`
+    if (condition.hasOwnProperty('notMatch') && !condition.hasOwnProperty('pattern') && !condition.hasOwnProperty('is')) {
+      throw new DefaultSchemaError(`
       Error occured in field definition with name: "${fieldName}".
       Field condition must have "pattern" or "is" property when "notMatch" is set! Properties received: [${Object.keys(condition)}].
     `);
-  }
+    }
 
-  if (condition.hasOwnProperty('pattern') && !(condition.pattern instanceof RegExp) && typeof condition.pattern !== 'string') {
-    throw new DefaultSchemaError(`
+    if (condition.hasOwnProperty('pattern') && !(condition.pattern instanceof RegExp) && typeof condition.pattern !== 'string') {
+      throw new DefaultSchemaError(`
       Error occured in field definition with name: "${fieldName}".
       Field condition must have "pattern" of instance "RegExp" or "string"! Instance received: [${condition.pattern.constructor.name}].
     `);
+    }
   }
 };
 

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

@@ -6,52 +6,56 @@ import get from 'lodash/get';
 
 const isEmptyValue = (value) => (typeof value === 'number' || value === true ? false : lodashIsEmpty(value));
 
-const Condition = ({ condition, children }) => {
-  const fieldCondition = (value, { is, isNotEmpty, isEmpty, pattern, notMatch, flags }) => {
-    if (isNotEmpty) {
-      return !isEmptyValue(value);
-    }
-
-    if (isEmpty) {
-      return isEmptyValue(value);
-    }
-
-    if (pattern) {
-      const regExpPattern = RegExp(pattern, flags);
-
-      return notMatch ? !regExpPattern.test(value) : regExpPattern.test(value);
-    }
-
-    const isMatched = Array.isArray(is) ? !!is.includes(value) : value === is;
-
-    return notMatch ? !isMatched : isMatched;
-  };
-
-  const shouldRender = (values, conditionItem) => {
-    if (typeof conditionItem.when === 'string') {
-      return fieldCondition(get(values, conditionItem.when), conditionItem);
-    }
-
-    if (Array.isArray(conditionItem.when)) {
-      return conditionItem.when.map((fieldName) => fieldCondition(get(values, fieldName), conditionItem)).find((condition) => !!condition);
-    }
-
-    return false;
-  };
-
-  return (
-    <FormSpy>
-      {({ values }) => {
-        const visible = Array.isArray(condition)
-          ? !condition.map((conditionItem) => !!shouldRender(values, conditionItem)).some((result) => result === false)
-          : shouldRender(values, condition);
-
-        return visible ? children : null;
-      }}
-    </FormSpy>
-  );
+const fieldCondition = (value, { is, isNotEmpty, isEmpty, pattern, notMatch, flags }) => {
+  if (isNotEmpty) {
+    return !isEmptyValue(value);
+  }
+
+  if (isEmpty) {
+    return isEmptyValue(value);
+  }
+
+  if (pattern) {
+    const regExpPattern = RegExp(pattern, flags);
+
+    return notMatch ? !regExpPattern.test(value) : regExpPattern.test(value);
+  }
+
+  const isMatched = Array.isArray(is) ? !!is.includes(value) : value === is;
+
+  return notMatch ? !isMatched : isMatched;
+};
+
+export const parseCondition = (condition, values) => {
+  if (Array.isArray(condition)) {
+    return !condition.map((condition) => parseCondition(condition, values)).some((result) => result === false);
+  }
+
+  if (condition.and) {
+    return condition.and.map((condition) => parseCondition(condition, values)).every((result) => result === true);
+  }
+
+  if (condition.or) {
+    return condition.or.map((condition) => parseCondition(condition, values)).some((result) => result === true);
+  }
+
+  if (condition.not) {
+    return !parseCondition(condition.not, values);
+  }
+
+  if (typeof condition.when === 'string') {
+    return fieldCondition(get(values, condition.when), condition);
+  }
+
+  if (Array.isArray(condition.when)) {
+    return !!condition.when.map((fieldName) => fieldCondition(get(values, fieldName), condition)).find((condition) => !!condition);
+  }
+
+  return false;
 };
 
+const Condition = ({ condition, children }) => <FormSpy>{({ values }) => (parseCondition(condition, values) ? children : null)}</FormSpy>;
+
 const conditionProps = {
   when: PropTypes.string.isRequired,
   is: PropTypes.oneOfType([PropTypes.array, PropTypes.string, PropTypes.object, PropTypes.number, PropTypes.bool]).isRequired,