@react-typed-forms/schemas 14.2.0 → 14.3.0

package/src/createFormRenderer.tsx

@@ -0,0 +1,218 @@
+import { ReactNode } from "react";
+import {
+  ActionRendererProps,
+  AdornmentProps,
+  AdornmentRenderer,
+  ArrayRendererProps,
+  ControlLayoutProps,
+  DataRendererProps,
+  DisplayRendererProps,
+  FormRenderer,
+  GroupRendererProps,
+  LabelRendererProps,
+  LabelType,
+} from "./controlRender";
+import { hasOptions } from "./util";
+import {
+  ActionRendererRegistration,
+  AdornmentRendererRegistration,
+  ArrayRendererRegistration,
+  DataRendererRegistration,
+  DefaultRenderers,
+  DisplayRendererRegistration,
+  GroupRendererRegistration,
+  LabelRendererRegistration,
+  LayoutRendererRegistration,
+  RendererRegistration,
+  VisibilityRendererRegistration,
+} from "./renderers";
+import { DataRenderType } from "./controlDefinition";
+
+export function createFormRenderer(
+  customRenderers: RendererRegistration[] = [],
+  defaultRenderers: DefaultRenderers,
+): FormRenderer {
+  const dataRegistrations = customRenderers.filter(isDataRegistration);
+  const groupRegistrations = customRenderers.filter(isGroupRegistration);
+  const adornmentRegistrations = customRenderers.filter(
+    isAdornmentRegistration,
+  );
+  const displayRegistrations = customRenderers.filter(isDisplayRegistration);
+  const labelRenderers = customRenderers.filter(isLabelRegistration);
+  const arrayRenderers = customRenderers.filter(isArrayRegistration);
+  const actionRenderers = customRenderers.filter(isActionRegistration);
+  const layoutRenderers = customRenderers.filter(isLayoutRegistration);
+  const visibilityRenderer =
+    customRenderers.find(isVisibilityRegistration) ??
+    defaultRenderers.visibility;
+
+  const formRenderers: FormRenderer = {
+    renderAction,
+    renderData,
+    renderGroup,
+    renderDisplay,
+    renderLabel,
+    renderArray,
+    renderAdornment,
+    renderLayout,
+    renderVisibility: visibilityRenderer.render,
+    renderLabelText,
+  };
+
+  function renderLabelText(label: ReactNode) {
+    return renderLabel({ label, type: LabelType.Text }, undefined, undefined);
+  }
+
+  function renderLayout(props: ControlLayoutProps) {
+    const renderer =
+      layoutRenderers.find((x) => !x.match || x.match(props)) ??
+      defaultRenderers.renderLayout;
+    return renderer.render(props, formRenderers);
+  }
+
+  function renderAdornment(props: AdornmentProps): AdornmentRenderer {
+    const renderer =
+      adornmentRegistrations.find((x) =>
+        isOneOf(x.adornmentType, props.adornment.type),
+      ) ?? defaultRenderers.adornment;
+    return renderer.render(props, formRenderers);
+  }
+
+  function renderArray(props: ArrayRendererProps) {
+    return (arrayRenderers[0] ?? defaultRenderers.array).render(
+      props,
+      formRenderers,
+    );
+  }
+
+  function renderLabel(
+    props: LabelRendererProps,
+    labelStart: ReactNode,
+    labelEnd: ReactNode,
+  ) {
+    const renderer =
+      labelRenderers.find((x) => isOneOf(x.labelType, props.type)) ??
+      defaultRenderers.label;
+    return renderer.render(props, labelStart, labelEnd, formRenderers);
+  }
+
+  function renderData(
+    props: DataRendererProps,
+  ): (layout: ControlLayoutProps) => ControlLayoutProps {
+    const { renderOptions, field } = props;
+
+    const options = hasOptions(props);
+    const renderType = renderOptions.type;
+    const renderer =
+      dataRegistrations.find(matchesRenderer) ?? defaultRenderers.data;
+
+    const result = renderer.render(props, formRenderers);
+    if (typeof result === "function") return result;
+    return (l) => ({ ...l, children: result });
+
+    function matchesRenderer(x: DataRendererRegistration) {
+      const matchCollection =
+        (x.collection ?? false) ===
+        (props.elementIndex == null && (field.collection ?? false));
+      const matchSchemaType =
+        x.schemaType &&
+        renderType == DataRenderType.Standard &&
+        isOneOf(x.schemaType, field.type);
+      const matchRenderType =
+        !x.renderType || isOneOf(x.renderType, renderType);
+      return (
+        matchCollection &&
+        (x.options ?? false) === options &&
+        (matchSchemaType || matchRenderType) &&
+        (!x.match || x.match(props, renderOptions))
+      );
+    }
+  }
+
+  function renderGroup(
+    props: GroupRendererProps,
+  ): (layout: ControlLayoutProps) => ControlLayoutProps {
+    const renderType = props.renderOptions.type;
+    const renderer =
+      groupRegistrations.find((x) => isOneOf(x.renderType, renderType)) ??
+      defaultRenderers.group;
+    const result = renderer.render(props, formRenderers);
+    if (typeof result === "function") return result;
+    return (l) => ({ ...l, children: result });
+  }
+
+  function renderAction(props: ActionRendererProps) {
+    const renderer =
+      actionRenderers.find((x) => isOneOf(x.actionType, props.actionId)) ??
+      defaultRenderers.action;
+    return renderer.render(props, formRenderers);
+  }
+
+  function renderDisplay(props: DisplayRendererProps) {
+    const renderType = props.data.type;
+    const renderer =
+      displayRegistrations.find((x) => isOneOf(x.renderType, renderType)) ??
+      defaultRenderers.display;
+    return renderer.render(props, formRenderers);
+  }
+
+  return formRenderers;
+}
+
+function isOneOf<A>(x: A | A[] | undefined, v: A) {
+  return x == null ? true : Array.isArray(x) ? x.includes(v) : v === x;
+}
+
+function isAdornmentRegistration(
+  x: RendererRegistration,
+): x is AdornmentRendererRegistration {
+  return x.type === "adornment";
+}
+
+function isDataRegistration(
+  x: RendererRegistration,
+): x is DataRendererRegistration {
+  return x.type === "data";
+}
+
+function isGroupRegistration(
+  x: RendererRegistration,
+): x is GroupRendererRegistration {
+  return x.type === "group";
+}
+
+function isLabelRegistration(
+  x: RendererRegistration,
+): x is LabelRendererRegistration {
+  return x.type === "label";
+}
+
+function isLayoutRegistration(
+  x: RendererRegistration,
+): x is LayoutRendererRegistration {
+  return x.type === "layout";
+}
+
+function isVisibilityRegistration(
+  x: RendererRegistration,
+): x is VisibilityRendererRegistration {
+  return x.type === "visibility";
+}
+
+function isActionRegistration(
+  x: RendererRegistration,
+): x is ActionRendererRegistration {
+  return x.type === "action";
+}
+
+function isDisplayRegistration(
+  x: RendererRegistration,
+): x is DisplayRendererRegistration {
+  return x.type === "display";
+}
+
+function isArrayRegistration(
+  x: RendererRegistration,
+): x is ArrayRendererRegistration {
+  return x.type === "array";
+}

