@react-typed-forms/schemas 3.0.0-dev.98 → 4.0.0

package/src/controlRender.tsx

@@ -1,498 +1,594 @@
+import React, {
+  FC,
+  Fragment,
+  Key,
+  ReactNode,
+  useCallback,
+  useRef,
+} from "react";
 import {
-  ActionControlDefinition,
-  AnyControlDefinition,
-  CompoundField,
+  addElement,
+  Control,
+  newControl,
+  removeElement,
+  useComponentTracking,
+  useComputed,
+  useControl,
+  useControlEffect,
+} from "@react-typed-forms/core";
+import {
+  AdornmentPlacement,
+  ControlAdornment,
   ControlDefinition,
-  ControlDefinitionType,
   DataControlDefinition,
-  DisplayControlDefinition,
+  DisplayData,
   FieldOption,
-  GroupedControlsDefinition,
-  ScalarField,
+  GroupRenderOptions,
+  isActionControlsDefinition,
+  isDataControlDefinition,
+  isDisplayControlsDefinition,
+  isGroupControlsDefinition,
+  RenderOptions,
   SchemaField,
-  SchemaFieldType,
 } from "./types";
-import React, { createContext, Key, ReactElement, useContext } from "react";
 import {
-  Control,
-  ControlChange,
-  newControl,
-  useControlEffect,
-} from "@react-typed-forms/core";
-
-export interface FormEditHooks {
-  useDataProperties(
-    formState: FormEditState,
-    definition: DataControlDefinition,
-    field: ScalarField
-  ): DataControlProperties;
-  useGroupProperties(
-    formState: FormEditState,
-    definition: GroupedControlsDefinition,
-    currentHooks: FormEditHooks
-  ): GroupControlProperties;
-  useDisplayProperties(
-    formState: FormEditState,
-    definition: DisplayControlDefinition
-  ): DisplayControlProperties;
-  useActionProperties(
-    formState: FormEditState,
-    definition: ActionControlDefinition
-  ): ActionControlProperties;
-}
-
-export interface DataControlProperties {
-  readonly: boolean;
-  visible: boolean;
-  options: FieldOption[] | undefined;
-  defaultValue: any;
-  required: boolean;
-  customRender?: (
+  ControlGroupContext,
+  elementValueForField,
+  fieldDisplayName,
+  findField,
+  isCompoundField,
+  useUpdatedRef,
+} from "./util";
+import { dataControl } from "./controlBuilder";
+import { useEvalDefaultValueHook, useEvalVisibilityHook } from "./hooks";
+import { useValidationHook } from "./validators";
+
+export interface FormRenderer {
+  renderData: (
     props: DataRendererProps,
-    control: Control<any>
-  ) => ReactElement;
+    asArray: (() => ReactNode) | undefined,
+  ) => (layout: ControlLayoutProps) => ControlLayoutProps;
+  renderGroup: (props: GroupRendererProps) => ReactNode;
+  renderDisplay: (props: DisplayRendererProps) => ReactNode;
+  renderAction: (props: ActionRendererProps) => ReactNode;
+  renderArray: (props: ArrayRendererProps) => ReactNode;
+  renderAdornment: (props: AdornmentProps) => AdornmentRenderer;
+  renderLabel: (
+    props: LabelRendererProps,
+    labelStart: ReactNode,
+    labelEnd: ReactNode,
+  ) => ReactNode;
+  renderLayout: (props: ControlLayoutProps) => ReactNode;
+  renderVisibility: (
+    control: Control<Visibility | undefined>,
+    children: () => ReactNode,
+  ) => ReactNode;
 }
 
