@react-typed-forms/schemas 11.15.0 → 11.17.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";
@@ -121,7 +121,6 @@ export interface DataRendererProps extends ParentRendererProps {
     required: boolean;
     options: FieldOption[] | undefined | null;
     hidden: boolean;
-    toArrayProps?: () => ArrayRendererProps;
 }
 export interface ActionRendererProps {
     actionId: string;
@@ -178,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;
@@ -216,6 +214,11 @@ export declare function appendMarkupAt(pos: AdornmentPlacement, markup: ReactNod
 export declare function wrapMarkupAt(pos: AdornmentPlacement, wrap: (ex: ReactNode) => ReactNode): (layout: RenderedLayout) => void;
 export declare function renderLayoutParts(props: ControlLayoutProps, renderer: FormRenderer): RenderedLayout;
 export declare function controlTitle(title: string | undefined | null, field: SchemaField): string;
+export declare function getLengthRestrictions(definition: DataControlDefinition): {
+    min: number | null | undefined;
+    max: number | null | undefined;
+};
+export declare function createArrayActions(control: Control<any[]>, field: SchemaField, addText?: string | null, removeText?: string | null, noAdd?: boolean | null, noRemove?: boolean | null): Pick<ArrayRendererProps, "addAction" | "removeAction" | "arrayControl">;
 export declare function applyArrayLengthRestrictions({ arrayControl, min, max, addAction: aa, removeAction: ra, required, }: Pick<ArrayRendererProps, "addAction" | "removeAction" | "arrayControl" | "min" | "max" | "required">, disable?: boolean): Pick<ArrayRendererProps, "addAction" | "removeAction"> & {
     addDisabled: boolean;
     removeDisabled: boolean;

package/lib/index.js

@@ -95,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) {
@@ -168,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);
@@ -1694,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,
@@ -1704,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);
@@ -1735,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,
@@ -1956,6 +1911,39 @@ function renderLayoutParts(props, renderer) {
 function controlTitle(title, field) {
   return title ? title : fieldDisplayName(field);
 }
+function getLengthRestrictions(definition) {
+  var _definition$validator;
+  var lengthVal = (_definition$validator = definition.validators) == null ? void 0 : _definition$validator.find(function (x) {
+    return x.type === exports.ValidatorType.Length;
+  });
+  return {
+    min: lengthVal == null ? void 0 : lengthVal.min,
+    max: lengthVal == null ? void 0 : lengthVal.max
+  };
+}
+function createArrayActions(control, field, addText, removeText, noAdd, noRemove) {
+  var _field$displayName;
+  var noun = (_field$displayName = field.displayName) != null ? _field$displayName : field.field;
+  return {
+    arrayControl: control,
+    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: "remove",
+        actionText: removeText ? removeText : "Remove",
+        onClick: function onClick() {
+          return core.removeElement(control, i);
+        }
+      };
+    } : undefined
+  };
+}
 function applyArrayLengthRestrictions(_ref7, disable) {
   var _arrayControl$element, _arrayControl$element2;
   var arrayControl = _ref7.arrayControl,
@@ -2384,10 +2372,50 @@ function createInputConversion(ft) {
   }
 }
 
+function createDefaultArrayDataRenderer() {
+  return createDataRenderer(function (_ref, renderers) {
+    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 _ref2 = isArrayRenderer(renderOptions) ? renderOptions : {},
+      addText = _ref2.addText,
+      noAdd = _ref2.noAdd,
+      noRemove = _ref2.noRemove,
+      removeText = _ref2.removeText;
+    var childOptions = isArrayRenderer(renderOptions) ? renderOptions.childOptions : undefined;
+    var arrayProps = _extends({}, createArrayActions(control, field, addText, removeText, noAdd, noRemove), {
+      required: required,
+      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
+    }, getLengthRestrictions(definition));
+    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
       }));
@@ -2840,17 +2868,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 : {
@@ -2950,9 +2974,9 @@ function createDefaultAdornmentRenderer(options) {
             var dynamicHooks = useDynamicHooks({
               value: hook
             });
-            var _SetFieldWrapper = React.useCallback(setFieldWrapper, [dynamicHooks]);
+            var SetFieldWrapper = React.useCallback(setFieldWrapper, [dynamicHooks]);
             return wrapLayout(function (x) {
-              return /*#__PURE__*/React__default["default"].createElement(_SetFieldWrapper, {
+              return /*#__PURE__*/React__default["default"].createElement(SetFieldWrapper, {
                 children: x,
                 parentContext: parentContext,
                 adornment: adornment
@@ -3239,6 +3263,7 @@ exports.controlTitle = controlTitle;
 exports.createAction = createAction;
 exports.createActionRenderer = createActionRenderer;
 exports.createAdornmentRenderer = createAdornmentRenderer;
+exports.createArrayActions = createArrayActions;
 exports.createArrayRenderer = createArrayRenderer;
 exports.createButtonActionRenderer = createButtonActionRenderer;
 exports.createCheckListRenderer = createCheckListRenderer;
@@ -3266,7 +3291,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;
@@ -3299,6 +3323,7 @@ exports.findScalarField = findScalarField;
 exports.getAllReferencedClasses = getAllReferencedClasses;
 exports.getControlData = getControlData;
 exports.getDisplayOnlyOptions = getDisplayOnlyOptions;
+exports.getLengthRestrictions = getLengthRestrictions;
 exports.getOverrideClass = getOverrideClass;
 exports.getTypeField = getTypeField;
 exports.groupedControl = groupedControl;
@@ -3308,6 +3333,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;