chore: conditionals

Author: brennj

src/calculateConditionalProperties.js

@@ -4,6 +4,7 @@ import omit from 'lodash/omit';
 import { extractParametersFromNode } from './helpers';
 import { supportedTypes } from './internals/fields';
 import { getFieldDescription, pickXKey } from './internals/helpers';
+import { calculateComputedAttributes } from './jsonLogic';
 import { buildYupSchema } from './yupSchema';
 /**
  * @typedef {import('./createHeadlessForm').FieldParameters} FieldParameters
@@ -69,14 +70,14 @@ function rebuildFieldset(fields, property) {
  * @param {FieldParameters} fieldParams - field parameters
  * @returns {Function}
  */
-export function calculateConditionalProperties(fieldParams, customProperties) {
+export function calculateConditionalProperties(fieldParams, customProperties, validations, config) {
   /**
    * Runs dynamic property calculation on a field based on a conditional that has been calculated
    * @param {Boolean} isRequired - if the field is required
    * @param {Object} conditionBranch - condition branch being applied
    * @returns {Object} updated field parameters
    */
-  return (isRequired, conditionBranch) => {
+  return (isRequired, conditionBranch, __, _, formValues) => {
     // Check if the current field is conditionally declared in the schema
 
     const conditionalProperty = conditionBranch?.properties?.[fieldParams.name];
@@ -98,17 +99,37 @@ export function calculateConditionalProperties(fieldParams, customProperties) {
         newFieldParams.fields = fieldSetFields;
       }
 
+      const { computedAttributes, ...restNewFieldParams } = newFieldParams;
+      const calculatedComputedAttributes = computedAttributes
+        ? calculateComputedAttributes(newFieldParams, config)({ validations, formValues })
+        : {};
+
+      const requiredValidations = [
+        ...(fieldParams.requiredValidations ?? []),
+        ...(restNewFieldParams.requiredValidations ?? []),
+      ];
+
       const base = {
         isVisible: true,
         required: isRequired,
         ...(presentation?.inputType && { type: presentation.inputType }),
-        schema: buildYupSchema({
-          ...fieldParams,
-          ...newFieldParams,
-          // If there are inner fields (case of fieldset) they need to be updated based on the condition
-          fields: fieldSetFields,
-          required: isRequired,
-        }),
+        ...calculatedComputedAttributes,
+        ...(calculatedComputedAttributes.value
+          ? { value: calculatedComputedAttributes.value }
+          : { value: undefined }),
+        schema: buildYupSchema(
+          {
+            ...fieldParams,
+            ...restNewFieldParams,
+            ...calculatedComputedAttributes,
+            requiredValidations,
+            // If there are inner fields (case of fieldset) they need to be updated based on the condition
+            fields: fieldSetFields,
+            required: isRequired,
+          },
+          config,
+          validations
+        ),
       };
 
       return omit(merge(base, presentation, newFieldParams), ['inputType']);

src/checkIfConditionMatches.js

@@ -7,8 +7,8 @@ import { hasProperty } from './utils';
  * @param {Object} formValues - form state
  * @returns {Boolean}
  */
-export function checkIfConditionMatches(node, formValues, formFields) {
-  return Object.keys(node.if.properties).every((name) => {
+export function checkIfConditionMatches(node, formValues, formFields, validations) {
+  return Object.keys(node.if.properties ?? {}).every((name) => {
     const currentProperty = node.if.properties[name];
     const value = formValues[name];
     const hasEmptyValue =
@@ -50,7 +50,8 @@ export function checkIfConditionMatches(node, formValues, formFields) {
       return checkIfConditionMatches(
         { if: currentProperty },
         formValues[name],
-        getField(name, formFields).fields
+        getField(name, formFields).fields,
+        validations
       );
     }
 
@@ -68,3 +69,30 @@ export function checkIfConditionMatches(node, formValues, formFields) {
     );
   });
 }
+
+export function checkIfMatchesValidationsAndComputedValues(
+  node,
+  formValues,
+  validations,
+  parentID
+) {
+  const validationsMatch = Object.entries(node.if.validations ?? {}).every(([name, property]) => {
+    const currentValue = validations
+      .getScope(parentID)
+      .evaluateValidationRuleInCondition(name, formValues);
+    if (Object.hasOwn(property, 'const') && currentValue === property.const) return true;
+    return false;
+  });
+
+  const computedValuesMatch = Object.entries(node.if.computedValues ?? {}).every(
+    ([name, property]) => {
+      const currentValue = validations
+        .getScope(parentID)
+        .evaluateComputedValueRuleInCondition(name, formValues);
+      if (Object.hasOwn(property, 'const') && currentValue === property.const) return true;
+      return false;
+    }
+  );
+
+  return computedValuesMatch && validationsMatch;
+}

src/createHeadlessForm.js

@@ -100,17 +100,22 @@ function removeInvalidAttributes(fields) {
  *
  * @returns {FieldParameters}
  */
-function buildFieldParameters(name, fieldProperties, required = [], config = {}) {
+function buildFieldParameters(name, fieldProperties, required = [], config = {}, validations) {
   const { position } = pickXKey(fieldProperties, 'presentation') ?? {};
   let fields;
 
   const inputType = getInputType(fieldProperties, config.strictInputType, name);
 
   if (inputType === supportedTypes.FIELDSET) {
     // eslint-disable-next-line no-use-before-define
-    fields = getFieldsFromJSONSchema(fieldProperties, {
-      customProperties: get(config, `customProperties.${name}`, {}),
-    });
+    fields = getFieldsFromJSONSchema(
+      fieldProperties,
+      {
+        customProperties: get(config, `customProperties.${name}`, {}),
+        parentID: name,
+      },
+      validations
+    );
   }
 
   const result = {
@@ -137,15 +142,16 @@ function buildFieldParameters(name, fieldProperties, required = [], config = {})
  */
 function convertJSONSchemaPropertiesToFieldParameters(
   { properties, required, 'x-jsf-order': order },
-  config = {}
+  config = {},
+  validations
 ) {
   const sortFields = (a, b) => sortByOrderOrPosition(a, b, order);
 
   // Gather fields represented at the root of the node , sort them by
   // their position and then remove the position property (since it's no longer needed)
   return Object.entries(properties)
     .filter(([, value]) => typeof value === 'object')
-    .map(([key, value]) => buildFieldParameters(key, value, required, config))
+    .map(([key, value]) => buildFieldParameters(key, value, required, config, validations))
     .sort(sortFields)
     .map(({ position, ...fieldParams }) => fieldParams);
 }
@@ -233,7 +239,8 @@ function buildField(fieldParams, config, scopedJsonSchema, validations) {
 
   const yupSchema = buildYupSchema(fieldParams, config, validations);
   const calculateConditionalFieldsClosure =
-    fieldParams.isDynamic && calculateConditionalProperties(fieldParams, customProperties);
+    fieldParams.isDynamic &&
+    calculateConditionalProperties(fieldParams, customProperties, validations, config);
 
   const calculateCustomValidationPropertiesClosure = calculateCustomValidationProperties(
     fieldParams,
@@ -283,7 +290,11 @@ function getFieldsFromJSONSchema(scopedJsonSchema, config, validations) {
     return [];
   }
 
-  const fieldParamsList = convertJSONSchemaPropertiesToFieldParameters(scopedJsonSchema, config);
+  const fieldParamsList = convertJSONSchemaPropertiesToFieldParameters(
+    scopedJsonSchema,
+    config,
+    validations
+  );
 
   applyFieldsDependencies(fieldParamsList, scopedJsonSchema);
 

src/helpers.js

@@ -8,6 +8,7 @@ import { lazy } from 'yup';
 import { checkIfConditionMatches } from './checkIfConditionMatches';
 import { supportedTypes, getInputType } from './internals/fields';
 import { pickXKey } from './internals/helpers';
+import { processJSONLogicNode } from './jsonLogic';
 import { containsHTML, hasProperty, wrapWithSpan } from './utils';
 import { buildCompleteYupSchema, buildYupSchema } from './yupSchema';
 
@@ -230,7 +231,13 @@ function updateField(field, requiredFields, node, formValues, validations, confi
 
   // If field has a calculateConditionalProperties closure, run it and update the field properties
   if (field.calculateConditionalProperties) {
-    const newFieldValues = field.calculateConditionalProperties(fieldIsRequired, node);
+    const newFieldValues = field.calculateConditionalProperties(
+      fieldIsRequired,
+      node,
+      validations,
+      config,
+      formValues
+    );
     updateValues(newFieldValues);
   }
 
@@ -284,7 +291,7 @@ export function processNode({
   });
 
   if (node.if) {
-    const matchesCondition = checkIfConditionMatches(node, formValues, formFields);
+    const matchesCondition = checkIfConditionMatches(node, formValues, formFields, validations);
     // BUG HERE (unreleated) - what if it matches but doesn't has a then,
     // it should do nothing, but instead it jumps to node.else when it shouldn't.
     if (matchesCondition && node.then) {
@@ -358,6 +365,18 @@ export function processNode({
     });
   }
 
+  if (node['x-jsf-logic']) {
+    const { required: requiredFromLogic } = processJSONLogicNode({
+      node: node['x-jsf-logic'],
+      formValues,
+      formFields,
+      accRequired: requiredFields,
+      parentID,
+      validations,
+    });
+    requiredFromLogic.forEach((field) => requiredFields.add(field));
+  }
+
   return {
     required: requiredFields,
   };
@@ -475,6 +494,9 @@ export function extractParametersFromNode(schemaNode) {
 
   return omitBy(
     {
+      const: node.const,
+      // This is a "forced value" when both const and default are present.
+      ...(node.const && node.default ? { value: node.const } : {}),
       label: node.title,
       readOnly: node.readOnly,
       ...(node.deprecated && {
@@ -572,7 +594,7 @@ export function yupToFormErrors(yupError) {
 export const handleValuesChange = (fields, jsonSchema, config, validations) => (values) => {
   updateFieldsProperties(fields, values, jsonSchema, validations);
 
-  const lazySchema = lazy(() => buildCompleteYupSchema(fields, config));
+  const lazySchema = lazy(() => buildCompleteYupSchema(fields, config, validations));
   let errors;
 
   try {

src/jsonLogic.js

@@ -1,5 +1,10 @@
 import jsonLogic from 'json-logic-js';
 
+import {
+  checkIfConditionMatches,
+  checkIfMatchesValidationsAndComputedValues,
+} from './checkIfConditionMatches';
+import { processNode } from './helpers';
 import { buildYupSchema } from './yupSchema';
 
 /**
@@ -249,6 +254,67 @@ function handleNestedObjectForComputedValues(values, formValues, parentID, valid
   );
 }
 
+export function processJSONLogicNode({
+  node,
+  formFields,
+  formValues,
+  accRequired,
+  parentID,
+  validations,
+}) {
+  const requiredFields = new Set(accRequired);
+
+  if (node.allOf) {
+    node.allOf
+      .map((allOfNode) =>
+        processJSONLogicNode({ node: allOfNode, formValues, formFields, validations, parentID })
+      )
+      .forEach(({ required: allOfItemRequired }) => {
+        allOfItemRequired.forEach(requiredFields.add, requiredFields);
+      });
+  }
+
+  if (node.if) {
+    const matchesPropertyCondition = checkIfConditionMatches(
+      node,
+      formValues,
+      formFields,
+      validations
+    );
+    const matchesValidationsAndComputedValues = checkIfMatchesValidationsAndComputedValues(
+      node,
+      formValues,
+      validations,
+      parentID
+    );
+
+    const isConditionMatch = matchesPropertyCondition && matchesValidationsAndComputedValues;
+
+    if (isConditionMatch && node.then) {
+      const { required: branchRequired } = processNode({
+        node: node.then,
+        formValues,
+        formFields,
+        accRequired,
+        validations,
+      });
+      branchRequired.forEach((field) => requiredFields.add(field));
+    }
+    if (!isConditionMatch && node.else) {
+      const { required: branchRequired } = processNode({
+        node: node.else,
+        formValues,
+        formFields,
+        accRequired: requiredFields,
+        validations,
+      });
+      branchRequired.forEach((field) => requiredFields.add(field));
+    }
+  }
+
+  return { required: requiredFields };
+}
+
 function buildSampleEmptyObject(schema = {}) {
   const sample = {};
   if (typeof schema !== 'object' || !schema.properties) {