@react-typed-forms/schemas 1.0.0-dev.2 → 1.0.0-dev.3

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

@@ -1,9 +1,9 @@
 {
   "files": {
     "packages/schemas/.rush/temp/shrinkwrap-deps.json": "5ce6417fae765db5c61e400f851ecafe0ce756f0",
-    "packages/schemas/package.json": "31ae328607ccdfaa29ac8502c8e8e3495ad9c424",
-    "packages/schemas/src/controlRender.tsx": "a9d28c66e85ff45e941ecd11e8c8032c6629b4b1",
-    "packages/schemas/src/hooks.ts": "2356b9d918b879adb3490ad5c2b1155dec59a9e5",
+    "packages/schemas/package.json": "38baed2ed08306a8db8dbeb4649adb4f294fe615",
+    "packages/schemas/src/controlRender.tsx": "340cfc1f2fedb77b3e456c2cf8bf50f40b808c36",
+    "packages/schemas/src/hooks.ts": "982c0ee0c7749fc3c58f01ac8c44b8174f898861",
     "packages/schemas/src/index.ts": "b15fbb6de132cd912cf8141d5c4d2329e947546e",
     "packages/schemas/src/schemaBuilder.ts": "bfe74d3fb1cc2a4d5226051a58e025e107c32b11",
     "packages/schemas/src/types.ts": "2ff2a346d753da0eca2fe4acbe1b709f72034e5c",

package/lib/controlRender.d.ts

@@ -8,12 +8,13 @@ export interface FormEditHooks {
     useActionProperties(formState: FormEditState, definition: ActionControlDefinition): ActionControlProperties;
 }
 export interface DataControlProperties {
-    readonly: boolean;
+    control: Control<any>;
     visible: boolean;
-    options: FieldOption[] | undefined;
+    readonly: boolean;
     defaultValue: any;
     required: boolean;
-    customRender?: (props: DataRendererProps, control: Control<any>) => ReactElement;
+    options: FieldOption[] | undefined;
+    customRender?: (props: DataRendererProps) => ReactElement;
 }
 export interface GroupControlProperties {
     visible: boolean;

package/lib/controlRender.js

@@ -146,40 +146,25 @@ function renderControl(definition, formState, hooks, key, wrapChild) {
 }
 exports.renderControl = renderControl;
 function DataRenderer({ hooks, formState, controlDef, wrapElem, fieldData, }) {
-    var _a, _b;
+    var _a;
     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.useControlEffect)(() => scalarControl.value, (v) => {
-        if (props.defaultValue && !v) {
-            scalarControl.value = props.defaultValue;
-        }
-    }, true);
-    if (!props.visible) {
-        return react_1.default.createElement(react_1.default.Fragment, null);
-    }
     const scalarProps = {
         formEditState: formState,
         field: fieldData,
         definition: controlDef,
         properties: props,
     };
-    return wrapElem(((_b = props.customRender) !== null && _b !== void 0 ? _b : renderer.renderData)(scalarProps, scalarControl, false, renderer));
+    return wrapElem(((_a = props.customRender) !== null && _a !== void 0 ? _a : renderer.renderData)(scalarProps, props.control, false, renderer));
 }
 function ActionRenderer({ hooks, formState, wrapElem, actionDef, }) {
     const { renderAction } = useFormRendererComponents();
     const actionControlProperties = hooks.useActionProperties(formState, actionDef);
-    if (!actionControlProperties.visible) {
-        return react_1.default.createElement(react_1.default.Fragment, null);
-    }
     return wrapElem(renderAction({ definition: actionDef, properties: actionControlProperties }));
 }
 function GroupRenderer({ hooks, formState, groupDef, wrapElem, }) {
     const renderers = useFormRendererComponents();
     const groupProps = hooks.useGroupProperties(formState, groupDef, hooks);
-    if (!groupProps.visible) {
-        return react_1.default.createElement(react_1.default.Fragment, null);
-    }
     const compoundField = groupDef.compoundField
         ? findCompoundField(formState.fields, groupDef.compoundField)
         : undefined;
@@ -201,9 +186,6 @@ function GroupRenderer({ hooks, formState, groupDef, wrapElem, }) {
 function DisplayRenderer({ hooks, wrapElem, formState, displayDef, }) {
     const { renderDisplay } = useFormRendererComponents();
     const displayProps = hooks.useDisplayProperties(formState, displayDef);
-    if (!displayProps.visible) {
-        return react_1.default.createElement(react_1.default.Fragment, null);
-    }
     return wrapElem(renderDisplay({ definition: displayDef, properties: displayProps }));
 }
 function controlForField(field, formState) {

package/lib/hooks.d.ts

@@ -1,9 +1,10 @@
-import { DataControlDefinition, EntityExpression, FieldOption, ControlDefinition, SchemaField } from "./types";
+import { ControlDefinition, DataControlDefinition, EntityExpression, FieldOption, SchemaField } from "./types";
 import { DataControlProperties, FormEditHooks, FormEditState } from "./controlRender";
+import { Control } from "@react-typed-forms/core";
 export type ExpressionHook = (expr: EntityExpression, formState: FormEditState) => any;
 export declare function useDefaultValue(definition: DataControlDefinition, field: SchemaField, formState: FormEditState, useExpression: ExpressionHook): any;
 export declare function useIsControlVisible(definition: ControlDefinition, formState: FormEditState, useExpression: ExpressionHook): boolean;
-export declare function getDefaultScalarControlProperties(control: DataControlDefinition, field: SchemaField, visible: boolean, defaultValue: any, readonly?: boolean): DataControlProperties;
+export declare function getDefaultScalarControlProperties(definition: DataControlDefinition, field: SchemaField, visible: boolean, defaultValue: any, control: Control<any>, readonly?: boolean): DataControlProperties;
 export declare function getOptionsForScalarField(field: SchemaField): FieldOption[] | undefined;
 export declare const defaultExpressionHook: ExpressionHook;
 export declare function createFormEditHooks(useExpression: ExpressionHook): FormEditHooks;

package/lib/hooks.js

@@ -39,14 +39,15 @@ function useIsControlVisible(definition, formState, useExpression) {
             Boolean(typeControl.value && onlyForTypes.includes(typeControl.value))));
 }
 exports.useIsControlVisible = useIsControlVisible;
-function getDefaultScalarControlProperties(control, field, visible, defaultValue, readonly) {
+function getDefaultScalarControlProperties(definition, field, visible, defaultValue, control, readonly) {
     var _a, _b;
     return {
         defaultValue,
         options: getOptionsForScalarField(field),
-        required: (_a = control.required) !== null && _a !== void 0 ? _a : false,
+        required: (_a = definition.required) !== null && _a !== void 0 ? _a : false,
         visible,
-        readonly: (_b = readonly !== null && readonly !== void 0 ? readonly : control.readonly) !== null && _b !== void 0 ? _b : false,
+        readonly: (_b = readonly !== null && readonly !== void 0 ? readonly : definition.readonly) !== null && _b !== void 0 ? _b : false,
+        control,
     };
 }
 exports.getDefaultScalarControlProperties = getDefaultScalarControlProperties;
@@ -74,7 +75,15 @@ function createFormEditHooks(useExpression) {
         useDataProperties(formState, definition, field) {
             const visible = useIsControlVisible(definition, formState, useExpression);
             const defaultValue = useDefaultValue(definition, field, formState, useExpression);
-            return getDefaultScalarControlProperties(definition, field, visible, defaultValue, formState.readonly);
+            const scalarControl = formState.data.fields[field.field];
+            (0, react_1.useEffect)(() => {
+                if (!visible)
+                    scalarControl.value = null;
+                else if (scalarControl.current.value == null) {
+                    scalarControl.value = defaultValue;
+                }
+            }, [visible, defaultValue]);
+            return getDefaultScalarControlProperties(definition, field, visible, defaultValue, scalarControl, formState.readonly);
         },
         useDisplayProperties: (fs, definition) => {
             const visible = useIsControlVisible(definition, fs, useExpression);

package/package.json

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

package/src/controlRender.tsx

@@ -36,15 +36,13 @@ export interface FormEditHooks {
 }
 
 export interface DataControlProperties {
-  readonly: boolean;
+  control: Control<any>;
   visible: boolean;
-  options: FieldOption[] | undefined;
+  readonly: boolean;
   defaultValue: any;
   required: boolean;
-  customRender?: (
-    props: DataRendererProps,
-    control: Control<any>
-  ) => ReactElement;
+  options: FieldOption[] | undefined;
+  customRender?: (props: DataRendererProps) => ReactElement;
 }
 
 export interface GroupControlProperties {
@@ -321,20 +319,6 @@ function DataRenderer({
 }) {
   const renderer = useFormRendererComponents();
   const props = hooks.useDataProperties(formState, controlDef, fieldData);
-  const scalarControl =
-    formState.data.fields[fieldData.field] ?? newControl(undefined);
-  useControlEffect(
-    () => scalarControl.value,
-    (v) => {
-      if (props.defaultValue && !v) {
-        scalarControl.value = props.defaultValue;
-      }
-    },
-    true
-  );
-  if (!props.visible) {
-    return <></>;
-  }
   const scalarProps: DataRendererProps = {
     formEditState: formState,
     field: fieldData,
@@ -344,7 +328,7 @@ function DataRenderer({
   return wrapElem(
     (props.customRender ?? renderer.renderData)(
       scalarProps,
-      scalarControl,
+      props.control,
       false,
       renderer
     )
@@ -367,10 +351,6 @@ function ActionRenderer({
     formState,
     actionDef
   );
-  if (!actionControlProperties.visible) {
-    return <></>;
-  }
-
   return wrapElem(
     renderAction({ definition: actionDef, properties: actionControlProperties })
   );
@@ -390,9 +370,6 @@ function GroupRenderer({
   const renderers = useFormRendererComponents();
 
   const groupProps = hooks.useGroupProperties(formState, groupDef, hooks);
-  if (!groupProps.visible) {
-    return <></>;
-  }
   const compoundField = groupDef.compoundField
     ? findCompoundField(formState.fields, groupDef.compoundField)
     : undefined;
@@ -452,9 +429,6 @@ function DisplayRenderer({
   const { renderDisplay } = useFormRendererComponents();
 
   const displayProps = hooks.useDisplayProperties(formState, displayDef);
-  if (!displayProps.visible) {
-    return <></>;
-  }
   return wrapElem(
     renderDisplay({ definition: displayDef, properties: displayProps })
   );

package/src/hooks.ts

@@ -1,12 +1,12 @@
 import {
   ActionControlDefinition,
+  ControlDefinition,
   DataControlDefinition,
   DynamicPropertyType,
   EntityExpression,
   ExpressionType,
   FieldOption,
   FieldValueExpression,
-  ControlDefinition,
   SchemaField,
 } from "./types";
 import {
@@ -20,7 +20,7 @@ import {
   isGroupControl,
   isScalarField,
 } from "./controlRender";
-import { useMemo } from "react";
+import { useEffect, useMemo } from "react";
 import { Control, newControl } from "@react-typed-forms/core";
 
 export type ExpressionHook = (
@@ -83,18 +83,20 @@ export function useIsControlVisible(
   );
 }
 export function getDefaultScalarControlProperties(
-  control: DataControlDefinition,
+  definition: DataControlDefinition,
   field: SchemaField,
   visible: boolean,
   defaultValue: any,
+  control: Control<any>,
   readonly?: boolean
 ): DataControlProperties {
   return {
     defaultValue,
     options: getOptionsForScalarField(field),
-    required: control.required ?? false,
+    required: definition.required ?? false,
     visible,
-    readonly: readonly ?? control.readonly ?? false,
+    readonly: readonly ?? definition.readonly ?? false,
+    control,
   };
 }
 
@@ -137,11 +139,20 @@ export function createFormEditHooks(
         formState,
         useExpression
       );
+      const scalarControl = formState.data.fields[field.field];
+
+      useEffect(() => {
+        if (!visible) scalarControl.value = null;
+        else if (scalarControl.current.value == null) {
+          scalarControl.value = defaultValue;
+        }
+      }, [visible, defaultValue]);
       return getDefaultScalarControlProperties(
         definition,
         field,
         visible,
         defaultValue,
+        scalarControl,
         formState.readonly
       );
     },