adjusts withConditions due to not supporting functions passed from config to client side code

src/auth/baseFields.js

@@ -24,8 +24,10 @@ module.exports = [
     name: 'apiKey',
     type: 'text',
     label: 'User API Key',
-    condition: (_, siblings) => {
-      return siblings.enableAPIKey && siblings.enableAPIKey.value;
+    conditions: {
+      enableAPIKey: {
+        equals: true,
+      },
     },
   },
 ];

src/client/components/forms/field-types/Checkbox/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import useFieldType from '../../useFieldType';
-import withCondition from '../../withCondition';
+import withConditions from '../../withConditions';
 import Error from '../../Error';
 import StyledCheckbox from './StyledCheckbox';
 
@@ -87,4 +87,4 @@ Checkbox.propTypes = {
   label: PropTypes.string,
 };
 
-export default withCondition(Checkbox);
+export default withConditions(Checkbox);

src/client/components/forms/field-types/DateTime/index.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import DatePicker from 'react-datepicker';
 
-import withCondition from '../../withCondition';
+import withConditions from '../../withConditions';
 import useFieldType from '../../useFieldType';
 import Label from '../../Label';
 import Error from '../../Error';
@@ -156,4 +156,4 @@ DateTime.propTypes = {
   timeFormat: PropTypes.string,
 };
 
-export default withCondition(DateTime);
+export default withConditions(DateTime);

src/client/components/forms/field-types/Email/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import withCondition from '../../withCondition';
+import withConditions from '../../withConditions';
 import useFieldType from '../../useFieldType';
 import Label from '../../Label';
 import Error from '../../Error';
@@ -108,4 +108,4 @@ Email.propTypes = {
   autoComplete: PropTypes.string,
 };
 
-export default withCondition(Email);
+export default withConditions(Email);

src/client/components/forms/field-types/Flexible/index.js

@@ -6,7 +6,7 @@ import { DragDropContext, Droppable } from 'react-beautiful-dnd';
 import { useModal } from '@trbl/react-modal';
 
 import { RowModifiedProvider, useRowModified } from '../../Form/RowModified';
-import withCondition from '../../withCondition';
+import withConditions from '../../withConditions';
 import Button from '../../../elements/Button';
 import FormContext from '../../Form/Context';
 import AddRowModal from './AddRowModal';
@@ -210,4 +210,4 @@ Flexible.propTypes = {
   fieldTypes: PropTypes.shape({}).isRequired,
 };
 
-export default withCondition(Flexible);
+export default withConditions(Flexible);

src/client/components/forms/field-types/Group/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import RenderFields from '../../RenderFields';
-import withCondition from '../../withCondition';
+import withConditions from '../../withConditions';
 
 import './index.scss';
 
@@ -41,4 +41,4 @@ Group.propTypes = {
   fieldTypes: PropTypes.shape({}).isRequired,
 };
 
-export default withCondition(Group);
+export default withConditions(Group);

