@react-typed-forms/schemas 1.0.0-dev.2 → 1.0.0-dev.21

package/src/controlRender.tsx

@@ -1,468 +1,278 @@
 import {
   ActionControlDefinition,
-  AnyControlDefinition,
+  AdornmentPlacement,
   CompoundField,
+  ControlAdornment,
   ControlDefinition,
   ControlDefinitionType,
   DataControlDefinition,
   DisplayControlDefinition,
+  EntityExpression,
   FieldOption,
-  FieldType,
   GroupedControlsDefinition,
+  RenderOptions,
   SchemaField,
+  SchemaValidator,
+  visitControlDefinition,
 } from "./types";
-import React, { createContext, Key, ReactElement, useContext } from "react";
-import { Control, newControl, useControlEffect } from "@react-typed-forms/core";
+import React, { Key, ReactElement, ReactNode } from "react";
+import { Control, newControl } from "@react-typed-forms/core";
+import {
+  fieldDisplayName,
+  findCompoundField,
+  findField,
+  findScalarField,
+  isDataControl,
+  isGroupControl,
+} from "./util";
+
+export interface SchemaHooks {
+  useExpression(
+    expr: EntityExpression,
+    formState: FormEditState,
+  ): Control<any | undefined>;
+  useValidators(
+    formState: FormEditState,
+    isVisible: boolean,
+    control: Control<any>,
+    required: boolean,
+    validations?: SchemaValidator[] | null,
+  ): void;
+}
 
 export interface FormEditHooks {
   useDataProperties(
     formState: FormEditState,
     definition: DataControlDefinition,
-    field: SchemaField
-  ): DataControlProperties;
+    field: SchemaField,
+  ): DataRendererProps;
   useGroupProperties(
     formState: FormEditState,
     definition: GroupedControlsDefinition,
-    currentHooks: FormEditHooks
-  ): GroupControlProperties;
+  ): GroupRendererProps;
   useDisplayProperties(
     formState: FormEditState,
-    definition: DisplayControlDefinition
-  ): DisplayControlProperties;
+    definition: DisplayControlDefinition,
+  ): DisplayRendererProps;
   useActionProperties(
     formState: FormEditState,
-    definition: ActionControlDefinition
-  ): ActionControlProperties;
+    definition: ActionControlDefinition,
+  ): ActionRendererProps;
+  schemaHooks: SchemaHooks;
 }
 
