@react-typed-forms/schemas 7.3.2 → 8.0.0

package/lib/controlBuilder.d.ts

@@ -14,3 +14,9 @@ export declare function compoundControl(field: string, title: string | undefined
 export declare function createAction(actionId: string, onClick: () => void, actionText?: string): ActionRendererProps;
 export declare const emptyGroupDefinition: GroupedControlsDefinition;
 export declare function useControlDefinitionForSchema(sf: SchemaField[], definition?: GroupedControlsDefinition): GroupedControlsDefinition;
+export interface CustomRenderOptions {
+    value: string;
+    name: string;
+    fields: SchemaField[];
+}
+export declare function addCustomDataRenderOptions(controlFields: SchemaField[], customRenderOptions: CustomRenderOptions[]): SchemaField[];

package/lib/controlRender.d.ts

@@ -86,14 +86,13 @@ export interface DisplayRendererProps {
     style?: React.CSSProperties;
 }
 export interface GroupRendererProps {
+    children: ControlDefinition[];
     renderOptions: GroupRenderOptions;
-    childCount: number;
-    renderChild: (child: number) => ReactNode;
+    renderChild: ChildRenderer;
     className?: string;
     style?: React.CSSProperties;
 }
 export interface DataRendererProps {
-    definition: DataControlDefinition;
     renderOptions: RenderOptions;
     field: SchemaField;
     id: string;
@@ -105,7 +104,7 @@ export interface DataRendererProps {
     className?: string;
     style?: React.CSSProperties;
     dataContext: ControlDataContext;
-    childCount: number;
+    children: ControlDefinition[];
     renderChild: ChildRenderer;
     toArrayProps?: () => ArrayRendererProps;
 }
@@ -132,7 +131,6 @@ export interface DataControlProps {
     control: Control<any>;
     options: FormContextOptions;
     style: React.CSSProperties | undefined;
-    childCount: number;
     renderChild: ChildRenderer;
     allowedOptions?: Control<any[] | undefined>;
     elementRenderer?: (elemIndex: number) => ReactNode;
@@ -152,13 +150,20 @@ export interface ControlRenderOptions extends FormContextOptions {
 export declare function useControlRenderer(definition: ControlDefinition, fields: SchemaField[], renderer: FormRenderer, options?: ControlRenderOptions): FC<ControlRenderProps>;
 export declare function lookupSchemaField(c: ControlDefinition, fields: SchemaField[]): SchemaField | undefined;
 export declare function getControlData(schemaField: SchemaField | undefined, parentContext: ControlDataContext): [Control<any> | undefined, Control<any> | undefined, ControlDataContext];
+export declare function ControlRenderer({ definition, fields, renderer, options, control, parentPath, }: {
+    definition: ControlDefinition;
+    fields: SchemaField[];
+    renderer: FormRenderer;
+    options?: ControlRenderOptions;
+    control: Control<any>;
+    parentPath?: JsonPath[];
+}): React.JSX.Element;
 export declare function defaultDataProps({ definition, field, control, options, elementRenderer, style, allowedOptions, ...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): ArrayRendererProps;
-export type ChildRenderer = (k: Key, childIndex: number, props: ControlRenderProps) => ReactNode;
+export type ChildRenderer = (k: Key, child: number | number[], parentPath?: JsonPath[]) => ReactNode;
 export interface RenderControlProps {
     definition: ControlDefinition;
     renderer: FormRenderer;
-    childCount: number;
     renderChild: ChildRenderer;
     createDataProps: CreateDataProps;
     formOptions: FormContextOptions;
@@ -169,7 +174,7 @@ export interface RenderControlProps {
     style?: React.CSSProperties;
     allowedOptions?: Control<any[] | undefined>;
 }
-export declare function renderControlLayout({ definition: c, renderer, childCount, renderChild: childRenderer, control: childControl, schemaField, dataContext, formOptions: dataOptions, createDataProps: dataProps, displayControl, style, allowedOptions, }: RenderControlProps): ControlLayoutProps;
+export declare function renderControlLayout({ definition: c, renderer, renderChild: childRenderer, control: childControl, schemaField, dataContext, formOptions: dataOptions, createDataProps: dataProps, displayControl, style, allowedOptions, }: RenderControlProps): ControlLayoutProps;
 export declare function appendMarkup(k: keyof Omit<RenderedLayout, "errorControl" | "style" | "className">, markup: ReactNode): (layout: RenderedLayout) => void;
 export declare function wrapMarkup(k: keyof Omit<RenderedLayout, "errorControl" | "style" | "className">, wrap: (ex: ReactNode) => ReactNode): (layout: RenderedLayout) => void;
 export declare function layoutKeyForPlacement(pos: AdornmentPlacement): keyof Omit<RenderedLayout, "errorControl" | "style" | "className">;

package/lib/index.js

@@ -268,6 +268,27 @@ function defaultCompoundField(field, displayName, collection) {
     children: []
   };
 }
+function mergeField(field, mergeInto) {
+  var existing = mergeInto.find(function (x) {
+    return x.field === field.field;
+  });
+  if (existing) {
+    return mergeInto.map(function (x) {
+      return x !== existing ? x : _extends({}, x, {
+        onlyForTypes: mergeTypes(x.onlyForTypes, field.onlyForTypes)
+      });
+    });
+  }
+  return [].concat(mergeInto, [field]);
+  function mergeTypes(f, s) {
+    if (!f) return s;
+    if (!s) return f;
+    var extras = s.filter(function (x) {
+      return !f.includes(x);
+    });
+    return extras.length ? [].concat(f, extras) : f;
+  }
+}
 
 function applyDefaultValues(v, fields) {
   if (!v) return defaultValueForFields(fields);
@@ -557,6 +578,16 @@ function jsonPathString(jsonPath) {
   });
   return out;
 }
+function findChildDefinition(parent, childPath) {
+  if (Array.isArray(childPath)) {
+    var base = parent;
+    childPath.forEach(function (x) {
+      return base = base.children[x];
+    });
+    return base;
+  }
+  return parent.children[childPath];
+}
 
 function dataControl(field, title, options) {
   return _extends({
@@ -668,6 +699,42 @@ function useControlDefinitionForSchema(sf, definition) {
     });
   }, [sf, definition]);
 }
+function addCustomDataRenderOptions(controlFields, customRenderOptions) {
+  return controlFields.map(function (x) {
+    return x.field === "renderOptions" && isCompoundField(x) ? addRenderOptions(x) : x;
+  });
+  function addRenderOptions(roField) {
+    var children = roField.children;
+    var withTypes = children.map(function (x) {
+      return x.field === "type" ? addRenderOptionType(x) : x;
+    });
+    return _extends({}, roField, {
+      children: customRenderOptions.reduce(function (renderOptionFields, ro) {
+        return ro.fields.map(function (x) {
+          return _extends({}, x, {
+            onlyForTypes: [ro.value]
+          });
+        }).reduce(function (af, x) {
+          return mergeField(x, af);
+        }, renderOptionFields);
+      }, withTypes)
+    });
+  }
+  function addRenderOptionType(typeField) {
+    var _typeField$options;
+    var options = (_typeField$options = typeField.options) != null ? _typeField$options : [];
+    return _extends({}, typeField, {
+      options: [].concat(options, customRenderOptions.map(function (_ref) {
+        var name = _ref.name,
+          value = _ref.value;
+        return {
+          name: name,
+          value: value
+        };
+      }))
+    });
+  }
+}
 
 function useCalculatedControl(calculate) {
   var c = core.useControl(calculate);
@@ -847,14 +914,15 @@ function hideDisplayOnly(context, field, definition, schemaInterface) {
 }
 function useJsonataExpression(jExpr, dataContext, bindings) {
   var pathString = jsonPathString(dataContext.path);
+  var fullExpr = pathString ? pathString + ".(" + jExpr + ")" : jExpr;
   var compiledExpr = React.useMemo(function () {
     try {
-      return jsonata__default["default"](pathString ? pathString + ".(" + jExpr + ")" : jExpr);
+      return jsonata__default["default"](fullExpr);
     } catch (e) {
       console.error(e);
       return jsonata__default["default"]("null");
     }
-  }, [jExpr, pathString]);
+  }, [fullExpr]);
   var control = core.useControl();
   var listenerRef = React.useRef();
   var _useRefState = core.useRefState(function () {
@@ -1021,7 +1089,7 @@ function useControlRenderer(definition, fields, renderer, options) {
       parentPath = _ref$parentPath === void 0 ? [] : _ref$parentPath;
     var stopTracking = core.useComponentTracking();
     try {
-      var _c$children$map, _c$children, _definition$adornment, _definition$adornment2;
+      var _definition$adornment, _definition$adornment2;
       var _r$current = r.current,
         c = _r$current.definition,
         _options = _r$current.options,
@@ -1092,9 +1160,7 @@ function useControlRenderer(definition, fields, renderer, options) {
         };
       }).value;
       useValidation(control != null ? control : core.newControl(null), !!myOptions.hidden, parentDataContext);
-      var childRenderers = (_c$children$map = (_c$children = c.children) == null ? void 0 : _c$children.map(function (cd) {
-        return useControlRenderer(cd, controlDataContext.fields, renderer, _extends({}, _options, myOptions));
-      })) != null ? _c$children$map : [];
+      var childOptions = _extends({}, _options, myOptions);
       React.useEffect(function () {
         if (control && typeof myOptions.disabled === "boolean") control.disabled = myOptions.disabled;
       }, [control, myOptions.disabled]);
@@ -1107,12 +1173,16 @@ function useControlRenderer(definition, fields, renderer, options) {
       var labelAndChildren = renderControlLayout({
         definition: c,
         renderer: renderer,
-        childCount: childRenderers.length,
-        renderChild: function renderChild(k, i, props) {
-          var RenderChild = childRenderers[i];
-          return /*#__PURE__*/React__default["default"].createElement(RenderChild, _extends({
-            key: k
-          }, props));
+        renderChild: function renderChild(k, child, path) {
+          return /*#__PURE__*/React__default["default"].createElement(ControlRenderer, {
+            key: k,
+            control: controlDataContext.data,
+            fields: controlDataContext.fields,
+            definition: findChildDefinition(c, child),
+            parentPath: path ? [].concat(controlDataContext.path, path) : controlDataContext.path,
+            renderer: renderer,
+            options: childOptions
+          });
         },
         createDataProps: dataProps,
         formOptions: myOptions,
@@ -1154,41 +1224,52 @@ function getControlData(schemaField, parentContext) {
     fields: isCompoundField(schemaField) ? schemaField.children : parentContext.fields
   }) : parentContext];
 }
-function groupProps(renderOptions, childCount, _renderChild, data, className, style) {
-  if (renderOptions === void 0) {
-    renderOptions = {
-      type: "Standard"
-    };
+function ControlRenderer(_ref3) {
+  var _effect = core.useComponentTracking();
+  try {
+    var definition = _ref3.definition,
+      fields = _ref3.fields,
+      renderer = _ref3.renderer,
+      options = _ref3.options,
+      control = _ref3.control,
+      parentPath = _ref3.parentPath;
+    var Render = useControlRenderer(definition, fields, renderer, options);
+    return /*#__PURE__*/React__default["default"].createElement(Render, {
+      control: control,
+      parentPath: parentPath
+    });
+  } finally {
+    _effect();
   }
+}
+function groupProps(definition, renderChild, data, className, style) {
+  var _definition$children, _definition$groupOpti;
   return {
-    childCount: childCount,
-    renderChild: function renderChild(i) {
-      return _renderChild(i, i, {
-        control: data.data,
-        parentPath: data.path
-      });
+    children: (_definition$children = definition.children) != null ? _definition$children : [],
+    renderChild: renderChild,
+    renderOptions: (_definition$groupOpti = definition.groupOptions) != null ? _definition$groupOpti : {
+      type: "Standard"
     },
-    renderOptions: renderOptions,
     className: cc(className),
     style: style
   };
 }
-function defaultDataProps(_ref3) {
-  var _field$options$length, _field$options, _allowedOptions$value, _definition$renderOpt;
-  var definition = _ref3.definition,
-    field = _ref3.field,
-    control = _ref3.control,
-    options = _ref3.options,
-    elementRenderer = _ref3.elementRenderer,
-    style = _ref3.style,
-    allowedOptions = _ref3.allowedOptions,
-    props = _objectWithoutPropertiesLoose(_ref3, _excluded$1);
+function defaultDataProps(_ref4) {
+  var _field$options$length, _field$options, _allowedOptions$value, _definition$children2, _definition$renderOpt;
+  var definition = _ref4.definition,
+    field = _ref4.field,
+    control = _ref4.control,
+    options = _ref4.options,
+    elementRenderer = _ref4.elementRenderer,
+    style = _ref4.style,
+    allowedOptions = _ref4.allowedOptions,
+    props = _objectWithoutPropertiesLoose(_ref4, _excluded$1);
   var className = cc(definition.styleClass);
   var required = !!definition.required;
   var fieldOptions = ((_field$options$length = (_field$options = field.options) == null ? void 0 : _field$options.length) != null ? _field$options$length : 0) === 0 ? null : field.options;
   var allowed = (_allowedOptions$value = allowedOptions == null ? void 0 : allowedOptions.value) != null ? _allowedOptions$value : [];
   return _extends({
-    definition: definition,
+    children: (_definition$children2 = definition.children) != null ? _definition$children2 : [],
     control: control,
     field: field,
     id: "c" + control.uniqueId,
@@ -1243,19 +1324,18 @@ function defaultArrayProps(arrayControl, field, required, style, className, _ren
     style: style
   };
 }
-function renderControlLayout(_ref4) {
-  var c = _ref4.definition,
-    renderer = _ref4.renderer,
-    childCount = _ref4.childCount,
-    childRenderer = _ref4.renderChild,
-    childControl = _ref4.control,
-    schemaField = _ref4.schemaField,
-    dataContext = _ref4.dataContext,
-    dataOptions = _ref4.formOptions,
-    dataProps = _ref4.createDataProps,
-    displayControl = _ref4.displayControl,
-    style = _ref4.style,
-    allowedOptions = _ref4.allowedOptions;
+function renderControlLayout(_ref5) {
+  var c = _ref5.definition,
+    renderer = _ref5.renderer,
+    childRenderer = _ref5.renderChild,
+    childControl = _ref5.control,
+    schemaField = _ref5.schemaField,
+    dataContext = _ref5.dataContext,
+    dataOptions = _ref5.formOptions,
+    dataProps = _ref5.createDataProps,
+    displayControl = _ref5.displayControl,
+    style = _ref5.style,
+    allowedOptions = _ref5.allowedOptions;
   if (isDataControlDefinition(c)) {
     return renderData(c);
   }
@@ -1269,7 +1349,7 @@ function renderControlLayout(_ref4) {
       }));
     }
     return {
-      processLayout: renderer.renderGroup(groupProps(c.groupOptions, childCount, childRenderer, dataContext, c.styleClass, style)),
+      processLayout: renderer.renderGroup(groupProps(c, childRenderer, dataContext, c.styleClass, style)),
       label: {
         label: c.title,
         type: exports.LabelType.Group,
@@ -1317,9 +1397,10 @@ function renderControlLayout(_ref4) {
       control: elemIndex != null ? childControl.elements[elemIndex] : childControl,
       options: dataOptions,
       style: style,
-      childCount: childCount,
       allowedOptions: allowedOptions,
-      renderChild: childRenderer,
+      renderChild: elemIndex != null ? function (k, d, p) {
+        return childRenderer(k, d, p ? [elemIndex].concat(p) : [elemIndex]);
+      } : childRenderer,
       elementRenderer: elemIndex == null && schemaField.collection ? function (ei) {
         return renderLayoutParts(renderData(c, ei), renderer).children;
       } : undefined
@@ -1368,13 +1449,13 @@ function wrapMarkupAt(pos, wrap) {
 }
 function renderLayoutParts(props, renderer) {
   var _props$processLayout;
-  var _ref5 = (_props$processLayout = props.processLayout == null ? void 0 : props.processLayout(props)) != null ? _props$processLayout : props,
-    className = _ref5.className,
-    children = _ref5.children,
-    style = _ref5.style,
-    errorControl = _ref5.errorControl,
-    label = _ref5.label,
-    adornments = _ref5.adornments;
+  var _ref6 = (_props$processLayout = props.processLayout == null ? void 0 : props.processLayout(props)) != null ? _props$processLayout : props,
+    className = _ref6.className,
+    children = _ref6.children,
+    style = _ref6.style,
+    errorControl = _ref6.errorControl,
+    label = _ref6.label,
+    adornments = _ref6.adornments;
   var layout = {
     children: children,
     errorControl: errorControl,
@@ -1609,9 +1690,9 @@ function createDefaultGroupRenderer(options) {
     };
   }
   function render(props) {
-    var childCount = props.childCount,
-      renderChild = props.renderChild,
-      renderOptions = props.renderOptions;
+    var renderChild = props.renderChild,
+      renderOptions = props.renderOptions,
+      children = props.children;
     var _ref7 = isGridRenderer(renderOptions) ? gridStyles(renderOptions) : isFlexRenderer(renderOptions) ? flexStyles(renderOptions) : {
         className: standardClassName
       },
@@ -1622,10 +1703,8 @@ function createDefaultGroupRenderer(options) {
         children: /*#__PURE__*/React__default["default"].createElement("div", {
           className: clsx__default["default"](props.className, className, gcn),
           style: style
-        }, Array.from({
-          length: childCount
-        }, function (_, x) {
-          return renderChild(x);
+        }, children == null ? void 0 : children.map(function (c, i) {
+          return renderChild(i, i);
         }))
       });
     };
@@ -1715,17 +1794,12 @@ function createDefaultDataRenderer(options) {
       return renderers.renderGroup({
         style: props.style,
         className: props.className,
+        children: props.children,
         renderOptions: {
           type: "Standard",
           hideTitle: true
         },
-        renderChild: function renderChild(i) {
-          return props.renderChild(i, i, {
-            control: props.dataContext.data,
-            parentPath: props.dataContext.path
-          });
-        },
-        childCount: props.childCount
+        renderChild: props.renderChild
       });
     }
     var renderOptions = props.renderOptions;
@@ -2164,6 +2238,7 @@ var defaultTailwindTheme = {
 
 exports.AppendAdornmentPriority = AppendAdornmentPriority;
 exports.ControlInput = ControlInput;
+exports.ControlRenderer = ControlRenderer;
 exports.DefaultBoolOptions = DefaultBoolOptions;
 exports.DefaultDisplay = DefaultDisplay;
 exports.DefaultDisplayOnly = DefaultDisplayOnly;
@@ -2171,6 +2246,7 @@ exports.DefaultLayout = DefaultLayout;
 exports.DefaultVisibility = DefaultVisibility;
 exports.SelectDataRenderer = SelectDataRenderer;
 exports.WrapAdornmentPriority = WrapAdornmentPriority;
+exports.addCustomDataRenderOptions = addCustomDataRenderOptions;
 exports.addMissingControls = addMissingControls;
 exports.appendMarkup = appendMarkup;
 exports.appendMarkupAt = appendMarkupAt;
@@ -2225,6 +2301,7 @@ exports.emptyGroupDefinition = emptyGroupDefinition;
 exports.fieldDisplayName = fieldDisplayName;
 exports.fieldEqExpr = fieldEqExpr;
 exports.fieldHasTag = fieldHasTag;
+exports.findChildDefinition = findChildDefinition;
 exports.findCompoundField = findCompoundField;
 exports.findField = findField;
 exports.findScalarField = findScalarField;
@@ -2259,6 +2336,7 @@ exports.makeCompoundField = makeCompoundField;
 exports.makeEvalExpressionHook = makeEvalExpressionHook;
 exports.makeScalarField = makeScalarField;
 exports.matchesType = matchesType;
+exports.mergeField = mergeField;
 exports.renderControlLayout = renderControlLayout;
 exports.renderLayoutParts = renderLayoutParts;
 exports.stringField = stringField;