package/src/defaultSchemaInterface.ts

@@ -0,0 +1,191 @@
+import { Control, ControlSetup } from "@react-typed-forms/core";
+import {
+  EqualityFunc,
+  FieldOption,
+  FieldType,
+  SchemaDataNode,
+  SchemaField,
+  SchemaInterface,
+  SchemaNode,
+  ValidationMessageType,
+} from "./schemaField";
+
+export class DefaultSchemaInterface implements SchemaInterface {
+  constructor(
+    protected boolStrings: [string, string] = ["No", "Yes"],
+    protected parseDateTime: (s: string) => number = (s) => Date.parse(s),
+  ) {}
+
+  parseToMillis(field: SchemaField, v: string): number {
+    return this.parseDateTime(v);
+  }
+
+  validationMessageText(
+    field: SchemaField,
+    messageType: ValidationMessageType,
+    actual: any,
+    expected: any,
+  ): string {
+    switch (messageType) {
+      case ValidationMessageType.NotEmpty:
+        return "Please enter a value";
+      case ValidationMessageType.MinLength:
+        return "Length must be at least " + expected;
+      case ValidationMessageType.MaxLength:
+        return "Length must be less than " + expected;
+      case ValidationMessageType.NotBeforeDate:
+        return `Date must not be before ${new Date(expected).toDateString()}`;
+      case ValidationMessageType.NotAfterDate:
+        return `Date must not be after ${new Date(expected).toDateString()}`;
+      default:
+        return "Unknown error";
+    }
+  }
+
+  getDataOptions(node: SchemaDataNode): FieldOption[] | null | undefined {
+    return this.getNodeOptions(node.schema);
+  }
+
+  getNodeOptions(node: SchemaNode): FieldOption[] | null | undefined {
+    return this.getOptions(node.field);
+  }
+
+  getOptions({ options }: SchemaField): FieldOption[] | null | undefined {
+    return options && options.length > 0 ? options : null;
+  }
+
+  getFilterOptions(
+    array: SchemaDataNode,
+    field: SchemaNode,
+  ): FieldOption[] | undefined | null {
+    return this.getNodeOptions(field);
+  }
+
+  isEmptyValue(f: SchemaField, value: any): boolean {
+    if (f.collection)
+      return Array.isArray(value) ? value.length === 0 : value == null;
+    switch (f.type) {
+      case FieldType.String:
+      case FieldType.DateTime:
+      case FieldType.Date:
+      case FieldType.Time:
+        return !value;
+      default:
+        return value == null;
+    }
+  }
+
+  searchText(field: SchemaField, value: any): string {
+    return this.textValue(field, value)?.toLowerCase() ?? "";
+  }
+
+  textValue(
+    field: SchemaField,
+    value: any,
+    element?: boolean | undefined,
+  ): string | undefined {
+    const options = this.getOptions(field);
+    const option = options?.find((x) => x.value === value);
+    if (option) return option.name;
+    switch (field.type) {
+      case FieldType.Date:
+        return value ? new Date(value).toLocaleDateString() : undefined;
+      case FieldType.DateTime:
+        return value
+          ? new Date(this.parseToMillis(field, value)).toLocaleString()
+          : undefined;
+      case FieldType.Time:
+        return value
+          ? new Date("1970-01-01T" + value).toLocaleTimeString()
+          : undefined;
+      case FieldType.Bool:
+        return this.boolStrings[value ? 1 : 0];
+      default:
+        return value != null ? value.toString() : undefined;
+    }
+  }
+
+  controlLength(f: SchemaField, control: Control<any>): number {
+    return f.collection
+      ? (control.elements?.length ?? 0)
+      : this.valueLength(f, control.value);
+  }
+
+  valueLength(field: SchemaField, value: any): number {
+    return (value && value?.length) ?? 0;
+  }
+
+  compareValue(field: SchemaField, v1: unknown, v2: unknown): number {
+    if (v1 == null) return v2 == null ? 0 : 1;
+    if (v2 == null) return -1;
+    switch (field.type) {
+      case FieldType.Date:
+      case FieldType.DateTime:
+      case FieldType.Time:
+      case FieldType.String:
+        return (v1 as string).localeCompare(v2 as string);
+      case FieldType.Bool:
+        return (v1 as boolean) ? ((v2 as boolean) ? 0 : 1) : -1;
+      case FieldType.Int:
+      case FieldType.Double:
+        return (v1 as number) - (v2 as number);
+      default:
+        return 0;
+    }
+  }
+
+  compoundFieldSetup(f: SchemaNode): [string, ControlSetup<any>][] {
+    return f.getChildNodes().map((x) => {
+      const { field } = x.field;
+      return [field, this.makeControlSetup(x)];
+    });
+  }
+
+  compoundFieldEquality(f: SchemaNode): [string, EqualityFunc][] {
+    return f.getChildNodes().map((x) => {
+      const { field } = x.field;
+      return [field, (a, b) => this.makeEqualityFunc(x)(a[field], b[field])];
+    });
+  }
+
+  makeEqualityFunc(field: SchemaNode, element?: boolean): EqualityFunc {
+    if (field.field.collection && !element) {
+      const elemEqual = this.makeEqualityFunc(field, true);
+      return (a, b) => {
+        if (a === b) return true;
+        if (a == null || b == null) return false;
+        if (a.length !== b.length) return false;
+        for (let i = 0; i < a.length; i++) {
+          if (!elemEqual(a[i], b[i])) return false;
+        }
+        return true;
+      };
+    }
+    switch (field.field.type) {
+      case FieldType.Compound:
+        const allChecks = this.compoundFieldEquality(field);
+        return (a, b) =>
+          a === b ||
+          (a != null && b != null && allChecks.every((x) => x[1](a, b)));
+      default:
+        return (a, b) => a === b;
+    }
+  }
+  makeControlSetup(field: SchemaNode, element?: boolean): ControlSetup<any> {
+    let setup: ControlSetup<any> = {
+      equals: this.makeEqualityFunc(field, element),
+    };
+    if (field.field.collection && !element) {
+      setup.elems = this.makeControlSetup(field, true);
+      return setup;
+    }
+    switch (field.field.type) {
+      case FieldType.Compound:
+        setup.fields = Object.fromEntries(this.compoundFieldSetup(field));
+    }
+    return setup;
+  }
+}
+
+export const defaultSchemaInterface: SchemaInterface =
+  new DefaultSchemaInterface();

