@react-typed-forms/schemas 7.2.0 → 7.3.1

package/lib/internal.d.ts

@@ -1,3 +1,4 @@
-import { Control } from "@react-typed-forms/core";
+import { ChangeListenerFunc, Control } from "@react-typed-forms/core";
 export declare function useCalculatedControl<V>(calculate: () => V): Control<V>;
 export declare function cc(n: string | null | undefined): string | undefined;
+export declare function trackedStructure<A>(c: Control<A>, tracker: ChangeListenerFunc<any>): A;

package/lib/util.d.ts

@@ -1,9 +1,8 @@
 import { CompoundField, ControlDefinition, DataControlDefinition, DisplayOnlyRenderOptions, FieldOption, GroupedControlsDefinition, SchemaField, SchemaInterface } from "./types";
 import { MutableRefObject } from "react";
 import { Control } from "@react-typed-forms/core";
-export interface ControlDataContext {
-    groupControl: Control<any>;
-    root: Control<any>;
+import { DataContext, JsonPath } from "./controlRender";
+export interface ControlDataContext extends DataContext {
     fields: SchemaField[];
     schemaInterface: SchemaInterface;
 }
@@ -34,7 +33,9 @@ export declare function getDisplayOnlyOptions(d: ControlDefinition): DisplayOnly
 export declare function getTypeField(context: ControlDataContext): Control<string> | undefined;
 export declare function visitControlDataArray<A>(controls: ControlDefinition[] | undefined | null, context: ControlDataContext, cb: (definition: DataControlDefinition, field: SchemaField, control: Control<any>, element: boolean) => A | undefined): A | undefined;
 export declare function visitControlData<A>(definition: ControlDefinition, ctx: ControlDataContext, cb: (definition: DataControlDefinition, field: SchemaField, control: Control<any>, element: boolean) => A | undefined): A | undefined;
+export declare function lookupChildControl(data: DataContext, child: JsonPath): Control<any> | undefined;
 export declare function cleanDataForSchema(v: {
     [k: string]: any;
 } | undefined, fields: SchemaField[]): any;
 export declare function getAllReferencedClasses(c: ControlDefinition): string[];
+export declare function jsonPathString(jsonPath: JsonPath[]): string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-typed-forms/schemas",
-  "version": "7.2.0",
+  "version": "7.3.1",
   "description": "",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -24,7 +24,7 @@
     "material-ui"
   ],
   "dependencies": {
-    "@react-typed-forms/core": "^3.0.0",
+    "@react-typed-forms/core": "^3.1.0",
     "clsx": "^1 || ^2",
     "jsonata": "^2.0.4",
     "react": "^18.2.0"

package/src/controlRender.tsx

@@ -10,8 +10,10 @@ import React, {
 import {
   addElement,
   Control,
+  ControlChange,
   newControl,
   removeElement,
+  trackControlChange,
   useComponentTracking,
   useControl,
   useControlEffect,
@@ -166,6 +168,7 @@ export interface GroupRendererProps {
 }
 
 export interface DataRendererProps {
+  definition: DataControlDefinition;
   renderOptions: RenderOptions;
   field: SchemaField;
   id: string;
@@ -192,6 +195,7 @@ export interface ActionRendererProps {
 
 export interface ControlRenderProps {
   control: Control<any>;
+  parentPath?: JsonPath[];
 }
 
 export interface FormContextOptions {
@@ -210,18 +214,23 @@ export interface DataControlProps {
   childCount: number;
   renderChild: ChildRenderer;
   allowedOptions?: Control<any[] | undefined>;
-  elementRenderer?: (elemProps: Control<any>) => ReactNode;
+  elementRenderer?: (elemIndex: number) => ReactNode;
 }
 export type CreateDataProps = (
   controlProps: DataControlProps,
 ) => DataRendererProps;
 
+export type JsonPath = string | number;
+
+export interface DataContext {
+  data: Control<any>;
+  path: JsonPath[];
+}
 export interface ControlRenderOptions extends FormContextOptions {
   useDataHook?: (c: ControlDefinition) => CreateDataProps;
   useEvalExpressionHook?: UseEvalExpressionHook;
   clearHidden?: boolean;
   schemaInterface?: SchemaInterface;
-  dataRoot?: Control<any>;
 }
 export function useControlRenderer(
   definition: ControlDefinition,
@@ -258,22 +267,22 @@ export function useControlRenderer(
   const r = useUpdatedRef({ options, definition, fields, schemaField });
 
   const Component = useCallback(
-    ({ control: parentControl }: ControlRenderProps) => {
+    ({ control: rootControl, parentPath = [] }: ControlRenderProps) => {
       const stopTracking = useComponentTracking();
       try {
         const { definition: c, options, fields, schemaField } = r.current;
-        const dataContext: ControlDataContext = {
-          groupControl: parentControl,
+        const parentDataContext: ControlDataContext = {
           fields,
           schemaInterface,
-          root: options.dataRoot ?? parentControl,
+          data: rootControl,
+          path: parentPath,
         };
-        const readonlyControl = useIsReadonly(dataContext);
-        const disabledControl = useIsDisabled(dataContext);
-        const visibleControl = useIsVisible(dataContext);
-        const displayControl = useDynamicDisplay(dataContext);
-        const customStyle = useCustomStyle(dataContext).value;
-        const layoutStyle = useLayoutStyle(dataContext).value;
+        const readonlyControl = useIsReadonly(parentDataContext);
+        const disabledControl = useIsDisabled(parentDataContext);
+        const visibleControl = useIsVisible(parentDataContext);
+        const displayControl = useDynamicDisplay(parentDataContext);
+        const customStyle = useCustomStyle(parentDataContext).value;
+        const layoutStyle = useLayoutStyle(parentDataContext).value;
         const visible = visibleControl.current.value;
         const visibility = useControl<Visibility | undefined>(() =>
           visible != null
@@ -294,31 +303,33 @@ export function useControlRenderer(
           },
         );
 
-        const allowedOptions = useAllowedOptions(dataContext);
-        const defaultValueControl = useDefaultValue(dataContext);
-        const [control, childContext] = getControlData(
+        const allowedOptions = useAllowedOptions(parentDataContext);
+        const defaultValueControl = useDefaultValue(parentDataContext);
+        const [parentControl, control, controlDataContext] = getControlData(
           schemaField,
-          dataContext,
+          parentDataContext,
         );
         useControlEffect(
           () => [
             visibility.value,
             defaultValueControl.value,
             control,
-            parentControl.isNull,
             isDataControlDefinition(definition) && definition.dontClearHidden,
+            parentControl?.isNull,
           ],
-          ([vc, dv, cd, pn, dontClear]) => {
-            if (pn) {
-              parentControl.value = {};
-            }
+          ([vc, dv, cd, dontClear, parentNull]) => {
             if (vc && cd && vc.visible === vc.showing) {
               if (!vc.visible) {
-                if (options.clearHidden && !dontClear) cd.value = undefined;
+                if (options.clearHidden && !dontClear) {
+                  cd.value = undefined;
+                }
               } else if (cd.value == null) {
                 cd.value = dv;
               }
             }
+            if (parentNull && parentControl?.isNull) {
+              parentControl.value = {};
+            }
           },
           true,
         );
@@ -327,20 +338,25 @@ export function useControlRenderer(
           readonly: options.readonly || readonlyControl.value,
           disabled: options.disabled || disabledControl.value,
         })).value;
-        useValidation(control!, !!myOptions.hidden, dataContext);
+        useValidation(
+          control ?? newControl(null),
+          !!myOptions.hidden,
+          parentDataContext,
+        );
         const childRenderers: FC<ControlRenderProps>[] =
           c.children?.map((cd) =>
-            useControlRenderer(cd, childContext.fields, renderer, {
+            useControlRenderer(cd, controlDataContext.fields, renderer, {
               ...options,
               ...myOptions,
-              dataRoot: dataContext.root,
             }),
           ) ?? [];
+
         useEffect(() => {
           if (control && typeof myOptions.disabled === "boolean")
             control.disabled = myOptions.disabled;
         }, [control, myOptions.disabled]);
-        if (parentControl.isNull) return <></>;
+        if (parentControl?.isNull) return <></>;
+
         const adornments =
           definition.adornments?.map((x) =>
             renderer.renderAdornment({ adornment: x }),
@@ -355,7 +371,7 @@ export function useControlRenderer(
           },
           createDataProps: dataProps,
           formOptions: myOptions,
-          dataContext,
+          dataContext: controlDataContext,
           control: displayControl ?? control,
           schemaField,
           displayControl,
@@ -406,17 +422,24 @@ export function lookupSchemaField(
 export function getControlData(
   schemaField: SchemaField | undefined,
   parentContext: ControlDataContext,
-): [Control<any> | undefined, ControlDataContext] {
-  const childControl: Control<any> | undefined = schemaField
-    ? parentContext.groupControl.fields?.[schemaField.field] ?? newControl({})
-    : undefined;
+): [Control<any> | undefined, Control<any> | undefined, ControlDataContext] {
+  const { data, path } = parentContext;
+  const parentControl = data.lookupControl(path);
+  const childPath = schemaField ? [...path, schemaField.field] : path;
+  const childControl =
+    schemaField && parentControl
+      ? parentControl.fields[schemaField.field]
+      : undefined;
   return [
+    parentControl,
     childControl,
-    schemaField && isCompoundField(schemaField)
+    schemaField
       ? {
           ...parentContext,
-          groupControl: childControl!,
-          fields: schemaField.children,
+          path: childPath,
+          fields: isCompoundField(schemaField)
+            ? schemaField.children
+            : parentContext.fields,
         }
       : parentContext,
   ];
@@ -426,13 +449,14 @@ function groupProps(
   renderOptions: GroupRenderOptions = { type: "Standard" },
   childCount: number,
   renderChild: ChildRenderer,
-  control: Control<any>,
+  data: DataContext,
   className: string | null | undefined,
   style: React.CSSProperties | undefined,
 ): GroupRendererProps {
   return {
     childCount,
-    renderChild: (i) => renderChild(i, i, { control }),
+    renderChild: (i) =>
+      renderChild(i, i, { control: data.data, parentPath: data.path }),
     renderOptions,
     className: cc(className),
     style,
@@ -455,6 +479,7 @@ export function defaultDataProps({
     (field.options?.length ?? 0) === 0 ? null : field.options;
   const allowed = allowedOptions?.value ?? [];
   return {
+    definition,
     control,
     field,
     id: "c" + control.uniqueId,
@@ -489,7 +514,7 @@ export function defaultArrayProps(
   required: boolean,
   style: CSSProperties | undefined,
   className: string | undefined,
-  renderElement: (elemProps: Control<any>) => ReactNode,
+  renderElement: (elemIndex: number) => ReactNode,
 ): ArrayRendererProps {
   const noun = field.displayName ?? field.field;
   const elems = arrayControl.elements ?? [];
@@ -508,7 +533,7 @@ export function defaultArrayProps(
       actionText: "Remove",
       onClick: () => removeElement(arrayControl, i),
     }),
-    renderElement: (i) => renderElement(elems[i]),
+    renderElement: (i) => renderElement(i),
     className: cc(className),
     style,
   };
@@ -566,7 +591,7 @@ export function renderControlLayout({
           c.groupOptions,
           childCount,
           childRenderer,
-          dataContext.groupControl,
+          dataContext,
           c.styleClass,
           style,
         ),
@@ -601,22 +626,26 @@ export function renderControlLayout({
   }
   return {};
 
-  function renderData(c: DataControlDefinition, elementControl?: Control<any>) {
+  function renderData(c: DataControlDefinition, elemIndex?: number) {
     if (!schemaField) return { children: "No schema field for: " + c.field };
+    if (!childControl) return { children: "No control for: " + c.field };
     const props = dataProps({
       definition: c,
       field: schemaField,
-      dataContext,
-      control: elementControl ?? childControl!,
+      dataContext:
+        elemIndex != null
+          ? { ...dataContext, path: [...dataContext.path, elemIndex] }
+          : dataContext,
+      control:
+        elemIndex != null ? childControl!.elements[elemIndex] : childControl,
       options: dataOptions,
       style,
       childCount,
       allowedOptions,
       renderChild: childRenderer,
       elementRenderer:
-        elementControl == null && schemaField.collection
-          ? (element) =>
-              renderLayoutParts(renderData(c, element), renderer).children
+        elemIndex == null && schemaField.collection
+          ? (ei) => renderLayoutParts(renderData(c, ei), renderer).children
           : undefined,
     });
 
@@ -635,32 +664,6 @@ export function renderControlLayout({
       errorControl: childControl,
     };
   }
-
-  function compoundRenderer(i: number, control: Control<any>): ReactNode {
-    const { className, style, children } = renderer.renderLayout({
-      processLayout: renderer.renderGroup({
-        renderOptions: { type: "Standard", hideTitle: true },
-        childCount,
-        renderChild: (ci) => childRenderer(ci, ci, { control }),
-      }),
-    });
-    return (
-      <div key={control.uniqueId} style={style} className={cc(className)}>
-        {children}
-      </div>
-    );
-  }
-  function scalarRenderer(
-    dataProps: DataRendererProps,
-  ): (i: number, control: Control<any>) => ReactNode {
-    return (i, control) => {
-      return (
-        <Fragment key={control.uniqueId}>
-          {renderer.renderData({ ...dataProps, control })({}).children}
-        </Fragment>
-      );
-    };
-  }
 }
 
 export function appendMarkup(
@@ -740,3 +743,23 @@ export function controlTitle(
 ) {
   return title ? title : fieldDisplayName(field);
 }
+
+function lookupControl(
+  base: Control<any> | undefined,
+  path: (string | number)[],
+): Control<any> | undefined {
+  let index = 0;
+  while (index < path.length && base) {
+    const childId = path[index];
+    const c = base.current;
+    if (typeof childId === "string") {
+      const next = c.fields?.[childId];
+      if (!next) trackControlChange(base, ControlChange.Structure);
+      base = next;
+    } else {
+      base = c.elements?.[childId];
+    }
+    index++;
+  }
+  return base;
+}

package/src/hooks.tsx

@@ -10,12 +10,15 @@ import {
   SchemaField,
   SchemaInterface,
 } from "./types";
-import { useCallback, useMemo } from "react";
+import { useCallback, useEffect, useMemo, useRef } from "react";
 import {
+  addAfterChangesCallback,
+  collectChanges,
   Control,
+  makeChangeTracker,
   useComputed,
   useControl,
-  useControlEffect,
+  useRefState,
 } from "@react-typed-forms/core";
 
 import {
@@ -25,10 +28,13 @@ import {
   getDisplayOnlyOptions,
   getTypeField,
   isControlReadonly,
+  jsonPathString,
+  lookupChildControl,
   useUpdatedRef,
 } from "./util";
 import jsonata from "jsonata";
-import { useCalculatedControl } from "./internal";
+import { trackedStructure, useCalculatedControl } from "./internal";
+import { DataContext } from "./controlRender";
 
 export type UseEvalExpressionHook = (
   expr: EntityExpression | undefined,
@@ -192,20 +198,24 @@ export type EvalExpressionHook<A = any> = (
 function useDataExpression(
   fvExpr: DataExpression,
   fields: SchemaField[],
-  data: Control<any>,
+  data: DataContext,
 ) {
   const refField = findField(fields, fvExpr.field);
-  const otherField = refField ? data.fields[refField.field] : undefined;
+  const otherField = refField
+    ? lookupChildControl(data, refField.field)
+    : undefined;
   return useCalculatedControl(() => otherField?.value);
 }
 
 function useDataMatchExpression(
   fvExpr: DataMatchExpression,
   fields: SchemaField[],
-  data: Control<any>,
+  data: DataContext,
 ) {
   const refField = findField(fields, fvExpr.field);
-  const otherField = refField ? data.fields[refField.field] : undefined;
+  const otherField = refField
+    ? lookupChildControl(data, refField.field)
+    : undefined;
   return useComputed(() => {
     const fv = otherField?.value;
     return Array.isArray(fv) ? fv.includes(fvExpr.value) : fv === fvExpr.value;
@@ -220,20 +230,15 @@ export function defaultEvalHooks(
     case ExpressionType.Jsonata:
       return useJsonataExpression(
         (expr as JsonataExpression).expression,
-        context.groupControl,
-        context.root,
+        context,
       );
     case ExpressionType.Data:
-      return useDataExpression(
-        expr as DataExpression,
-        context.fields,
-        context.groupControl,
-      );
+      return useDataExpression(expr as DataExpression, context.fields, context);
     case ExpressionType.DataMatch:
       return useDataMatchExpression(
         expr as DataMatchExpression,
         context.fields,
-        context.groupControl,
+        context,
       );
     default:
       return useControl(undefined);
@@ -291,31 +296,57 @@ export function hideDisplayOnly(
     !displayOptions.emptyText &&
     schemaInterface.isEmptyValue(
       field,
-      context.groupControl.fields[field.field].value,
+      lookupChildControl(context, field.field)?.value,
     )
   );
 }
 
 export function useJsonataExpression(
   jExpr: string,
-  data: Control<any>,
-  root: Control<any>,
+  dataContext: DataContext,
+  bindings?: () => Record<string, any>,
 ): Control<any> {
+  const pathString = jsonPathString(dataContext.path);
   const compiledExpr = useMemo(() => {
     try {
-      return jsonata(jExpr);
+      return jsonata(pathString ? pathString + ".(" + jExpr + ")" : jExpr);
     } catch (e) {
       console.error(e);
       return jsonata("null");
     }
-  }, [jExpr]);
+  }, [jExpr, pathString]);
   const control = useControl();
-  useControlEffect(
-    () => [data.value, root.value],
-    async ([v, rv]) => {
-      control.value = await compiledExpr.evaluate(v, { root: rv });
-    },
-    true,
+  const listenerRef = useRef<() => void>();
+  const [ref] = useRefState(() =>
+    makeChangeTracker(() => {
+      const l = listenerRef.current;
+      if (l) {
+        listenerRef.current = undefined;
+        addAfterChangesCallback(() => {
+          l();
+          listenerRef.current = l;
+        });
+      }
+    }),
   );
+  useEffect(() => {
+    listenerRef.current = apply;
+    apply();
+    async function apply() {
+      const [collect, updateSubscriptions] = ref.current;
+      try {
+        const bindingData = bindings
+          ? collectChanges(collect, bindings)
+          : undefined;
+        control.value = await compiledExpr.evaluate(
+          trackedStructure(dataContext.data, collect),
+          bindingData,
+        );
+      } finally {
+        updateSubscriptions();
+      }
+    }
+    return () => ref.current[1](true);
+  }, [compiledExpr]);
   return control;
 }

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,
       });
     }