@react-typed-forms/schemas 11.10.0 → 11.11.0

package/lib/controlRender.d.ts

@@ -1,8 +1,9 @@
 import React, { CSSProperties, FC, Key, ReactElement, ReactNode } from "react";
 import { Control } from "@react-typed-forms/core";
-import { AdornmentPlacement, ControlAdornment, ControlDefinition, DataControlDefinition, DisplayData, FieldOption, GroupRenderOptions, RenderOptions, SchemaField, SchemaInterface } from "./types";
+import { AdornmentPlacement, ControlAdornment, ControlDefinition, DataControlDefinition, DisplayData, FieldOption, GroupRenderOptions, RenderOptions, SchemaField, SchemaInterface, SchemaValidator } from "./types";
 import { ControlDataContext, JsonPath } from "./util";
 import { EvalExpressionHook, UseEvalExpressionHook } from "./hooks";
+import { ValidationContext } from "./validators";
 export interface FormRenderer {
     renderData: (props: DataRendererProps) => (layout: ControlLayoutProps) => ControlLayoutProps;
     renderGroup: (props: GroupRendererProps) => (layout: ControlLayoutProps) => ControlLayoutProps;
@@ -155,6 +156,7 @@ export type CreateDataProps = (controlProps: DataControlProps) => DataRendererPr
 export interface ControlRenderOptions extends FormContextOptions {
     useDataHook?: (c: ControlDefinition) => CreateDataProps;
     actionOnClick?: (actionId: string, actionData: any) => () => void;
+    useValidationHook?: (validator: SchemaValidator, ctx: ValidationContext) => void;
     useEvalExpressionHook?: UseEvalExpressionHook;
     clearHidden?: boolean;
     schemaInterface?: SchemaInterface;

package/lib/index.js

@@ -24,6 +24,12 @@ exports.FieldType = void 0;
   FieldType["Image"] = "Image";
   FieldType["Any"] = "Any";
 })(exports.FieldType || (exports.FieldType = {}));
