@react-typed-forms/schemas 7.1.0 → 7.3.0

package/src/internal.ts

@@ -1,4 +1,10 @@
-import { Control, useControl, useControlEffect } from "@react-typed-forms/core";
+import {
+  ChangeListenerFunc,
+  Control,
+  ControlChange,
+  useControl,
+  useControlEffect,
+} from "@react-typed-forms/core";
 
 export function useCalculatedControl<V>(calculate: () => V): Control<V> {
   const c = useControl(calculate);
@@ -9,3 +15,34 @@ export function useCalculatedControl<V>(calculate: () => V): Control<V> {
 export function cc(n: string | null | undefined): string | undefined {
   return n ? n : undefined;
 }
+
+export function trackedStructure<A>(
+  c: Control<A>,
+  tracker: ChangeListenerFunc<any>,
+): A {
+  const cc = c.current;
+  const cv = cc.value;
+  if (cv == null) {
+    tracker(c, ControlChange.Structure);
+    return cv;
+  }
+  if (typeof cv !== "object") {
+    tracker(c, ControlChange.Value);
+    return cv;
+  }
+  return new Proxy(cv, {
+    get(target: object, p: string | symbol, receiver: any): any {
+      if (Array.isArray(cv)) {
+        tracker(c, ControlChange.Structure);
+        if (typeof p === "symbol" || p[0] >= "9" || p[0] < "0")
+          return Reflect.get(cv, p);
+        const nc = (cc.elements as any)[p];
+        if (typeof nc === "function") return nc;
+        if (nc == null) return null;
+        return trackedStructure(nc, tracker);
+      }
+      if (p in cv) return trackedStructure((cc.fields as any)[p], tracker);
+      return undefined;
+    },
+  }) as A;
+}

package/src/renderers.tsx

@@ -428,8 +428,8 @@ export function createDefaultGroupRenderer(
     const { style, className: gcn } = isGridRenderer(renderOptions)
       ? gridStyles(renderOptions)
       : isFlexRenderer(renderOptions)
-      ? flexStyles(renderOptions)
-      : ({ className: standardClassName } as StyleProps);
+        ? flexStyles(renderOptions)
+        : ({ className: standardClassName } as StyleProps);
 
     return (cp: ControlLayoutProps) => {
       return {
@@ -531,7 +531,11 @@ export function createDefaultDataRenderer(
         style: props.style,
         className: props.className,
         renderOptions: { type: "Standard", hideTitle: true },
-        renderChild: (i) => props.renderChild(i, i, { control: props.control }),
+        renderChild: (i) =>
+          props.renderChild(i, i, {
+            control: props.dataContext.data,
+            parentPath: props.dataContext.path,
+          }),
         childCount: props.childCount,
       });
     }

package/src/schemaBuilder.ts

@@ -5,22 +5,22 @@ type AllowedSchema<T> = T extends string
       type: FieldType.String | FieldType.Date | FieldType.DateTime;
     }
   : T extends number
-  ? SchemaField & {
-      type: FieldType.Int | FieldType.Double;
-    }
-  : T extends boolean
-  ? SchemaField & {
-      type: FieldType.Bool;
-    }
-  : T extends Array<infer E>
-  ? AllowedSchema<E> & {
-      collection: true;
-    }
-  : T extends { [key: string]: any }
-  ? CompoundField & {
-      type: FieldType.Compound;
-    }
-  : SchemaField & { type: FieldType.Any };
+    ? SchemaField & {
+        type: FieldType.Int | FieldType.Double;
+      }
+    : T extends boolean
+      ? SchemaField & {
+          type: FieldType.Bool;
+        }
+      : T extends Array<infer E>
+        ? AllowedSchema<E> & {
+            collection: true;
+          }
+        : T extends { [key: string]: any }
+          ? CompoundField & {
+              type: FieldType.Compound;
+            }
+          : SchemaField & { type: FieldType.Any };
 
 type AllowedField<T, K> = (
   name: string,
@@ -56,10 +56,10 @@ export function stringOptionsField(
   });
 }
 
-export function withScalarOptions<S extends SchemaField>(
-  options: Partial<SchemaField>,
-  v: (name: string) => S,
-): (name: string) => S {
+export function withScalarOptions<
+  S extends SchemaField,
+  S2 extends Partial<SchemaField>,
+>(options: S2, v: (name: string) => S): (name: string) => S & S2 {
   return (n) => ({ ...v(n), ...options });
 }
 

package/src/util.ts

@@ -19,9 +19,9 @@ import {
 import { MutableRefObject, useRef } from "react";
 import { Control } from "@react-typed-forms/core";
 import clsx from "clsx";
+import { DataContext, JsonPath } from "./controlRender";
 
-export interface ControlDataContext {
-  groupControl: Control<any>;
+export interface ControlDataContext extends DataContext {
   fields: SchemaField[];
   schemaInterface: SchemaInterface;
 }
@@ -251,7 +251,7 @@ export function getTypeField(
 ): Control<string> | undefined {
   const typeSchemaField = context.fields.find((x) => x.isTypeField);
   return typeSchemaField
-    ? context.groupControl.fields?.[typeSchemaField.field]
+    ? lookupChildControl(context, typeSchemaField.field)
     : undefined;
 }
 
@@ -307,30 +307,42 @@ export function visitControlData<A>(
     if (!fieldData)
       return !fieldName ? visitControlDataArray(children, ctx, cb) : undefined;
 
-    const control = ctx.groupControl.fields[fieldData.field];
+    const thisPath = [...ctx.path, fieldData.field];
+    const control = ctx.data.lookupControl(thisPath);
+    if (!control) throw "No control for field";
     const result = def ? cb(def, fieldData, control, false) : undefined;
     if (result !== undefined) return result;
     if (fieldData.collection) {
-      for (const c of control.elements ?? []) {
+      let cIndex = 0;
+      for (const c of control!.elements ?? []) {
         const elemResult = def ? cb(def, fieldData, c, true) : undefined;
         if (elemResult !== undefined) return elemResult;
         if (isCompoundField(fieldData)) {
           const cfResult = visitControlDataArray(
             children,
             {
+              ...ctx,
               fields: fieldData.children,
-              groupControl: c,
-              schemaInterface: ctx.schemaInterface,
+              path: [...thisPath, cIndex],
             },
             cb,
           );
           if (cfResult !== undefined) return cfResult;
         }
+        cIndex++;
       }
     }
   }
 }
 
+export function lookupChildControl(
+  data: DataContext,
+  child: JsonPath,
+): Control<any> | undefined {
+  const childPath = [...data.path, child];
+  return data.data.lookupControl(childPath);
+}
+
 export function cleanDataForSchema(
   v: { [k: string]: any } | undefined,
   fields: SchemaField[],
@@ -383,3 +395,16 @@ export function getAllReferencedClasses(c: ControlDefinition): string[] {
   if (childClasses) return [tc, ...childClasses];
   return [tc];
 }
+
+export function jsonPathString(jsonPath: JsonPath[]) {
+  let out = "";
+  jsonPath.forEach((v, i) => {
+    if (typeof v === "number") {
+      out += "[" + v + "]";
+    } else {
+      if (i > 0) out += ".";
+      out += v;
+    }
+  });
+  return out;
+}

package/src/validators.ts

@@ -70,7 +70,7 @@ function useJsonataValidator(
   hidden: boolean,
   i: number,
 ) {
-  const errorMsg = useJsonataExpression(expr.expression, context.groupControl);
+  const errorMsg = useJsonataExpression(expr.expression, context);
   useControlEffect(
     () => [hidden, errorMsg.value],
     ([hidden, msg]) => control.setError("jsonata" + i, !hidden ? msg : null),