@react-typed-forms/schemas 5.0.3 → 7.0.0

package/src/renderers.tsx

@@ -3,7 +3,6 @@ import React, {
   Fragment,
   ReactElement,
   ReactNode,
-  useCallback,
   useEffect,
   useMemo,
   useState,
@@ -14,6 +13,7 @@ import {
   ActionRendererProps,
   AdornmentProps,
   AdornmentRenderer,
+  appendMarkupAt,
   ArrayRendererProps,
   ControlLayoutProps,
   DataRendererProps,
@@ -22,18 +22,29 @@ import {
   GroupRendererProps,
   LabelRendererProps,
   LabelType,
+  RenderedControl,
   RenderedLayout,
   renderLayoutParts,
-  Visibility,
+  VisibilityRendererProps,
 } from "./controlRender";
 import {
+  AdornmentPlacement,
+  ControlAdornment,
+  ControlAdornmentType,
   DataRenderType,
   DisplayDataType,
   FieldOption,
   FieldType,
+  FlexRenderer,
   GridRenderer,
   HtmlDisplay,
+  IconAdornment,
+  IconDisplay,
+  isDisplayOnlyRenderer,
+  isFlexRenderer,
   isGridRenderer,
+  SchemaField,
+  SchemaInterface,
   TextDisplay,
 } from "./types";
 import { hasOptions } from "./util";
@@ -53,7 +64,10 @@ export interface DefaultRenderers {
 export interface LayoutRendererRegistration {
   type: "layout";
   match?: (props: ControlLayoutProps) => boolean;
-  render: (props: ControlLayoutProps, renderers: FormRenderer) => ReactNode;
+  render: (
+    props: ControlLayoutProps,
+    renderers: FormRenderer,
+  ) => RenderedControl;
 }
 export interface DataRendererRegistration {
   type: "data";
@@ -64,7 +78,6 @@ export interface DataRendererRegistration {
   match?: (props: DataRendererProps) => boolean;
   render: (
     props: DataRendererProps,
-    asArray: (() => ReactNode) | undefined,
     renderers: FormRenderer,
   ) => ReactNode | ((layout: ControlLayoutProps) => ControlLayoutProps);
 }
@@ -94,7 +107,10 @@ export interface ArrayRendererRegistration {
 export interface GroupRendererRegistration {
   type: "group";
   renderType?: string | string[];
-  render: (props: GroupRendererProps, renderers: FormRenderer) => ReactElement;
+  render: (
+    props: GroupRendererProps,
+    renderers: FormRenderer,
+  ) => ReactElement | ((layout: ControlLayoutProps) => ControlLayoutProps);
 }
 
 export interface DisplayRendererRegistration {
@@ -114,10 +130,7 @@ export interface AdornmentRendererRegistration {
 
 export interface VisibilityRendererRegistration {
   type: "visibility";
-  render: (
-    visibility: Control<Visibility | undefined>,
-    children: () => ReactNode,
-  ) => ReactNode;
+  render: (props: VisibilityRendererProps) => ReactNode;
 }
 
 export type RendererRegistration =
@@ -196,7 +209,6 @@ export function createFormRenderer(
 
   function renderData(
     props: DataRendererProps,
-    asArray: (() => ReactNode) | undefined,
   ): (layout: ControlLayoutProps) => ControlLayoutProps {
     const {
       renderOptions: { type: renderType },
@@ -214,17 +226,21 @@ 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 });
   }
 
-  function renderGroup(props: GroupRendererProps): ReactNode {
+  function renderGroup(
+    props: GroupRendererProps,
+  ): (layout: ControlLayoutProps) => ControlLayoutProps {
     const renderType = props.renderOptions.type;
     const renderer =
       groupRegistrations.find((x) => isOneOf(x.renderType, renderType)) ??
       defaultRenderers.group;
-    return renderer.render(props, formRenderers);
+    const result = renderer.render(props, formRenderers);
+    if (typeof result === "function") return result;
+    return (l) => ({ ...l, children: result });
   }
 
   function renderAction(props: ActionRendererProps) {
@@ -314,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>
             ),
           )}
@@ -364,6 +380,8 @@ interface DefaultGroupRendererOptions {
   gridStyles?: (columns: GridRenderer) => StyleProps;
   gridClassName?: string;
   defaultGridColumns?: number;
+  flexClassName?: string;
+  defaultFlexGap?: string;
 }
 
 export function createDefaultGroupRenderer(
@@ -375,6 +393,8 @@ export function createDefaultGroupRenderer(
     defaultGridColumns = 2,
     gridClassName,
     standardClassName,
+    flexClassName,
+    defaultFlexGap,
   } = options ?? {};
 
   function defaultGridStyles({
@@ -389,17 +409,38 @@ export function createDefaultGroupRenderer(
     };
   }
 
+  function flexStyles(options: FlexRenderer): StyleProps {
+    return {
+      className: flexClassName,
+      style: {
+        display: "flex",
+        gap: options.gap ? options.gap : defaultFlexGap,
+        flexDirection: options.direction
+          ? (options.direction as any)
+          : undefined,
+      },
+    };
+  }
+
   function render(props: GroupRendererProps) {
     const { childCount, renderChild, renderOptions } = props;
 
     const { style, className: gcn } = isGridRenderer(renderOptions)
       ? gridStyles(renderOptions)
+      : isFlexRenderer(renderOptions)
+      ? flexStyles(renderOptions)
       : ({ className: standardClassName } as StyleProps);
-    return (
-      <div className={clsx(className, gcn)} style={style}>
-        {Array.from({ length: childCount }, (_, x) => renderChild(x))}
-      </div>
-    );
+
+    return (cp: ControlLayoutProps) => {
+      return {
+        ...cp,
+        children: (
+          <div className={clsx(props.className, className, gcn)} style={style}>
+            {Array.from({ length: childCount }, (_, x) => renderChild(x))}
+          </div>
+        ),
+      };
+    };
   }
   return { type: "group", render };
 }
@@ -412,37 +453,57 @@ export function createDefaultDisplayRenderer(
   options: DefaultDisplayRendererOptions = {},
 ): DisplayRendererRegistration {
   return {
-    render: ({ data }) => {
-      switch (data.type) {
-        case DisplayDataType.Text:
-          return (
-            <div className={options.textClassName}>
-              {(data as TextDisplay).text}
-            </div>
-          );
-        case DisplayDataType.Html:
-          return (
-            <div
-              className={options.htmlClassName}
-              dangerouslySetInnerHTML={{
-                __html: (data as HtmlDisplay).html,
-              }}
-            />
-          );
-        default:
-          return <h1>Unknown display type: {data.type}</h1>;
-      }
-    },
+    render: (props) => <DefaultDisplay {...options} {...props} />,
     type: "display",
   };
 }
 
+export function DefaultDisplay({
+  data,
+  display,
+  className,
+  style,
+  ...options
+}: DefaultDisplayRendererOptions & DisplayRendererProps) {
+  switch (data.type) {
+    case DisplayDataType.Icon:
+      return (
+        <i
+          style={style}
+          className={clsx(
+            className,
+            display ? display.value : (data as IconDisplay).iconClass,
+          )}
+        />
+      );
+    case DisplayDataType.Text:
+      return (
+        <div style={style} className={clsx(className, options.textClassName)}>
+          {display ? display.value : (data as TextDisplay).text}
+        </div>
+      );
+    case DisplayDataType.Html:
+      return (
+        <div
+          style={style}
+          className={clsx(className, options.htmlClassName)}
+          dangerouslySetInnerHTML={{
+            __html: display ? display.value ?? "" : (data as HtmlDisplay).html,
+          }}
+        />
+      );
+    default:
+      return <h1>Unknown display type: {data.type}</h1>;
+  }
+}
+
 export const DefaultBoolOptions: FieldOption[] = [
   { name: "Yes", value: true },
   { name: "No", value: false },
 ];
 interface DefaultDataRendererOptions {
   inputClass?: string;
+  displayOnlyClass?: string;
   selectOptions?: SelectRendererOptions;
   booleanOptions?: FieldOption[];
   optionRenderer?: DataRendererRegistration;
@@ -452,37 +513,67 @@ export function createDefaultDataRenderer(
   options: DefaultDataRendererOptions = {},
 ): DataRendererRegistration {
   const selectRenderer = createSelectRenderer(options.selectOptions ?? {});
-  const { inputClass, booleanOptions, optionRenderer } = {
+  const { inputClass, booleanOptions, optionRenderer, displayOnlyClass } = {
     optionRenderer: selectRenderer,
     booleanOptions: DefaultBoolOptions,
     ...options,
   };
-  return createDataRenderer((props, asArray, renderers) => {
-    if (asArray) {
-      return asArray();
-    }
-    let renderType = props.renderOptions.type;
+  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;
     if (fieldType == FieldType.Any) return <>No control for Any</>;
+    if (isDisplayOnlyRenderer(renderOptions))
+      return (p) => ({
+        ...p,
+        className: displayOnlyClass,
+        children: (
+          <DefaultDisplayOnly
+            field={props.field}
+            schemaInterface={props.dataContext.schemaInterface}
+            control={props.control}
+            className={props.className}
+            style={props.style}
+            emptyText={renderOptions.emptyText}
+          />
+        ),
+      });
     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 control={props.control} />
+      <Fcheckbox
+        style={props.style}
+        className={props.className}
+        control={props.control}
+      />
     ) : (
       <ControlInput
-        className={inputClass}
+        className={clsx(props.className, inputClass)}
+        style={props.style}
         id={props.id}
         readOnly={props.readonly}
         control={props.control}
@@ -492,6 +583,33 @@ export function createDefaultDataRenderer(
   });
 }
 
+export function DefaultDisplayOnly({
+  control,
+  className,
+  emptyText,
+  schemaInterface,
+  field,
+  style,
+}: {
+  control: Control<any>;
+  field: SchemaField;
+  schemaInterface: SchemaInterface;
+  className?: string;
+  style?: React.CSSProperties;
+  emptyText?: string | null;
+}) {
+  const v = control.value;
+  const text =
+    (schemaInterface.isEmptyValue(field, v)
+      ? emptyText
+      : schemaInterface.textValue(field, v)) ?? "";
+  return (
+    <div style={style} className={className}>
+      {text}
+    </div>
+  );
+}
+
 export function ControlInput({
   control,
   convert,
@@ -522,7 +640,18 @@ export function createDefaultAdornmentRenderer(
 ): AdornmentRendererRegistration {
   return {
     type: "adornment",
-    render: ({ adornment }) => ({ apply: () => {}, priority: 0, adornment }),
+    render: ({ adornment }) => ({
+      apply: (rl) => {
+        if (isIconAdornment(adornment)) {
+          return appendMarkupAt(
+            adornment.placement ?? AdornmentPlacement.ControlStart,
+            <i className={adornment.iconClass} />,
+          )(rl);
+        }
+      },
+      priority: 0,
+      adornment,
+    }),
   };
 }
 
@@ -562,12 +691,19 @@ function createDefaultLayoutRenderer(
   options: DefaultLayoutRendererOptions = {},
 ) {
   return createLayoutRenderer((props, renderers) => {
-    return (
-      <DefaultLayout
-        layout={renderLayoutParts(props, renderers)}
-        {...options}
-      />
+    const layout = renderLayoutParts(
+      { ...props, className: clsx(props.className, options.className) },
+      renderers,
     );
+    return {
+      children: <DefaultLayout layout={layout} {...options} />,
+      className: layout.className,
+      style: layout.style,
+      divRef: (e) =>
+        e && props.errorControl
+          ? (props.errorControl.meta.scrollElement = e)
+          : undefined,
+    };
   });
 }
 
@@ -639,6 +775,10 @@ function isOneOf<A>(x: A | A[] | undefined, v: A) {
   return x == null ? true : Array.isArray(x) ? x.includes(v) : v === x;
 }
 
+export function isIconAdornment(a: ControlAdornment): a is IconAdornment {
+  return a.type === ControlAdornmentType.Icon;
+}
+
 export function createLayoutRenderer(
   render: LayoutRendererRegistration["render"],
   options?: Partial<LayoutRendererRegistration>,
@@ -691,7 +831,7 @@ export function createSelectRenderer(options: SelectRendererOptions = {}) {
   return createDataRenderer(
     (props, asArray) => (
       <SelectDataRenderer
-        className={options.className}
+        className={clsx(props.className, options.className)}
         state={props.control}
         id={props.id}
         options={props.options!}
@@ -795,49 +935,47 @@ export function createInputConversion(ft: string): InputConversion {
 }
 
 export function createDefaultVisibilityRenderer() {
-  return createVisibilityRenderer((cv, ch) => (
-    <DefaultVisibility visibility={cv} children={ch} />
-  ));
+  return createVisibilityRenderer((props) => <DefaultVisibility {...props} />);
 }
 
 export function DefaultVisibility({
   visibility,
   children,
-}: {
-  visibility: Control<Visibility | undefined>;
-  children: () => ReactNode;
-}) {
+  className,
+  style,
+  divRef,
+}: VisibilityRendererProps) {
   const v = visibility.value;
   useEffect(() => {
     if (v) {
       visibility.setValue((ex) => ({ visible: v.visible, showing: v.visible }));
     }
   }, [v?.visible]);
-  return v?.visible ? children() : <></>;
+  return v?.visible ? (
+    <div className={clsx(className)} style={style} ref={divRef}>
+      {children}
+    </div>
+  ) : (
+    <></>
+  );
 }
 
 export function DefaultLayout({
-  className,
   errorClass,
+  className,
   layout: { controlEnd, controlStart, label, children, errorControl },
 }: DefaultLayoutRendererOptions & {
   layout: RenderedLayout;
 }) {
   const ec = errorControl;
   const errorText = ec && ec.touched ? ec.error : undefined;
-  const refCb = useCallback(
-    (e: HTMLDivElement | null) => {
-      if (ec) ec.meta.scrollElement = e;
-    },
-    [ec],
-  );
   return (
-    <div className={className} ref={refCb}>
+    <>
       {label}
       {controlStart}
       {children}
       {errorText && <div className={errorClass}>{errorText}</div>}
       {controlEnd}
-    </div>
+    </>
   );
 }

package/src/schemaInterface.ts

@@ -0,0 +1,31 @@
+import { FieldType, SchemaField, SchemaInterface } from "./types";
+
+export const defaultSchemaInterface: SchemaInterface = {
+  isEmptyValue: defaultIsEmpty,
+  textValue: defaultTextValue,
+};
+
+export function defaultIsEmpty(f: SchemaField, value: any): boolean {
+  if (f.collection)
+    return Array.isArray(value) ? value.length === 0 : value == null;
+  switch (f.type) {
+    case FieldType.String:
+      return !value;
+    default:
+      return value == null;
+  }
+}
+
+export function defaultTextValue(
+  f: SchemaField,
+  value: any,
+): string | undefined {
+  switch (f.type) {
+    case FieldType.DateTime:
+      return new Date(value).toLocaleDateString();
+    case FieldType.Date:
+      return new Date(value).toLocaleDateString();
+    default:
+      return value != null ? value.toString() : undefined;
+  }
+}

package/src/tailwind.tsx

@@ -12,8 +12,9 @@ export const defaultTailwindTheme: DefaultRendererOptions = {
     addActionClass: "my-2",
   },
   group: {
-    standardClassName: "space-y-4",
+    standardClassName: "flex flex-col gap-4",
     gridClassName: "gap-x-2 gap-y-4",
+    flexClassName: "gap-2",
   },
   action: {
     className: "bg-primary rounded-lg p-3 text-white",
@@ -22,4 +23,7 @@ export const defaultTailwindTheme: DefaultRendererOptions = {
     className: "flex flex-col",
     errorClass: "text-sm text-danger-500",
   },
+  data: {
+    displayOnlyClass: "flex flex-row items-center gap-2",
+  },
 };