@react-typed-forms/schemas 5.0.3 → 7.0.0

package/src/hooks.tsx

@@ -1,12 +1,14 @@
 import {
   ControlDefinition,
+  DataExpression,
+  DataMatchExpression,
   DynamicPropertyType,
   EntityExpression,
   ExpressionType,
-  FieldValueExpression,
   isDataControlDefinition,
   JsonataExpression,
   SchemaField,
+  SchemaInterface,
 } from "./types";
 import { useCallback, useMemo } from "react";
 import {
@@ -17,9 +19,10 @@ import {
 } from "@react-typed-forms/core";
 
 import {
-  ControlGroupContext,
+  ControlDataContext,
   defaultValueForField,
   findField,
+  getDisplayOnlyOptions,
   getTypeField,
   isControlReadonly,
   useUpdatedRef,
@@ -41,13 +44,23 @@ export function useEvalVisibilityHook(
     DynamicPropertyType.Visible,
     useEvalExpressionHook,
   );
-  const r = useUpdatedRef(schemaField);
+  const r = useUpdatedRef({ schemaField, definition });
   return useCallback(
     (ctx) => {
-      const schemaField = r.current;
+      const { schemaField, definition } = r.current;
       return (
         dynamicVisibility?.(ctx) ??
-        useComputed(() => matchesType(ctx, schemaField?.onlyForTypes))
+        useComputed(
+          () =>
+            matchesType(ctx, schemaField?.onlyForTypes) &&
+            (!schemaField ||
+              !hideDisplayOnly(
+                ctx,
+                schemaField,
+                definition,
+                ctx.schemaInterface,
+              )),
+        )
       );
     },
     [dynamicVisibility, r],
@@ -73,6 +86,25 @@ export function useEvalReadonlyHook(
   );
 }
 
+export function useEvalStyleHook(
+  useEvalExpressionHook: UseEvalExpressionHook,
+  property: DynamicPropertyType,
+  definition: ControlDefinition,
+): EvalExpressionHook<React.CSSProperties> {
+  const dynamicStyle = useEvalDynamicHook(
+    definition,
+    property,
+    useEvalExpressionHook,
+  );
+  return useCallback(
+    (ctx) => {
+      if (dynamicStyle) return dynamicStyle(ctx);
+      return useControl(undefined);
+    },
+    [dynamicStyle],
+  );
+}
+
 export function useEvalDisabledHook(
   useEvalExpressionHook: UseEvalExpressionHook,
   definition: ControlDefinition,
@@ -91,6 +123,19 @@ export function useEvalDisabledHook(
   );
 }
 
+export function useEvalDisplayHook(
+  useEvalExpressionHook: UseEvalExpressionHook,
+  definition: ControlDefinition,
+): (
+  groupContext: ControlDataContext,
+) => Control<string | undefined> | undefined {
+  const dynamicDisplay = useEvalDynamicHook(
+    definition,
+    DynamicPropertyType.Display,
+    useEvalExpressionHook,
+  );
+  return useCallback((ctx) => dynamicDisplay?.(ctx), [dynamicDisplay]);
+}
 export function useEvalDefaultValueHook(
   useEvalExpressionHook: UseEvalExpressionHook,
   definition: ControlDefinition,
@@ -123,11 +168,21 @@ export function useEvalDefaultValueHook(
 }
 
 export type EvalExpressionHook<A = any> = (
-  groupContext: ControlGroupContext,
+  groupContext: ControlDataContext,
 ) => Control<A | undefined>;
 
-function useFieldValueExpression(
-  fvExpr: FieldValueExpression,
+function useDataExpression(
+  fvExpr: DataExpression,
+  fields: SchemaField[],
+  data: Control<any>,
+) {
+  const refField = findField(fields, fvExpr.field);
+  const otherField = refField ? data.fields[refField.field] : undefined;
+  return useCalculatedControl(() => otherField?.value);
+}
+
+function useDataMatchExpression(
+  fvExpr: DataMatchExpression,
   fields: SchemaField[],
   data: Control<any>,
 ) {
@@ -141,7 +196,7 @@ function useFieldValueExpression(
 
 export function defaultEvalHooks(
   expr: EntityExpression,
-  context: ControlGroupContext,
+  context: ControlDataContext,
 ) {
   switch (expr.type) {
     case ExpressionType.Jsonata:
@@ -149,9 +204,15 @@ export function defaultEvalHooks(
         (expr as JsonataExpression).expression,
         context.groupControl,
       );
-    case ExpressionType.FieldValue:
-      return useFieldValueExpression(
-        expr as FieldValueExpression,
+    case ExpressionType.Data:
+      return useDataExpression(
+        expr as DataExpression,
+        context.fields,
+        context.groupControl,
+      );
+    case ExpressionType.DataMatch:
+      return useDataMatchExpression(
+        expr as DataMatchExpression,
         context.fields,
         context.groupControl,
       );
@@ -164,12 +225,12 @@ export const defaultUseEvalExpressionHook =
   makeEvalExpressionHook(defaultEvalHooks);
 
 export function makeEvalExpressionHook(
-  f: (expr: EntityExpression, context: ControlGroupContext) => Control<any>,
+  f: (expr: EntityExpression, context: ControlDataContext) => Control<any>,
 ): (expr: EntityExpression | undefined) => EvalExpressionHook | undefined {
   return (expr) => {
     const r = useUpdatedRef(expr);
     const cb = useCallback(
-      (ctx: ControlGroupContext) => {
+      (ctx: ControlDataContext) => {
         const expr = r.current!;
         return f(expr, ctx);
       },
@@ -191,7 +252,7 @@ export function useEvalDynamicHook(
 }
 
 export function matchesType(
-  context: ControlGroupContext,
+  context: ControlDataContext,
   types?: string[] | null,
 ) {
   if (types == null || types.length === 0) return true;
@@ -199,11 +260,35 @@ export function matchesType(
   return typeField && types.includes(typeField.value);
 }
 
+export function hideDisplayOnly(
+  context: ControlDataContext,
+  field: SchemaField,
+  definition: ControlDefinition,
+  schemaInterface: SchemaInterface,
+) {
+  const displayOptions = getDisplayOnlyOptions(definition);
+  return (
+    displayOptions &&
+    !displayOptions.emptyText &&
+    schemaInterface.isEmptyValue(
+      field,
+      context.groupControl.fields[field.field].value,
+    )
+  );
+}
+
 export function useJsonataExpression(
   jExpr: string,
   data: Control<any>,
 ): Control<any> {
-  const compiledExpr = useMemo(() => jsonata(jExpr), [jExpr]);
+  const compiledExpr = useMemo(() => {
+    try {
+      return jsonata(jExpr);
+    } catch (e) {
+      console.error(e);
+      return jsonata("");
+    }
+  }, [jExpr]);
   const control = useControl();
   useControlEffect(
     () => data.value,

package/src/index.ts

@@ -7,3 +7,4 @@ export * from "./renderers";
 export * from "./tailwind";
 export * from "./validators";
 export * from "./hooks";
+export * from "./schemaInterface";

package/src/internal.ts

@@ -5,3 +5,7 @@ export function useCalculatedControl<V>(calculate: () => V): Control<V> {
   useControlEffect(calculate, (v) => (c.value = v));
   return c;
 }
+
+export function cc(n: string | null | undefined): string | undefined {
+  return n ? n : undefined;
+}