@strictly/react-form 0.0.23 → 0.0.24

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
 }
@@ -49,7 +50,7 @@ export declare abstract class FormModel<T extends Type, ValueToTypePaths extends
     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 +58,7 @@ 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;
     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() {
@@ -190,6 +191,7 @@ let FormModel = (() => {
                 return this.synthesizeFieldByPaths(valuePath, typePath);
             }
             synthesizeFieldByPaths(valuePath, typePath) {
+                var _b;
                 const adapter = this.adapters[typePath];
                 if (adapter == null) {
                     // invalid path, which can happen
@@ -211,12 +213,11 @@ 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];
+                const validation = (_b = this.validation[valuePath]) !== null && _b !== void 0 ? _b : Validation.None;
                 switch (validation) {
-                    case undefined:
+                    case Validation.None:
                         // skip validation
                         break;
                     case Validation.Changed:
@@ -277,7 +278,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 +418,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 +473,17 @@ 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;
+            }
+            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);
+        // clear validation once there are no errors for the field
+        model.setFieldValue(path, value);
     }, [model]);
     const onFieldSubmit = useCallback(function (valuePath) {
         if (model.validateField(valuePath)) {
@@ -19,7 +20,8 @@ export function useDefaultMobxFormHooks(model, { onValidFieldSubmit, onValidForm
         // TODO debounce?
         setTimeout(function () {
             if (model.isValuePathActive(path)) {
-                model.validateField(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');