+exports.ValidationMessageType = void 0;
+(function (ValidationMessageType) {
+  ValidationMessageType["NotEmpty"] = "NotEmpty";
+  ValidationMessageType["MinLength"] = "MinLength";
+  ValidationMessageType["MaxLength"] = "MaxLength";
+})(exports.ValidationMessageType || (exports.ValidationMessageType = {}));
 exports.ControlDefinitionType = void 0;
 (function (ControlDefinitionType) {
   ControlDefinitionType["Data"] = "Data";
@@ -611,21 +617,25 @@ function makeHook(runHook, state, deps) {
     runHook: runHook
   };
 }
+function makeHookDepString(deps, asHookDep) {
+  return deps.map(function (x) {
+    return toDepString(asHookDep(x));
+  }).join(",");
+}
 function useDynamicHooks(hooks) {
   var hookEntries = Object.entries(hooks);
-  var deps = hookEntries.map(function (_ref2) {
-    var x = _ref2[1];
-    return toDepString(x.deps);
-  }).join(",");
+  var deps = makeHookDepString(hookEntries, function (x) {
+    return x[1].deps;
+  });
   var ref = React.useRef({});
   var s = ref.current;
   hookEntries.forEach(function (x) {
     return s[x[0]] = x[1].state;
   });
   return React.useCallback(function (p) {
-    return Object.fromEntries(hookEntries.map(function (_ref3) {
-      var f = _ref3[0],
-        hg = _ref3[1];
+    return Object.fromEntries(hookEntries.map(function (_ref2) {
+      var f = _ref2[0],
+        hg = _ref2[1];
       return [f, hg.runHook(p, ref.current[f])];
     }));
   }, [deps]);
@@ -1179,73 +1189,97 @@ function makeDynamicPropertyHook(dynamicValue, makeDefault, state, deps) {
   };
 }
 
-function useValidationHook(definition, field) {
-  var _definition$validator, _definition$validator2;
-  var validatorTypes = isDataControlDefinition(definition) ? (_definition$validator = (_definition$validator2 = definition.validators) == null ? void 0 : _definition$validator2.map(function (x) {
+function useMakeValidationHook(definition, field, useValidatorFor) {
+  var _dd$validators;
+  if (useValidatorFor === void 0) {
+    useValidatorFor = useDefaultValidator;
+  }
+  var dd = field && isDataControlDefinition(definition) ? definition : undefined;
+  var refData = useUpdatedRef({
+    dd: dd,
+    field: field,
+    useValidatorFor: useValidatorFor
+  });
+  var depString = makeHookDepString((_dd$validators = dd == null ? void 0 : dd.validators) != null ? _dd$validators : [], function (x) {
     return x.type;
-  })) != null ? _definition$validator : [] : null;
-  var r = useUpdatedRef({
-    definition: definition,
-    field: field
   });
-  return React.useCallback(function (control, hidden, groupContext, schemaInterface) {
-    var _dd$validators;
-    if (!validatorTypes) return;
-    var _r$current = r.current,
-      dd = _r$current.definition,
-      field = _r$current.field;
+  return React.useCallback(function (ctx) {
+    var _dd$validators2;
+    var _refData$current = refData.current,
+      dd = _refData$current.dd,
+      field = _refData$current.field;
+    if (!dd || !field) return;
+    var control = ctx.control,
+      hiddenControl = ctx.hiddenControl,
+      schemaInterface = ctx.dataContext.schemaInterface;
     core.useValueChangeEffect(control, function () {
       return control.setError("default", "");
     });
     core.useValidator(control, function (v) {
-      return !hidden && dd.required && field && schemaInterface.isEmptyValue(field, v) ? "Please enter a value" : null;
-    }, "required", undefined, [hidden, dd.required, !!field]);
-    ((_dd$validators = dd.validators) != null ? _dd$validators : []).forEach(function (x, i) {
-      switch (x.type) {
-        case exports.ValidatorType.Length:
-          var lv = x;
-          core.useControlEffect(function () {
-            core.trackControlChange(control, core.ControlChange.Validate);
-            return [field ? schemaInterface.controlLength(field, control) : 0, hidden];
-          }, function (_ref) {
-            var len = _ref[0],
-              hidden = _ref[1];
-            if (hidden) {
-              control.setError("length", undefined);
-              return;
-            }
-            if (lv.min != null && len < lv.min) {
-              if (field != null && field.collection) {
-                control.setValue(function (v) {
-                  return Array.isArray(v) ? v.concat(Array.from({
-                    length: lv.min - v.length
-                  })) : Array.from({
-                    length: lv.min
-                  });
-                });
-              } else {
-                control.setError("length", "Length must be at least " + lv.min);
-              }
-            } else if (lv.max != null && len > lv.max) {
-              control.setError("length", "Length must be less than " + lv.max);
-            }
-          }, true);
-          break;
-        case exports.ValidatorType.Jsonata:
-          return useJsonataValidator(control, groupContext, x, hidden, i);
-        case exports.ValidatorType.Date:
-          return useDateValidator(control, x, i);
-      }
+      return !hiddenControl.value && dd.required && schemaInterface.isEmptyValue(field, v) ? schemaInterface.validationMessageText(field, exports.ValidationMessageType.NotEmpty, false, true) : null;
+    }, "required", undefined, [dd.required]);
+    (_dd$validators2 = dd.validators) == null || _dd$validators2.forEach(function (v, i) {
+      return useValidatorFor(v, _extends({}, ctx, {
+        index: i,
+        field: field,
+        definition: dd
+      }));
     });
-  }, validatorTypes ? validatorTypes : [null]);
-}
-function useJsonataValidator(control, context, expr, hidden, i) {
-  var errorMsg = useJsonataExpression(expr.expression, context);
-  core.useValidator(control, function () {
-    return !hidden ? errorMsg.value : null;
-  }, "jsonata" + i);
+  }, [!!dd, depString, useValidatorFor]);
+}
+function useDefaultValidator(validator, ctx) {
+  switch (validator.type) {
+    case exports.ValidatorType.Length:
+      useLengthValidator(validator, ctx);
+      break;
+    case exports.ValidatorType.Jsonata:
+      useJsonataValidator(validator, ctx);
+      break;
+    case exports.ValidatorType.Date:
+      useDateValidator(validator, ctx);
+      break;
+  }
+}
+function useJsonataValidator(validator, ctx) {
+  var errorMsg = useJsonataExpression(validator.expression, ctx.dataContext);
+  core.useValidator(ctx.control, function () {
+    return !ctx.hiddenControl.value ? errorMsg.value : null;
+  }, "jsonata" + ctx.index);
+}
+function useLengthValidator(lv, ctx) {
+  var control = ctx.control,
+    schemaInterface = ctx.dataContext.schemaInterface,
+    hiddenControl = ctx.hiddenControl,
+    field = ctx.field;
+  core.useValidator(control, function (v) {
+    var len = schemaInterface.controlLength(field, control);
+    var hidden = hiddenControl.value;
+    if (hidden) {
+      return undefined;
+    }
+    if (lv.min != null && len < lv.min) {
+      if (field != null && field.collection) {
+        control.setValue(function (v) {
+          return Array.isArray(v) ? v.concat(Array.from({
+            length: lv.min - v.length
+          })) : Array.from({
+            length: lv.min
+          });
+        });
+      } else {
+        return schemaInterface.validationMessageText(field, exports.ValidationMessageType.MinLength, len, lv.min);
+      }
+    } else if (lv.max != null && len > lv.max) {
+      return schemaInterface.validationMessageText(field, exports.ValidationMessageType.MaxLength, len, lv.max);
+    }
+    return undefined;
+  }, "length" + ctx.index);
 }
-function useDateValidator(control, dv, i) {
+function useDateValidator(dv, ctx) {
+  var control = ctx.control,
+    field = ctx.field,
+    index = ctx.index,
+    schemaInterface = ctx.dataContext.schemaInterface;
   var comparisonDate;
   if (dv.fixedDate) {
     comparisonDate = Date.parse(dv.fixedDate);
@@ -1258,14 +1292,14 @@ function useDateValidator(control, dv, i) {
   }
   core.useValidator(control, function (v) {
     if (v) {
-      var selDate = Date.parse(v);
+      var selDate = schemaInterface.parseToMillis(field, v);
       var notAfter = dv.comparison === exports.DateComparison.NotAfter;
       if (notAfter ? selDate > comparisonDate : selDate < comparisonDate) {
         return "Date must not be " + (notAfter ? "after" : "before") + " " + new Date(comparisonDate).toDateString();
       }
     }
     return null;
-  }, "date" + i);
+  }, "date" + index);
 }
 
 function cc(n) {
@@ -1281,6 +1315,21 @@ var DefaultSchemaInterface = /*#__PURE__*/function () {
     this.boolStrings = boolStrings;
   }
   var _proto = DefaultSchemaInterface.prototype;
+  _proto.parseToMillis = function parseToMillis(field, v) {
+    return Date.parse(v);
+  };
+  _proto.validationMessageText = function validationMessageText(field, messageType, actual, expected) {
+    switch (messageType) {
+      case exports.ValidationMessageType.NotEmpty:
+        return "Please enter a value";
+      case exports.ValidationMessageType.MinLength:
+        return "Length must be at least " + expected;
+      case exports.ValidationMessageType.MaxLength:
+        return "Length must be less than " + expected;
+      default:
+        return "Unknown error";
+    }
+  };
   _proto.getOptions = function getOptions(_ref) {
     var options = _ref.options;
     return options && options.length > 0 ? options : null;
@@ -1338,6 +1387,7 @@ function useControlRenderer(definition, fields, renderer, options) {
   var useExpr = (_options$useEvalExpre = options.useEvalExpressionHook) != null ? _options$useEvalExpre : defaultUseEvalExpressionHook;
   var fieldPath = lookupSchemaField(definition, fields);
   var schemaField = fieldPath == null ? void 0 : fieldPath.at(-1);
+  var useValidation = useMakeValidationHook(definition, schemaField, options.useValidationHook);
   var dynamicHooks = useDynamicHooks({
     defaultValueControl: useEvalDefaultValueHook(useExpr, definition, schemaField, elementIndex != null),
     visibleControl: useEvalVisibilityHook(useExpr, definition, fieldPath),
@@ -1350,7 +1400,6 @@ function useControlRenderer(definition, fields, renderer, options) {
     layoutStyle: useEvalStyleHook(useExpr, exports.DynamicPropertyType.LayoutStyle, definition),
     displayControl: useEvalDisplayHook(useExpr, definition)
   });
-  var useValidation = useValidationHook(definition, schemaField);
   var r = useUpdatedRef({
     options: options,
     definition: definition,
@@ -1438,15 +1487,20 @@ function useControlRenderer(definition, fields, renderer, options) {
           }
         }
       }, true);
-      var myOptions = core.useCalculatedControl(function () {
+      var myOptionsControl = core.useCalculatedControl(function () {
         var _visibility$fields;
         return {
           hidden: _options.hidden || !((_visibility$fields = visibility.fields) != null && _visibility$fields.showing.value),
           readonly: _options.readonly || readonlyControl.value,
           disabled: _options.disabled || disabledControl.value
         };
-      }).value;
-      useValidation(control != null ? control : core.newControl(null), !!myOptions.hidden, parentDataContext, schemaInterface);
+      });
+      var myOptions = core.trackedValue(myOptionsControl);
+      useValidation({
+        control: control != null ? control : core.newControl(null),
+        hiddenControl: myOptionsControl.fields.hidden,
+        dataContext: parentDataContext
+      });
       var childOptions = _extends({}, _options, myOptions, {
         elementIndex: undefined
       });
@@ -1591,7 +1645,8 @@ function defaultDataProps(_ref4) {
   var className = cc(definition.styleClass);
   var required = !!definition.required;
   var fieldOptions = schemaInterface.getOptions(field);
-  var allowed = (_allowedOptions$value = allowedOptions == null ? void 0 : allowedOptions.value) != null ? _allowedOptions$value : [];
+  var _allowed = (_allowedOptions$value = allowedOptions == null ? void 0 : allowedOptions.value) != null ? _allowedOptions$value : [];
+  var allowed = Array.isArray(_allowed) ? _allowed : [_allowed];
   return _extends({
     definition: definition,
     childDefinitions: (_definition$children = definition.children) != null ? _definition$children : [],
@@ -3019,6 +3074,7 @@ exports.lookupSchemaField = lookupSchemaField;
 exports.makeCompoundField = makeCompoundField;
 exports.makeEvalExpressionHook = makeEvalExpressionHook;
 exports.makeHook = makeHook;
+exports.makeHookDepString = makeHookDepString;
 exports.makeScalarField = makeScalarField;
 exports.matchesType = matchesType;
 exports.mergeField = mergeField;
@@ -3035,6 +3091,7 @@ exports.timeField = timeField;
 exports.toDepString = toDepString;
 exports.useControlDefinitionForSchema = useControlDefinitionForSchema;
 exports.useControlRenderer = useControlRenderer;
+exports.useDateValidator = useDateValidator;
 exports.useDynamicHooks = useDynamicHooks;
 exports.useEvalActionHook = useEvalActionHook;
 exports.useEvalAllowedOptionsHook = useEvalAllowedOptionsHook;
@@ -3048,8 +3105,10 @@ exports.useEvalReadonlyHook = useEvalReadonlyHook;
 exports.useEvalStyleHook = useEvalStyleHook;
 exports.useEvalVisibilityHook = useEvalVisibilityHook;
 exports.useJsonataExpression = useJsonataExpression;
+exports.useJsonataValidator = useJsonataValidator;
+exports.useLengthValidator = useLengthValidator;
+exports.useMakeValidationHook = useMakeValidationHook;
 exports.useUpdatedRef = useUpdatedRef;
-exports.useValidationHook = useValidationHook;
 exports.visitControlData = visitControlData;
 exports.visitControlDataArray = visitControlDataArray;
 exports.visitControlDefinition = visitControlDefinition;