@react-typed-forms/schemas 5.0.3 → 7.0.0

package/src/types.ts

@@ -52,9 +52,19 @@ export type AnyControlDefinition =
   | ActionControlDefinition
   | DisplayControlDefinition;
 
+export interface SchemaInterface {
+  isEmptyValue(field: SchemaField, value: any): boolean;
+  textValue(
+    field: SchemaField,
+    value: any,
+    element?: boolean,
+  ): string | undefined;
+}
 export interface ControlDefinition {
   type: string;
   title?: string | null;
+  styleClass?: string | null;
+  layoutClass?: string | null;
   dynamic?: DynamicProperty[] | null;
   adornments?: ControlAdornment[] | null;
   children?: ControlDefinition[] | null;
@@ -77,6 +87,9 @@ export enum DynamicPropertyType {
   DefaultValue = "DefaultValue",
   Readonly = "Readonly",
   Disabled = "Disabled",
+  Display = "Display",
+  Style = "Style",
+  LayoutStyle = "LayoutStyle",
 }
 
 export interface EntityExpression {
@@ -85,7 +98,8 @@ export interface EntityExpression {
 
 export enum ExpressionType {
   Jsonata = "Jsonata",
-  FieldValue = "FieldValue",
+  Data = "Data",
+  DataMatch = "FieldValue",
   UserMatch = "UserMatch",
 }
 
@@ -94,8 +108,13 @@ export interface JsonataExpression extends EntityExpression {
   expression: string;
 }
 
-export interface FieldValueExpression extends EntityExpression {
-  type: ExpressionType.FieldValue;
+export interface DataExpression extends EntityExpression {
+  type: ExpressionType.Data;
+  field: string;
+}
+
+export interface DataMatchExpression extends EntityExpression {
+  type: ExpressionType.DataMatch;
   field: string;
   value: any;
 }
@@ -120,6 +139,13 @@ export enum ControlAdornmentType {
   Tooltip = "Tooltip",
   Accordion = "Accordion",
   HelpText = "HelpText",
+  Icon = "Icon",
+}
+
+export interface IconAdornment extends ControlAdornment {
+  type: ControlAdornmentType.Icon;
+  iconClass: string;
+  placement?: AdornmentPlacement | null;
 }
 
 export interface TooltipAdornment extends ControlAdornment {
@@ -136,7 +162,7 @@ export interface AccordionAdornment extends ControlAdornment {
 export interface HelpTextAdornment extends ControlAdornment {
   type: ControlAdornmentType.HelpText;
   helpText: string;
-  placement: AdornmentPlacement;
+  placement?: AdornmentPlacement | null;
 }
 
 export interface DataControlDefinition extends ControlDefinition {
@@ -148,6 +174,7 @@ export interface DataControlDefinition extends ControlDefinition {
   readonly?: boolean | null;
   validators?: SchemaValidator[] | null;
   hideTitle?: boolean | null;
+  dontClearHidden?: boolean | null;
 }
 
 export interface RenderOptions {
@@ -166,6 +193,7 @@ export enum DataRenderType {
   DateTime = "DateTime",
   Checkbox = "Checkbox",
   Dropdown = "Dropdown",
+  DisplayOnly = "DisplayOnly",
 }
 
 export interface RadioButtonRenderOptions extends RenderOptions {
@@ -191,6 +219,11 @@ export interface IconListRenderOptions extends RenderOptions {
   iconMappings: IconMapping[];
 }
 
+export interface DisplayOnlyRenderOptions extends RenderOptions {
+  type: DataRenderType.DisplayOnly;
+  emptyText?: string | null;
+  sampleText?: string | null;
+}
 export interface IconMapping {
   value: string;
   materialIcon?: string | null;
@@ -236,6 +269,7 @@ export interface GroupRenderOptions {
 export enum GroupRenderType {
   Standard = "Standard",
   Grid = "Grid",
+  Flex = "Flex",
   GroupElement = "GroupElement",
 }
 
@@ -243,6 +277,12 @@ export interface StandardGroupRenderer extends GroupRenderOptions {
   type: GroupRenderType.Standard;
 }
 
+export interface FlexRenderer extends GroupRenderOptions {
+  type: GroupRenderType.Flex;
+  direction?: string | null;
+  gap?: string | null;
+}
+
 export interface GroupElementRenderer extends GroupRenderOptions {
   type: GroupRenderType.GroupElement;
   value: any;
@@ -265,13 +305,18 @@ export interface DisplayData {
 export enum DisplayDataType {
   Text = "Text",
   Html = "Html",
+  Icon = "Icon",
 }
-
 export interface TextDisplay extends DisplayData {
   type: DisplayDataType.Text;
   text: string;
 }
 
+export interface IconDisplay extends DisplayData {
+  type: DisplayDataType.Icon;
+  iconClass: string;
+}
+
 export interface HtmlDisplay extends DisplayData {
   type: DisplayDataType.Html;
   html: string;
@@ -361,3 +406,15 @@ export function isGridRenderer(
 ): options is GridRenderer {
   return options.type === GroupRenderType.Grid;
 }
+
+export function isFlexRenderer(
+  options: GroupRenderOptions,
+): options is FlexRenderer {
+  return options.type === GroupRenderType.Flex;
+}
+
+export function isDisplayOnlyRenderer(
+  options: RenderOptions,
+): options is DisplayOnlyRenderOptions {
+  return options.type === DataRenderType.DisplayOnly;
+}

package/src/util.ts

@@ -1,27 +1,30 @@
 import {
-  ActionControlDefinition,
   CompoundField,
   ControlDefinition,
   ControlDefinitionType,
   DataControlDefinition,
   DataRenderType,
-  DisplayControlDefinition,
+  DisplayOnlyRenderOptions,
   FieldOption,
   FieldType,
   GridRenderer,
   GroupedControlsDefinition,
   GroupRenderType,
+  isDataControlDefinition,
+  isDisplayOnlyRenderer,
   SchemaField,
+  SchemaInterface,
   visitControlDefinition,
 } from "./types";
 import { MutableRefObject, useRef } from "react";
 import { Control } from "@react-typed-forms/core";
+import clsx from "clsx";
 
-export interface ControlGroupContext {
+export interface ControlDataContext {
   groupControl: Control<any>;
   fields: SchemaField[];
+  schemaInterface: SchemaInterface;
 }
-
 export function applyDefaultValues(
   v: { [k: string]: any } | undefined,
   fields: SchemaField[],
@@ -144,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 {
@@ -168,7 +166,7 @@ export function defaultControlForField(
       renderOptions: {
         type: htmlEditor ? DataRenderType.HtmlEditor : DataRenderType.Standard,
       },
-    } satisfies DataControlDefinition;
+    };
   }
   throw "Unknown schema field";
 }
@@ -238,8 +236,18 @@ export function isControlReadonly(c: ControlDefinition): boolean {
   return isDataControl(c) && !!c.readonly;
 }
 
+export function getDisplayOnlyOptions(
+  d: ControlDefinition,
+): DisplayOnlyRenderOptions | undefined {
+  return isDataControlDefinition(d) &&
+    d.renderOptions &&
+    isDisplayOnlyRenderer(d.renderOptions)
+    ? d.renderOptions
+    : undefined;
+}
+
 export function getTypeField(
-  context: ControlGroupContext,
+  context: ControlDataContext,
 ): Control<string> | undefined {
   const typeSchemaField = context.fields.find((x) => x.isTypeField);
   return typeSchemaField
@@ -249,7 +257,7 @@ export function getTypeField(
 
 export function visitControlDataArray<A>(
   controls: ControlDefinition[] | undefined | null,
-  context: ControlGroupContext,
+  context: ControlDataContext,
   cb: (
     definition: DataControlDefinition,
     field: SchemaField,
@@ -267,7 +275,7 @@ export function visitControlDataArray<A>(
 
 export function visitControlData<A>(
   definition: ControlDefinition,
-  ctx: ControlGroupContext,
+  ctx: ControlDataContext,
   cb: (
     definition: DataControlDefinition,
     field: SchemaField,
@@ -309,7 +317,11 @@ export function visitControlData<A>(
         if (isCompoundField(fieldData)) {
           const cfResult = visitControlDataArray(
             children,
-            { fields: fieldData.children, groupControl: c },
+            {
+              fields: fieldData.children,
+              groupControl: c,
+              schemaInterface: ctx.schemaInterface,
+            },
             cb,
           );
           if (cfResult !== undefined) return cfResult;
@@ -362,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];
+}

package/src/validators.ts

@@ -14,7 +14,7 @@ import {
   useValueChangeEffect,
 } from "@react-typed-forms/core";
 import { useCallback } from "react";
-import { ControlGroupContext, useUpdatedRef } from "./util";
+import { ControlDataContext, useUpdatedRef } from "./util";
 import { useJsonataExpression } from "./hooks";
 
 export function useValidationHook(
@@ -22,7 +22,7 @@ export function useValidationHook(
 ): (
   control: Control<any>,
   hidden: boolean,
-  groupContext: ControlGroupContext,
+  groupContext: ControlDataContext,
 ) => void {
   const validatorTypes = isDataControlDefinition(definition)
     ? definition.validators?.map((x) => x.type) ?? []
@@ -65,7 +65,7 @@ export function useValidationHook(
 
 function useJsonataValidator(
   control: Control<any>,
-  context: ControlGroupContext,
+  context: ControlDataContext,
   expr: JsonataValidator,
   hidden: boolean,
   i: number,