@react-typed-forms/schemas 6.0.0 → 7.0.0

package/lib/renderers.d.ts

@@ -25,7 +25,7 @@ export interface DataRendererRegistration {
     options?: boolean;
     collection?: boolean;
     match?: (props: DataRendererProps) => boolean;
-    render: (props: DataRendererProps, asArray: (() => ReactNode) | undefined, renderers: FormRenderer) => ReactNode | ((layout: ControlLayoutProps) => ControlLayoutProps);
+    render: (props: DataRendererProps, renderers: FormRenderer) => ReactNode | ((layout: ControlLayoutProps) => ControlLayoutProps);
 }
 export interface LabelRendererRegistration {
     type: "label";

package/lib/types.d.ts

@@ -143,6 +143,7 @@ export interface DataControlDefinition extends ControlDefinition {
     readonly?: boolean | null;
     validators?: SchemaValidator[] | null;
     hideTitle?: boolean | null;
+    dontClearHidden?: boolean | null;
 }
 export interface RenderOptions {
     type: string;

package/lib/util.d.ts

@@ -25,7 +25,7 @@ export declare function fieldDisplayName(field: SchemaField): string;
 export declare function hasOptions(o: {
     options: FieldOption[] | undefined | null;
 }): boolean;
-export declare function defaultControlForField(sf: SchemaField): DataControlDefinition | GroupedControlsDefinition;
+export declare function defaultControlForField(sf: SchemaField): DataControlDefinition;
 export declare function addMissingControls(fields: SchemaField[], controls: ControlDefinition[]): ControlDefinition[];
 export declare function useUpdatedRef<A>(a: A): MutableRefObject<A>;
 export declare function isControlReadonly(c: ControlDefinition): boolean;
@@ -36,3 +36,4 @@ export declare function visitControlData<A>(definition: ControlDefinition, ctx:
 export declare function cleanDataForSchema(v: {
     [k: string]: any;
 } | undefined, fields: SchemaField[]): any;
+export declare function getAllReferencedClasses(c: ControlDefinition): string[];

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@react-typed-forms/schemas",
-	"version": "6.0.0",
+	"version": "7.0.0",
 	"description": "",
 	"main": "lib/index.js",
 	"types": "lib/index.d.ts",

package/src/controlRender.tsx

@@ -1,4 +1,5 @@
 import React, {
+  CSSProperties,
   FC,
   Fragment,
   Key,
@@ -58,7 +59,6 @@ import { defaultSchemaInterface } from "./schemaInterface";
 export interface FormRenderer {
   renderData: (
     props: DataRendererProps,
-    asArray: (() => ReactNode) | undefined,
   ) => (layout: ControlLayoutProps) => ControlLayoutProps;
   renderGroup: (
     props: GroupRendererProps,
@@ -92,10 +92,10 @@ export interface AdornmentRenderer {
 export interface ArrayRendererProps {
   addAction?: ActionRendererProps;
   required: boolean;
-  removeAction?: (childIndex: number) => ActionRendererProps;
-  childCount: number;
-  renderChild: (childIndex: number) => ReactNode;
-  childKey: (childIndex: number) => Key;
+  removeAction?: (elemIndex: number) => ActionRendererProps;
+  elementCount: number;
+  renderElement: (elemIndex: number) => ReactNode;
+  elementKey: (elemIndex: number) => Key;
   arrayControl?: Control<any[] | undefined | null>;
   className?: string;
   style?: React.CSSProperties;
@@ -176,6 +176,9 @@ export interface DataRendererProps {
   className?: string;
   style?: React.CSSProperties;
   dataContext: ControlDataContext;
+  childCount: number;
+  renderChild: ChildRenderer;
+  toArrayProps?: () => ArrayRendererProps;
 }
 
 export interface ActionRendererProps {
@@ -203,6 +206,9 @@ export interface DataControlProps {
   control: Control<any>;
   options: FormContextOptions;
   style: React.CSSProperties | undefined;
+  childCount: number;
+  renderChild: ChildRenderer;
+  elementRenderer?: (elemProps: Control<any>) => ReactNode;
 }
 export type CreateDataProps = (
   controlProps: DataControlProps,
@@ -294,14 +300,15 @@ export function useControlRenderer(
             defaultValueControl.value,
             control,
             parentControl.isNull,
+            isDataControlDefinition(definition) && definition.dontClearHidden,
           ],
-          ([vc, dv, cd, pn]) => {
+          ([vc, dv, cd, pn, dontClear]) => {
             if (pn) {
               parentControl.value = {};
             }
             if (vc && cd && vc.visible === vc.showing) {
               if (!vc.visible) {
-                if (options.clearHidden) cd.value = undefined;
+                if (options.clearHidden && !dontClear) cd.value = undefined;
               } else if (cd.value == null) {
                 cd.value = dv;
               }
@@ -383,8 +390,8 @@ 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(
@@ -406,37 +413,6 @@ export function getControlData(
   ];
 }
 
-function renderArray(
-  renderer: FormRenderer,
-  noun: string,
-  field: SchemaField,
-  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({
-    arrayControl,
-    childCount: elems.length,
-    required,
-    addAction: {
-      actionId: "add",
-      actionText: "Add " + noun,
-      onClick: () => addElement(arrayControl, elementValueForField(field)),
-    },
-    childKey: (i) => elems[i].uniqueId,
-    removeAction: (i: number) => ({
-      actionId: "",
-      actionText: "Remove",
-      onClick: () => removeElement(arrayControl, i),
-    }),
-    renderChild: (i) => renderChild(i, elems[i]),
-    className: cc(className),
-    style,
-  });
-}
 function groupProps(
   renderOptions: GroupRenderOptions = { type: "Standard" },
   childCount: number,
@@ -457,11 +433,14 @@ function groupProps(
 export function defaultDataProps({
   definition,
   field,
-  dataContext,
   control,
   options,
+  elementRenderer,
   style,
+  ...props
 }: DataControlProps): DataRendererProps {
+  const className = cc(definition.styleClass);
+  const required = !!definition.required;
   return {
     control,
     field,
@@ -469,11 +448,53 @@ export function defaultDataProps({
     options: (field.options?.length ?? 0) === 0 ? null : field.options,
     readonly: !!options.readonly,
     renderOptions: definition.renderOptions ?? { type: "Standard" },
-    required: !!definition.required,
+    required,
     hidden: !!options.hidden,
-    className: cc(definition.styleClass),
+    className,
+    style,
+    ...props,
+    toArrayProps: elementRenderer
+      ? () =>
+          defaultArrayProps(
+            control,
+            field,
+            required,
+            style,
+            className,
+            elementRenderer,
+          )
+      : undefined,
+  };
+}
+
+export function defaultArrayProps(
+  arrayControl: Control<any[] | undefined | null>,
+  field: SchemaField,
+  required: boolean,
+  style: CSSProperties | undefined,
+  className: string | undefined,
+  renderElement: (elemProps: Control<any>) => ReactNode,
+): ArrayRendererProps {
+  const noun = field.displayName ?? field.field;
+  const elems = arrayControl.elements ?? [];
+  return {
+    arrayControl,
+    elementCount: elems.length,
+    required,
+    addAction: {
+      actionId: "add",
+      actionText: "Add " + noun,
+      onClick: () => addElement(arrayControl, elementValueForField(field)),
+    },
+    elementKey: (i) => elems[i].uniqueId,
+    removeAction: (i: number) => ({
+      actionId: "",
+      actionText: "Remove",
+      onClick: () => removeElement(arrayControl, i),
+    }),
+    renderElement: (i) => renderElement(elems[i]),
+    className: cc(className),
     style,
-    dataContext,
   };
 }
 
@@ -562,74 +583,29 @@ export function renderControlLayout({
   }
   return {};
 
-  function renderData(c: DataControlDefinition) {
+  function renderData(c: DataControlDefinition, elementControl?: Control<any>) {
     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,
-            c.styleClass,
-            style,
-          ),
-          errorControl: childControl,
-        };
-      }
-      return {
-        processLayout: renderer.renderGroup(
-          groupProps(
-            { type: "Standard" },
-            childCount,
-            childRenderer,
-            childControl!,
-            c.styleClass,
-            style,
-          ),
-        ),
-        label,
-        errorControl: childControl,
-      };
-    }
     const props = dataProps({
       definition: c,
       field: schemaField,
       dataContext,
-      control: childControl!,
+      control: elementControl ?? childControl!,
       options: dataOptions,
       style,
+      childCount,
+      renderChild: childRenderer,
+      elementRenderer:
+        elementControl == null && schemaField.collection
+          ? (element) =>
+              renderLayoutParts(renderData(c, element), renderer).children
+          : undefined,
     });
+
     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),
-                c.styleClass,
-                style,
-              )
-          : undefined,
-      ),
+      processLayout: renderer.renderData(props),
       label: {
         type: LabelType.Control,
         label: labelText,
@@ -661,10 +637,7 @@ export function renderControlLayout({
     return (i, control) => {
       return (
         <Fragment key={control.uniqueId}>
-          {
-            renderer.renderData({ ...dataProps, control }, undefined)({})
-              .children
-          }
+          {renderer.renderData({ ...dataProps, control })({}).children}
         </Fragment>
       );
     };

package/src/renderers.tsx

@@ -78,7 +78,6 @@ export interface DataRendererRegistration {
   match?: (props: DataRendererProps) => boolean;
   render: (
     props: DataRendererProps,
-    asArray: (() => ReactNode) | undefined,
     renderers: FormRenderer,
   ) => ReactNode | ((layout: ControlLayoutProps) => ControlLayoutProps);
 }
@@ -210,7 +209,6 @@ export function createFormRenderer(
 
   function renderData(
     props: DataRendererProps,
-    asArray: (() => ReactNode) | undefined,
   ): (layout: ControlLayoutProps) => ControlLayoutProps {
     const {
       renderOptions: { type: renderType },
@@ -228,7 +226,7 @@ export function createFormRenderer(
           (!x.match || x.match(props)),
       ) ?? defaultRenderers.data;
 
-    const result = renderer.render(props, asArray, formRenderers);
+    const result = renderer.render(props, formRenderers);
     if (typeof result === "function") return result;
     return (l) => ({ ...l, children: result });
   }
@@ -332,32 +330,32 @@ export function createDefaultArrayRenderer(
   } = options ?? {};
   function render(
     {
-      childCount,
-      renderChild,
+      elementCount,
+      renderElement,
       addAction,
       removeAction,
-      childKey,
+      elementKey,
       required,
     }: ArrayRendererProps,
     { renderAction }: FormRenderer,
   ) {
-    const showRemove = !required || childCount > 1;
+    const showRemove = !required || elementCount > 1;
     return (
       <div>
         <div className={clsx(className, removeAction && removableClass)}>
-          {Array.from({ length: childCount }, (_, x) =>
+          {Array.from({ length: elementCount }, (_, x) =>
             removeAction ? (
-              <Fragment key={childKey(x)}>
+              <Fragment key={elementKey(x)}>
                 <div className={clsx(childClass, removableChildClass)}>
-                  {renderChild(x)}
+                  {renderElement(x)}
                 </div>
                 <div className={removeActionClass}>
                   {showRemove && renderAction(removeAction(x))}
                 </div>
               </Fragment>
             ) : (
-              <div key={childKey(x)} className={childClass}>
-                {renderChild(x)}
+              <div key={elementKey(x)} className={childClass}>
+                {renderElement(x)}
               </div>
             ),
           )}
@@ -430,8 +428,8 @@ export function createDefaultGroupRenderer(
     const { style, className: gcn } = isGridRenderer(renderOptions)
       ? gridStyles(renderOptions)
       : isFlexRenderer(renderOptions)
-        ? flexStyles(renderOptions)
-        : ({ className: standardClassName } as StyleProps);
+      ? flexStyles(renderOptions)
+      : ({ className: standardClassName } as StyleProps);
 
     return (cp: ControlLayoutProps) => {
       return {
@@ -520,13 +518,25 @@ export function createDefaultDataRenderer(
     booleanOptions: DefaultBoolOptions,
     ...options,
   };
-  return createDataRenderer((props, asArray, renderers) => {
-    if (asArray) {
-      return asArray();
+  return createDataRenderer((props, renderers) => {
+    const fieldType = props.field.type;
+    if (props.toArrayProps) {
+      return (p) => ({
+        ...p,
+        children: renderers.renderArray(props.toArrayProps!()),
+      });
+    }
+    if (fieldType === FieldType.Compound) {
+      return renderers.renderGroup({
+        style: props.style,
+        className: props.className,
+        renderOptions: { type: "Standard", hideTitle: true },
+        renderChild: (i) => props.renderChild(i, i, { control: props.control }),
+        childCount: props.childCount,
+      });
     }
     const renderOptions = props.renderOptions;
     let renderType = renderOptions.type;
-    const fieldType = props.field.type;
     if (fieldType == FieldType.Any) return <>No control for Any</>;
     if (isDisplayOnlyRenderer(renderOptions))
       return (p) => ({
@@ -545,17 +555,14 @@ export function createDefaultDataRenderer(
       });
     const isBool = fieldType === FieldType.Bool;
     if (booleanOptions != null && isBool && props.options == null) {
-      return renderers.renderData(
-        { ...props, options: booleanOptions },
-        undefined,
-      );
+      return renderers.renderData({ ...props, options: booleanOptions });
     }
     if (renderType === DataRenderType.Standard && hasOptions(props)) {
-      return optionRenderer.render(props, undefined, renderers);
+      return optionRenderer.render(props, renderers);
     }
     switch (renderType) {
       case DataRenderType.Dropdown:
-        return selectRenderer.render(props, undefined, renderers);
+        return selectRenderer.render(props, renderers);
     }
     return renderType === DataRenderType.Checkbox ? (
       <Fcheckbox

package/src/types.ts

@@ -174,6 +174,7 @@ export interface DataControlDefinition extends ControlDefinition {
   readonly?: boolean | null;
   validators?: SchemaValidator[] | null;
   hideTitle?: boolean | null;
+  dontClearHidden?: boolean | null;
 }
 
 export interface RenderOptions {

package/src/util.ts

@@ -18,6 +18,7 @@ import {
 } from "./types";
 import { MutableRefObject, useRef } from "react";
 import { Control } from "@react-typed-forms/core";
+import clsx from "clsx";
 
 export interface ControlDataContext {
   groupControl: Control<any>;
@@ -146,20 +147,15 @@ export function hasOptions(o: { options: FieldOption[] | undefined | null }) {
   return (o.options?.length ?? 0) > 0;
 }
 
-export function defaultControlForField(
-  sf: SchemaField,
-): DataControlDefinition | GroupedControlsDefinition {
+export function defaultControlForField(sf: SchemaField): DataControlDefinition {
   if (isCompoundField(sf)) {
     return {
-      type: ControlDefinitionType.Group,
+      type: ControlDefinitionType.Data,
       title: sf.displayName,
-      compoundField: sf.field,
-      groupOptions: {
-        type: GroupRenderType.Grid,
-        hideTitle: false,
-      } as GridRenderer,
+      field: sf.field,
+      required: sf.required,
       children: sf.children.map(defaultControlForField),
-    } satisfies GroupedControlsDefinition;
+    };
   } else if (isScalarField(sf)) {
     const htmlEditor = sf.tags?.includes("_HtmlEditor");
     return {
@@ -170,7 +166,7 @@ export function defaultControlForField(
       renderOptions: {
         type: htmlEditor ? DataRenderType.HtmlEditor : DataRenderType.Standard,
       },
-    } satisfies DataControlDefinition;
+    };
   }
   throw "Unknown schema field";
 }
@@ -378,3 +374,12 @@ export function cleanDataForSchema(
   });
   return out;
 }
+
+export function getAllReferencedClasses(c: ControlDefinition): string[] {
+  const childClasses = c.children?.flatMap(getAllReferencedClasses);
+  const tc = clsx(c.styleClass, c.layoutClass);
+  if (childClasses && !tc) return childClasses;
+  if (!tc) return [];
+  if (childClasses) return [tc, ...childClasses];
+  return [tc];
+}