@react-typed-forms/schemas 4.1.0 → 5.0.0

package/lib/internal.d.ts

@@ -0,0 +1,2 @@
+import { Control } from "@react-typed-forms/core";
+export declare function useCalculatedControl<V>(calculate: () => V): Control<V>;

package/lib/renderers.d.ts

@@ -164,8 +164,7 @@ export declare function DefaultVisibility({ visibility, children, }: {
     visibility: Control<Visibility | undefined>;
     children: () => ReactNode;
 }): string | number | boolean | Iterable<React.ReactNode> | React.JSX.Element | null | undefined;
-export declare function DefaultLayout({ className, errorClass, errorControl, layout: { controlEnd, controlStart, label, children }, }: DefaultLayoutRendererOptions & {
-    errorControl?: Control<any>;
+export declare function DefaultLayout({ className, errorClass, layout: { controlEnd, controlStart, label, children, errorControl }, }: DefaultLayoutRendererOptions & {
     layout: RenderedLayout;
 }): React.JSX.Element;
 export {};

package/lib/types.d.ts

@@ -61,7 +61,9 @@ export interface DynamicProperty {
 }
 export declare enum DynamicPropertyType {
     Visible = "Visible",
-    DefaultValue = "DefaultValue"
+    DefaultValue = "DefaultValue",
+    Readonly = "Readonly",
+    Disabled = "Disabled"
 }
 export interface EntityExpression {
     type: string;

package/lib/util.d.ts

@@ -27,6 +27,7 @@ export declare function hasOptions(o: {
 export declare function defaultControlForField(sf: SchemaField): DataControlDefinition | GroupedControlsDefinition;
 export declare function addMissingControls(fields: SchemaField[], controls: ControlDefinition[]): ControlDefinition[];
 export declare function useUpdatedRef<A>(a: A): MutableRefObject<A>;
+export declare function isControlReadonly(c: ControlDefinition): boolean;
 export declare function getTypeField(context: ControlGroupContext): Control<string> | undefined;
 export declare function visitControlDataArray<A>(controls: ControlDefinition[] | undefined | null, context: ControlGroupContext, cb: (definition: DataControlDefinition, field: SchemaField, control: Control<any>, element: boolean) => A | undefined): A | undefined;
 export declare function visitControlData<A>(definition: ControlDefinition, ctx: ControlGroupContext, cb: (definition: DataControlDefinition, field: SchemaField, control: Control<any>, element: boolean) => A | undefined): A | undefined;

package/package.json

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

package/src/controlBuilder.ts

@@ -53,10 +53,19 @@ export function htmlDisplayControl(
 export function dynamicDefaultValue(expr: EntityExpression): DynamicProperty {
   return { type: DynamicPropertyType.DefaultValue, expr };
 }
-export function visibility(expr: EntityExpression): DynamicProperty {
+
+export function dynamicReadonly(expr: EntityExpression): DynamicProperty {
+  return { type: DynamicPropertyType.Readonly, expr };
+}
+
+export function dynamicVisibility(expr: EntityExpression): DynamicProperty {
   return { type: DynamicPropertyType.Visible, expr };
 }
 
+export function dynamicDisabled(expr: EntityExpression): DynamicProperty {
+  return { type: DynamicPropertyType.Disabled, expr };
+}
+
 export function fieldEqExpr(field: string, value: any): FieldValueExpression {
   return { type: ExpressionType.FieldValue, field, value };
 }

package/src/controlRender.tsx

@@ -4,7 +4,7 @@ import React, {
   Key,
   ReactNode,
   useCallback,
-  useRef,
+  useEffect,
 } from "react";
 import {
   addElement,
@@ -12,7 +12,6 @@ import {
   newControl,
   removeElement,
   useComponentTracking,
-  useComputed,
   useControl,
   useControlEffect,
 } from "@react-typed-forms/core";
@@ -40,8 +39,16 @@ import {
   useUpdatedRef,
 } from "./util";
 import { dataControl } from "./controlBuilder";
-import { useEvalDefaultValueHook, useEvalVisibilityHook } from "./hooks";
+import {
+  defaultUseEvalExpressionHook,
+  useEvalDefaultValueHook,
+  useEvalDisabledHook,
+  UseEvalExpressionHook,
+  useEvalReadonlyHook,
+  useEvalVisibilityHook,
+} from "./hooks";
 import { useValidationHook } from "./validators";
+import { useCalculatedControl } from "./internal";
 
 export interface FormRenderer {
   renderData: (
@@ -102,6 +109,7 @@ export interface RenderedLayout {
   controlEnd?: ReactNode;
   label?: ReactNode;
   children?: ReactNode;
+  errorControl?: Control<any>;
 }
 
 export interface ControlLayoutProps {
@@ -152,7 +160,8 @@ export interface ControlRenderProps {
 
 export interface FormContextOptions {
   readonly?: boolean | null;
-  hidden?: boolean;
+  hidden?: boolean | null;
+  disabled?: boolean | null;
 }
 
 export type CreateDataProps = (
@@ -164,6 +173,7 @@ export type CreateDataProps = (
 ) => DataRendererProps;
 export interface ControlRenderOptions extends FormContextOptions {
   useDataHook?: (c: ControlDefinition) => CreateDataProps;
+  useEvalExpressionHook?: UseEvalExpressionHook;
   clearHidden?: boolean;
 }
 export function useControlRenderer(
@@ -173,10 +183,17 @@ export function useControlRenderer(
   options: ControlRenderOptions = {},
 ): FC<ControlRenderProps> {
   const dataProps = options.useDataHook?.(definition) ?? defaultDataProps;
+  const useExpr = options.useEvalExpressionHook ?? defaultUseEvalExpressionHook;
 
   const schemaField = lookupSchemaField(definition, fields);
-  const useDefaultValue = useEvalDefaultValueHook(definition, schemaField);
-  const useIsVisible = useEvalVisibilityHook(definition, schemaField);
+  const useDefaultValue = useEvalDefaultValueHook(
+    useExpr,
+    definition,
+    schemaField,
+  );
+  const useIsVisible = useEvalVisibilityHook(useExpr, definition, schemaField);
+  const useIsReadonly = useEvalReadonlyHook(useExpr, definition);
+  const useIsDisabled = useEvalDisabledHook(useExpr, definition);
   const useValidation = useValidationHook(definition);
   const r = useUpdatedRef({ options, definition, fields, schemaField });
 
@@ -189,6 +206,8 @@ export function useControlRenderer(
           groupControl: parentControl,
           fields,
         };
+        const readonlyControl = useIsReadonly(groupContext);
+        const disabledControl = useIsDisabled(groupContext);
         const visibleControl = useIsVisible(groupContext);
         const visible = visibleControl.current.value;
         const visibility = useControl<Visibility | undefined>(() =>
@@ -236,16 +255,23 @@ export function useControlRenderer(
           },
           true,
         );
-        const hidden = useComputed(
-          () => options.hidden || !visibility.fields?.showing.value,
-        ).value;
-        useValidation(control!, hidden, groupContext);
-        const myOptions =
-          options.hidden !== hidden ? { ...options, hidden } : options;
+        const myOptions = useCalculatedControl<FormContextOptions>(() => ({
+          hidden: options.hidden || !visibility.fields?.showing.value,
+          readonly: options.readonly || readonlyControl.value,
+          disabled: options.disabled || disabledControl.value,
+        })).value;
+        useValidation(control!, !!myOptions.hidden, groupContext);
         const childRenderers: FC<ControlRenderProps>[] =
           c.children?.map((cd) =>
-            useControlRenderer(cd, childContext.fields, renderer, myOptions),
+            useControlRenderer(cd, childContext.fields, renderer, {
+              ...options,
+              ...myOptions,
+            }),
           ) ?? [];
+        useEffect(() => {
+          if (control && typeof myOptions.disabled === "boolean")
+            control.disabled = myOptions.disabled;
+        }, [control, myOptions.disabled]);
         if (parentControl.isNull) return <></>;
         const adornments =
           definition.adornments?.map((x) =>
@@ -272,7 +298,16 @@ export function useControlRenderer(
         stopTracking();
       }
     },
-    [r, dataProps, useIsVisible, useDefaultValue, useValidation, renderer],
+    [
+      r,
+      dataProps,
+      useIsVisible,
+      useDefaultValue,
+      useIsReadonly,
+      useIsDisabled,
+      useValidation,
+      renderer,
+    ],
   );
   (Component as any).displayName = "RenderControl";
   return Component;
@@ -358,7 +393,7 @@ export const defaultDataProps: CreateDataProps = (
     field,
     id: "c" + control.uniqueId,
     options: (field.options?.length ?? 0) === 0 ? null : field.options,
-    readonly: options.readonly || !!definition.readonly,
+    readonly: !!options.readonly,
     renderOptions: definition.renderOptions ?? { type: "Standard" },
     required: !!definition.required,
     hidden: !!options.hidden,
@@ -523,7 +558,7 @@ export function renderControlLayout(
 }
 
 export function appendMarkup(
-  k: keyof RenderedLayout,
+  k: keyof Omit<RenderedLayout, "errorControl">,
   markup: ReactNode,
 ): (layout: RenderedLayout) => void {
   return (layout) =>
@@ -536,7 +571,7 @@ export function appendMarkup(
 }
 
 export function wrapMarkup(
-  k: keyof RenderedLayout,
+  k: keyof Omit<RenderedLayout, "errorControl">,
   wrap: (ex: ReactNode) => ReactNode,
 ): (layout: RenderedLayout) => void {
   return (layout) => (layout[k] = wrap(layout[k]));
@@ -544,7 +579,7 @@ export function wrapMarkup(
 
 export function layoutKeyForPlacement(
   pos: AdornmentPlacement,
-): keyof RenderedLayout {
+): keyof Omit<RenderedLayout, "errorControl"> {
   switch (pos) {
     case AdornmentPlacement.ControlEnd:
       return "controlEnd";
@@ -576,7 +611,10 @@ export function renderLayoutParts(
   renderer: FormRenderer,
 ): RenderedLayout {
   const processed = props.processLayout?.(props) ?? props;
-  const layout: RenderedLayout = { children: processed.children };
+  const layout: RenderedLayout = {
+    children: processed.children,
+    errorControl: processed.errorControl,
+  };
   (processed.adornments ?? [])
     .sort((a, b) => a.priority - b.priority)
     .forEach((x) => x.apply(layout));

package/src/hooks.tsx

@@ -21,17 +21,25 @@ import {
   defaultValueForField,
   findField,
   getTypeField,
+  isControlReadonly,
   useUpdatedRef,
 } from "./util";
 import jsonata from "jsonata";
+import { useCalculatedControl } from "./internal";
+
+export type UseEvalExpressionHook = (
+  expr: EntityExpression | undefined,
+) => EvalExpressionHook | undefined;
 
 export function useEvalVisibilityHook(
+  useEvalExpressionHook: UseEvalExpressionHook,
   definition: ControlDefinition,
   schemaField?: SchemaField,
 ): EvalExpressionHook<boolean> {
   const dynamicVisibility = useEvalDynamicHook(
     definition,
     DynamicPropertyType.Visible,
+    useEvalExpressionHook,
   );
   const r = useUpdatedRef(schemaField);
   return useCallback(
@@ -46,13 +54,52 @@ export function useEvalVisibilityHook(
   );
 }
 
+export function useEvalReadonlyHook(
+  useEvalExpressionHook: UseEvalExpressionHook,
+  definition: ControlDefinition,
+): EvalExpressionHook<boolean> {
+  const dynamicReadonly = useEvalDynamicHook(
+    definition,
+    DynamicPropertyType.Readonly,
+    useEvalExpressionHook,
+  );
+  const r = useUpdatedRef(definition);
+  return useCallback(
+    (ctx) => {
+      if (dynamicReadonly) return dynamicReadonly(ctx);
+      return useCalculatedControl(() => isControlReadonly(r.current));
+    },
+    [dynamicReadonly, r],
+  );
+}
+
+export function useEvalDisabledHook(
+  useEvalExpressionHook: UseEvalExpressionHook,
+  definition: ControlDefinition,
+): EvalExpressionHook<boolean> {
+  const dynamicDisabled = useEvalDynamicHook(
+    definition,
+    DynamicPropertyType.Disabled,
+    useEvalExpressionHook,
+  );
+  return useCallback(
+    (ctx) => {
+      if (dynamicDisabled) return dynamicDisabled(ctx);
+      return useControl(false);
+    },
+    [dynamicDisabled],
+  );
+}
+
 export function useEvalDefaultValueHook(
+  useEvalExpressionHook: UseEvalExpressionHook,
   definition: ControlDefinition,
   schemaField?: SchemaField,
 ): EvalExpressionHook {
   const dynamicValue = useEvalDynamicHook(
     definition,
     DynamicPropertyType.DefaultValue,
+    useEvalExpressionHook,
   );
   const r = useUpdatedRef({ definition, schemaField });
   return useCallback(
@@ -91,37 +138,53 @@ function useFieldValueExpression(
     return Array.isArray(fv) ? fv.includes(fvExpr.value) : fv === fvExpr.value;
   });
 }
-function useEvalExpressionHook(
-  expr: EntityExpression | undefined,
-): EvalExpressionHook | undefined {
-  const r = useUpdatedRef(expr);
-  const cb = useCallback(
-    ({ groupControl, fields }: ControlGroupContext) => {
-      const expr = r.current!;
-      switch (expr.type) {
-        case ExpressionType.Jsonata:
-          return useJsonataExpression(
-            (expr as JsonataExpression).expression,
-            groupControl,
-          );
-        case ExpressionType.FieldValue:
-          return useFieldValueExpression(
-            expr as FieldValueExpression,
-            fields,
-            groupControl,
-          );
-        default:
-          return useControl(undefined);
-      }
-    },
-    [expr?.type, r],
-  );
-  return expr ? cb : undefined;
+
+function defaultEvalHooks(
+  expr: EntityExpression,
+  context: ControlGroupContext,
+) {
+  switch (expr.type) {
+    case ExpressionType.Jsonata:
+      return useJsonataExpression(
+        (expr as JsonataExpression).expression,
+        context.groupControl,
+      );
+    case ExpressionType.FieldValue:
+      return useFieldValueExpression(
+        expr as FieldValueExpression,
+        context.fields,
+        context.groupControl,
+      );
+    default:
+      return useControl(undefined);
+  }
+}
+
+export const defaultUseEvalExpressionHook =
+  makeEvalExpressionHook(defaultEvalHooks);
+
+function makeEvalExpressionHook(
+  f: (expr: EntityExpression, context: ControlGroupContext) => Control<any>,
+): (expr: EntityExpression | undefined) => EvalExpressionHook | undefined {
+  return (expr) => {
+    const r = useUpdatedRef(expr);
+    const cb = useCallback(
+      (ctx: ControlGroupContext) => {
+        const expr = r.current!;
+        return f(expr, ctx);
+      },
+      [expr?.type, r],
+    );
+    return expr ? cb : undefined;
+  };
 }
 
 export function useEvalDynamicHook(
   definition: ControlDefinition,
   type: DynamicPropertyType,
+  useEvalExpressionHook: (
+    expr: EntityExpression | undefined,
+  ) => EvalExpressionHook | undefined,
 ): EvalExpressionHook | undefined {
   const expression = definition.dynamic?.find((x) => x.type === type);
   return useEvalExpressionHook(expression?.expr);

package/src/internal.ts

@@ -0,0 +1,7 @@
+import { Control, useControl, useControlEffect } from "@react-typed-forms/core";
+
+export function useCalculatedControl<V>(calculate: () => V): Control<V> {
+  const c = useControl(calculate);
+  useControlEffect(calculate, (v) => (c.value = v));
+  return c;
+}

package/src/renderers.tsx

@@ -564,7 +564,6 @@ function createDefaultLayoutRenderer(
   return createLayoutRenderer((props, renderers) => {
     return (
       <DefaultLayout
-        errorControl={props.errorControl}
         layout={renderLayoutParts(props, renderers)}
         {...options}
       />
@@ -820,10 +819,8 @@ export function DefaultVisibility({
 export function DefaultLayout({
   className,
   errorClass,
-  errorControl,
-  layout: { controlEnd, controlStart, label, children },
+  layout: { controlEnd, controlStart, label, children, errorControl },
 }: DefaultLayoutRendererOptions & {
-  errorControl?: Control<any>;
   layout: RenderedLayout;
 }) {
   const ec = errorControl;

package/src/types.ts

@@ -75,6 +75,8 @@ export interface DynamicProperty {
 export enum DynamicPropertyType {
   Visible = "Visible",
   DefaultValue = "DefaultValue",
+  Readonly = "Readonly",
+  Disabled = "Disabled",
 }
 
 export interface EntityExpression {

package/src/util.ts

@@ -79,7 +79,7 @@ export function defaultValueForField(
     return sf.notNullable ? (sf.collection ? [] : {}) : undefined;
   }
   if (sf.collection) {
-    return isRequired ? [undefined] : [];
+    return [];
   }
   return undefined;
 }
@@ -234,6 +234,10 @@ export function useUpdatedRef<A>(a: A): MutableRefObject<A> {
   return r;
 }
 
+export function isControlReadonly(c: ControlDefinition): boolean {
+  return isDataControl(c) && !!c.readonly;
+}
+
 export function getTypeField(
   context: ControlGroupContext,
 ): Control<string> | undefined {