@react-typed-forms/schemas 5.0.2 → 6.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>,
 ) {
@@ -139,9 +194,9 @@ function useFieldValueExpression(
   });
 }
 
-function defaultEvalHooks(
+export function defaultEvalHooks(
   expr: EntityExpression,
-  context: ControlGroupContext,
+  context: ControlDataContext,
 ) {
   switch (expr.type) {
     case ExpressionType.Jsonata:
@@ -149,9 +204,15 @@ 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;
+}

package/src/renderers.tsx

@@ -3,7 +3,6 @@ import React, {
   Fragment,
   ReactElement,
   ReactNode,
-  useCallback,
   useEffect,
   useMemo,
   useState,
@@ -14,6 +13,7 @@ import {
   ActionRendererProps,
   AdornmentProps,
   AdornmentRenderer,
+  appendMarkupAt,
   ArrayRendererProps,
   ControlLayoutProps,
   DataRendererProps,
@@ -22,18 +22,29 @@ import {
   GroupRendererProps,
   LabelRendererProps,
   LabelType,
+  RenderedControl,
   RenderedLayout,
   renderLayoutParts,
-  Visibility,
+  VisibilityRendererProps,
 } from "./controlRender";
 import {
+  AdornmentPlacement,
+  ControlAdornment,
+  ControlAdornmentType,
   DataRenderType,
   DisplayDataType,
   FieldOption,
   FieldType,
+  FlexRenderer,
   GridRenderer,
   HtmlDisplay,
+  IconAdornment,
+  IconDisplay,
+  isDisplayOnlyRenderer,
+  isFlexRenderer,
   isGridRenderer,
+  SchemaField,
+  SchemaInterface,
   TextDisplay,
 } from "./types";
 import { hasOptions } from "./util";
@@ -53,7 +64,10 @@ export interface DefaultRenderers {
 export interface LayoutRendererRegistration {
   type: "layout";
   match?: (props: ControlLayoutProps) => boolean;
-  render: (props: ControlLayoutProps, renderers: FormRenderer) => ReactNode;
+  render: (
+    props: ControlLayoutProps,
+    renderers: FormRenderer,
+  ) => RenderedControl;
 }
 export interface DataRendererRegistration {
   type: "data";
@@ -94,7 +108,10 @@ export interface ArrayRendererRegistration {
 export interface GroupRendererRegistration {
   type: "group";
   renderType?: string | string[];
-  render: (props: GroupRendererProps, renderers: FormRenderer) => ReactElement;
+  render: (
+    props: GroupRendererProps,
+    renderers: FormRenderer,
+  ) => ReactElement | ((layout: ControlLayoutProps) => ControlLayoutProps);
 }
 
 export interface DisplayRendererRegistration {
@@ -114,10 +131,7 @@ export interface AdornmentRendererRegistration {
 
 export interface VisibilityRendererRegistration {
   type: "visibility";
-  render: (
-    visibility: Control<Visibility | undefined>,
-    children: () => ReactNode,
-  ) => ReactNode;
+  render: (props: VisibilityRendererProps) => ReactNode;
 }
 
 export type RendererRegistration =
@@ -219,12 +233,16 @@ export function createFormRenderer(
     return (l) => ({ ...l, children: result });
   }
 
-  function renderGroup(props: GroupRendererProps): ReactNode {
+  function renderGroup(
+    props: GroupRendererProps,
+  ): (layout: ControlLayoutProps) => ControlLayoutProps {
     const renderType = props.renderOptions.type;
     const renderer =
       groupRegistrations.find((x) => isOneOf(x.renderType, renderType)) ??
       defaultRenderers.group;
-    return renderer.render(props, formRenderers);
+    const result = renderer.render(props, formRenderers);
+    if (typeof result === "function") return result;
+    return (l) => ({ ...l, children: result });
   }
 
   function renderAction(props: ActionRendererProps) {
@@ -364,6 +382,8 @@ interface DefaultGroupRendererOptions {
   gridStyles?: (columns: GridRenderer) => StyleProps;
   gridClassName?: string;
   defaultGridColumns?: number;
+  flexClassName?: string;
+  defaultFlexGap?: string;
 }
 
 export function createDefaultGroupRenderer(
@@ -375,6 +395,8 @@ export function createDefaultGroupRenderer(
     defaultGridColumns = 2,
     gridClassName,
     standardClassName,
+    flexClassName,
+    defaultFlexGap,
   } = options ?? {};
 
   function defaultGridStyles({
@@ -389,17 +411,38 @@ export function createDefaultGroupRenderer(
     };
   }
 
+  function flexStyles(options: FlexRenderer): StyleProps {
+    return {
+      className: flexClassName,
+      style: {
+        display: "flex",
+        gap: options.gap ? options.gap : defaultFlexGap,
+        flexDirection: options.direction
+          ? (options.direction as any)
+          : undefined,
+      },
+    };
+  }
+
   function render(props: GroupRendererProps) {
     const { childCount, renderChild, renderOptions } = props;
 
     const { style, className: gcn } = isGridRenderer(renderOptions)
       ? gridStyles(renderOptions)
-      : ({ className: standardClassName } as StyleProps);
-    return (
-      <div className={clsx(className, gcn)} style={style}>
-        {Array.from({ length: childCount }, (_, x) => renderChild(x))}
-      </div>
-    );
+      : isFlexRenderer(renderOptions)
+        ? flexStyles(renderOptions)
+        : ({ className: standardClassName } as StyleProps);
+
+    return (cp: ControlLayoutProps) => {
+      return {
+        ...cp,
+        children: (
+          <div className={clsx(props.className, className, gcn)} style={style}>
+            {Array.from({ length: childCount }, (_, x) => renderChild(x))}
+          </div>
+        ),
+      };
+    };
   }
   return { type: "group", render };
 }
@@ -412,37 +455,57 @@ export function createDefaultDisplayRenderer(
   options: DefaultDisplayRendererOptions = {},
 ): DisplayRendererRegistration {
   return {
-    render: ({ data }) => {
-      switch (data.type) {
-        case DisplayDataType.Text:
-          return (
-            <div className={options.textClassName}>
-              {(data as TextDisplay).text}
-            </div>
-          );
-        case DisplayDataType.Html:
-          return (
-            <div
-              className={options.htmlClassName}
-              dangerouslySetInnerHTML={{
-                __html: (data as HtmlDisplay).html,
-              }}
-            />
-          );
-        default:
-          return <h1>Unknown display type: {data.type}</h1>;
-      }
-    },
+    render: (props) => <DefaultDisplay {...options} {...props} />,
     type: "display",
   };
 }
 
+export function DefaultDisplay({
+  data,
+  display,
+  className,
+  style,
+  ...options
+}: DefaultDisplayRendererOptions & DisplayRendererProps) {
+  switch (data.type) {
+    case DisplayDataType.Icon:
+      return (
+        <i
+          style={style}
+          className={clsx(
+            className,
+            display ? display.value : (data as IconDisplay).iconClass,
+          )}
+        />
+      );
+    case DisplayDataType.Text:
+      return (
+        <div style={style} className={clsx(className, options.textClassName)}>
+          {display ? display.value : (data as TextDisplay).text}
+        </div>
+      );
+    case DisplayDataType.Html:
+      return (
+        <div
+          style={style}
+          className={clsx(className, options.htmlClassName)}
+          dangerouslySetInnerHTML={{
+            __html: display ? display.value ?? "" : (data as HtmlDisplay).html,
+          }}
+        />
+      );
+    default:
+      return <h1>Unknown display type: {data.type}</h1>;
+  }
+}
+
 export const DefaultBoolOptions: FieldOption[] = [
   { name: "Yes", value: true },
   { name: "No", value: false },
 ];
 interface DefaultDataRendererOptions {
   inputClass?: string;
+  displayOnlyClass?: string;
   selectOptions?: SelectRendererOptions;
   booleanOptions?: FieldOption[];
   optionRenderer?: DataRendererRegistration;
@@ -452,7 +515,7 @@ export function createDefaultDataRenderer(
   options: DefaultDataRendererOptions = {},
 ): DataRendererRegistration {
   const selectRenderer = createSelectRenderer(options.selectOptions ?? {});
-  const { inputClass, booleanOptions, optionRenderer } = {
+  const { inputClass, booleanOptions, optionRenderer, displayOnlyClass } = {
     optionRenderer: selectRenderer,
     booleanOptions: DefaultBoolOptions,
     ...options,
@@ -461,9 +524,25 @@ export function createDefaultDataRenderer(
     if (asArray) {
       return asArray();
     }
-    let renderType = props.renderOptions.type;
+    const renderOptions = props.renderOptions;
+    let renderType = renderOptions.type;
     const fieldType = props.field.type;
     if (fieldType == FieldType.Any) return <>No control for Any</>;
+    if (isDisplayOnlyRenderer(renderOptions))
+      return (p) => ({
+        ...p,
+        className: displayOnlyClass,
+        children: (
+          <DefaultDisplayOnly
+            field={props.field}
+            schemaInterface={props.dataContext.schemaInterface}
+            control={props.control}
+            className={props.className}
+            style={props.style}
+            emptyText={renderOptions.emptyText}
+          />
+        ),
+      });
     const isBool = fieldType === FieldType.Bool;
     if (booleanOptions != null && isBool && props.options == null) {
       return renderers.renderData(
@@ -479,10 +558,15 @@ export function createDefaultDataRenderer(
         return selectRenderer.render(props, undefined, renderers);
     }
     return renderType === DataRenderType.Checkbox ? (
-      <Fcheckbox control={props.control} />
+      <Fcheckbox
+        style={props.style}
+        className={props.className}
+        control={props.control}
+      />
     ) : (
       <ControlInput
-        className={inputClass}
+        className={clsx(props.className, inputClass)}
+        style={props.style}
         id={props.id}
         readOnly={props.readonly}
         control={props.control}
@@ -492,6 +576,33 @@ export function createDefaultDataRenderer(
   });
 }
 
+export function DefaultDisplayOnly({
+  control,
+  className,
+  emptyText,
+  schemaInterface,
+  field,
+  style,
+}: {
+  control: Control<any>;
+  field: SchemaField;
+  schemaInterface: SchemaInterface;
+  className?: string;
+  style?: React.CSSProperties;
+  emptyText?: string | null;
+}) {
+  const v = control.value;
+  const text =
+    (schemaInterface.isEmptyValue(field, v)
+      ? emptyText
+      : schemaInterface.textValue(field, v)) ?? "";
+  return (
+    <div style={style} className={className}>
+      {text}
+    </div>
+  );
+}
+
 export function ControlInput({
   control,
   convert,
@@ -522,7 +633,18 @@ export function createDefaultAdornmentRenderer(
 ): AdornmentRendererRegistration {
   return {
     type: "adornment",
-    render: ({ adornment }) => ({ apply: () => {}, priority: 0, adornment }),
+    render: ({ adornment }) => ({
+      apply: (rl) => {
+        if (isIconAdornment(adornment)) {
+          return appendMarkupAt(
+            adornment.placement ?? AdornmentPlacement.ControlStart,
+            <i className={adornment.iconClass} />,
+          )(rl);
+        }
+      },
+      priority: 0,
+      adornment,
+    }),
   };
 }
 
@@ -562,12 +684,19 @@ function createDefaultLayoutRenderer(
   options: DefaultLayoutRendererOptions = {},
 ) {
   return createLayoutRenderer((props, renderers) => {
-    return (
-      <DefaultLayout
-        layout={renderLayoutParts(props, renderers)}
-        {...options}
-      />
+    const layout = renderLayoutParts(
+      { ...props, className: clsx(props.className, options.className) },
+      renderers,
     );
+    return {
+      children: <DefaultLayout layout={layout} {...options} />,
+      className: layout.className,
+      style: layout.style,
+      divRef: (e) =>
+        e && props.errorControl
+          ? (props.errorControl.meta.scrollElement = e)
+          : undefined,
+    };
   });
 }
 
@@ -639,6 +768,10 @@ function isOneOf<A>(x: A | A[] | undefined, v: A) {
   return x == null ? true : Array.isArray(x) ? x.includes(v) : v === x;
 }
 
+export function isIconAdornment(a: ControlAdornment): a is IconAdornment {
+  return a.type === ControlAdornmentType.Icon;
+}
+
 export function createLayoutRenderer(
   render: LayoutRendererRegistration["render"],
   options?: Partial<LayoutRendererRegistration>,
@@ -691,7 +824,7 @@ export function createSelectRenderer(options: SelectRendererOptions = {}) {
   return createDataRenderer(
     (props, asArray) => (
       <SelectDataRenderer
-        className={options.className}
+        className={clsx(props.className, options.className)}
         state={props.control}
         id={props.id}
         options={props.options!}
@@ -795,49 +928,47 @@ export function createInputConversion(ft: string): InputConversion {
 }
 
 export function createDefaultVisibilityRenderer() {
-  return createVisibilityRenderer((cv, ch) => (
-    <DefaultVisibility visibility={cv} children={ch} />
-  ));
+  return createVisibilityRenderer((props) => <DefaultVisibility {...props} />);
 }
 
 export function DefaultVisibility({
   visibility,
   children,
-}: {
-  visibility: Control<Visibility | undefined>;
-  children: () => ReactNode;
-}) {
+  className,
+  style,
+  divRef,
+}: VisibilityRendererProps) {
   const v = visibility.value;
   useEffect(() => {
     if (v) {
       visibility.setValue((ex) => ({ visible: v.visible, showing: v.visible }));
     }
   }, [v?.visible]);
-  return v?.visible ? children() : <></>;
+  return v?.visible ? (
+    <div className={clsx(className)} style={style} ref={divRef}>
+      {children}
+    </div>
+  ) : (
+    <></>
+  );
 }
 
 export function DefaultLayout({
-  className,
   errorClass,
+  className,
   layout: { controlEnd, controlStart, label, children, errorControl },
 }: DefaultLayoutRendererOptions & {
   layout: RenderedLayout;
 }) {
   const ec = errorControl;
   const errorText = ec && ec.touched ? ec.error : undefined;
-  const refCb = useCallback(
-    (e: HTMLDivElement | null) => {
-      if (ec) ec.meta.scrollElement = e;
-    },
-    [ec],
-  );
   return (
-    <div className={className} ref={refCb}>
+    <>
       {label}
       {controlStart}
       {children}
       {errorText && <div className={errorClass}>{errorText}</div>}
       {controlEnd}
-    </div>
+    </>
   );
 }