@strictly/react-form 0.0.23 → 0.0.25

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

@@ -15,6 +15,7 @@ type FlattenedFieldOverrides<ValuePathsToAdapters extends Readonly<Record<string
     -readonly [K in keyof ValuePathsToAdapters]?: FieldOverride<ToOfFieldAdapter<ValuePathsToAdapters[K]>>;
 };
 export declare enum Validation {
+    None = 0,
     Changed = 1,
     Always = 2
 }
@@ -43,13 +44,14 @@ 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>>;
     private maybeGetAdapterForValuePath;
     private getAdapterForValuePath;
     typePath<K extends keyof ValueToTypePaths>(valuePath: K): ValueToTypePaths[K];
-    setFieldValue<K extends keyof ValuePathsToAdapters>(valuePath: K, value: ToOfFieldAdapter<ValuePathsToAdapters[K]>, validation?: Validation | undefined | null): boolean;
+    setFieldValue<K extends keyof ValuePathsToAdapters>(valuePath: K, value: ToOfFieldAdapter<ValuePathsToAdapters[K]>, validation?: Validation): boolean;
     addListItem<K extends keyof FlattenedListTypesOfType<T>>(valuePath: K, elementValue?: Maybe<ElementOfArray<FlattenedValuesOfType<T>[K]>>, index?: number): void;
     removeListItem<K extends keyof FlattenedListTypesOfType<T>>(...elementValuePaths: readonly `${K}.${number}`[]): void;
     private internalSetFieldValue;
@@ -57,6 +59,8 @@ export declare abstract class FormModel<T extends Type, ValueToTypePaths extends
     clearFieldValue<K extends StringKeyOf<ValuePathsToAdapters>>(valuePath: K): void;
     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

@@ -49,6 +49,7 @@ import { computed, observable, runInAction, } from 'mobx';
 import { UnreliableFieldConversionType, } from 'types/field_converters';
 export var Validation;
 (function (Validation) {
+    Validation[Validation["None"] = 0] = "None";
     Validation[Validation["Changed"] = 1] = "Changed";
     Validation[Validation["Always"] = 2] = "Always";
 })(Validation || (Validation = {}));
@@ -144,7 +145,7 @@ let FormModel = (() => {
                     case 'edit':
                         return false;
                     default:
-                        return this.mode;
+                        throw new UnreachableError(this.mode);
                 }
             }
             get fields() {
@@ -189,7 +190,7 @@ let FormModel = (() => {
                 }
                 return this.synthesizeFieldByPaths(valuePath, typePath);
             }
-            synthesizeFieldByPaths(valuePath, typePath) {
+            getField(valuePath, typePath) {
                 const adapter = this.adapters[typePath];
                 if (adapter == null) {
                     // invalid path, which can happen
@@ -211,12 +212,30 @@ let FormModel = (() => {
                         : defaultValue, 
                 // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
                 valuePath, context);
-                // const error = this.errors[valuePath]
-                let error = undefined;
                 const displayedValue = fieldOverride != null ? fieldOverride[0] : value;
-                const validation = this.validation[valuePath];
+                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 undefined:
+                    case Validation.None:
                         // skip validation
                         break;
                     case Validation.Changed:
@@ -250,7 +269,7 @@ let FormModel = (() => {
                         throw new UnreachableError(validation);
                 }
                 return {
-                    value: fieldOverride != null ? fieldOverride[0] : value,
+                    value: displayedValue,
                     error,
                     readonly: readonly && !this.forceMutableFields,
                     required,
@@ -277,7 +296,7 @@ let FormModel = (() => {
             typePath(valuePath) {
                 return valuePathToTypePath(this.type, valuePath, true);
             }
-            setFieldValue(valuePath, value, validation = this.validation[valuePath]) {
+            setFieldValue(valuePath, value, validation) {
                 return this.internalSetFieldValue(valuePath, value, validation);
             }
             addListItem(valuePath, 
@@ -417,9 +436,6 @@ let FormModel = (() => {
                     if (validation != null) {
                         this.validation[valuePath] = validation;
                     }
-                    else {
-                        delete this.validation[valuePath];
-                    }
                     switch (conversion.type) {
                         case UnreliableFieldConversionType.Failure:
                             if (conversion.value != null && accessor != null) {
@@ -475,15 +491,36 @@ let FormModel = (() => {
                 // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
                 return keys.has(valuePath);
             }
-            validateField(valuePath, validation) {
+            getValidation(valuePath) {
                 var _b;
-                if (validation === void 0) { validation = Math.max(this.mode === 'create' ? Validation.Always : Validation.Changed, (_b = this.validation[valuePath]) !== null && _b !== void 0 ? _b : Validation.Changed); }
+                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;
                 });
                 return this.fields[valuePath].error == null;
             }
-            validateAll(validation = this.mode === 'create' ? Validation.Always : Validation.Changed) {
+            validateAll(validation = Validation.Always) {
                 const accessors = toArray(this.accessors);
                 runInAction(() => {
                     accessors.forEach(([valuePath]) => {

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

@@ -1,8 +1,9 @@
 import { useCallback, } from 'react';
+import { Validation, } from './form_model';
 export function useDefaultMobxFormHooks(model, { onValidFieldSubmit, onValidFormSubmit, } = {}) {
     const onFieldValueChange = useCallback(function (path, value) {
-        // clear any validation
-        model.setFieldValue(path, value, null);
+        const validation = Math.min(model.getValidation(path), Validation.Changed);
+        model.setFieldValue(path, value, validation);
     }, [model]);
     const onFieldSubmit = useCallback(function (valuePath) {
         if (model.validateField(valuePath)) {
@@ -18,8 +19,10 @@ export function useDefaultMobxFormHooks(model, { onValidFieldSubmit, onValidForm
         // (e.g. changing a discriminator)
         // TODO debounce?
         setTimeout(function () {
-            if (model.isValuePathActive(path)) {
-                model.validateField(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)));
             }
         }, 100);
     }, [model]);

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

@@ -863,8 +863,8 @@ describe('all', function () {
                 it('respects the field being readonly', () => {
                     expect(model.fields['$.n'].readonly).toBeTruthy();
                 });
-                it('validates successfully with clean, but invalid data', () => {
-                    expect(model.validateAll()).toBeTruthy();
+                it('fails validation with invalid, clean data', () => {
+                    expect(model.validateAll()).toBeFalsy();
                 });
                 it('fails validation with invalid, dirty data', () => {
                     model.setFieldValue('$.n', '2');