src/client/components/forms/field-types/HiddenInput/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import useFieldType from '../../useFieldType';
-import withCondition from '../../withCondition';
+import withConditions from '../../withConditions';
 
 const HiddenInput = (props) => {
   const {
@@ -38,4 +38,4 @@ HiddenInput.propTypes = {
   defaultValue: PropTypes.string,
 };
 
-export default withCondition(HiddenInput);
+export default withConditions(HiddenInput);

src/client/components/forms/field-types/Number/index.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import useFieldType from '../../useFieldType';
 import Label from '../../Label';
 import Error from '../../Error';
-import withCondition from '../../withCondition';
+import withConditions from '../../withConditions';
 
 import './index.scss';
 
@@ -96,4 +96,4 @@ NumberField.propTypes = {
   label: PropTypes.string,
 };
 
-export default withCondition(NumberField);
+export default withConditions(NumberField);

src/client/components/forms/field-types/Password/index.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import useFieldType from '../../useFieldType';
 import Label from '../../Label';
 import Error from '../../Error';
-import withCondition from '../../withCondition';
+import withConditions from '../../withConditions';
 
 import './index.scss';
 
@@ -92,4 +92,4 @@ Password.propTypes = {
   validate: PropTypes.func,
 };
 
-export default withCondition(Password);
+export default withConditions(Password);

src/client/components/forms/field-types/Relationship/index.js

@@ -2,7 +2,7 @@ import React, { Component, useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import Cookies from 'universal-cookie';
 import some from 'async-some';
-import withCondition from '../../withCondition';
+import withConditions from '../../withConditions';
 import ReactSelect from '../../../elements/ReactSelect';
 import useFieldType from '../../useFieldType';
 import Label from '../../Label';
@@ -338,4 +338,4 @@ const RelationshipFieldType = (props) => {
   );
 };
 
-export default withCondition(RelationshipFieldType);
+export default withConditions(RelationshipFieldType);

src/client/components/forms/field-types/Repeater/index.js

@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 import { DragDropContext, Droppable } from 'react-beautiful-dnd';
 
 import { RowModifiedProvider, useRowModified } from '../../Form/RowModified';
-import withCondition from '../../withCondition';
+import withConditions from '../../withConditions';
 import Button from '../../../elements/Button';
 import FormContext from '../../Form/Context';
 import DraggableSection from '../../DraggableSection';
@@ -163,4 +163,4 @@ Repeater.propTypes = {
   fieldTypes: PropTypes.shape({}).isRequired,
 };
 
-export default withCondition(Repeater);
+export default withConditions(Repeater);

src/client/components/forms/field-types/Select/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import withCondition from '../../withCondition';
+import withConditions from '../../withConditions';
 import ReactSelect from '../../../elements/ReactSelect';
 import useFieldType from '../../useFieldType';
 import Label from '../../Label';
@@ -153,4 +153,4 @@ Select.propTypes = {
   hasMany: PropTypes.bool,
 };
 
-export default withCondition(Select);
+export default withConditions(Select);

src/client/components/forms/field-types/Text/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import useFieldType from '../../useFieldType';
-import withCondition from '../../withCondition';
+import withConditions from '../../withConditions';
 import Label from '../../Label';
 import Error from '../../Error';
 
@@ -96,4 +96,4 @@ Text.propTypes = {
   label: PropTypes.string,
 };
 
-export default withCondition(Text);
+export default withConditions(Text);

src/client/components/forms/field-types/Textarea/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import useFieldType from '../../useFieldType';
-import withCondition from '../../withCondition';
+import withConditions from '../../withConditions';
 import Label from '../../Label';
 import Error from '../../Error';
 
@@ -95,4 +95,4 @@ Textarea.propTypes = {
   placeholder: PropTypes.string,
 };
 
-export default withCondition(Textarea);
+export default withConditions(Textarea);

src/client/components/forms/field-types/Upload/index.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import useFieldType from '../../useFieldType';
-import withCondition from '../../withCondition';
+import withConditions from '../../withConditions';
 import UploadMedia from '../../../modules/UploadMedia';
 
 import './index.scss';
@@ -60,4 +60,4 @@ class Media extends Component {
   }
 }
 
-export default withCondition(fieldType(Media, 'media', validate, error));
+export default withConditions(fieldType(Media, 'media', validate, error));

src/client/components/forms/useFieldType/index.js

@@ -14,7 +14,9 @@ const useFieldType = (options) => {
 
   const formContext = useContext(FormContext);
   const { dispatchFields, submitted, processing } = formContext;
-  const mountValue = formContext.fields[name]?.value || null;
+  let mountValue = formContext.fields[name]?.value;
+
+  if (!mountValue && mountValue !== false) mountValue = null;
 
   const sendField = useCallback((valueToSend) => {
     dispatchFields({

src/client/components/forms/withCondition/index.js

@@ -1,54 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import useForm from '../Form/useForm';
-
-const withCondition = (Field) => {
-  const WithCondition = (props) => {
-    const { condition, name } = props;
-    const { fields } = useForm();
-
-    if (condition) {
-      let siblingFields = fields;
-
-      // If this field is nested
-      // We can provide a list of sibling fields
-      if (name.indexOf('.') > 0) {
-        const parentFieldPath = name.substring(0, name.lastIndexOf('.') + 1);
-        siblingFields = Object.keys(fields).reduce((siblings, fieldKey) => {
-          if (fieldKey.indexOf(parentFieldPath) === 0) {
-            return {
-              ...siblings,
-              [fieldKey.replace(parentFieldPath, '')]: fields[fieldKey],
-            };
-          }
-
-          return siblings;
-        }, {});
-      }
-
-      const passesCondition = condition ? condition(fields, siblingFields) : true;
-
-      if (passesCondition) {
-        return <Field {...props} />;
-      }
-
-      return null;
-    }
-
-    return <Field {...props} />;
-  };
-
-  WithCondition.defaultProps = {
-    condition: null,
-  };
-
-  WithCondition.propTypes = {
-    condition: PropTypes.func,
-    name: PropTypes.string.isRequired,
-  };
-
-  return WithCondition;
-};
-
-export default withCondition;

src/client/components/forms/withConditions/index.js

@@ -0,0 +1,112 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import useForm from '../Form/useForm';
+
+const recursiveCheckCondition = (object, siblingFields) => Object.keys(object).every((key) => {
+  if (key.toLowerCase() === 'and') {
+    return object[key].every((andCondition) => {
+      const result = recursiveCheckCondition(andCondition, siblingFields);
+      return result;
+    });
+  }
+
+  if (key.toLowerCase() === 'or') {
+    return object[key].some((orCondition) => {
+      const result = recursiveCheckCondition(orCondition, siblingFields);
+      return result;
+    });
+  }
+
+  if (typeof object[key] === 'object') {
+    return Object.keys(object[key]).every((operator) => {
+      const value = siblingFields?.[key]?.value;
+      const valueToCompare = object[key][operator];
+
+      let result = false;
+
+      if (operator === 'equals') {
+        result = value === valueToCompare;
+      }
+
+      if (operator === 'not_equals') {
+        result = value !== valueToCompare;
+      }
+
+      if (typeof value === 'number') {
+        if (operator === 'greater_than') {
+          result = value > valueToCompare;
+        }
+
+        if (operator === 'greater_than_equals') {
+          result = value >= valueToCompare;
+        }
+
+        if (operator === 'less_than') {
+          result = value < valueToCompare;
+        }
+
+        if (operator === 'less_than_equals') {
+          result = value <= valueToCompare;
+        }
+      }
+
+      return result;
+    });
+  }
+
+  return false;
+});
+
+const withConditions = (Field) => {
+  const WithConditions = (props) => {
+    const { conditions, name } = props;
+    const { fields } = useForm();
+
+    if (conditions) {
+      let siblingFields = fields;
+
+      // If this field is nested
+      // We can provide a list of sibling fields
+      if (name.indexOf('.') > 0) {
+        const parentFieldPath = name.substring(0, name.lastIndexOf('.') + 1);
+        siblingFields = Object.keys(fields).reduce((siblings, fieldKey) => {
+          if (fieldKey.indexOf(parentFieldPath) === 0) {
+            return {
+              ...siblings,
+              [fieldKey.replace(parentFieldPath, '')]: fields[fieldKey],
+            };
+          }
+
+          return siblings;
+        }, {});
+      }
+
+      const passesConditions = recursiveCheckCondition(conditions, siblingFields);
+
+      if (passesConditions) {
+        return <Field {...props} />;
+      }
+
+      return null;
+    }
+
+    return <Field {...props} />;
+  };
+
+  WithConditions.defaultProps = {
+    conditions: null,
+  };
+
+  WithConditions.propTypes = {
+    conditions: PropTypes.oneOfType([
+      PropTypes.shape({}),
+      PropTypes.array,
+    ]),
+    name: PropTypes.string.isRequired,
+  };
+
+  return WithConditions;
+};
+
+export default withConditions;

src/fields/schemaMap.js

@@ -5,7 +5,7 @@ const formatBaseSchema = (field) => {
     hide: field.hidden === 'api' || field.hidden === true,
     localized: field.localized || false,
     unique: field.unique || false,
-    required: (field.required && !field.localized && !field.hidden) || false,
+    required: (field.required && !field.localized && !field.hidden && !field.conditions) || false,
     default: field.defaultValue || undefined,
   };
 };