@react-typed-forms/schemas 11.14.1 → 11.16.0

package/lib/components/DefaultArrayRenderer.d.ts

@@ -1,6 +1,7 @@
-import { ArrayRendererRegistration } from "../renderers";
+import { ArrayRendererRegistration, DataRendererRegistration } from "../renderers";
 import { ActionRendererProps, ArrayRendererProps } from "../controlRender";
 import React, { ReactNode } from "react";
+export declare function createDefaultArrayDataRenderer(): DataRendererRegistration;
 export interface DefaultArrayRendererOptions {
     className?: string;
     removableClass?: string;

package/lib/controlRender.d.ts

@@ -1,4 +1,4 @@
-import React, { CSSProperties, FC, Key, ReactElement, ReactNode } from "react";
+import React, { FC, Key, ReactElement, ReactNode } from "react";
 import { Control } from "@react-typed-forms/core";
 import { AdornmentPlacement, ControlAdornment, ControlDefinition, DataControlDefinition, DisplayData, FieldOption, GroupRenderOptions, RenderOptions, SchemaField, SchemaInterface, SchemaValidator } from "./types";
 import { ControlDataContext, JsonPath } from "./util";
@@ -18,6 +18,9 @@ export interface FormRenderer {
 }
 export interface AdornmentProps {
     adornment: ControlAdornment;
+    dataContext?: ControlDataContext;
+    parentContext: ControlDataContext;
+    useExpr?: UseEvalExpressionHook;
     designMode?: boolean;
 }
 export declare const AppendAdornmentPriority = 0;
@@ -118,7 +121,6 @@ export interface DataRendererProps extends ParentRendererProps {
     required: boolean;
     options: FieldOption[] | undefined | null;
     hidden: boolean;
-    toArrayProps?: () => ArrayRendererProps;
 }
 export interface ActionRendererProps {
     actionId: string;
@@ -175,7 +177,6 @@ export declare function ControlRenderer({ definition, fields, renderer, options,
     parentPath?: JsonPath[];
 }): React.JSX.Element;
 export declare function defaultDataProps({ definition, field, control, formOptions, style, allowedOptions, schemaInterface, ...props }: DataControlProps): DataRendererProps;
-export declare function defaultArrayProps(arrayControl: Control<any[] | undefined | null>, field: SchemaField, required: boolean, style: CSSProperties | undefined, className: string | undefined, renderElement: (elemIndex: number) => ReactNode, min: number | undefined | null, max: number | undefined | null): ArrayRendererProps;
 export interface ChildRendererOptions {
     elementIndex?: number;
     dataContext?: ControlDataContext;

package/lib/index.js

@@ -75,6 +75,7 @@ exports.ControlAdornmentType = void 0;
   ControlAdornmentType["Accordion"] = "Accordion";
   ControlAdornmentType["HelpText"] = "HelpText";
   ControlAdornmentType["Icon"] = "Icon";
+  ControlAdornmentType["SetField"] = "SetField";
 })(exports.ControlAdornmentType || (exports.ControlAdornmentType = {}));
 exports.DataRenderType = void 0;
 (function (DataRenderType) {
@@ -94,6 +95,7 @@ exports.DataRenderType = void 0;
   DataRenderType["Group"] = "Group";
   DataRenderType["NullToggle"] = "NullToggle";
   DataRenderType["Jsonata"] = "Jsonata";
+  DataRenderType["Array"] = "Array";
 })(exports.DataRenderType || (exports.DataRenderType = {}));
 exports.SyncTextType = void 0;
 (function (SyncTextType) {
@@ -167,6 +169,9 @@ function isTextfieldRenderer(options) {
 function isDataGroupRenderer(options) {
   return options.type === exports.DataRenderType.Group;
 }
+function isArrayRenderer(options) {
+  return options.type === exports.DataRenderType.Array;
+}
 
 function _arrayLikeToArray(r, a) {
   (null == a || a > r.length) && (a = r.length);
@@ -1570,7 +1575,10 @@ function useControlRenderer(definition, fields, renderer, options) {
       if (parentControl.isNull) return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null);
       var adornments = (_definition$adornment = (_definition$adornment2 = definition.adornments) == null ? void 0 : _definition$adornment2.map(function (x) {
         return renderer.renderAdornment({
-          adornment: x
+          adornment: x,
+          dataContext: controlDataContext,
+          parentContext: parentDataContext,
+          useExpr: useExpr
         });
       })) != null ? _definition$adornment : [];
       var labelAndChildren = renderControlLayout({
@@ -1690,7 +1698,7 @@ function ControlRenderer(_ref3) {
   }
 }
 function defaultDataProps(_ref4) {
-  var _definition$validator, _allowedOptions$value, _definition$children, _definition$renderOpt2;
+  var _allowedOptions$value, _definition$children, _definition$renderOpt2;
   var definition = _ref4.definition,
     field = _ref4.field,
     control = _ref4.control,
@@ -1700,9 +1708,6 @@ function defaultDataProps(_ref4) {
     _ref4$schemaInterface = _ref4.schemaInterface,
     schemaInterface = _ref4$schemaInterface === void 0 ? defaultSchemaInterface : _ref4$schemaInterface,
     props = _objectWithoutPropertiesLoose(_ref4, _excluded$4);
-  var lengthVal = (_definition$validator = definition.validators) == null ? void 0 : _definition$validator.find(function (x) {
-    return x.type === exports.ValidatorType.Length;
-  });
   var className = cc(definition.styleClass);
   var required = !!definition.required;
   var fieldOptions = schemaInterface.getOptions(field);
@@ -1731,53 +1736,7 @@ function defaultDataProps(_ref4) {
     hidden: !!formOptions.hidden,
     className: className,
     style: style
-  }, props, {
-    toArrayProps: field.collection && props.elementIndex == null ? function () {
-      return defaultArrayProps(control, field, required, style, className, function (elementIndex) {
-        var _control$elements$ele, _control$elements;
-        return props.renderChild((_control$elements$ele = (_control$elements = control.elements) == null ? void 0 : _control$elements[elementIndex].uniqueId) != null ? _control$elements$ele : elementIndex, {
-          type: exports.ControlDefinitionType.Data,
-          field: definition.field,
-          children: definition.children,
-          hideTitle: true
-        }, {
-          elementIndex: elementIndex,
-          dataContext: props.parentContext
-        });
-      }, lengthVal == null ? void 0 : lengthVal.min, lengthVal == null ? void 0 : lengthVal.max);
-    } : undefined
-  });
-}
-function defaultArrayProps(arrayControl, field, required, style, className, _renderElement, min, max) {
-  var _field$displayName;
-  var noun = (_field$displayName = field.displayName) != null ? _field$displayName : field.field;
-  return {
-    arrayControl: arrayControl,
-    required: required,
-    addAction: {
-      actionId: "add",
-      actionText: "Add " + noun,
-      onClick: function onClick() {
-        return core.addElement(arrayControl, elementValueForField(field));
-      }
-    },
-    removeAction: function removeAction(i) {
-      return {
-        actionId: "",
-        actionText: "Remove",
-        onClick: function onClick() {
-          return core.removeElement(arrayControl, i);
-        }
-      };
-    },
-    renderElement: function renderElement(i) {
-      return _renderElement(i);
-    },
-    className: cc(className),
-    style: style,
-    min: min,
-    max: max
-  };
+  }, props);
 }
 function renderControlLayout(props) {
   var c = props.definition,
@@ -1977,6 +1936,9 @@ function isIconAdornment(a) {
 function isAccordionAdornment(a) {
   return a.type === exports.ControlAdornmentType.Accordion;
 }
+function isSetFieldAdornment(a) {
+  return a.type === exports.ControlAdornmentType.SetField;
+}
 function createLayoutRenderer(render, options) {
   return _extends({
     type: "layout",
@@ -2377,10 +2339,74 @@ function createInputConversion(ft) {
   }
 }
 
+function createDefaultArrayDataRenderer() {
+  return createDataRenderer(function (_ref, renderers) {
+    var _definition$validator, _field$displayName;
+    var definition = _ref.definition,
+      control = _ref.control,
+      required = _ref.required,
+      field = _ref.field,
+      renderChild = _ref.renderChild,
+      parentContext = _ref.parentContext,
+      className = _ref.className,
+      style = _ref.style,
+      renderOptions = _ref.renderOptions;
+    var lengthVal = (_definition$validator = definition.validators) == null ? void 0 : _definition$validator.find(function (x) {
+      return x.type === exports.ValidatorType.Length;
+    });
+    var _ref2 = isArrayRenderer(renderOptions) ? renderOptions : {},
+      addText = _ref2.addText,
+      noAdd = _ref2.noAdd,
+      noRemove = _ref2.noRemove,
+      removeText = _ref2.removeText;
+    var childOptions = isArrayRenderer(renderOptions) ? renderOptions.childOptions : undefined;
+    var noun = (_field$displayName = field.displayName) != null ? _field$displayName : field.field;
+    var arrayProps = {
+      arrayControl: control,
+      required: required,
+      addAction: !noAdd ? {
+        actionId: "add",
+        actionText: addText ? addText : "Add " + noun,
+        onClick: function onClick() {
+          return core.addElement(control, elementValueForField(field));
+        }
+      } : undefined,
+      removeAction: !noRemove ? function (i) {
+        return {
+          actionId: "",
+          actionText: removeText ? removeText : "Remove",
+          onClick: function onClick() {
+            return core.removeElement(control, i);
+          }
+        };
+      } : undefined,
+      renderElement: function renderElement(i) {
+        var _control$elements$i$u, _control$elements;
+        return renderChild((_control$elements$i$u = (_control$elements = control.elements) == null ? void 0 : _control$elements[i].uniqueId) != null ? _control$elements$i$u : i, {
+          type: exports.ControlDefinitionType.Data,
+          field: definition.field,
+          children: definition.children,
+          renderOptions: childOptions != null ? childOptions : {
+            type: exports.DataRenderType.Standard
+          },
+          hideTitle: true
+        }, {
+          elementIndex: i,
+          dataContext: parentContext
+        });
+      },
+      className: cc(className),
+      style: style,
+      min: lengthVal == null ? void 0 : lengthVal.min,
+      max: lengthVal == null ? void 0 : lengthVal.max
+    };
+    return renderers.renderArray(arrayProps);
+  });
+}
 function createDefaultArrayRenderer(options) {
   return {
-    render: function render(props, _ref) {
-      var renderAction = _ref.renderAction;
+    render: function render(props, _ref3) {
+      var renderAction = _ref3.renderAction;
       return /*#__PURE__*/React__default["default"].createElement(DefaultArrayRenderer, _extends({}, props, options, {
         renderAction: renderAction
       }));
@@ -2833,17 +2859,13 @@ function createDefaultDataRenderer(options) {
     booleanOptions = _optionRenderer$boole.booleanOptions,
     optionRenderer = _optionRenderer$boole.optionRenderer,
     displayOnlyClass = _optionRenderer$boole.displayOnlyClass;
+  var arrayRenderer = createDefaultArrayDataRenderer();
   return createDataRenderer(function (props, renderers) {
-    var fieldType = props.field.type;
+    var field = props.field;
+    var fieldType = field.type;
     var renderOptions = props.renderOptions;
+    if (field.collection && props.elementIndex == null) return arrayRenderer.render(props, renderers);
     var renderType = renderOptions.type;
-    if (props.toArrayProps && renderType !== exports.DataRenderType.CheckList) {
-      return function (p) {
-        return _extends({}, p, {
-          children: renderers.renderArray(props.toArrayProps())
-        });
-      };
-    }
     if (fieldType === exports.FieldType.Compound) {
       var _ref5;
       var groupOptions = (_ref5 = isDataGroupRenderer(renderOptions) ? renderOptions.groupOptions : undefined) != null ? _ref5 : {
@@ -2912,9 +2934,46 @@ function createDefaultAdornmentRenderer(options) {
     type: "adornment",
     render: function render(_ref6, renderers) {
       var adornment = _ref6.adornment,
-        designMode = _ref6.designMode;
+        designMode = _ref6.designMode,
+        parentContext = _ref6.parentContext,
+        useExpr = _ref6.useExpr;
       return {
         apply: function apply(rl) {
+          if (isSetFieldAdornment(adornment) && useExpr) {
+            var setFieldWrapper = function setFieldWrapper(_ref7) {
+              var children = _ref7.children,
+                adornment = _ref7.adornment,
+                parentContext = _ref7.parentContext;
+              var _dynamicHooks = dynamicHooks(parentContext),
+                value = _dynamicHooks.value;
+              var refField = findFieldPath(parentContext.fields, adornment.field);
+              var otherField = refField ? lookupChildControl(parentContext, refField) : undefined;
+              var always = !adornment.defaultOnly;
+              core.useControlEffect(function () {
+                return [value == null ? void 0 : value.value, (otherField == null ? void 0 : otherField.value) == null];
+              }, function (_ref8) {
+                var v = _ref8[0];
+                otherField == null || otherField.setValue(function (x) {
+                  return always || x == null ? v : x;
+                });
+              }, true);
+              return children;
+            };
+            var hook = useExpr(adornment.expression, function (x) {
+              return x;
+            });
+            var dynamicHooks = useDynamicHooks({
+              value: hook
+            });
+            var SetFieldWrapper = React.useCallback(setFieldWrapper, [dynamicHooks]);
+            return wrapLayout(function (x) {
+              return /*#__PURE__*/React__default["default"].createElement(SetFieldWrapper, {
+                children: x,
+                parentContext: parentContext,
+                adornment: adornment
+              });
+            })(rl);
+          }
           if (isIconAdornment(adornment)) {
             var _adornment$placement;
             return appendMarkupAt((_adornment$placement = adornment.placement) != null ? _adornment$placement : exports.AdornmentPlacement.ControlStart, /*#__PURE__*/React__default["default"].createElement("i", {
@@ -3222,7 +3281,6 @@ exports.createVisibilityRenderer = createVisibilityRenderer;
 exports.dataControl = dataControl;
 exports.dateField = dateField;
 exports.dateTimeField = dateTimeField;
-exports.defaultArrayProps = defaultArrayProps;
 exports.defaultCompoundField = defaultCompoundField;
 exports.defaultControlForField = defaultControlForField;
 exports.defaultDataProps = defaultDataProps;
@@ -3264,6 +3322,7 @@ exports.htmlDisplayControl = htmlDisplayControl;
 exports.intField = intField;
 exports.isAccordionAdornment = isAccordionAdornment;
 exports.isActionControlsDefinition = isActionControlsDefinition;
+exports.isArrayRenderer = isArrayRenderer;
 exports.isCompoundField = isCompoundField;
 exports.isControlDisabled = isControlDisabled;
 exports.isControlReadonly = isControlReadonly;
@@ -3278,6 +3337,7 @@ exports.isGroupControl = isGroupControl;
 exports.isGroupControlsDefinition = isGroupControlsDefinition;
 exports.isIconAdornment = isIconAdornment;
 exports.isScalarField = isScalarField;
+exports.isSetFieldAdornment = isSetFieldAdornment;
 exports.isTextfieldRenderer = isTextfieldRenderer;
 exports.jsonPathString = jsonPathString;
 exports.jsonataExpr = jsonataExpr;