@strictly/react-form 0.0.24 → 0.0.25

package/.out/core/mobx/form_model.d.ts

@@ -44,6 +44,7 @@ export declare abstract class FormModel<T extends Type, ValueToTypePaths extends
     get fields(): SimplifyDeep<FlattenedConvertedFieldsOf<ValuePathsToAdapters>>;
     private get knownFields();
     private maybeSynthesizeFieldByValuePath;
+    private getField;
     private synthesizeFieldByPaths;
     getAccessorForValuePath(valuePath: keyof ValuePathsToAdapters): Accessor | undefined;
     get accessors(): Readonly<Record<string, Accessor>>;
@@ -59,6 +60,7 @@ export declare abstract class FormModel<T extends Type, ValueToTypePaths extends
     clearAll(value: ValueOfType<T>): void;
     isValuePathActive<K extends keyof ValuePathsToAdapters>(valuePath: K): boolean;
     getValidation<K extends keyof ValuePathsToAdapters>(valuePath: K): Validation;
+    isDirty<K extends keyof ValuePathsToAdapters>(valuePath: K): boolean;
     validateField<K extends keyof ValuePathsToAdapters>(valuePath: K, validation?: Validation): boolean;
     validateAll(validation?: Validation): boolean;
 }

package/.out/core/mobx/form_model.js

@@ -190,8 +190,7 @@ let FormModel = (() => {
                 }
                 return this.synthesizeFieldByPaths(valuePath, typePath);
             }
-            synthesizeFieldByPaths(valuePath, typePath) {
-                var _b;
+            getField(valuePath, typePath) {
                 const adapter = this.adapters[typePath];
                 if (adapter == null) {
                     // invalid path, which can happen
@@ -213,9 +212,28 @@ let FormModel = (() => {
                         : defaultValue, 
                 // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
                 valuePath, context);
-                let error = undefined;
                 const displayedValue = fieldOverride != null ? fieldOverride[0] : value;
+                return {
+                    context,
+                    convert,
+                    create,
+                    revert,
+                    displayedValue,
+                    // value,
+                    required,
+                    readonly,
+                    defaultValue,
+                };
+            }
+            synthesizeFieldByPaths(valuePath, typePath) {
+                var _b;
+                const field = this.getField(valuePath, typePath);
+                if (field == null) {
+                    return;
+                }
+                const { context, convert, revert, displayedValue, required, readonly, defaultValue, } = field;
                 const validation = (_b = this.validation[valuePath]) !== null && _b !== void 0 ? _b : Validation.None;
+                let error;
                 switch (validation) {
                     case Validation.None:
                         // skip validation
@@ -251,7 +269,7 @@ let FormModel = (() => {
                         throw new UnreachableError(validation);
                 }
                 return {
-                    value: fieldOverride != null ? fieldOverride[0] : value,
+                    value: displayedValue,
                     error,
                     readonly: readonly && !this.forceMutableFields,
                     required,
@@ -477,6 +495,25 @@ let FormModel = (() => {
                 var _b;
                 return (_b = this.validation[valuePath]) !== null && _b !== void 0 ? _b : Validation.None;
             }
+            isDirty(valuePath) {
+                // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+                const typePath = valuePathToTypePath(this.type, 
+                // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+                valuePath, true);
+                const field = this.getField(valuePath, typePath);
+                if (field == null) {
+                    return false;
+                }
+                const { displayedValue, convert, context, defaultValue, } = field;
+                const originalValue = valuePath in this.originalValues
+                    // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+                    ? this.originalValues[valuePath]
+                    : defaultValue;
+                // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+                const { value: originalDisplayedValue } = convert(originalValue, valuePath, context);
+                // TODO better comparisons, displayed values can still be complex
+                return (displayedValue !== originalDisplayedValue);
+            }
             validateField(valuePath, validation = Validation.Always) {
                 runInAction(() => {
                     this.validation[valuePath] = validation;

package/.out/core/mobx/hooks.js

@@ -2,8 +2,8 @@ import { useCallback, } from 'react';
 import { Validation, } from './form_model';
 export function useDefaultMobxFormHooks(model, { onValidFieldSubmit, onValidFormSubmit, } = {}) {
     const onFieldValueChange = useCallback(function (path, value) {
-        // clear validation once there are no errors for the field
-        model.setFieldValue(path, value);
+        const validation = Math.min(model.getValidation(path), Validation.Changed);
+        model.setFieldValue(path, value, validation);
     }, [model]);
     const onFieldSubmit = useCallback(function (valuePath) {
         if (model.validateField(valuePath)) {
@@ -19,7 +19,8 @@ export function useDefaultMobxFormHooks(model, { onValidFieldSubmit, onValidForm
         // (e.g. changing a discriminator)
         // TODO debounce?
         setTimeout(function () {
-            if (model.isValuePathActive(path)) {
+            // only start validation if the user has changed the field
+            if (model.isValuePathActive(path) && model.isDirty(path)) {
                 // further workaround to make sure we don't downgrade the existing validation
                 model.validateField(path, Math.max(Validation.Changed, model.getValidation(path)));
             }