@react-typed-forms/schemas 5.0.2 → 6.0.0

package/src/controlRender.tsx

@@ -21,6 +21,7 @@ import {
   ControlDefinition,
   DataControlDefinition,
   DisplayData,
+  DynamicPropertyType,
   FieldOption,
   GroupRenderOptions,
   isActionControlsDefinition,
@@ -29,9 +30,10 @@ import {
   isGroupControlsDefinition,
   RenderOptions,
   SchemaField,
+  SchemaInterface,
 } from "./types";
 import {
-  ControlGroupContext,
+  ControlDataContext,
   elementValueForField,
   fieldDisplayName,
   findField,
@@ -43,19 +45,24 @@ import {
   defaultUseEvalExpressionHook,
   useEvalDefaultValueHook,
   useEvalDisabledHook,
+  useEvalDisplayHook,
   UseEvalExpressionHook,
   useEvalReadonlyHook,
+  useEvalStyleHook,
   useEvalVisibilityHook,
 } from "./hooks";
 import { useValidationHook } from "./validators";
-import { useCalculatedControl } from "./internal";
+import { cc, useCalculatedControl } from "./internal";
+import { defaultSchemaInterface } from "./schemaInterface";
 
 export interface FormRenderer {
   renderData: (
     props: DataRendererProps,
     asArray: (() => ReactNode) | undefined,
   ) => (layout: ControlLayoutProps) => ControlLayoutProps;
-  renderGroup: (props: GroupRendererProps) => ReactNode;
+  renderGroup: (
+    props: GroupRendererProps,
+  ) => (layout: ControlLayoutProps) => ControlLayoutProps;
   renderDisplay: (props: DisplayRendererProps) => ReactNode;
   renderAction: (props: ActionRendererProps) => ReactNode;
   renderArray: (props: ArrayRendererProps) => ReactNode;
@@ -65,16 +72,10 @@ export interface FormRenderer {
     labelStart: ReactNode,
     labelEnd: ReactNode,
   ) => ReactNode;
-  renderLayout: (props: ControlLayoutProps) => ReactNode;
-  renderVisibility: (
-    control: Control<Visibility | undefined>,
-    children: () => ReactNode,
-  ) => ReactNode;
+  renderLayout: (props: ControlLayoutProps) => RenderedControl;
+  renderVisibility: (props: VisibilityRendererProps) => ReactNode;
 }
 
-export interface DisplayRendererProps {
-  data: DisplayData;
-}
 export interface AdornmentProps {
   adornment: ControlAdornment;
 }
@@ -96,6 +97,8 @@ export interface ArrayRendererProps {
   renderChild: (childIndex: number) => ReactNode;
   childKey: (childIndex: number) => Key;
   arrayControl?: Control<any[] | undefined | null>;
+  className?: string;
+  style?: React.CSSProperties;
 }
 export interface Visibility {
   visible: boolean;
@@ -110,6 +113,19 @@ export interface RenderedLayout {
   label?: ReactNode;
   children?: ReactNode;
   errorControl?: Control<any>;
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+export interface RenderedControl {
+  children: ReactNode;
+  className?: string;
+  style?: React.CSSProperties;
+  divRef?: (cb: HTMLElement | null) => void;
+}
+
+export interface VisibilityRendererProps extends RenderedControl {
+  visibility: Control<Visibility | undefined>;
 }
 
 export interface ControlLayoutProps {
@@ -118,6 +134,8 @@ export interface ControlLayoutProps {
   adornments?: AdornmentRenderer[];
   children?: ReactNode;
   processLayout?: (props: ControlLayoutProps) => ControlLayoutProps;
+  className?: string | null;
+  style?: React.CSSProperties;
 }
 
 export enum LabelType {
@@ -131,10 +149,19 @@ export interface LabelRendererProps {
   required?: boolean | null;
   forId?: string;
 }
+export interface DisplayRendererProps {
+  data: DisplayData;
+  display?: Control<string | undefined>;
+  className?: string;
+  style?: React.CSSProperties;
+}
+
 export interface GroupRendererProps {
   renderOptions: GroupRenderOptions;
   childCount: number;
   renderChild: (child: number) => ReactNode;
+  className?: string;
+  style?: React.CSSProperties;
 }
 
 export interface DataRendererProps {
@@ -146,12 +173,17 @@ export interface DataRendererProps {
   required: boolean;
   options: FieldOption[] | undefined | null;
   hidden: boolean;
+  className?: string;
+  style?: React.CSSProperties;
+  dataContext: ControlDataContext;
 }
 
 export interface ActionRendererProps {
   actionId: string;
   actionText: string;
   onClick: () => void;
+  className?: string;
+  style?: React.CSSProperties;
 }
 
 export interface ControlRenderProps {
@@ -164,17 +196,23 @@ export interface FormContextOptions {
   disabled?: boolean | null;
 }
 
+export interface DataControlProps {
+  definition: DataControlDefinition;
+  field: SchemaField;
+  dataContext: ControlDataContext;
+  control: Control<any>;
+  options: FormContextOptions;
+  style: React.CSSProperties | undefined;
+}
 export type CreateDataProps = (
-  definition: DataControlDefinition,
-  field: SchemaField,
-  groupContext: ControlGroupContext,
-  control: Control<any>,
-  options: FormContextOptions,
+  controlProps: DataControlProps,
 ) => DataRendererProps;
+
 export interface ControlRenderOptions extends FormContextOptions {
   useDataHook?: (c: ControlDefinition) => CreateDataProps;
   useEvalExpressionHook?: UseEvalExpressionHook;
   clearHidden?: boolean;
+  schemaInterface?: SchemaInterface;
 }
 export function useControlRenderer(
   definition: ControlDefinition,
@@ -183,6 +221,7 @@ export function useControlRenderer(
   options: ControlRenderOptions = {},
 ): FC<ControlRenderProps> {
   const dataProps = options.useDataHook?.(definition) ?? defaultDataProps;
+  const schemaInterface = options.schemaInterface ?? defaultSchemaInterface;
   const useExpr = options.useEvalExpressionHook ?? defaultUseEvalExpressionHook;
 
   const schemaField = lookupSchemaField(definition, fields);
@@ -194,6 +233,17 @@ export function useControlRenderer(
   const useIsVisible = useEvalVisibilityHook(useExpr, definition, schemaField);
   const useIsReadonly = useEvalReadonlyHook(useExpr, definition);
   const useIsDisabled = useEvalDisabledHook(useExpr, definition);
+  const useCustomStyle = useEvalStyleHook(
+    useExpr,
+    DynamicPropertyType.Style,
+    definition,
+  );
+  const useLayoutStyle = useEvalStyleHook(
+    useExpr,
+    DynamicPropertyType.LayoutStyle,
+    definition,
+  );
+  const useDynamicDisplay = useEvalDisplayHook(useExpr, definition);
   const useValidation = useValidationHook(definition);
   const r = useUpdatedRef({ options, definition, fields, schemaField });
 
@@ -202,13 +252,17 @@ export function useControlRenderer(
       const stopTracking = useComponentTracking();
       try {
         const { definition: c, options, fields, schemaField } = r.current;
-        const groupContext: ControlGroupContext = {
+        const dataContext: ControlDataContext = {
           groupControl: parentControl,
           fields,
+          schemaInterface,
         };
-        const readonlyControl = useIsReadonly(groupContext);
-        const disabledControl = useIsDisabled(groupContext);
-        const visibleControl = useIsVisible(groupContext);
+        const readonlyControl = useIsReadonly(dataContext);
+        const disabledControl = useIsDisabled(dataContext);
+        const visibleControl = useIsVisible(dataContext);
+        const displayControl = useDynamicDisplay(dataContext);
+        const customStyle = useCustomStyle(dataContext).value;
+        const layoutStyle = useLayoutStyle(dataContext).value;
         const visible = visibleControl.current.value;
         const visibility = useControl<Visibility | undefined>(() =>
           visible != null
@@ -229,10 +283,10 @@ export function useControlRenderer(
           },
         );
 
-        const defaultValueControl = useDefaultValue(groupContext);
+        const defaultValueControl = useDefaultValue(dataContext);
         const [control, childContext] = getControlData(
           schemaField,
-          groupContext,
+          dataContext,
         );
         useControlEffect(
           () => [
@@ -260,7 +314,7 @@ export function useControlRenderer(
           readonly: options.readonly || readonlyControl.value,
           disabled: options.disabled || disabledControl.value,
         })).value;
-        useValidation(control!, !!myOptions.hidden, groupContext);
+        useValidation(control!, !!myOptions.hidden, dataContext);
         const childRenderers: FC<ControlRenderProps>[] =
           c.children?.map((cd) =>
             useControlRenderer(cd, childContext.fields, renderer, {
@@ -277,23 +331,29 @@ export function useControlRenderer(
           definition.adornments?.map((x) =>
             renderer.renderAdornment({ adornment: x }),
           ) ?? [];
-        const labelAndChildren = renderControlLayout(
-          c,
+        const labelAndChildren = renderControlLayout({
+          definition: c,
           renderer,
-          childRenderers.length,
-          (k, i, props) => {
+          childCount: childRenderers.length,
+          renderChild: (k, i, props) => {
             const RenderChild = childRenderers[i];
             return <RenderChild key={k} {...props} />;
           },
-          dataProps,
-          myOptions,
-          groupContext,
-          control,
+          createDataProps: dataProps,
+          formOptions: myOptions,
+          dataContext,
+          control: displayControl ?? control,
           schemaField,
-        );
-        return renderer.renderVisibility(visibility, () =>
-          renderer.renderLayout({ ...labelAndChildren, adornments }),
-        );
+          displayControl,
+          style: customStyle,
+        });
+        const renderedControl = renderer.renderLayout({
+          ...labelAndChildren,
+          adornments,
+          className: c.layoutClass,
+          style: layoutStyle,
+        });
+        return renderer.renderVisibility({ visibility, ...renderedControl });
       } finally {
         stopTracking();
       }
@@ -305,8 +365,12 @@ export function useControlRenderer(
       useDefaultValue,
       useIsReadonly,
       useIsDisabled,
+      useCustomStyle,
+      useLayoutStyle,
+      useDynamicDisplay,
       useValidation,
       renderer,
+      schemaInterface,
     ],
   );
   (Component as any).displayName = "RenderControl";
@@ -319,14 +383,14 @@ export function lookupSchemaField(
   const fieldName = isGroupControlsDefinition(c)
     ? c.compoundField
     : isDataControlDefinition(c)
-    ? c.field
-    : undefined;
+      ? c.field
+      : undefined;
   return fieldName ? findField(fields, fieldName) : undefined;
 }
 export function getControlData(
   schemaField: SchemaField | undefined,
-  parentContext: ControlGroupContext,
-): [Control<any> | undefined, ControlGroupContext] {
+  parentContext: ControlDataContext,
+): [Control<any> | undefined, ControlDataContext] {
   const childControl: Control<any> | undefined = schemaField
     ? parentContext.groupControl.fields?.[schemaField.field] ?? newControl({})
     : undefined;
@@ -336,6 +400,7 @@ export function getControlData(
       ? {
           groupControl: childControl!,
           fields: schemaField.children,
+          schemaInterface: parentContext.schemaInterface,
         }
       : parentContext,
   ];
@@ -348,6 +413,8 @@ function renderArray(
   required: boolean,
   arrayControl: Control<any[] | undefined | null>,
   renderChild: (elemIndex: number, control: Control<any>) => ReactNode,
+  className: string | null | undefined,
+  style: React.CSSProperties | undefined,
 ) {
   const elems = arrayControl.elements ?? [];
   return renderer.renderArray({
@@ -366,6 +433,8 @@ function renderArray(
       onClick: () => removeElement(arrayControl, i),
     }),
     renderChild: (i) => renderChild(i, elems[i]),
+    className: cc(className),
+    style,
   });
 }
 function groupProps(
@@ -373,21 +442,26 @@ function groupProps(
   childCount: number,
   renderChild: ChildRenderer,
   control: Control<any>,
+  className: string | null | undefined,
+  style: React.CSSProperties | undefined,
 ): GroupRendererProps {
   return {
     childCount,
     renderChild: (i) => renderChild(i, i, { control }),
     renderOptions,
+    className: cc(className),
+    style,
   };
 }
 
-export const defaultDataProps: CreateDataProps = (
+export function defaultDataProps({
   definition,
   field,
-  groupContext,
+  dataContext,
   control,
   options,
-) => {
+  style,
+}: DataControlProps): DataRendererProps {
   return {
     control,
     field,
@@ -397,25 +471,44 @@ export const defaultDataProps: CreateDataProps = (
     renderOptions: definition.renderOptions ?? { type: "Standard" },
     required: !!definition.required,
     hidden: !!options.hidden,
+    className: cc(definition.styleClass),
+    style,
+    dataContext,
   };
-};
+}
 
 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 {
+
+export interface RenderControlProps {
+  definition: ControlDefinition;
+  renderer: FormRenderer;
+  childCount: number;
+  renderChild: ChildRenderer;
+  createDataProps: CreateDataProps;
+  formOptions: FormContextOptions;
+  dataContext: ControlDataContext;
+  control?: Control<any>;
+  schemaField?: SchemaField;
+  displayControl?: Control<string | undefined>;
+  style?: React.CSSProperties;
+}
+export function renderControlLayout({
+  definition: c,
+  renderer,
+  childCount,
+  renderChild: childRenderer,
+  control: childControl,
+  schemaField,
+  dataContext,
+  formOptions: dataOptions,
+  createDataProps: dataProps,
+  displayControl,
+  style,
+}: RenderControlProps): ControlLayoutProps {
   if (isDataControlDefinition(c)) {
     return renderData(c);
   }
@@ -429,12 +522,14 @@ export function renderControlLayout(
       );
     }
     return {
-      children: renderer.renderGroup(
+      processLayout: renderer.renderGroup(
         groupProps(
           c.groupOptions,
           childCount,
           childRenderer,
-          groupContext.groupControl,
+          dataContext.groupControl,
+          c.styleClass,
+          style,
         ),
       ),
       label: {
@@ -450,11 +545,20 @@ export function renderControlLayout(
         actionText: c.title ?? c.actionId,
         actionId: c.actionId,
         onClick: () => {},
+        className: cc(c.styleClass),
+        style,
       }),
     };
   }
   if (isDisplayControlsDefinition(c)) {
-    return { children: renderer.renderDisplay({ data: c.displayData ?? {} }) };
+    return {
+      children: renderer.renderDisplay({
+        data: c.displayData ?? {},
+        className: cc(c.styleClass),
+        style,
+        display: displayControl,
+      }),
+    };
   }
   return {};
 
@@ -477,30 +581,35 @@ export function renderControlLayout(
             !!c.required,
             childControl!,
             compoundRenderer,
+            c.styleClass,
+            style,
           ),
           errorControl: childControl,
         };
       }
       return {
-        children: renderer.renderGroup(
+        processLayout: renderer.renderGroup(
           groupProps(
             { type: "Standard" },
             childCount,
             childRenderer,
             childControl!,
+            c.styleClass,
+            style,
           ),
         ),
         label,
         errorControl: childControl,
       };
     }
-    const props = dataProps(
-      c,
-      schemaField,
-      groupContext,
-      childControl!,
-      dataOptions,
-    );
+    const props = dataProps({
+      definition: c,
+      field: schemaField,
+      dataContext,
+      control: childControl!,
+      options: dataOptions,
+      style,
+    });
     const labelText = !c.hideTitle
       ? controlTitle(c.title, schemaField)
       : undefined;
@@ -516,6 +625,8 @@ export function renderControlLayout(
                 !!c.required,
                 childControl!,
                 scalarRenderer(props),
+                c.styleClass,
+                style,
               )
           : undefined,
       ),
@@ -531,14 +642,17 @@ export function renderControlLayout(
   }
 
   function compoundRenderer(i: number, control: Control<any>): ReactNode {
+    const { className, style, children } = renderer.renderLayout({
+      processLayout: renderer.renderGroup({
+        renderOptions: { type: "Standard", hideTitle: true },
+        childCount,
+        renderChild: (ci) => childRenderer(ci, ci, { control }),
+      }),
+    });
     return (
-      <Fragment key={control.uniqueId}>
-        {renderer.renderGroup({
-          renderOptions: { type: "Standard", hideTitle: true },
-          childCount,
-          renderChild: (ci) => childRenderer(ci, ci, { control }),
-        })}
-      </Fragment>
+      <div key={control.uniqueId} style={style} className={cc(className)}>
+        {children}
+      </div>
     );
   }
   function scalarRenderer(
@@ -558,7 +672,7 @@ export function renderControlLayout(
 }
 
 export function appendMarkup(
-  k: keyof Omit<RenderedLayout, "errorControl">,
+  k: keyof Omit<RenderedLayout, "errorControl" | "style" | "className">,
   markup: ReactNode,
 ): (layout: RenderedLayout) => void {
   return (layout) =>
@@ -571,7 +685,7 @@ export function appendMarkup(
 }
 
 export function wrapMarkup(
-  k: keyof Omit<RenderedLayout, "errorControl">,
+  k: keyof Omit<RenderedLayout, "errorControl" | "style" | "className">,
   wrap: (ex: ReactNode) => ReactNode,
 ): (layout: RenderedLayout) => void {
   return (layout) => (layout[k] = wrap(layout[k]));
@@ -579,7 +693,7 @@ export function wrapMarkup(
 
 export function layoutKeyForPlacement(
   pos: AdornmentPlacement,
-): keyof Omit<RenderedLayout, "errorControl"> {
+): keyof Omit<RenderedLayout, "errorControl" | "style" | "className"> {
   switch (pos) {
     case AdornmentPlacement.ControlEnd:
       return "controlEnd";
@@ -610,18 +724,20 @@ export function renderLayoutParts(
   props: ControlLayoutProps,
   renderer: FormRenderer,
 ): RenderedLayout {
-  const processed = props.processLayout?.(props) ?? props;
+  const { className, children, style, errorControl, label, adornments } =
+    props.processLayout?.(props) ?? props;
   const layout: RenderedLayout = {
-    children: processed.children,
-    errorControl: processed.errorControl,
+    children,
+    errorControl,
+    style,
+    className: cc(className),
   };
-  (processed.adornments ?? [])
+  (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)
+    label && !label.hide
+      ? renderer.renderLabel(label, layout.labelStart, layout.labelEnd)
       : undefined;
   return layout;
 }