@react-typed-forms/schemas 16.2.2 → 17.0.0

package/src/controlRender.tsx

@@ -9,29 +9,29 @@ import React, {
 } from "react";
 import {
   addElement,
+  ChangeListenerFunc,
   Control,
+  newControl,
   removeElement,
-  RenderArrayElements,
 } from "@react-typed-forms/core";
 import {
   ActionStyle,
   AdornmentPlacement,
   ArrayActionOptions,
+  CheckEntryClasses,
+  ChildNodeSpec,
   ControlAdornment,
   ControlDefinition,
-  ControlDefinitionType,
-  ControlState,
+  ControlDisableType,
   CustomDisplay,
+  dataControl,
   DataControlDefinition,
   defaultSchemaInterface,
   DisplayData,
   DisplayDataType,
   FieldOption,
-  FormContextOptions,
-  FormNode,
-  FormState,
+  FormStateNode,
   GroupRenderOptions,
-  GroupRenderType,
   isActionControl,
   isDataControl,
   isDisplayControl,
@@ -54,9 +54,10 @@ import {
   getExternalEditData,
   rendererClass,
 } from "./util";
-import { createAction, dataControl } from "./controlBuilder";
+import { createAction } from "./controlBuilder";
 import {
   ActionRendererProps,
+  ControlActionContext,
   ControlActionHandler,
   ControlDataContext,
   RunExpression,
@@ -86,6 +87,7 @@ export interface HtmlDivProperties {
   html?: string;
   nativeRef?: (e: HTMLElement | null) => void;
   inline?: boolean;
+  role?: string;
 }
 
 export interface HtmlInputProperties {
@@ -104,6 +106,8 @@ export interface HtmlInputProperties {
   inputRef?: (e: HTMLElement | null) => void;
   onChangeValue?: (value: string) => void;
   onChangeChecked?: (checked: boolean) => void;
+  "aria-describedby"?: string;
+  "aria-invalid"?: boolean;
 }
 
 export interface HtmlButtonProperties {
@@ -118,7 +122,35 @@ export interface HtmlButtonProperties {
   notWrapInText?: boolean;
   androidRippleColor?: string;
   nonTextContent?: boolean;
+  "aria-expanded"?: boolean;
+  "aria-controls"?: string;
 }
+
+export interface CheckRendererOptions {
+  className?: string;
+  entryClass?: string;
+  checkClass?: string;
+  labelClass?: string;
+  entryWrapperClass?: string;
+  selectedClass?: string;
+  notSelectedClass?: string;
+}
+
+export interface CheckButtonsProps {
+  id?: string;
+  className?: string;
+  options?: FieldOption[] | null;
+  control: Control<any>;
+  classes: CheckRendererOptions;
+  controlClasses?: CheckEntryClasses;
+  readonly?: boolean;
+  type: "checkbox" | "radio";
+  isChecked: (c: Control<any>, o: FieldOption) => boolean;
+  setChecked: (c: Control<any>, o: FieldOption, checked: boolean) => void;
+  entryAdornment?: (c: FieldOption, i: number, selected: boolean) => ReactNode;
+  renderer: FormRenderer;
+}
+
 export interface HtmlComponents {
   Div: ComponentType<HtmlDivProperties>;
   Span: ElementType<HTMLAttributes<HTMLSpanElement>>;
@@ -128,6 +160,7 @@ export interface HtmlComponents {
   B: ElementType<HTMLAttributes<HTMLElement>>;
   H1: ElementType<HTMLAttributes<HTMLElement>>;
   Input: ComponentType<HtmlInputProperties>;
+  CheckButtons: ComponentType<CheckButtonsProps>;
 }
 /**
  * Interface for rendering different types of form controls.
@@ -214,6 +247,8 @@ export interface FormRenderer {
   renderLabelText: (props: ReactNode) => ReactNode;
 
   html: HtmlComponents;
+
+  resolveChildren(c: FormStateNode): ChildNodeSpec[];
 }
 
 export interface AdornmentProps {
@@ -221,7 +256,7 @@ export interface AdornmentProps {
   dataContext: ControlDataContext;
   runExpression?: RunExpression;
   designMode?: boolean;
-  formOptions: FormContextOptions;
+  formNode: FormStateNode;
 }
 
 export const AppendAdornmentPriority = 0;
@@ -240,14 +275,16 @@ export interface ArrayRendererProps {
   editAction?: (elemIndex: number) => ActionRendererProps;
   renderElement: (
     elemIndex: number,
-    wrapEntry: (children: ReactNode) => ReactNode,
+    wrapEntry: (key: Key, children: ReactNode) => ReactNode,
   ) => ReactNode;
-  arrayControl: Control<any[] | undefined | null>;
+  arrayControl?: Control<any[] | undefined | null>;
+  getElementCount(): number;
   className?: string;
   style?: React.CSSProperties;
   min?: number | null;
   max?: number | null;
   disabled?: boolean;
+  childOverrideClass?: string | null;
 }
 export interface Visibility {
   visible: boolean;
@@ -262,6 +299,7 @@ export interface RenderedLayout {
   label?: ReactNode;
   children?: ReactNode;
   errorControl?: Control<any>;
+  errorId?: string;
   className?: string;
   style?: React.CSSProperties;
   wrapLayout: (layout: ReactElement) => ReactElement;
@@ -283,6 +321,7 @@ export interface VisibilityRendererProps extends RenderedControl {
 export interface ControlLayoutProps {
   label?: LabelRendererProps;
   errorControl?: Control<any>;
+  errorId?: string;
   adornments?: AdornmentRenderer[];
   children?: ReactNode;
   processLayout?: (props: ControlLayoutProps) => ControlLayoutProps;
@@ -386,14 +425,12 @@ export interface DisplayRendererProps {
 }
 
 export interface ParentRendererProps {
-  formNode: FormNode;
-  state: ControlState;
+  formNode: FormStateNode;
   renderChild: ChildRenderer;
   className?: string;
   textClass?: string;
   style?: React.CSSProperties;
   dataContext: ControlDataContext;
-  getChildState(node: FormNode, parent?: SchemaDataNode): ControlState;
   runExpression: RunExpression;
   designMode?: boolean;
   actionOnClick?: ControlActionHandler;
@@ -417,6 +454,7 @@ export interface DataRendererProps extends ParentRendererProps {
   dataNode: SchemaDataNode;
   displayOnly: boolean;
   inline: boolean;
+  errorId: string;
 }
 
 export interface ControlRenderProps {
@@ -431,7 +469,6 @@ export type CreateDataProps = (
 ) => DataRendererProps;
 
 export interface ControlRenderOptions extends ControlClasses {
-  formState?: FormState;
   useDataHook?: (c: ControlDefinition) => CreateDataProps;
   actionOnClick?: ControlActionHandler;
   customDisplay?: (
@@ -450,14 +487,13 @@ export interface ControlRenderOptions extends ControlClasses {
   clearHidden?: boolean;
   stateKey?: string;
   schemaInterface?: SchemaInterface;
-  variables?: Record<string, any>;
+  variables?: (changes: ChangeListenerFunc<any>) => Record<string, any>;
 }
 
 export function defaultDataProps(
   {
-    formOptions,
+    formNode,
     style,
-    allowedOptions,
     schemaInterface = defaultSchemaInterface,
     styleClass,
     textClass: tc,
@@ -473,34 +509,22 @@ export function defaultDataProps(
   const className = rendererClass(styleClass, definition.styleClass);
   const textClass = rendererClass(tc, definition.textClass);
   const required = !!definition.required && !displayOnly;
-  const fieldOptions = schemaInterface.getDataOptions(dataNode);
-  const _allowed = allowedOptions ?? [];
-  const allowed = Array.isArray(_allowed) ? _allowed : [_allowed];
+  const id = "c" + control.uniqueId;
   return {
     dataNode,
+    formNode,
     definition,
     control,
     field,
-    id: "c" + control.uniqueId,
+    id,
+    errorId: "err_" + id,
     inline: !!inline,
-    options:
-      allowed.length > 0
-        ? allowed
-            .map((x) =>
-              typeof x === "object"
-                ? x
-                : fieldOptions?.find((y) => y.value == x) ?? {
-                    name: x.toString(),
-                    value: x,
-                  },
-            )
-            .filter((x) => x != null)
-        : fieldOptions,
-    readonly: !!formOptions.readonly,
+    options: formNode.resolved.fieldOptions,
+    readonly: formNode.readonly,
     displayOnly: !!displayOnly,
     renderOptions: definition.renderOptions ?? { type: "Standard" },
     required,
-    hidden: !!formOptions.hidden,
+    hidden: !formNode.visible,
     className,
     textClass,
     style,
@@ -509,7 +533,6 @@ export function defaultDataProps(
 }
 
 export interface ChildRendererOptions {
-  parentDataNode?: SchemaDataNode;
   inline?: boolean;
   displayOnly?: boolean;
   styleClass?: string;
@@ -517,28 +540,21 @@ export interface ChildRendererOptions {
   labelClass?: string;
   labelTextClass?: string;
   actionOnClick?: ControlActionHandler;
-  stateKey?: string;
-  variables?: Record<string, any>;
 }
 
 export type ChildRenderer = (
-  k: Key,
-  child: FormNode,
+  child: FormStateNode,
   options?: ChildRendererOptions,
 ) => ReactNode;
 
 export interface RenderLayoutProps {
-  formNode: FormNode;
+  formNode: FormStateNode;
   renderer: FormRenderer;
-  state: ControlState;
   renderChild: ChildRenderer;
   createDataProps: CreateDataProps;
-  formOptions: FormContextOptions;
   dataContext: ControlDataContext;
   control?: Control<any>;
   style?: React.CSSProperties;
-  allowedOptions?: any[];
-  getChildState(node: FormNode, parent?: SchemaDataNode): ControlState;
   runExpression: RunExpression;
 
   actionOnClick?: ControlActionHandler;
@@ -573,14 +589,11 @@ export function renderControlLayout(
     styleClass,
     textClass,
     formNode,
-    formOptions,
     actionOnClick,
-    state,
-    getChildState,
     inline,
     displayOnly,
   } = props;
-  const c = state.definition;
+  const c = formNode.definition;
   if (isDataControl(c)) {
     return renderData(c);
   }
@@ -598,7 +611,6 @@ export function renderControlLayout(
       inline,
       processLayout: renderer.renderGroup({
         formNode,
-        state,
         definition: c,
         renderChild,
         runExpression,
@@ -609,7 +621,6 @@ export function renderControlLayout(
         style,
         designMode,
         actionOnClick,
-        getChildState,
       }),
       label: {
         label: c.title,
@@ -625,6 +636,7 @@ export function renderControlLayout(
     const actionStyle = c.actionStyle ?? ActionStyle.Button;
     const actionContent =
       actionStyle == ActionStyle.Group ? renderActionGroup() : undefined;
+    const handler = props.actionOnClick?.(c.actionId, actionData, dataContext);
     return {
       inline,
       children: renderer.renderAction({
@@ -637,24 +649,49 @@ export function renderControlLayout(
         iconPlacement: c.iconPlacement,
         icon: c.icon,
         inline,
-        disabled: state.disabled,
-        onClick:
-          props.actionOnClick?.(c.actionId, actionData, dataContext) ??
-          (() => {}),
+        disabled: formNode.disabled,
+        onClick: handler
+          ? () => {
+              let disableType: ControlDisableType =
+                c.disableType ?? ControlDisableType.Self;
+              const actionContext: ControlActionContext = {
+                disableForm(type: ControlDisableType) {
+                  disableType = type;
+                },
+                runAction(
+                  actionId: string,
+                  actionData?: any,
+                ): void | Promise<any> {
+                  const h = props.actionOnClick?.(
+                    actionId,
+                    actionData,
+                    dataContext,
+                  );
+                  if (h) {
+                    h(actionContext);
+                  }
+                  return;
+                },
+              };
+              const r = handler(actionContext);
+              if (r instanceof Promise) {
+                const cleanup = formNode.ui.getDisabler(disableType)();
+                formNode.setBusy(true);
+                r.then(() => {
+                  cleanup();
+                  formNode.setBusy(false);
+                });
+              }
+            }
+          : () => {},
         className: rendererClass(styleClass, c.styleClass),
         style,
+        busy: formNode.busy,
       }),
     };
 
     function renderActionGroup() {
-      const childDefs = formNode.getResolvedChildren();
-      const childDef = {
-        type: ControlDefinitionType.Group,
-        groupOptions: { type: GroupRenderType.Contents, hideTitle: true },
-        children: childDefs,
-      };
-      const childNode: FormNode = formNode.createChildNode("child", childDef);
-      return renderChild("child", childNode, {});
+      return <>{formNode.children.map((x) => renderChild(x))}</>;
     }
   }
   if (isDisplayControl(c)) {
@@ -700,6 +737,7 @@ export function renderControlLayout(
         textClass: rendererClass(labelTextClass, c.labelTextClass),
       },
       errorControl: control,
+      errorId: rendererProps.errorId,
     };
   }
 }
@@ -713,6 +751,7 @@ type MarkupKeys = keyof Omit<
   | "readonly"
   | "disabled"
   | "inline"
+  | "errorId"
 >;
 export function appendMarkup(
   k: MarkupKeys,
@@ -782,6 +821,7 @@ export function renderLayoutParts(
     label,
     adornments,
     inline,
+    errorId,
   } = props.processLayout?.(props) ?? props;
   const layout: RenderedLayout = {
     children,
@@ -789,6 +829,7 @@ export function renderLayoutParts(
     style,
     className: className!,
     inline,
+    errorId,
     wrapLayout: (x) => x,
   };
   (adornments ?? [])
@@ -818,11 +859,16 @@ export function getLengthRestrictions(definition: DataControlDefinition) {
 
 export function createArrayActions(
   control: Control<any[]>,
+  getElementCount: () => number,
   field: SchemaField,
   options?: ArrayActionOptions,
 ): Pick<
   ArrayRendererProps,
-  "addAction" | "removeAction" | "editAction" | "arrayControl"
+  | "addAction"
+  | "removeAction"
+  | "editAction"
+  | "arrayControl"
+  | "getElementCount"
 > {
   const noun = field.displayName ?? field.field;
   const {
@@ -841,6 +887,7 @@ export function createArrayActions(
   } = options ?? {};
   return {
     arrayControl: control,
+    getElementCount,
     addAction:
       !readonly && !noAdd
         ? makeAdd(() => {
@@ -941,7 +988,7 @@ export function createArrayActions(
 
 export function applyArrayLengthRestrictions(
   {
-    arrayControl,
+    getElementCount,
     min,
     max,
     editAction,
@@ -953,7 +1000,7 @@ export function applyArrayLengthRestrictions(
     | "addAction"
     | "removeAction"
     | "editAction"
-    | "arrayControl"
+    | "getElementCount"
     | "min"
     | "max"
     | "required"
@@ -964,7 +1011,7 @@ export function applyArrayLengthRestrictions(
   removeDisabled: boolean;
 } {
   const [removeAllowed, addAllowed] = applyLengthRestrictions(
-    arrayControl.elements?.length ?? 0,
+    getElementCount(),
     min == null && required ? 1 : min,
     max,
     true,
@@ -980,18 +1027,13 @@ export function applyArrayLengthRestrictions(
 }
 
 export function fieldOptionAdornment(p: DataRendererProps) {
-  return (o: FieldOption, fieldIndex: number, selected: boolean) => (
-    <RenderArrayElements
-      array={p.formNode.getChildNodes()}
-      children={(cd, i) =>
-        p.renderChild(i, cd, {
-          parentDataNode: p.dataContext.parentNode,
-          stateKey: fieldIndex.toString(),
-          variables: { formData: { option: o, optionSelected: selected } },
-        })
-      }
-    />
-  );
+  return (o: FieldOption, fieldIndex: number, selected: boolean) => {
+    const fieldChild = p.formNode.children.find(
+      (x) => x.meta["fieldOptionValue"] === o.value,
+    );
+    if (fieldChild) return p.renderChild(fieldChild);
+    return undefined;
+  };
 }
 
 export function lookupChildDataContext(
@@ -1002,3 +1044,7 @@ export function lookupChildDataContext(
   const dataNode = lookupDataNode(c, parentNode);
   return { ...dataContext, parentNode, dataNode };
 }
+
+function getBusyControl(formNode: FormStateNode) {
+  return formNode.ensureMeta("$busy", () => newControl(false));
+}

package/src/createFormRenderer.tsx

@@ -12,7 +12,6 @@ import {
   LabelType,
   VisibilityRendererProps,
 } from "./controlRender";
-import { hasOptions } from "./util";
 import {
   ActionRendererRegistration,
   AdornmentRendererRegistration,
@@ -26,7 +25,15 @@ import {
   RendererRegistration,
   VisibilityRendererRegistration,
 } from "./renderers";
-import { DataRenderType } from "@astroapps/forms-core";
+import {
+  ChildNodeSpec,
+  DataRenderType,
+  defaultResolveChildNodes,
+  FormStateNode,
+  isDataControl,
+  RenderOptions,
+  SchemaDataNode,
+} from "@astroapps/forms-core";
 import { ActionRendererProps } from "./types";
 
 export function createFormRenderer(
@@ -60,6 +67,19 @@ export function createFormRenderer(
     renderVisibility,
     renderLabelText,
     html: defaultRenderers.html,
+    resolveChildren(c: FormStateNode): ChildNodeSpec[] {
+      const def = c.definition;
+      if (isDataControl(def)) {
+        if (!c.dataNode) return [];
+        const matching = matchData(
+          c,
+          def.renderOptions ?? { type: DataRenderType.Standard },
+          c.dataNode!,
+        );
+        if (matching?.resolveChildren) return matching.resolveChildren(c);
+      }
+      return defaultResolveChildNodes(c);
+    },
   };
 
   function renderVisibility(props: VisibilityRendererProps) {
@@ -103,37 +123,33 @@ export function createFormRenderer(
     return renderer.render(props, labelStart, labelEnd, formRenderers);
   }
 
-  function renderData(
-    props: DataRendererProps,
-  ): (layout: ControlLayoutProps) => ControlLayoutProps {
-    const { renderOptions, field } = props;
-
-    const options = hasOptions(props);
+  function matchData(
+    formState: FormStateNode,
+    renderOptions: RenderOptions,
+    dataNode: SchemaDataNode,
+  ): DataRendererRegistration | undefined {
+    const field = dataNode.schema.field;
+    const options = (formState.resolved.fieldOptions?.length ?? 0) > 0;
     const renderType = renderOptions.type;
-    const renderer = dataRegistrations.find(matchesRenderer);
-
-    const result = (renderer ?? defaultRenderers.data).render(
-      props,
-      formRenderers,
-    );
-    if (typeof result === "function") return result;
-    return (l) => ({ ...l, children: result });
+    return dataRegistrations.find(matchesRenderer);
 
     function matchesRenderer(x: DataRendererRegistration) {
-      const noMatch = x.match ? !x.match(props, renderOptions) : undefined;
+      const noMatch = x.match ? !x.match(formState, renderOptions) : undefined;
       if (noMatch === true) return false;
       const matchCollection =
         (x.collection ?? false) ===
-        (props.dataNode.elementIndex == null && (field.collection ?? false));
+        (dataNode.elementIndex == null && (field.collection ?? false));
       const isSchemaAllowed =
         !!x.schemaType && renderType == DataRenderType.Standard
           ? isOneOf(x.schemaType, field.type)
           : undefined;
       const isRendererAllowed =
         !!x.renderType && isOneOf(x.renderType, renderType);
+      const optionsMatch =
+        isRendererAllowed || (x.options ?? false) === options;
       return (
         matchCollection &&
-        (x.options ?? false) === options &&
+        optionsMatch &&
         (isSchemaAllowed ||
           isRendererAllowed ||
           (!x.renderType && !x.schemaType && noMatch === false))
@@ -141,6 +157,23 @@ export function createFormRenderer(
     }
   }
 
+  function renderData(
+    props: DataRendererProps,
+  ): (layout: ControlLayoutProps) => ControlLayoutProps {
+    const renderer = matchData(
+      props.formNode,
+      props.renderOptions,
+      props.dataNode,
+    );
+
+    const result = (renderer ?? defaultRenderers.data).render(
+      props,
+      formRenderers,
+    );
+    if (typeof result === "function") return result;
+    return (l) => ({ ...l, children: result });
+  }
+
   function renderGroup(
     props: GroupRendererProps,
   ): (layout: ControlLayoutProps) => ControlLayoutProps {

package/src/index.ts

@@ -6,3 +6,4 @@ export * from "./renderers";
 export * from "./createFormRenderer";
 export * from "./RenderForm";
 export * from "./types";
+export * from "./renderer/elementSelected";

package/src/renderer/elementSelected.ts

@@ -0,0 +1,48 @@
+import {
+  Control,
+  useComputed,
+  useControl,
+  useControlEffect,
+} from "@react-typed-forms/core";
+import { useEffect } from "react";
+import {
+  ElementSelectedRenderOptions,
+  RenderOptions,
+} from "@astroapps/forms-core";
+import { RunExpression } from "../types";
+import { setIncluded } from "../util";
+
+export function useElementSelectedRenderer({
+  runExpression,
+  renderOptions,
+  control,
+}: {
+  runExpression: RunExpression;
+  renderOptions: RenderOptions;
+  control: Control<any>;
+}) {
+  const elementValue = useControl();
+  useEffect(() => {
+    runExpression(
+      elementValue,
+      (renderOptions as ElementSelectedRenderOptions).elementExpression,
+      (v) => (elementValue.value = v as any),
+    );
+  }, []);
+  const isSelected = useComputed(
+    () =>
+      control.as<any[] | undefined>().value?.includes(elementValue.value) ??
+      false,
+  );
+  const selControl = useControl(() => isSelected.current.value);
+  selControl.value = isSelected.value;
+  useControlEffect(
+    () => selControl.value,
+    (v) => {
+      control
+        .as<any[] | undefined>()
+        .setValue((x) => setIncluded(x ?? [], elementValue.value, v));
+    },
+  );
+  return selControl;
+}