@react-typed-forms/schemas 1.0.0-dev.17 → 1.0.0-dev.18

package/src/controlRender.tsx

@@ -1,7 +1,8 @@
 import {
   ActionControlDefinition,
-  AnyControlDefinition,
+  AdornmentPlacement,
   CompoundField,
+  ControlAdornment,
   ControlDefinition,
   ControlDefinitionType,
   DataControlDefinition,
@@ -10,7 +11,9 @@ import {
   FieldOption,
   FieldType,
   GroupedControlsDefinition,
+  RenderOptions,
   SchemaField,
+  SchemaValidator,
   visitControlDefinition,
 } from "./types";
 import React, {
@@ -24,55 +27,68 @@ import React, {
 import { Control, newControl } from "@react-typed-forms/core";
 import { fieldDisplayName } from "./util";
 
-export type ExpressionHook = (
-  expr: EntityExpression,
-  formState: FormEditState
-) => any;
+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,
+    renderers: FormRenderer,
+  ): DataRendererProps;
   useGroupProperties(
     formState: FormEditState,
     definition: GroupedControlsDefinition,
-    currentHooks: FormEditHooks
-  ): GroupControlProperties;
+    currentHooks: FormEditHooks,
+    renderers: FormRenderer,
+  ): GroupRendererProps;
   useDisplayProperties(
     formState: FormEditState,
-    definition: DisplayControlDefinition
-  ): DisplayControlProperties;
+    definition: DisplayControlDefinition,
+  ): DisplayRendererProps;
   useActionProperties(
     formState: FormEditState,
-    definition: ActionControlDefinition
-  ): ActionControlProperties;
-  useExpression: ExpressionHook;
+    definition: ActionControlDefinition,
+  ): ActionRendererProps;
+  schemaHooks: SchemaHooks;
 }
 