package/src/dynamicHooks.ts

@@ -0,0 +1,98 @@
+import { useCallback, useRef } from "react";
+
+/**
+ * Type representing a hook dependency, which can be a string, number, undefined, or null.
+ */
+export type HookDep = string | number | undefined | null;
+
+/**
+ * Interface representing a dynamic hook generator.
+ * @template A - The type of the hook result.
+ * @template P - The type of the hook context.
+ */
+export interface DynamicHookGenerator<A, P> {
+  deps: HookDep;
+  state: any;
+
+  runHook(ctx: P, state: any): A;
+}
+
+/**
+ * Creates a dynamic hook generator.
+ * @template A - The type of the hook result.
+ * @template P - The type of the hook context.
+ * @template S - The type of the hook state.
+ * @param runHook - The function to run the hook.
+ * @param state - The initial state of the hook.
+ * @param deps - The dependencies of the hook.
+ * @returns The dynamic hook generator.
+ */
+export function makeHook<A, P, S = undefined>(
+  runHook: (ctx: P, state: S) => A,
+  state: S,
+  deps?: HookDep,
+): DynamicHookGenerator<A, P> {
+  return { deps, state, runHook };
+}
+
+/**
+ * Type representing the value of a dynamic hook.
+ * @template A - The type of the dynamic hook generator.
+ */
+export type DynamicHookValue<A> =
+  A extends DynamicHookGenerator<infer V, any> ? V : never;
+
+/**
+ * Converts an array of dependencies to a dependency string.
+ * @template A - The type of the dependencies.
+ * @param deps - The array of dependencies.
+ * @param asHookDep - The function to convert a dependency to a hook dependency.
+ * @returns The dependency string.
+ */
+export function makeHookDepString<A>(
+  deps: A[],
+  asHookDep: (a: A) => HookDep,
+): string {
+  return deps.map((x) => toDepString(asHookDep(x))).join(",");
+}
+
+/**
+ * Custom hook to use dynamic hooks.
+ * @template P - The type of the hook context.
+ * @template Hooks - The type of the hooks.
+ * @param hooks - The hooks to use.
+ * @returns A function that takes the hook context and returns the hook values.
+ */
+export function useDynamicHooks<
+  P,
+  Hooks extends Record<string, DynamicHookGenerator<any, P>>,
+>(
+  hooks: Hooks,
+): (p: P) => {
+  [K in keyof Hooks]: DynamicHookValue<Hooks[K]>;
+} {
+  const hookEntries = Object.entries(hooks);
+  const deps = makeHookDepString(hookEntries, (x) => x[1].deps);
+  const ref = useRef<Record<string, any>>({});
+  const s = ref.current;
+  hookEntries.forEach((x) => (s[x[0]] = x[1].state));
+  return useCallback(
+    (p: P) => {
+      return Object.fromEntries(
+        hookEntries.map(([f, hg]) => [f, hg.runHook(p, ref.current[f])]),
+      ) as any;
+    },
+    [deps],
+  );
+}
+
+/**
+ * Converts a value to a dependency string.
+ * @param x - The value to convert.
+ * @returns The dependency string.
+ */
+export function toDepString(x: any): string {
+  if (x === undefined) return "_";
+  if (x === null) return "~";
+  return x.toString();
+}

package/src/entityExpression.ts

@@ -0,0 +1,38 @@
+export interface EntityExpression {
+  type: string;
+}
+
+export enum ExpressionType {
+  Jsonata = "Jsonata",
+  Data = "Data",
+  DataMatch = "FieldValue",
+  UserMatch = "UserMatch",
+  NotEmpty = "NotEmpty",
+  UUID = "UUID",
+}
+
+export interface JsonataExpression extends EntityExpression {
+  type: ExpressionType.Jsonata;
+  expression: string;
+}
+
+export interface DataExpression extends EntityExpression {
+  type: ExpressionType.Data;
+  field: string;
+}
+
+export interface DataMatchExpression extends EntityExpression {
+  type: ExpressionType.DataMatch;
+  field: string;
+  value: any;
+}
+
+export interface NotEmptyExpression extends EntityExpression {
+  type: ExpressionType.DataMatch;
+  field: string;
+}
+
+export interface UserMatchExpression extends EntityExpression {
+  type: ExpressionType.UserMatch;
+  userMatch: string;
+}