-export interface DataControlProperties {
+export interface DataRendererProps {
+  definition: DataControlDefinition;
+  renderOptions: RenderOptions;
+  visible: Visibility;
+  control: Control<any>;
+  field: SchemaField;
+  array?: ArrayRendererProps;
   readonly: boolean;
-  visible: boolean;
-  options: FieldOption[] | undefined;
   defaultValue: any;
   required: boolean;
-  customRender?: (
-    props: DataRendererProps,
-    control: Control<any>
-  ) => ReactElement;
+  options: FieldOption[] | undefined | null;
+  customRender?: (props: DataRendererProps) => ReactElement;
+  formState: FormEditState;
 }
 
-export interface GroupControlProperties {
-  visible: boolean;
+export interface GroupRendererProps {
+  definition: Omit<GroupedControlsDefinition, "children">;
+  visible: Visibility;
+  field?: CompoundField;
+  array?: ArrayRendererProps;
+  hideTitle: boolean;
   hooks: FormEditHooks;
-}
-
-export interface DisplayControlProperties {
-  visible: boolean;
-}
-
-export interface ActionControlProperties {
-  visible: boolean;
-  onClick: () => void;
+  childCount: number;
+  renderChild: (child: number) => ReactElement;
 }
 
 export interface ControlData {
   [field: string]: any;
 }
 
-export interface FormEditState {
+export interface FormDataContext {
   fields: SchemaField[];
   data: Control<ControlData>;
-  readonly?: boolean;
 }
-
-export interface FormRendererComponents {
-  renderData: (
-    props: DataRendererProps,
-    control: Control<any>,
-    element: boolean,
-    renderers: FormRendererComponents
-  ) => ReactElement;
-  renderCompound: (
-    props: CompoundGroupRendererProps,
-    control: Control<any>,
-    renderers: FormRendererComponents
-  ) => ReactElement;
-  renderGroup: (props: GroupRendererProps) => ReactElement;
-  renderDisplay: (props: DisplayRendererProps) => ReactElement;
-  renderAction: (props: ActionRendererProps) => ReactElement;
+export interface FormEditState extends FormDataContext {
+  hooks: FormEditHooks;
+  renderer: FormRenderer;
+  readonly?: boolean;
+  invisible?: boolean;
 }
 
-export const FormRendererComponentsContext = createContext<
-  FormRendererComponents | undefined
->(undefined);
+export type RenderControlOptions = Omit<FormEditState, "data">;
 
-export function useFormRendererComponents() {
-  const c = useContext(FormRendererComponentsContext);
-  if (!c) {
-    throw "Need to use FormRendererComponentContext.Provider";
-  }
-  return c;
+export interface ArrayRendererProps {
+  definition: DataControlDefinition | GroupedControlsDefinition;
+  control: Control<any[]>;
+  field: SchemaField;
+  addAction?: ActionRendererProps;
+  removeAction?: (childCount: number) => ActionRendererProps;
+  childCount: number;
+  renderChild: (childCount: number) => ReactElement;
+  childKey: (childCount: number) => Key;
 }
 
-export interface DisplayRendererProps {
-  definition: DisplayControlDefinition;
-  properties: DisplayControlProperties;
+export interface AdornmentProps {
+  key: Key;
+  definition: ControlAdornment;
 }
 
-export interface ActionRendererProps {
-  definition: ActionControlDefinition;
-  properties: ActionControlProperties;
+export interface AdornmentRenderer {
+  wrap?: (children: ReactElement) => ReactElement;
+  child?: [AdornmentPlacement, ReactNode];
 }
 
-export interface DataRendererProps {
-  definition: DataControlDefinition;
-  properties: DataControlProperties;
-  field: SchemaField;
-  formEditState?: FormEditState;
+export interface FormRenderer {
+  renderData: (props: DataRendererProps) => ReactElement;
+  renderGroup: (props: GroupRendererProps) => ReactElement;
+  renderDisplay: (props: DisplayRendererProps) => ReactElement;
+  renderAction: (props: ActionRendererProps) => ReactElement;
+  renderArray: (props: ArrayRendererProps) => ReactElement;
+  renderLabel: (props: LabelRendererProps, elem: ReactElement) => ReactElement;
+  renderVisibility: (visible: Visibility, elem: ReactElement) => ReactElement;
+  renderAdornment: (props: AdornmentProps) => AdornmentRenderer;
 }
 
-export interface GroupRendererProps {
-  definition: Omit<GroupedControlsDefinition, "children">;
-  properties: GroupControlProperties;
-  childCount: number;
-  renderChild: (
-    child: number,
-    wrapChild: (key: Key, childElem: ReactElement) => ReactElement
-  ) => ReactElement;
+export interface Visibility {
+  value: boolean;
+  canChange: boolean;
 }
-
-export interface CompoundGroupRendererProps {
-  definition: GroupedControlsDefinition;
-  field: CompoundField;
-  properties: GroupControlProperties;
-  renderChild: (
-    key: Key,
-    control: ControlDefinition,
-    data: Control<{
-      [field: string]: any;
-    }>,
-    wrapChild: (key: Key, childElem: ReactElement) => ReactElement
-  ) => ReactElement;
+export interface LabelRendererProps {
+  visible: Visibility;
+  title?: ReactNode;
+  forId?: string;
+  required: boolean;
+  control?: Control<any>;
+  group?: boolean;
+  renderAdornment: (placement: AdornmentPlacement) => ReactElement;
 }
 
-export function isScalarField(sf: SchemaField): sf is SchemaField {
-  return !isCompoundField(sf);
+export interface DisplayRendererProps {
+  definition: DisplayControlDefinition;
+  visible: Visibility;
 }
 
-export function isCompoundField(sf: SchemaField): sf is CompoundField {
-  return sf.type === FieldType.Compound;
+export interface ActionRendererProps {
+  definition: ActionControlDefinition;
+  visible: Visibility;
+  onClick: () => void;
 }
 
 export type AnySchemaFields =
   | SchemaField
   | (Omit<CompoundField, "children"> & { children: AnySchemaFields[] });
 
-export function applyDefaultValues(
-  v: { [k: string]: any } | undefined,
-  fields: SchemaField[]
-): any {
-  if (!v) return defaultValueForFields(fields);
-  const applyValue = fields.filter(
-    (x) => isCompoundField(x) || !(x.field in v)
-  );
-  if (!applyValue.length) return v;
-  const out = { ...v };
-  applyValue.forEach((x) => {
-    out[x.field] =
-      x.field in v
-        ? applyDefaultForField(v[x.field], x, fields)
-        : defaultValueForField(x);
-  });
-  return out;
-}
-
-export function applyDefaultForField(
-  v: any,
+export function controlTitle(
+  title: string | undefined | null,
   field: SchemaField,
-  parent: SchemaField[],
-  notElement?: boolean
-): any {
-  if (field.collection && !notElement) {
-    return ((v as any[]) ?? []).map((x) =>
-      applyDefaultForField(x, field, parent, true)
-    );
-  }
-  if (isCompoundField(field)) {
-    if (!v && !field.required) return v;
-    return applyDefaultValues(v, field.treeChildren ? parent : field.children);
-  }
-  return defaultValueForField(field);
-}
-
-export function defaultValueForFields(fields: SchemaField[]): any {
-  return Object.fromEntries(
-    fields.map((x) => [x.field, defaultValueForField(x)])
-  );
-}
-
-export function defaultValueForField(sf: SchemaField): any {
-  if (isCompoundField(sf)) {
-    return sf.required
-      ? sf.collection
-        ? []
-        : defaultValueForFields(sf.children)
-      : undefined;
-  }
-  if (sf.collection) return [];
-  return sf.defaultValue;
-}
-
-export function elementValueForField(sf: SchemaField): any {
-  if (isCompoundField(sf)) {
-    return defaultValueForFields(sf.children);
-  }
-  return sf.defaultValue;
-}
-
-export function findScalarField(
-  fields: SchemaField[],
-  field: string
-): SchemaField | undefined {
-  return findField(fields, field);
-}
-
-export function findCompoundField(
-  fields: SchemaField[],
-  field: string
-): CompoundField | undefined {
-  return findField(fields, field) as CompoundField | undefined;
-}
-
-export function findField(
-  fields: SchemaField[],
-  field: string
-): SchemaField | undefined {
-  return fields.find((x) => x.field === field);
-}
-
-export function fieldDisplayName(sf: SchemaField): string {
-  return sf.displayName ? sf.displayName : sf.field;
-}
-
-export function controlTitle(title: string | undefined, field: SchemaField) {
+) {
   return title ? title : fieldDisplayName(field);
 }
 
-export function renderControl(
-  definition: AnyControlDefinition,
-  formState: FormEditState,
-  hooks: FormEditHooks,
-  key: Key,
-  wrapChild?: (key: Key, db: ReactElement) => ReactElement
+export function renderControl<S extends ControlDefinition>(
+  definition: S,
+  data: Control<any>,
+  options: RenderControlOptions,
+  key?: Key,
 ): ReactElement {
-  const { fields } = formState;
-  switch (definition.type) {
-    case ControlDefinitionType.Data:
-      const def = definition as DataControlDefinition;
-      const fieldData = findScalarField(fields, def.field);
-      if (!fieldData) return <h1>No schema field for: {def.field}</h1>;
-      return (
-        <DataRenderer
-          key={key}
-          wrapElem={wrapElem}
-          formState={formState}
-          hooks={hooks}
-          controlDef={def}
-          fieldData={fieldData}
-        />
-      );
-    case ControlDefinitionType.Group:
-      return (
-        <GroupRenderer
-          key={key}
-          hooks={hooks}
-          groupDef={definition as GroupedControlsDefinition}
-          formState={formState}
-          wrapElem={wrapElem}
-        />
-      );
-    case ControlDefinitionType.Display:
-      return (
-        <DisplayRenderer
-          key={key}
-          hooks={hooks}
-          formState={formState}
-          wrapElem={wrapElem}
-          displayDef={definition as DisplayControlDefinition}
-        />
-      );
-    case ControlDefinitionType.Action:
-      return (
-        <ActionRenderer
-          key={key}
-          hooks={hooks}
-          formState={formState}
-          wrapElem={wrapElem}
-          actionDef={definition as ActionControlDefinition}
-        />
-      );
-    default:
-      return <h1>Unknown control: {(definition as any).type}</h1>;
-  }
-
-  function wrapElem(e: ReactElement): ReactElement {
-    return wrapChild?.(key, e) ?? e;
-  }
+  const { fields } = options;
+  const formState = { ...options, data };
+  return visitControlDefinition(
+    definition,
+    {
+      data: (def) => {
+        const fieldData = findScalarField(fields, def.field);
+        if (!fieldData)
+          return <h1 key={key}>No schema field for: {def.field}</h1>;
+        return (
+          <DataRenderer
+            key={key}
+            formState={formState}
+            controlDef={def}
+            fieldData={fieldData}
+          />
+        );
+      },
+      group: (d: GroupedControlsDefinition) => (
+        <GroupRenderer key={key} groupDef={d} formState={formState} />
+      ),
+      action: (d: ActionControlDefinition) => (
+        <ActionRenderer key={key} formState={formState} actionDef={d} />
+      ),
+      display: (d: DisplayControlDefinition) => (
+        <DisplayRenderer key={key} formState={formState} displayDef={d} />
+      ),
+    },
+    () => <h1>Unknown control: {(definition as any).type}</h1>,
+  );
 }
 
+/** @trackControls */
 function DataRenderer({
-  hooks,
   formState,
   controlDef,
-  wrapElem,
   fieldData,
 }: {
-  hooks: FormEditHooks;
   controlDef: DataControlDefinition;
   formState: FormEditState;
   fieldData: SchemaField;
-  wrapElem: (db: ReactElement) => ReactElement;
 }) {
-  const renderer = useFormRendererComponents();
-  const props = hooks.useDataProperties(formState, controlDef, fieldData);
-  const scalarControl =
-    formState.data.fields[fieldData.field] ?? newControl(undefined);
-  useControlEffect(
-    () => scalarControl.value,
-    (v) => {
-      if (props.defaultValue && !v) {
-        scalarControl.value = props.defaultValue;
-      }
-    },
-    true
-  );
-  if (!props.visible) {
-    return <></>;
-  }
-  const scalarProps: DataRendererProps = {
-    formEditState: formState,
-    field: fieldData,
-    definition: controlDef,
-    properties: props,
-  };
-  return wrapElem(
-    (props.customRender ?? renderer.renderData)(
-      scalarProps,
-      scalarControl,
-      false,
-      renderer
-    )
+  const props = formState.hooks.useDataProperties(
+    formState,
+    controlDef,
+    fieldData,
   );
+  return (props.customRender ?? formState.renderer.renderData)(props);
 }
 
+/** @trackControls */
 function ActionRenderer({
-  hooks,
   formState,
-  wrapElem,
   actionDef,
 }: {
-  hooks: FormEditHooks;
   actionDef: ActionControlDefinition;
   formState: FormEditState;
-  wrapElem: (db: ReactElement) => ReactElement;
 }) {
-  const { renderAction } = useFormRendererComponents();
-  const actionControlProperties = hooks.useActionProperties(
+  const actionControlProperties = formState.hooks.useActionProperties(
     formState,
-    actionDef
-  );
-  if (!actionControlProperties.visible) {
-    return <></>;
-  }
-
-  return wrapElem(
-    renderAction({ definition: actionDef, properties: actionControlProperties })
+    actionDef,
   );
+  return formState.renderer.renderAction(actionControlProperties);
 }
 
+/** @trackControls */
 function GroupRenderer({
-  hooks,
   formState,
   groupDef,
-  wrapElem,
 }: {
-  hooks: FormEditHooks;
   groupDef: GroupedControlsDefinition;
   formState: FormEditState;
-  wrapElem: (db: ReactElement) => ReactElement;
 }) {
-  const renderers = useFormRendererComponents();
-
-  const groupProps = hooks.useGroupProperties(formState, groupDef, hooks);
-  if (!groupProps.visible) {
-    return <></>;
-  }
-  const compoundField = groupDef.compoundField
-    ? findCompoundField(formState.fields, groupDef.compoundField)
-    : undefined;
-  if (compoundField) {
-    return wrapElem(
-      renderers.renderCompound(
-        {
-          definition: groupDef,
-          field: compoundField,
-          properties: groupProps,
-          renderChild: (k, c, data, wrapChild) =>
-            renderControl(
-              c as AnyControlDefinition,
-              {
-                ...formState,
-                fields: compoundField!.children,
-                data,
-              },
-              groupProps.hooks,
-              k,
-              wrapChild
-            ),
-        },
-        formState.data.fields[compoundField.field],
-        renderers
-      )
-    );
-  }
-  return wrapElem(
-    renderers.renderGroup({
-      definition: groupDef,
-      childCount: groupDef.children.length,
-      properties: groupProps,
-      renderChild: (c, wrapChild) =>
-        renderControl(
-          groupDef.children[c],
-          formState,
-          groupProps.hooks,
-          c,
-          wrapChild
-        ),
-    })
-  );
+  const groupProps = formState.hooks.useGroupProperties(formState, groupDef);
+  return formState.renderer.renderGroup(groupProps);
 }
 
+/** @trackControls */
 function DisplayRenderer({
-  hooks,
-  wrapElem,
   formState,
   displayDef,
 }: {
-  hooks: FormEditHooks;
   displayDef: DisplayControlDefinition;
   formState: FormEditState;
-  wrapElem: (db: ReactElement) => ReactElement;
 }) {
-  const { renderDisplay } = useFormRendererComponents();
-
-  const displayProps = hooks.useDisplayProperties(formState, displayDef);
-  if (!displayProps.visible) {
-    return <></>;
-  }
-  return wrapElem(
-    renderDisplay({ definition: displayDef, properties: displayProps })
+  const displayProps = formState.hooks.useDisplayProperties(
+    formState,
+    displayDef,
   );
+  return formState.renderer.renderDisplay(displayProps);
 }
 
 export function controlForField(
   field: string,
-  formState: FormEditState
+  formState: FormEditState,
 ): Control<any> {
   const refField = findField(formState.fields, field);
   return (
@@ -478,14 +288,61 @@ export function fieldForControl(c: ControlDefinition) {
     : undefined;
 }
 
-export function isDataControl(
-  c: ControlDefinition
-): c is DataControlDefinition {
-  return c.type === ControlDefinitionType.Data;
+export const AlwaysVisible: Visibility = { value: true, canChange: false };
+
+export function createAction(
+  label: string,
+  onClick: () => void,
+  actionId?: string,
+): ActionRendererProps {
+  return {
+    definition: {
+      type: ControlDefinitionType.Action,
+      actionId: actionId ?? label,
+      title: label,
+    },
+    visible: AlwaysVisible,
+    onClick,
+  };
 }
 
-export function isGroupControl(
-  c: ControlDefinition
-): c is GroupedControlsDefinition {
-  return c.type === ControlDefinitionType.Group;
+export function visitControlData<S extends ControlDefinition, A>(
+  definition: S,
+  { fields, data }: FormDataContext,
+  cb: (
+    definition: DataControlDefinition,
+    control: Control<any>,
+  ) => A | undefined,
+): A | undefined {
+  return visitControlDefinition<A | undefined>(
+    definition,
+    {
+      data(def: DataControlDefinition) {
+        const fieldData = findScalarField(fields, def.field);
+        if (!fieldData) return undefined;
+        return cb(def, data.fields[fieldData.field]);
+      },
+      group(d: GroupedControlsDefinition) {
+        if (d.compoundField) {
+          const compound = findCompoundField(fields, d.compoundField);
+          if (!compound) return;
+          fields = compound.children;
+          data = data.fields[compound.field];
+        }
+        const childState = { fields, data };
+        for (let c of d.children) {
+          const res = visitControlData(c, childState, cb);
+          if (res !== undefined) return res;
+        }
+        return undefined;
+      },
+      action(d: ActionControlDefinition) {
+        return undefined;
+      },
+      display(d: DisplayControlDefinition) {
+        return undefined;
+      },
+    },
+    () => undefined,
+  );
 }