@react-typed-forms/schemas 3.0.0-dev.73 → 3.0.0-dev.75

package/.rush/temp/package-deps_build.json

@@ -1,8 +1,8 @@
 {
   "files": {
     "packages/schemas/.rush/temp/shrinkwrap-deps.json": "6ad43bbf71e5f191d9f571da269a25bb4d9e8909",
-    "packages/schemas/package.json": "44b7bc4a5f4b4edcde168265b086fe71f0921d97",
-    "packages/schemas/src/controlRender.tsx": "277603b8bb9ced9263547455c6a38c9ce56930a6",
+    "packages/schemas/package.json": "e9159622e23f1520fa450cdaec83f7c98d5e856f",
+    "packages/schemas/src/controlRender.tsx": "24db6564d9793bb7236bbf19aea759e26391ffff",
     "packages/schemas/src/hooks.ts": "64cf3ef2b5151231c9ffbc26da34002a3cab867d",
     "packages/schemas/src/index.ts": "b15fbb6de132cd912cf8141d5c4d2329e947546e",
     "packages/schemas/src/schemaBuilder.ts": "3a36cbc35f70fca2b561f6d4ddc1bd1030eeb3f6",

package/lib/controlRender.d.ts

@@ -1,6 +1,6 @@
 import { ActionControlDefinition, AnyControlDefinition, CompoundField, ControlDefinition, DataControlDefinition, DisplayControlDefinition, FieldOption, GroupedControlsDefinition, ScalarField, SchemaField } from "./types";
 import React, { Key, ReactElement } from "react";
-import { AnyControl, Control } from "@react-typed-forms/core";
+import { Control } from "@react-typed-forms/core";
 export interface FormEditHooks {
     useDataProperties(formState: FormEditState, definition: DataControlDefinition, field: ScalarField): DataControlProperties;
     useGroupProperties(formState: FormEditState, definition: GroupedControlsDefinition, currentHooks: FormEditHooks): GroupControlProperties;
@@ -12,7 +12,7 @@ export interface DataControlProperties {
     options: FieldOption[] | undefined;
     defaultValue: any;
     required: boolean;
-    customRender?: (props: DataRendererProps) => ReactElement;
+    customRender?: (props: DataRendererProps, control: Control<any>) => ReactElement;
 }
 export interface GroupControlProperties {
     visible: boolean;
@@ -33,9 +33,9 @@ export interface FormEditState {
     data: Control<ControlData>;
 }
 export interface FormRendererComponents {
-    renderData: (props: DataRendererProps) => ReactElement;
+    renderData: (props: DataRendererProps, control: Control<any>, element: boolean, renderers: FormRendererComponents) => ReactElement;
+    renderCompound: (props: CompoundGroupRendererProps, control: Control<any>, renderers: FormRendererComponents) => ReactElement;
     renderGroup: (props: GroupRendererProps) => ReactElement;
-    renderCompound: (props: CompoundGroupRendererProps) => ReactElement;
     renderDisplay: (props: DisplayRendererProps) => ReactElement;
     renderAction: (props: ActionRendererProps) => ReactElement;
 }
@@ -53,7 +53,6 @@ export interface DataRendererProps {
     definition: DataControlDefinition;
     properties: DataControlProperties;
     field: ScalarField;
-    control: AnyControl;
     formEditState?: FormEditState;
 }
 export interface GroupRendererProps {
@@ -65,7 +64,6 @@ export interface GroupRendererProps {
 export interface CompoundGroupRendererProps {
     definition: GroupedControlsDefinition;
     field: CompoundField;
-    control: AnyControl;
     properties: GroupControlProperties;
     renderChild: (key: Key, control: ControlDefinition, data: Control<{
         [field: string]: any;

package/lib/controlRender.js

@@ -134,7 +134,7 @@ function renderControl(definition, formState, hooks, key, wrapChild) {
 exports.renderControl = renderControl;
 function DataRenderer({ hooks, formState, controlDef, wrapElem, fieldData, }) {
     var _a, _b;
-    const { renderData } = useFormRendererComponents();
+    const renderer = useFormRendererComponents();
     const props = hooks.useDataProperties(formState, controlDef, fieldData);
     const scalarControl = (_a = formState.data.fields[fieldData.field]) !== null && _a !== void 0 ? _a : (0, core_1.newControl)(undefined);
     (0, core_1.useControlChangeEffect)(scalarControl, (c) => {
@@ -148,11 +148,10 @@ function DataRenderer({ hooks, formState, controlDef, wrapElem, fieldData, }) {
     const scalarProps = {
         formEditState: formState,
         field: fieldData,
-        control: scalarControl,
         definition: controlDef,
         properties: props,
     };
-    return wrapElem(((_b = props.customRender) !== null && _b !== void 0 ? _b : renderData)(scalarProps));
+    return wrapElem(((_b = props.customRender) !== null && _b !== void 0 ? _b : renderer.renderData)(scalarProps, scalarControl, false, renderer));
 }
 function ActionRenderer({ hooks, formState, wrapElem, actionDef, }) {
     const { renderAction } = useFormRendererComponents();
@@ -163,7 +162,7 @@ function ActionRenderer({ hooks, formState, wrapElem, actionDef, }) {
     return wrapElem(renderAction({ definition: actionDef, properties: actionControlProperties }));
 }
 function GroupRenderer({ hooks, formState, groupDef, wrapElem, }) {
-    const { renderCompound, renderGroup } = useFormRendererComponents();
+    const renderers = useFormRendererComponents();
     const groupProps = hooks.useGroupProperties(formState, groupDef, hooks);
     if (!groupProps.visible) {
         return react_1.default.createElement(react_1.default.Fragment, null);
@@ -172,15 +171,14 @@ function GroupRenderer({ hooks, formState, groupDef, wrapElem, }) {
         ? findCompoundField(formState.fields, groupDef.compoundField)
         : undefined;
     if (compoundField) {
-        return wrapElem(renderCompound({
+        return wrapElem(renderers.renderCompound({
             definition: groupDef,
             field: compoundField,
-            control: formState.data.fields[compoundField.field],
             properties: groupProps,
             renderChild: (k, c, data, wrapChild) => renderControl(c, Object.assign(Object.assign({}, formState), { fields: compoundField.children, data }), groupProps.hooks, k, wrapChild),
-        }));
+        }, formState.data.fields[compoundField.field], renderers));
     }
-    return wrapElem(renderGroup({
+    return wrapElem(renderers.renderGroup({
         definition: groupDef,
         childCount: groupDef.children.length,
         properties: groupProps,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@react-typed-forms/schemas",
-	"version": "3.0.0-dev.73",
+	"version": "3.0.0-dev.75",
 	"description": "",
 	"main": "lib/index.js",
 	"types": "lib/index.d.ts",
@@ -24,14 +24,14 @@
 		"material-ui"
 	],
 	"dependencies": {
-		"@react-typed-forms/core": "3.0.0-dev.73"
+		"@react-typed-forms/core": "3.0.0-dev.75"
 	},
 	"devDependencies": {
 		"@types/react": "^18.0.22",
+		"nswag": "^13.18.2",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
-		"rimraf": "^3.0.2",
-		"nswag": "^13.18.2"
+		"rimraf": "^3.0.2"
 	},
 	"gitHead": "698e16cd3ab31b7dd0528fc76536f4d3205ce8c6",
 	"scripts": {

package/src/controlRender.tsx

@@ -47,7 +47,10 @@ export interface DataControlProperties {
   options: FieldOption[] | undefined;
   defaultValue: any;
   required: boolean;
-  customRender?: (props: DataRendererProps) => ReactElement;
+  customRender?: (
+    props: DataRendererProps,
+    control: Control<any>
+  ) => ReactElement;
 }
 
 export interface GroupControlProperties {
@@ -74,9 +77,18 @@ export interface FormEditState {
 }
 
 export interface FormRendererComponents {
-  renderData: (props: DataRendererProps) => ReactElement;
+  renderData: (
+    props: DataRendererProps,
+    control: Control<any>,
+    element: boolean,
+    renderers: FormRendererComponents
+  ) => ReactElement;
+  renderCompound: (
+    props: CompoundGroupRendererProps,
+    control: Control<any>,
+    renderers: FormRendererComponents
+  ) => ReactElement;
   renderGroup: (props: GroupRendererProps) => ReactElement;
-  renderCompound: (props: CompoundGroupRendererProps) => ReactElement;
   renderDisplay: (props: DisplayRendererProps) => ReactElement;
   renderAction: (props: ActionRendererProps) => ReactElement;
 }
@@ -107,7 +119,6 @@ export interface DataRendererProps {
   definition: DataControlDefinition;
   properties: DataControlProperties;
   field: ScalarField;
-  control: AnyControl;
   formEditState?: FormEditState;
 }
 
@@ -124,7 +135,6 @@ export interface GroupRendererProps {
 export interface CompoundGroupRendererProps {
   definition: GroupedControlsDefinition;
   field: CompoundField;
-  control: AnyControl;
   properties: GroupControlProperties;
   renderChild: (
     key: Key,
@@ -306,7 +316,7 @@ function DataRenderer({
   fieldData: ScalarField;
   wrapElem: (db: ReactElement) => ReactElement;
 }) {
-  const { renderData } = useFormRendererComponents();
+  const renderer = useFormRendererComponents();
   const props = hooks.useDataProperties(formState, controlDef, fieldData);
   const scalarControl =
     formState.data.fields[fieldData.field] ?? newControl(undefined);
@@ -327,11 +337,17 @@ function DataRenderer({
   const scalarProps: DataRendererProps = {
     formEditState: formState,
     field: fieldData,
-    control: scalarControl,
     definition: controlDef,
     properties: props,
   };
-  return wrapElem((props.customRender ?? renderData)(scalarProps));
+  return wrapElem(
+    (props.customRender ?? renderer.renderData)(
+      scalarProps,
+      scalarControl,
+      false,
+      renderer
+    )
+  );
 }
 
 function ActionRenderer({
@@ -370,7 +386,7 @@ function GroupRenderer({
   formState: FormEditState;
   wrapElem: (db: ReactElement) => ReactElement;
 }) {
-  const { renderCompound, renderGroup } = useFormRendererComponents();
+  const renderers = useFormRendererComponents();
 
   const groupProps = hooks.useGroupProperties(formState, groupDef, hooks);
   if (!groupProps.visible) {
@@ -381,28 +397,31 @@ function GroupRenderer({
     : undefined;
   if (compoundField) {
     return wrapElem(
-      renderCompound({
-        definition: groupDef,
-        field: compoundField,
-        control: formState.data.fields[compoundField.field],
-        properties: groupProps,
-        renderChild: (k, c, data, wrapChild) =>
-          renderControl(
-            c,
-            {
-              ...formState,
-              fields: compoundField!.children,
-              data,
-            },
-            groupProps.hooks,
-            k,
-            wrapChild
-          ),
-      })
+      renderers.renderCompound(
+        {
+          definition: groupDef,
+          field: compoundField,
+          properties: groupProps,
+          renderChild: (k, c, data, wrapChild) =>
+            renderControl(
+              c,
+              {
+                ...formState,
+                fields: compoundField!.children,
+                data,
+              },
+              groupProps.hooks,
+              k,
+              wrapChild
+            ),
+        },
+        formState.data.fields[compoundField.field],
+        renderers
+      )
     );
   }
   return wrapElem(
-    renderGroup({
+    renderers.renderGroup({
       definition: groupDef,
       childCount: groupDef.children.length,
       properties: groupProps,