@react-typed-forms/schemas 7.3.2 → 8.0.0

package/lib/schemaBuilder.d.ts

@@ -87,4 +87,5 @@ export declare function defaultScalarField(field: string, displayName: string):
 export declare function defaultCompoundField(field: string, displayName: string, collection: boolean): CompoundField & {
     type: FieldType.Compound;
 };
+export declare function mergeField(field: SchemaField, mergeInto: SchemaField[]): SchemaField[];
 export {};

package/lib/util.d.ts

@@ -39,3 +39,4 @@ export declare function cleanDataForSchema(v: {
 } | undefined, fields: SchemaField[]): any;
 export declare function getAllReferencedClasses(c: ControlDefinition): string[];
 export declare function jsonPathString(jsonPath: JsonPath[]): string;
+export declare function findChildDefinition(parent: ControlDefinition, childPath: number | number[]): ControlDefinition;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-typed-forms/schemas",
-  "version": "7.3.2",
+  "version": "8.0.0",
   "description": "",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",

package/src/controlBuilder.ts

@@ -1,4 +1,5 @@
 import {
+  CompoundField,
   ControlDefinition,
   ControlDefinitionType,
   DataControlDefinition,
@@ -18,7 +19,8 @@ import {
 } from "./types";
 import { ActionRendererProps } from "./controlRender";
 import { useMemo } from "react";
-import { addMissingControls } from "./util";
+import { addMissingControls, isCompoundField } from "./util";
+import { mergeField } from "./schemaBuilder";
 
 export function dataControl(
   field: string,
@@ -128,3 +130,46 @@ export function useControlDefinitionForSchema(
     [sf, definition],
   );
 }
+
+export interface CustomRenderOptions {
+  value: string;
+  name: string;
+  fields: SchemaField[];
+}
+
+export function addCustomDataRenderOptions(
+  controlFields: SchemaField[],
+  customRenderOptions: CustomRenderOptions[],
+): SchemaField[] {
+  return controlFields.map((x) =>
+    x.field === "renderOptions" && isCompoundField(x) ? addRenderOptions(x) : x,
+  );
+
+  function addRenderOptions(roField: CompoundField): CompoundField {
+    const children = roField.children;
+    const withTypes = children.map((x) =>
+      x.field === "type" ? addRenderOptionType(x) : x,
+    );
+    return {
+      ...roField,
+      children: customRenderOptions.reduce(
+        (renderOptionFields, ro) =>
+          ro.fields
+            .map((x) => ({ ...x, onlyForTypes: [ro.value] }))
+            .reduce((af, x) => mergeField(x, af), renderOptionFields),
+        withTypes,
+      ),
+    };
+  }
+
+  function addRenderOptionType(typeField: SchemaField): SchemaField {
+    const options = typeField.options ?? [];
+    return {
+      ...typeField,
+      options: [
+        ...options,
+        ...customRenderOptions.map(({ name, value }) => ({ name, value })),
+      ],
+    };
+  }
+}

package/src/controlRender.tsx

@@ -26,6 +26,7 @@ import {
   DisplayData,
   DynamicPropertyType,
   FieldOption,
+  GroupedControlsDefinition,
   GroupRenderOptions,
   isActionControlsDefinition,
   isDataControlDefinition,
@@ -39,6 +40,7 @@ import {
   ControlDataContext,
   elementValueForField,
   fieldDisplayName,
+  findChildDefinition,
   findField,
   isCompoundField,
   useUpdatedRef,
@@ -160,15 +162,14 @@ export interface DisplayRendererProps {
 }
 
 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;
@@ -180,7 +181,7 @@ export interface DataRendererProps {
   className?: string;
   style?: React.CSSProperties;
   dataContext: ControlDataContext;
-  childCount: number;
+  children: ControlDefinition[];
   renderChild: ChildRenderer;
   toArrayProps?: () => ArrayRendererProps;
 }
@@ -211,7 +212,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;
@@ -343,13 +343,7 @@ export function useControlRenderer(
           !!myOptions.hidden,
           parentDataContext,
         );
-        const childRenderers: FC<ControlRenderProps>[] =
-          c.children?.map((cd) =>
-            useControlRenderer(cd, controlDataContext.fields, renderer, {
-              ...options,
-              ...myOptions,
-            }),
-          ) ?? [];
+        const childOptions: ControlRenderOptions = { ...options, ...myOptions };
 
         useEffect(() => {
           if (control && typeof myOptions.disabled === "boolean")
@@ -364,11 +358,21 @@ export function useControlRenderer(
         const labelAndChildren = renderControlLayout({
           definition: c,
           renderer,
-          childCount: childRenderers.length,
-          renderChild: (k, i, props) => {
-            const RenderChild = childRenderers[i];
-            return <RenderChild key={k} {...props} />;
-          },
+          renderChild: (k, child, path) => (
+            <ControlRenderer
+              key={k}
+              control={controlDataContext.data}
+              fields={controlDataContext.fields}
+              definition={findChildDefinition(c, child)}
+              parentPath={
+                path
+                  ? [...controlDataContext.path, ...path]
+                  : controlDataContext.path
+              }
+              renderer={renderer}
+              options={childOptions}
+            />
+          ),
           createDataProps: dataProps,
           formOptions: myOptions,
           dataContext: controlDataContext,
@@ -445,19 +449,36 @@ export function getControlData(
   ];
 }
 
+export function ControlRenderer({
+  definition,
+  fields,
+  renderer,
+  options,
+  control,
+  parentPath,
+}: {
+  definition: ControlDefinition;
+  fields: SchemaField[];
+  renderer: FormRenderer;
+  options?: ControlRenderOptions;
+  control: Control<any>;
+  parentPath?: JsonPath[];
+}) {
+  const Render = useControlRenderer(definition, fields, renderer, options);
+  return <Render control={control} parentPath={parentPath} />;
+}
+
 function groupProps(
-  renderOptions: GroupRenderOptions = { type: "Standard" },
-  childCount: number,
+  definition: GroupedControlsDefinition,
   renderChild: ChildRenderer,
   data: DataContext,
   className: string | null | undefined,
   style: React.CSSProperties | undefined,
 ): GroupRendererProps {
   return {
-    childCount,
-    renderChild: (i) =>
-      renderChild(i, i, { control: data.data, parentPath: data.path }),
-    renderOptions,
+    children: definition.children ?? [],
+    renderChild,
+    renderOptions: definition.groupOptions ?? { type: "Standard" },
     className: cc(className),
     style,
   };
@@ -479,7 +500,7 @@ export function defaultDataProps({
     (field.options?.length ?? 0) === 0 ? null : field.options;
   const allowed = allowedOptions?.value ?? [];
   return {
-    definition,
+    children: definition.children ?? [],
     control,
     field,
     id: "c" + control.uniqueId,
@@ -541,14 +562,13 @@ export function defaultArrayProps(
 
 export type ChildRenderer = (
   k: Key,
-  childIndex: number,
-  props: ControlRenderProps,
+  child: number | number[],
+  parentPath?: JsonPath[],
 ) => ReactNode;
 
 export interface RenderControlProps {
   definition: ControlDefinition;
   renderer: FormRenderer;
-  childCount: number;
   renderChild: ChildRenderer;
   createDataProps: CreateDataProps;
   formOptions: FormContextOptions;
@@ -562,7 +582,6 @@ export interface RenderControlProps {
 export function renderControlLayout({
   definition: c,
   renderer,
-  childCount,
   renderChild: childRenderer,
   control: childControl,
   schemaField,
@@ -587,14 +606,7 @@ export function renderControlLayout({
     }
     return {
       processLayout: renderer.renderGroup(
-        groupProps(
-          c.groupOptions,
-          childCount,
-          childRenderer,
-          dataContext,
-          c.styleClass,
-          style,
-        ),
+        groupProps(c, childRenderer, dataContext, c.styleClass, style),
       ),
       label: {
         label: c.title,
@@ -640,9 +652,12 @@ export function renderControlLayout({
         elemIndex != null ? childControl!.elements[elemIndex] : childControl,
       options: dataOptions,
       style,
-      childCount,
       allowedOptions,
-      renderChild: childRenderer,
+      renderChild:
+        elemIndex != null
+          ? (k, d, p) =>
+              childRenderer(k, d, p ? [elemIndex, ...p] : [elemIndex])
+          : childRenderer,
       elementRenderer:
         elemIndex == null && schemaField.collection
           ? (ei) => renderLayoutParts(renderData(c, ei), renderer).children

package/src/hooks.tsx

@@ -307,14 +307,15 @@ export function useJsonataExpression(
   bindings?: () => Record<string, any>,
 ): Control<any> {
   const pathString = jsonPathString(dataContext.path);
+  const fullExpr = pathString ? pathString + ".(" + jExpr + ")" : jExpr;
   const compiledExpr = useMemo(() => {
     try {
-      return jsonata(pathString ? pathString + ".(" + jExpr + ")" : jExpr);
+      return jsonata(fullExpr);
     } catch (e) {
       console.error(e);
       return jsonata("null");
     }
-  }, [jExpr, pathString]);
+  }, [fullExpr]);
   const control = useControl();
   const listenerRef = useRef<() => void>();
   const [ref] = useRefState(() =>

package/src/renderers.tsx

@@ -31,6 +31,7 @@ import {
   AdornmentPlacement,
   ControlAdornment,
   ControlAdornmentType,
+  ControlDefinitionType,
   DataRenderType,
   DisplayDataType,
   FieldOption,
@@ -423,7 +424,7 @@ export function createDefaultGroupRenderer(
   }
 
   function render(props: GroupRendererProps) {
-    const { childCount, renderChild, renderOptions } = props;
+    const { renderChild, renderOptions, children } = props;
 
     const { style, className: gcn } = isGridRenderer(renderOptions)
       ? gridStyles(renderOptions)
@@ -436,7 +437,7 @@ export function createDefaultGroupRenderer(
         ...cp,
         children: (
           <div className={clsx(props.className, className, gcn)} style={style}>
-            {Array.from({ length: childCount }, (_, x) => renderChild(x))}
+            {children?.map((c, i) => renderChild(i, i))}
           </div>
         ),
       };
@@ -530,13 +531,9 @@ export function createDefaultDataRenderer(
       return renderers.renderGroup({
         style: props.style,
         className: props.className,
+        children: props.children,
         renderOptions: { type: "Standard", hideTitle: true },
-        renderChild: (i) =>
-          props.renderChild(i, i, {
-            control: props.dataContext.data,
-            parentPath: props.dataContext.path,
-          }),
-        childCount: props.childCount,
+        renderChild: props.renderChild,
       });
     }
     const renderOptions = props.renderOptions;

package/src/schemaBuilder.ts

@@ -144,3 +144,28 @@ export function defaultCompoundField(
     children: [],
   };
 }
+
+export function mergeField(
+  field: SchemaField,
+  mergeInto: SchemaField[],
+): SchemaField[] {
+  const existing = mergeInto.find((x) => x.field === field.field);
+  if (existing) {
+    return mergeInto.map((x) =>
+      x !== existing
+        ? x
+        : {
+            ...x,
+            onlyForTypes: mergeTypes(x.onlyForTypes, field.onlyForTypes),
+          },
+    );
+  }
+  return [...mergeInto, field];
+
+  function mergeTypes(f?: string[] | null, s?: string[] | null) {
+    if (!f) return s;
+    if (!s) return f;
+    const extras = s.filter((x) => !f.includes(x));
+    return extras.length ? [...f, ...extras] : f;
+  }
+}

package/src/util.ts

@@ -408,3 +408,15 @@ export function jsonPathString(jsonPath: JsonPath[]) {
   });
   return out;
 }
+
+export function findChildDefinition(
+  parent: ControlDefinition,
+  childPath: number | number[],
+): ControlDefinition {
+  if (Array.isArray(childPath)) {
+    let base = parent;
+    childPath.forEach((x) => (base = base.children![x]));
+    return base;
+  }
+  return parent.children![childPath];
+}