-export interface GroupControlProperties {
-  visible: boolean;
-  hooks: FormEditHooks;
+export interface DisplayRendererProps {
+  data: DisplayData;
 }
-
-export interface DisplayControlProperties {
-  visible: boolean;
+export interface AdornmentProps {
+  adornment: ControlAdornment;
 }
 
-export interface ActionControlProperties {
-  visible: boolean;
-  onClick: () => void;
-}
+export const AppendAdornmentPriority = 0;
+export const WrapAdornmentPriority = 1000;
 
-export interface ControlData {
-  [field: string]: any;
+export interface AdornmentRenderer {
+  apply(children: RenderedLayout): void;
+  adornment?: ControlAdornment;
+  priority: number;
 }
 
-export interface FormEditState {
-  fields: SchemaField[];
-  data: Control<ControlData>;
-  readonly?: boolean;
+export interface ArrayRendererProps {
+  addAction?: ActionRendererProps;
+  required: boolean;
+  removeAction?: (childIndex: number) => ActionRendererProps;
+  childCount: number;
+  renderChild: (childIndex: number) => ReactNode;
+  childKey: (childIndex: number) => Key;
 }
-
-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 Visibility {
+  visible: boolean;
+  showing: boolean;
 }
 
-export const FormRendererComponentsContext = createContext<
-  FormRendererComponents | undefined
->(undefined);
-
-export function useFormRendererComponents() {
-  const c = useContext(FormRendererComponentsContext);
-  if (!c) {
-    throw "Need to use FormRendererComponentContext.Provider";
-  }
-  return c;
+export interface RenderedLayout {
+  labelStart?: ReactNode;
+  labelEnd?: ReactNode;
+  controlStart?: ReactNode;
+  controlEnd?: ReactNode;
+  label?: ReactNode;
+  children?: ReactNode;
 }
 
-export interface DisplayRendererProps {
-  definition: DisplayControlDefinition;
-  properties: DisplayControlProperties;
+export interface ControlLayoutProps {
+  label?: LabelRendererProps;
+  errorControl?: Control<any>;
+  adornments?: AdornmentRenderer[];
+  children?: ReactNode;
+  processLayout?: (props: ControlLayoutProps) => ControlLayoutProps;
 }
 
-export interface ActionRendererProps {
-  definition: ActionControlDefinition;
-  properties: ActionControlProperties;
+export enum LabelType {
+  Control,
+  Group,
 }
-
-export interface DataRendererProps {
-  definition: DataControlDefinition;
-  properties: DataControlProperties;
-  field: ScalarField;
-  formEditState?: FormEditState;
+export interface LabelRendererProps {
+  type: LabelType;
+  hide?: boolean | null;
+  label: ReactNode;
+  required?: boolean | null;
+  forId?: string;
 }
-
 export interface GroupRendererProps {
-  definition: Omit<GroupedControlsDefinition, "children">;
-  properties: GroupControlProperties;
+  renderOptions: GroupRenderOptions;
   childCount: number;
-  renderChild: (
-    child: number,
-    wrapChild: (key: Key, childElem: ReactElement) => ReactElement
-  ) => ReactElement;
+  renderChild: (child: number) => ReactNode;
 }
 
-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 DataRendererProps {
+  renderOptions: RenderOptions;
+  field: SchemaField;
+  id: string;
+  control: Control<any>;
+  readonly: boolean;
+  required: boolean;
+  options: FieldOption[] | undefined | null;
+  hidden: boolean;
 }
 
-export function isScalarField(sf: SchemaField): sf is ScalarField {
-  return sf.schemaType === SchemaFieldType.Scalar;
+export interface ActionRendererProps {
+  actionId: string;
+  actionText: string;
+  onClick: () => void;
 }
 
-export function isCompoundField(sf: SchemaField): sf is CompoundField {
-  return sf.schemaType === SchemaFieldType.Compound;
+export interface ControlRenderProps {
+  control: Control<any>;
 }
 
-export type AnySchemaFields =
-  | SchemaField
-  | ScalarField
-  | (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) => x.schemaType === SchemaFieldType.Compound || !(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 interface FormContextOptions {
+  readonly?: boolean | null;
+  hidden?: boolean;
 }
 
-export function applyDefaultForField(
-  v: any,
+export type CreateDataProps = (
+  definition: DataControlDefinition,
   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 as ScalarField).defaultValue;
-}
-
-export function elementValueForField(sf: SchemaField): any {
-  if (isCompoundField(sf)) {
-    return defaultValueForFields(sf.children);
-  }
-  return (sf as ScalarField).defaultValue;
-}
-
-export function findScalarField(
-  fields: SchemaField[],
-  field: string
-): ScalarField | undefined {
-  return findField(fields, field) as ScalarField | undefined;
-}
-
-export function findCompoundField(
+  groupContext: ControlGroupContext,
+  control: Control<any>,
+  options: FormContextOptions,
+) => DataRendererProps;
+export interface ControlRenderOptions extends FormContextOptions {
+  useDataHook?: (c: ControlDefinition) => CreateDataProps;
+  clearHidden?: boolean;
+}
+export function useControlRenderer(
+  definition: ControlDefinition,
   fields: SchemaField[],
-  field: string
-): CompoundField | undefined {
-  return findField(fields, field) as CompoundField | undefined;
+  renderer: FormRenderer,
+  options: ControlRenderOptions = {},
+): FC<ControlRenderProps> {
+  const dataProps = options.useDataHook?.(definition) ?? defaultDataProps;
+
+  const schemaField = lookupSchemaField(definition, fields);
+  const useDefaultValue = useEvalDefaultValueHook(definition, schemaField);
+  const useIsVisible = useEvalVisibilityHook(definition, schemaField);
+  const useValidation = useValidationHook(definition);
+  const r = useUpdatedRef({ options, definition, fields, schemaField });
+
+  const Component = useCallback(
+    ({ control: parentControl }: ControlRenderProps) => {
+      const stopTracking = useComponentTracking();
+      try {
+        const { definition: c, options, fields, schemaField } = r.current;
+        const groupContext: ControlGroupContext = {
+          groupControl: parentControl,
+          fields,
+        };
+        const visibleControl = useIsVisible(groupContext);
+        const visible = visibleControl.current.value;
+        const visibility = useControl<Visibility | undefined>(() =>
+          visible != null
+            ? {
+                visible,
+                showing: visible,
+              }
+            : undefined,
+        );
+        useControlEffect(
+          () => visibleControl.value,
+          (visible) => {
+            if (visible != null)
+              visibility.setValue((ex) => ({
+                visible,
+                showing: ex ? ex.showing : visible,
+              }));
+          },
+        );
+
+        const defaultValueControl = useDefaultValue(groupContext);
+        const [control, childContext] = getControlData(
+          schemaField,
+          groupContext,
+        );
+        useControlEffect(
+          () => [
+            visibility.value,
+            defaultValueControl.value,
+            control,
+            parentControl.isNull,
+          ],
+          ([vc, dv, cd, pn]) => {
+            if (pn) {
+              parentControl.value = {};
+            }
+            if (vc && cd && vc.visible === vc.showing) {
+              if (!vc.visible) {
+                if (options.clearHidden) cd.value = undefined;
+              } else if (cd.value == null) {
+                cd.value = dv;
+              }
+            }
+          },
+          true,
+        );
+        const hidden = useComputed(
+          () => options.hidden || !visibility.fields?.showing.value,
+        ).value;
+        useValidation(control!, hidden, groupContext);
+        const myOptions =
+          options.hidden !== hidden ? { ...options, hidden } : options;
+        const childRenderers: FC<ControlRenderProps>[] =
+          c.children?.map((cd) =>
+            useControlRenderer(cd, childContext.fields, renderer, myOptions),
+          ) ?? [];
+        if (parentControl.isNull) return <></>;
+        const adornments =
+          definition.adornments?.map((x) =>
+            renderer.renderAdornment({ adornment: x }),
+          ) ?? [];
+        const labelAndChildren = renderControlLayout(
+          c,
+          renderer,
+          childRenderers.length,
+          (k, i, props) => {
+            const RenderChild = childRenderers[i];
+            return <RenderChild key={k} {...props} />;
+          },
+          dataProps,
+          myOptions,
+          groupContext,
+          control,
+          schemaField,
+        );
+        return renderer.renderVisibility(visibility, () =>
+          renderer.renderLayout({ ...labelAndChildren, adornments }),
+        );
+      } finally {
+        stopTracking();
+      }
+    },
+    [r, dataProps, useIsVisible, useDefaultValue, useValidation, renderer],
+  );
+  (Component as any).displayName = "RenderControl";
+  return Component;
 }
-
-export function findField(
+export function lookupSchemaField(
+  c: ControlDefinition,
   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;
+  const fieldName = isGroupControlsDefinition(c)
+    ? c.compoundField
+    : isDataControlDefinition(c)
+    ? c.field
+    : undefined;
+  return fieldName ? findField(fields, fieldName) : undefined;
+}
+export function getControlData(
+  schemaField: SchemaField | undefined,
+  parentContext: ControlGroupContext,
+): [Control<any> | undefined, ControlGroupContext] {
+  const childControl: Control<any> | undefined = schemaField
+    ? parentContext.groupControl.fields?.[schemaField.field] ?? newControl({})
+    : undefined;
+  return [
+    childControl,
+    schemaField && isCompoundField(schemaField)
+      ? {
+          groupControl: childControl!,
+          fields: schemaField.children,
+        }
+      : parentContext,
+  ];
+}
+
+function renderArray(
+  renderer: FormRenderer,
+  noun: string,
+  field: SchemaField,
+  required: boolean,
+  controlArray: Control<any[] | undefined | null>,
+  renderChild: (elemIndex: number, control: Control<any>) => ReactNode,
+) {
+  const elems = controlArray.elements ?? [];
+  return renderer.renderArray({
+    childCount: elems.length,
+    required,
+    addAction: {
+      actionId: "add",
+      actionText: "Add " + noun,
+      onClick: () => addElement(controlArray, elementValueForField(field)),
+    },
+    childKey: (i) => elems[i].uniqueId,
+    removeAction: (i: number) => ({
+      actionId: "",
+      actionText: "Remove",
+      onClick: () => removeElement(controlArray, i),
+    }),
+    renderChild: (i) => renderChild(i, elems[i]),
+  });
 }
-
-export function controlTitle(title: string | undefined, field: SchemaField) {
-  return title ? title : fieldDisplayName(field);
+function groupProps(
+  renderOptions: GroupRenderOptions = { type: "Standard" },
+  childCount: number,
+  renderChild: ChildRenderer,
+  control: Control<any>,
+): GroupRendererProps {
+  return {
+    childCount,
+    renderChild: (i) => renderChild(i, i, { control }),
+    renderOptions,
+  };
 }
 
-export function renderControl(
-  definition: AnyControlDefinition,
-  formState: FormEditState,
-  hooks: FormEditHooks,
-  key: Key,
-  wrapChild?: (key: Key, db: ReactElement) => ReactElement
-): 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}
-        />
+export const defaultDataProps: CreateDataProps = (
+  definition,
+  field,
+  groupContext,
+  control,
+  options,
+) => {
+  return {
+    control,
+    field,
+    id: "c" + control.uniqueId,
+    options: (field.options?.length ?? 0) === 0 ? null : field.options,
+    readonly: options.readonly || !!definition.readonly,
+    renderOptions: definition.renderOptions ?? { type: "Standard" },
+    required: !!definition.required,
+    hidden: !!options.hidden,
+  };
+};
+
+export type ChildRenderer = (
+  k: Key,
+  childIndex: number,
+  props: ControlRenderProps,
+) => ReactNode;
+export function renderControlLayout(
+  c: ControlDefinition,
+  renderer: FormRenderer,
+  childCount: number,
+  childRenderer: ChildRenderer,
+  dataProps: CreateDataProps,
+  dataOptions: FormContextOptions,
+  groupContext: ControlGroupContext,
+  childControl?: Control<any>,
+  schemaField?: SchemaField,
+): ControlLayoutProps {
+  if (isDataControlDefinition(c)) {
+    return renderData(c);
+  }
+  if (isGroupControlsDefinition(c)) {
+    if (c.compoundField) {
+      return renderData(
+        dataControl(c.compoundField, c.title, {
+          children: c.children,
+          hideTitle: c.groupOptions?.hideTitle,
+        }),
       );
-    default:
-      return <h1>Unknown control: {(definition as any).type}</h1>;
+    }
+    return {
+      children: renderer.renderGroup(
+        groupProps(
+          c.groupOptions,
+          childCount,
+          childRenderer,
+          groupContext.groupControl,
+        ),
+      ),
+      label: {
+        label: c.title,
+        type: LabelType.Group,
+        hide: c.groupOptions?.hideTitle,
+      },
+    };
   }
-
-  function wrapElem(e: ReactElement): ReactElement {
-    return wrapChild?.(key, e) ?? e;
+  if (isActionControlsDefinition(c)) {
+    return {
+      children: renderer.renderAction({
+        actionText: c.title ?? c.actionId,
+        actionId: c.actionId,
+        onClick: () => {},
+      }),
+    };
   }
-}
-
-function DataRenderer({
-  hooks,
-  formState,
-  controlDef,
-  wrapElem,
-  fieldData,
-}: {
-  hooks: FormEditHooks;
-  controlDef: DataControlDefinition;
-  formState: FormEditState;
-  fieldData: ScalarField;
-  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 <></>;
+  if (isDisplayControlsDefinition(c)) {
+    return { children: renderer.renderDisplay({ data: c.displayData ?? {} }) };
   }
-  const scalarProps: DataRendererProps = {
-    formEditState: formState,
-    field: fieldData,
-    definition: controlDef,
-    properties: props,
-  };
-  return wrapElem(
-    (props.customRender ?? renderer.renderData)(
-      scalarProps,
-      scalarControl,
-      false,
-      renderer
-    )
-  );
-}
-
-function ActionRenderer({
-  hooks,
-  formState,
-  wrapElem,
-  actionDef,
-}: {
-  hooks: FormEditHooks;
-  actionDef: ActionControlDefinition;
-  formState: FormEditState;
-  wrapElem: (db: ReactElement) => ReactElement;
-}) {
-  const { renderAction } = useFormRendererComponents();
-  const actionControlProperties = hooks.useActionProperties(
-    formState,
-    actionDef
-  );
-  if (!actionControlProperties.visible) {
-    return <></>;
+  return {};
+
+  function renderData(c: DataControlDefinition) {
+    if (!schemaField) return { children: "No schema field for: " + c.field };
+    if (isCompoundField(schemaField)) {
+      const label: LabelRendererProps = {
+        hide: c.hideTitle,
+        label: controlTitle(c.title, schemaField),
+        type: schemaField.collection ? LabelType.Control : LabelType.Group,
+      };
+
+      if (schemaField.collection) {
+        return {
+          label,
+          children: renderArray(
+            renderer,
+            controlTitle(c.title, schemaField),
+            schemaField,
+            !!c.required,
+            childControl!,
+            compoundRenderer,
+          ),
+          errorControl: childControl,
+        };
+      }
+      return {
+        children: renderer.renderGroup(
+          groupProps(
+            { type: "Standard" },
+            childCount,
+            childRenderer,
+            childControl!,
+          ),
+        ),
+        label,
+        errorControl: childControl,
+      };
+    }
+    const props = dataProps(
+      c,
+      schemaField,
+      groupContext,
+      childControl!,
+      dataOptions,
+    );
+    const labelText = !c.hideTitle
+      ? controlTitle(c.title, schemaField)
+      : undefined;
+    return {
+      processLayout: renderer.renderData(
+        props,
+        schemaField.collection
+          ? () =>
+              renderArray(
+                renderer,
+                controlTitle(c.title, schemaField),
+                schemaField,
+                !!c.required,
+                childControl!,
+                scalarRenderer(props),
+              )
+          : undefined,
+      ),
+      label: {
+        type: LabelType.Control,
+        label: labelText,
+        forId: props.id,
+        required: c.required,
+        hide: c.hideTitle,
+      },
+      errorControl: childControl,
+    };
   }
 
-  return wrapElem(
-    renderAction({ definition: actionDef, properties: actionControlProperties })
-  );
-}
-
-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
-      )
+  function compoundRenderer(i: number, control: Control<any>): ReactNode {
+    return (
+      <Fragment key={control.uniqueId}>
+        {renderer.renderGroup({
+          renderOptions: { type: "Standard", hideTitle: true },
+          childCount,
+          renderChild: (ci) => childRenderer(ci, ci, { control }),
+        })}
+      </Fragment>
     );
   }
-  return wrapElem(
-    renderers.renderGroup({
-      definition: groupDef,
-      childCount: groupDef.children.length,
-      properties: groupProps,
-      renderChild: (c, wrapChild) =>
-        renderControl(
-          groupDef.children[c],
-          formState,
-          groupProps.hooks,
-          c,
-          wrapChild
-        ),
-    })
-  );
-}
-
-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 <></>;
+  function scalarRenderer(
+    dataProps: DataRendererProps,
+  ): (i: number, control: Control<any>) => ReactNode {
+    return (i, control) => {
+      return (
+        <Fragment key={control.uniqueId}>
+          {
+            renderer.renderData({ ...dataProps, control }, undefined)({})
+              .children
+          }
+        </Fragment>
+      );
+    };
   }
-  return wrapElem(
-    renderDisplay({ definition: displayDef, properties: displayProps })
-  );
-}
-
-export function controlForField(
-  field: string,
-  formState: FormEditState
-): Control<any> {
-  const refField = findField(formState.fields, field);
-  return (
-    (refField && formState.data.fields[refField.field]) ?? newControl(undefined)
-  );
 }
 
-export function fieldForControl(c: ControlDefinition) {
-  return isSchemaControl(c)
-    ? c.field
-    : isGroupControl(c)
-    ? c.compoundField
-    : undefined;
+export function appendMarkup(
+  k: keyof RenderedLayout,
+  markup: ReactNode,
+): (layout: RenderedLayout) => void {
+  return (layout) =>
+    (layout[k] = (
+      <>
+        {layout[k]}
+        {markup}
+      </>
+    ));
+}
+
+export function wrapMarkup(
+  k: keyof RenderedLayout,
+  wrap: (ex: ReactNode) => ReactNode,
+): (layout: RenderedLayout) => void {
+  return (layout) => (layout[k] = wrap(layout[k]));
+}
+
+export function layoutKeyForPlacement(
+  pos: AdornmentPlacement,
+): keyof RenderedLayout {
+  switch (pos) {
+    case AdornmentPlacement.ControlEnd:
+      return "controlEnd";
+    case AdornmentPlacement.ControlStart:
+      return "controlStart";
+    case AdornmentPlacement.LabelStart:
+      return "labelStart";
+    case AdornmentPlacement.LabelEnd:
+      return "labelEnd";
+  }
 }
 
-export function isSchemaControl(
-  c: ControlDefinition
-): c is DataControlDefinition {
-  return c.type === ControlDefinitionType.Data;
+export function appendMarkupAt(
+  pos: AdornmentPlacement,
+  markup: ReactNode,
+): (layout: RenderedLayout) => void {
+  return appendMarkup(layoutKeyForPlacement(pos), markup);
+}
+
+export function wrapMarkupAt(
+  pos: AdornmentPlacement,
+  wrap: (ex: ReactNode) => ReactNode,
+): (layout: RenderedLayout) => void {
+  return wrapMarkup(layoutKeyForPlacement(pos), wrap);
+}
+
+export function renderLayoutParts(
+  props: ControlLayoutProps,
+  renderer: FormRenderer,
+): RenderedLayout {
+  const processed = props.processLayout?.(props) ?? props;
+  const layout: RenderedLayout = { children: processed.children };
+  (processed.adornments ?? [])
+    .sort((a, b) => a.priority - b.priority)
+    .forEach((x) => x.apply(layout));
+  const l = processed.label;
+  layout.label =
+    l && !l.hide
+      ? renderer.renderLabel(l, layout.labelStart, layout.labelEnd)
+      : undefined;
+  return layout;
 }
 
-export function isGroupControl(
-  c: ControlDefinition
-): c is GroupedControlsDefinition {
-  return c.type === ControlDefinitionType.Group;
+export function controlTitle(
+  title: string | undefined | null,
+  field: SchemaField,
+) {
+  return title ? title : fieldDisplayName(field);
 }