-export interface DataControlProperties {
+export interface DataRendererProps {
+  definition: DataControlDefinition;
+  renderOptions: RenderOptions;
+  visible: Visibility;
   control: Control<any>;
-  visible: boolean;
+  field: SchemaField;
+  array?: ArrayRendererProps;
   readonly: boolean;
   defaultValue: any;
   required: boolean;
   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 {
@@ -83,34 +99,49 @@ export interface FormEditState {
   fields: SchemaField[];
   data: Control<ControlData>;
   readonly?: boolean;
+  invisible?: boolean;
 }
 
-export interface FormRendererComponents {
-  renderData: (
-    props: DataRendererProps,
-    control: Control<any>,
-    element: boolean,
-    renderers: FormRendererComponents
-  ) => ReactElement;
-  renderCompound: (
-    props: CompoundGroupRendererProps,
-    control: Control<any>,
-    renderers: FormRendererComponents
-  ) => ReactElement;
+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 AdornmentProps {
+  key: Key;
+  definition: ControlAdornment;
+}
+
+export interface AdornmentRenderer {
+  wrap?: (children: ReactElement) => ReactElement;
+  child?: [AdornmentPlacement, ReactNode];
+}
+
+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;
 }
 
-let _FormRendererComponentsContext: Context<
-  FormRendererComponents | undefined
-> | null = null;
+let _FormRendererComponentsContext: Context<FormRenderer | undefined> | null =
+  null;
 
 function FormRendererComponentsContext() {
   if (!_FormRendererComponentsContext) {
-    _FormRendererComponentsContext = createContext<
-      FormRendererComponents | undefined
-    >(undefined);
+    _FormRendererComponentsContext = createContext<FormRenderer | undefined>(
+      undefined,
+    );
   }
   return _FormRendererComponentsContext;
 }
@@ -119,7 +150,7 @@ export function FormRendererProvider({
   value,
   children,
 }: {
-  value: FormRendererComponents;
+  value: FormRenderer;
   children: ReactNode;
 }) {
   const { Provider } = FormRendererComponentsContext();
@@ -134,45 +165,29 @@ export function useFormRendererComponents() {
   return c;
 }
 
+export interface Visibility {
+  value: boolean;
+  canChange: boolean;
+}
+export interface LabelRendererProps {
+  visible: Visibility;
+  title?: ReactNode;
+  forId?: string;
+  required: boolean;
+  control?: Control<any>;
+  group?: boolean;
+  renderAdornment: (placement: AdornmentPlacement) => ReactElement;
+}
+
 export interface DisplayRendererProps {
   definition: DisplayControlDefinition;
-  properties: DisplayControlProperties;
+  visible: Visibility;
 }
 
 export interface ActionRendererProps {
   definition: ActionControlDefinition;
-  properties: ActionControlProperties;
-}
-
-export interface DataRendererProps {
-  definition: DataControlDefinition;
-  properties: DataControlProperties;
-  field: SchemaField;
-  formEditState?: FormEditState;
-}
-
-export interface GroupRendererProps {
-  definition: Omit<GroupedControlsDefinition, "children">;
-  properties: GroupControlProperties;
-  childCount: number;
-  renderChild: (
-    child: number,
-    wrapChild: (key: Key, childElem: ReactElement) => ReactElement
-  ) => ReactElement;
-}
-
-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;
+  visible: Visibility;
+  onClick: () => void;
 }
 
 export function isScalarField(sf: SchemaField): sf is SchemaField {
@@ -189,11 +204,11 @@ export type AnySchemaFields =
 
 export function applyDefaultValues(
   v: { [k: string]: any } | undefined,
-  fields: SchemaField[]
+  fields: SchemaField[],
 ): any {
   if (!v) return defaultValueForFields(fields);
   const applyValue = fields.filter(
-    (x) => isCompoundField(x) || !(x.field in v)
+    (x) => isCompoundField(x) || !(x.field in v),
   );
   if (!applyValue.length) return v;
   const out = { ...v };
@@ -210,11 +225,11 @@ export function applyDefaultForField(
   v: any,
   field: SchemaField,
   parent: SchemaField[],
-  notElement?: boolean
+  notElement?: boolean,
 ): any {
   if (field.collection && !notElement) {
     return ((v as any[]) ?? []).map((x) =>
-      applyDefaultForField(x, field, parent, true)
+      applyDefaultForField(x, field, parent, true),
     );
   }
   if (isCompoundField(field)) {
@@ -226,7 +241,7 @@ export function applyDefaultForField(
 
 export function defaultValueForFields(fields: SchemaField[]): any {
   return Object.fromEntries(
-    fields.map((x) => [x.field, defaultValueForField(x)])
+    fields.map((x) => [x.field, defaultValueForField(x)]),
   );
 }
 
@@ -251,27 +266,27 @@ export function elementValueForField(sf: SchemaField): any {
 
 export function findScalarField(
   fields: SchemaField[],
-  field: string
+  field: string,
 ): SchemaField | undefined {
   return findField(fields, field);
 }
 
 export function findCompoundField(
   fields: SchemaField[],
-  field: string
+  field: string,
 ): CompoundField | undefined {
   return findField(fields, field) as CompoundField | undefined;
 }
 
 export function findField(
   fields: SchemaField[],
-  field: string
+  field: string,
 ): SchemaField | undefined {
   return fields.find((x) => x.field === field);
 }
 export function controlTitle(
   title: string | undefined | null,
-  field: SchemaField
+  field: SchemaField,
 ) {
   return title ? title : fieldDisplayName(field);
 }
@@ -281,7 +296,6 @@ export function renderControl<S extends ControlDefinition>(
   formState: FormEditState,
   hooks: FormEditHooks,
   key: Key,
-  wrapChild?: (key: Key, db: ReactElement) => ReactElement
 ): ReactElement {
   const { fields } = formState;
   return visitControlDefinition(
@@ -289,11 +303,11 @@ export function renderControl<S extends ControlDefinition>(
     {
       data: (def) => {
         const fieldData = findScalarField(fields, def.field);
-        if (!fieldData) return <h1>No schema field for: {def.field}</h1>;
+        if (!fieldData)
+          return <h1 key={key}>No schema field for: {def.field}</h1>;
         return (
           <DataRenderer
             key={key}
-            wrapElem={wrapElem}
             formState={formState}
             hooks={hooks}
             controlDef={def}
@@ -307,7 +321,6 @@ export function renderControl<S extends ControlDefinition>(
           hooks={hooks}
           groupDef={d}
           formState={formState}
-          wrapElem={wrapElem}
         />
       ),
       action: (d: ActionControlDefinition) => (
@@ -315,7 +328,6 @@ export function renderControl<S extends ControlDefinition>(
           key={key}
           hooks={hooks}
           formState={formState}
-          wrapElem={wrapElem}
           actionDef={d}
         />
       ),
@@ -324,17 +336,12 @@ export function renderControl<S extends ControlDefinition>(
           key={key}
           hooks={hooks}
           formState={formState}
-          wrapElem={wrapElem}
           displayDef={d}
         />
       ),
     },
-    () => <h1>Unknown control: {(definition as any).type}</h1>
+    () => <h1>Unknown control: {(definition as any).type}</h1>,
   );
-
-  function wrapElem(e: ReactElement): ReactElement {
-    return wrapChild?.(key, e) ?? e;
-  }
 }
 
 /** @trackControls */
@@ -342,53 +349,39 @@ 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 scalarProps: DataRendererProps = {
-    formEditState: formState,
-    field: fieldData,
-    definition: controlDef,
-    properties: props,
-  };
-  return wrapElem(
-    (props.customRender ?? renderer.renderData)(
-      scalarProps,
-      props.control,
-      false,
-      renderer
-    )
+  const props = hooks.useDataProperties(
+    formState,
+    controlDef,
+    fieldData,
+    renderer,
   );
+  return (props.customRender ?? 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(
     formState,
-    actionDef
-  );
-  return wrapElem(
-    renderAction({ definition: actionDef, properties: actionControlProperties })
+    actionDef,
   );
+  return renderAction(actionControlProperties);
 }
 
 /** @trackControls */
@@ -396,84 +389,39 @@ 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);
-  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 = hooks.useGroupProperties(
+    formState,
+    groupDef,
+    hooks,
+    renderers,
   );
+  return renderers.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);
-  return wrapElem(
-    renderDisplay({ definition: displayDef, properties: displayProps })
-  );
+  return renderDisplay(displayProps);
 }
 
 export function controlForField(
   field: string,
-  formState: FormEditState
+  formState: FormEditState,
 ): Control<any> {
   const refField = findField(formState.fields, field);
   return (
@@ -490,13 +438,72 @@ export function fieldForControl(c: ControlDefinition) {
 }
 
 export function isDataControl(
-  c: ControlDefinition
+  c: ControlDefinition,
 ): c is DataControlDefinition {
   return c.type === ControlDefinitionType.Data;
 }
 
 export function isGroupControl(
-  c: ControlDefinition
+  c: ControlDefinition,
 ): c is GroupedControlsDefinition {
   return c.type === ControlDefinitionType.Group;
 }
+
+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 visitControlData<S extends ControlDefinition, A>(
+  definition: S,
+  { fields, data }: FormEditState,
+  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,
+  );
+}