@strictly/react-form 0.0.24 → 0.0.26

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

@@ -14,6 +14,9 @@ type FieldOverride<V = any> = Maybe<V>;
 type FlattenedFieldOverrides<ValuePathsToAdapters extends Readonly<Record<string, FieldAdapter>>> = {
     -readonly [K in keyof ValuePathsToAdapters]?: FieldOverride<ToOfFieldAdapter<ValuePathsToAdapters[K]>>;
 };
+type FlattenedErrorOverrides<ValuePathsToAdapters extends Readonly<Record<string, FieldAdapter>>> = {
+    -readonly [K in keyof ValuePathsToAdapters]?: ErrorOfFieldAdapter<ValuePathsToAdapters[K]>;
+};
 export declare enum Validation {
     None = 0,
     Changed = 1,
@@ -35,6 +38,7 @@ export declare abstract class FormModel<T extends Type, ValueToTypePaths extends
     protected readonly mode: FormMode;
     accessor value: MobxValueOfType<T>;
     accessor fieldOverrides: FlattenedFieldOverrides<ValuePathsToAdapters>;
+    accessor errorOverrides: FlattenedErrorOverrides<ValuePathsToAdapters>;
     accessor validation: FlattenedValidation<ValuePathsToAdapters>;
     private readonly flattenedTypeDefs;
     private readonly originalValues;
@@ -44,22 +48,32 @@ 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;
+    get dirty(): boolean;
     typePath<K extends keyof ValueToTypePaths>(valuePath: K): ValueToTypePaths[K];
     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;
+    /**
+     * Forces an error onto a field. Error will be removed if the field value changes
+     * @param valuePath the field to display an error for
+     * @param error the error to display
+     */
+    overrideFieldError<K extends keyof ValuePathsToAdapters>(valuePath: K, error?: ErrorOfFieldAdapter<ValuePathsToAdapters[K]>): void;
     clearFieldError<K extends keyof ValuePathsToAdapters>(valuePath: K): void;
     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;
+    isFieldDirty<K extends keyof ValuePathsToAdapters>(valuePath: K): boolean;
     validateField<K extends keyof ValuePathsToAdapters>(valuePath: K, validation?: Validation): boolean;
     validateAll(validation?: Validation): boolean;
+    validateSubmit(): boolean;
 }
 export {};

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

@@ -44,7 +44,7 @@ var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (
     return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
 };
 import { assertExists, assertExistsAndReturn, assertState, checkValidNumber, map, toArray, UnreachableError, } from '@strictly/base';
-import { flattenAccessorsOfType, flattenTypesOfType, flattenValuesOfType, flattenValueTo, jsonPathPop, mobxCopy, valuePathToTypePath, } from '@strictly/define';
+import { equals, flattenAccessorsOfType, flattenTypesOfType, flattenValuesOfType, flattenValueTo, jsonPathPop, mobxCopy, valuePathToTypePath, } from '@strictly/define';
 import { computed, observable, runInAction, } from 'mobx';
 import { UnreliableFieldConversionType, } from 'types/field_converters';
 export var Validation;
@@ -54,8 +54,8 @@ export var Validation;
     Validation[Validation["Always"] = 2] = "Always";
 })(Validation || (Validation = {}));
 let FormModel = (() => {
-    var _a, _FormModel_value_accessor_storage, _FormModel_fieldOverrides_accessor_storage, _FormModel_validation_accessor_storage;
-    var _b, _c, _d;
+    var _a, _FormModel_value_accessor_storage, _FormModel_fieldOverrides_accessor_storage, _FormModel_errorOverrides_accessor_storage, _FormModel_validation_accessor_storage;
+    var _b, _c, _d, _e;
     let _instanceExtraInitializers = [];
     let _value_decorators;
     let _value_initializers = [];
@@ -63,17 +63,23 @@ let FormModel = (() => {
     let _fieldOverrides_decorators;
     let _fieldOverrides_initializers = [];
     let _fieldOverrides_extraInitializers = [];
+    let _errorOverrides_decorators;
+    let _errorOverrides_initializers = [];
+    let _errorOverrides_extraInitializers = [];
     let _validation_decorators;
     let _validation_initializers = [];
     let _validation_extraInitializers = [];
     let _get_fields_decorators;
     let _get_knownFields_decorators;
     let _get_accessors_decorators;
+    let _get_dirty_decorators;
     return _a = class FormModel {
             get value() { return __classPrivateFieldGet(this, _FormModel_value_accessor_storage, "f"); }
             set value(value) { __classPrivateFieldSet(this, _FormModel_value_accessor_storage, value, "f"); }
             get fieldOverrides() { return __classPrivateFieldGet(this, _FormModel_fieldOverrides_accessor_storage, "f"); }
             set fieldOverrides(value) { __classPrivateFieldSet(this, _FormModel_fieldOverrides_accessor_storage, value, "f"); }
+            get errorOverrides() { return __classPrivateFieldGet(this, _FormModel_errorOverrides_accessor_storage, "f"); }
+            set errorOverrides(value) { __classPrivateFieldSet(this, _FormModel_errorOverrides_accessor_storage, value, "f"); }
             get validation() { return __classPrivateFieldGet(this, _FormModel_validation_accessor_storage, "f"); }
             set validation(value) { __classPrivateFieldSet(this, _FormModel_validation_accessor_storage, value, "f"); }
             constructor(type, originalValue, adapters, mode) {
@@ -97,7 +103,8 @@ let FormModel = (() => {
                 });
                 _FormModel_value_accessor_storage.set(this, __runInitializers(this, _value_initializers, void 0));
                 _FormModel_fieldOverrides_accessor_storage.set(this, (__runInitializers(this, _value_extraInitializers), __runInitializers(this, _fieldOverrides_initializers, void 0)));
-                _FormModel_validation_accessor_storage.set(this, (__runInitializers(this, _fieldOverrides_extraInitializers), __runInitializers(this, _validation_initializers, {})));
+                _FormModel_errorOverrides_accessor_storage.set(this, (__runInitializers(this, _fieldOverrides_extraInitializers), __runInitializers(this, _errorOverrides_initializers, {})));
+                _FormModel_validation_accessor_storage.set(this, (__runInitializers(this, _errorOverrides_extraInitializers), __runInitializers(this, _validation_initializers, {})));
                 Object.defineProperty(this, "flattenedTypeDefs", {
                     enumerable: true,
                     configurable: true,
@@ -190,8 +197,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,45 +219,66 @@ 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;
-                switch (validation) {
-                    case Validation.None:
-                        // skip validation
-                        break;
-                    case Validation.Changed:
-                        if (revert != null) {
-                            const originalValue = valuePath in this.originalValues
+                let error = this.errorOverrides[valuePath];
+                if (error == null) {
+                    switch (validation) {
+                        case Validation.None:
+                            // skip validation
+                            break;
+                        case Validation.Changed:
+                            if (revert != null) {
+                                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
-                                ? 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
-                            if (displayedValue !== originalDisplayedValue) {
-                                const revertResult = revert(displayedValue, valuePath, context);
+                                const { value: originalDisplayedValue } = convert(originalValue, valuePath, context);
+                                // TODO better comparisons, displayed values can still be complex
+                                if (displayedValue !== originalDisplayedValue) {
+                                    const revertResult = revert(displayedValue, valuePath, context);
+                                    if ((revertResult === null || revertResult === void 0 ? void 0 : revertResult.type) === UnreliableFieldConversionType.Failure) {
+                                        ;
+                                        ({ error } = revertResult);
+                                    }
+                                }
+                            }
+                            break;
+                        case Validation.Always:
+                            {
+                                const revertResult = revert === null || revert === void 0 ? void 0 : revert(displayedValue, valuePath, context);
                                 if ((revertResult === null || revertResult === void 0 ? void 0 : revertResult.type) === UnreliableFieldConversionType.Failure) {
                                     ;
                                     ({ error } = revertResult);
                                 }
                             }
-                        }
-                        break;
-                    case Validation.Always:
-                        {
-                            const revertResult = revert === null || revert === void 0 ? void 0 : revert(displayedValue, valuePath, context);
-                            if ((revertResult === null || revertResult === void 0 ? void 0 : revertResult.type) === UnreliableFieldConversionType.Failure) {
-                                ;
-                                ({ error } = revertResult);
-                            }
-                        }
-                        break;
-                    default:
-                        throw new UnreachableError(validation);
+                            break;
+                        default:
+                            throw new UnreachableError(validation);
+                    }
                 }
                 return {
-                    value: fieldOverride != null ? fieldOverride[0] : value,
+                    value: displayedValue,
                     error,
                     readonly: readonly && !this.forceMutableFields,
                     required,
@@ -275,6 +302,12 @@ let FormModel = (() => {
             getAdapterForValuePath(valuePath) {
                 return assertExistsAndReturn(this.maybeGetAdapterForValuePath(valuePath), 'expected adapter to be defined {}', valuePath);
             }
+            get dirty() {
+                return Object.keys(this.accessors).some((valuePath) => {
+                    // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+                    return this.isFieldDirty(valuePath);
+                });
+            }
             typePath(valuePath) {
                 return valuePathToTypePath(this.type, valuePath, true);
             }
@@ -415,6 +448,7 @@ let FormModel = (() => {
                 const accessor = this.getAccessorForValuePath(valuePath);
                 return runInAction(() => {
                     this.fieldOverrides[valuePath] = [value];
+                    delete this.errorOverrides[valuePath];
                     if (validation != null) {
                         this.validation[valuePath] = validation;
                     }
@@ -432,11 +466,27 @@ let FormModel = (() => {
                     }
                 });
             }
+            /**
+             * Forces an error onto a field. Error will be removed if the field value changes
+             * @param valuePath the field to display an error for
+             * @param error the error to display
+             */
+            overrideFieldError(valuePath, error) {
+                runInAction(() => {
+                    if (error) {
+                        this.errorOverrides[valuePath] = error;
+                    }
+                    else {
+                        delete this.errorOverrides[valuePath];
+                    }
+                });
+            }
             clearFieldError(valuePath) {
                 const fieldOverride = this.fieldOverrides[valuePath];
                 if (fieldOverride != null) {
                     runInAction(() => {
                         delete this.validation[valuePath];
+                        delete this.errorOverrides[valuePath];
                     });
                 }
             }
@@ -457,6 +507,7 @@ let FormModel = (() => {
                 runInAction(() => {
                     this.fieldOverrides[key] = [displayValue];
                     delete this.validation[key];
+                    delete this.errorOverrides[key];
                 });
             }
             clearAll(value) {
@@ -464,6 +515,7 @@ let FormModel = (() => {
                     this.validation = {};
                     // TODO this isn't correct, should reload from value
                     this.fieldOverrides = {};
+                    this.errorOverrides = {};
                     this.value = mobxCopy(this.type, value);
                 });
             }
@@ -477,9 +529,40 @@ let FormModel = (() => {
                 var _b;
                 return (_b = this.validation[valuePath]) !== null && _b !== void 0 ? _b : Validation.None;
             }
+            isFieldDirty(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, revert, context, defaultValue, } = field;
+                // if either the display value, or the stored value, match the original, then assume it's not dirty
+                const originalValue = valuePath in this.originalValues
+                    // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+                    ? this.originalValues[valuePath]
+                    : defaultValue;
+                if (revert != null) {
+                    // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+                    const typeDef = this.flattenedTypeDefs[typePath];
+                    const { value, type, } = revert(displayedValue, valuePath, context);
+                    if (type === UnreliableFieldConversionType.Success) {
+                        if (equals(typeDef, originalValue, value)) {
+                            return false;
+                        }
+                    }
+                }
+                // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+                const { value: originalDisplayedValue } = convert(originalValue, valuePath, context);
+                // try to compare the displayed values directly if we can't revert the displayed value
+                return displayedValue !== originalDisplayedValue;
+            }
             validateField(valuePath, validation = Validation.Always) {
                 runInAction(() => {
                     this.validation[valuePath] = validation;
+                    delete this.errorOverrides[valuePath];
                 });
                 return this.fields[valuePath].error == null;
             }
@@ -497,24 +580,32 @@ let FormModel = (() => {
                     return (field === null || field === void 0 ? void 0 : field.error) == null;
                 });
             }
+            validateSubmit() {
+                return this.validateAll();
+            }
         },
         _FormModel_value_accessor_storage = new WeakMap(),
         _FormModel_fieldOverrides_accessor_storage = new WeakMap(),
+        _FormModel_errorOverrides_accessor_storage = new WeakMap(),
         _FormModel_validation_accessor_storage = new WeakMap(),
         (() => {
             const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
             _value_decorators = [(_b = observable).ref.bind(_b)];
             _fieldOverrides_decorators = [(_c = observable).shallow.bind(_c)];
-            _validation_decorators = [(_d = observable).shallow.bind(_d)];
+            _errorOverrides_decorators = [(_d = observable).shallow.bind(_d)];
+            _validation_decorators = [(_e = observable).shallow.bind(_e)];
             _get_fields_decorators = [computed];
             _get_knownFields_decorators = [computed];
             _get_accessors_decorators = [computed];
+            _get_dirty_decorators = [computed];
             __esDecorate(_a, null, _value_decorators, { kind: "accessor", name: "value", static: false, private: false, access: { has: obj => "value" in obj, get: obj => obj.value, set: (obj, value) => { obj.value = value; } }, metadata: _metadata }, _value_initializers, _value_extraInitializers);
             __esDecorate(_a, null, _fieldOverrides_decorators, { kind: "accessor", name: "fieldOverrides", static: false, private: false, access: { has: obj => "fieldOverrides" in obj, get: obj => obj.fieldOverrides, set: (obj, value) => { obj.fieldOverrides = value; } }, metadata: _metadata }, _fieldOverrides_initializers, _fieldOverrides_extraInitializers);
+            __esDecorate(_a, null, _errorOverrides_decorators, { kind: "accessor", name: "errorOverrides", static: false, private: false, access: { has: obj => "errorOverrides" in obj, get: obj => obj.errorOverrides, set: (obj, value) => { obj.errorOverrides = value; } }, metadata: _metadata }, _errorOverrides_initializers, _errorOverrides_extraInitializers);
             __esDecorate(_a, null, _validation_decorators, { kind: "accessor", name: "validation", static: false, private: false, access: { has: obj => "validation" in obj, get: obj => obj.validation, set: (obj, value) => { obj.validation = value; } }, metadata: _metadata }, _validation_initializers, _validation_extraInitializers);
             __esDecorate(_a, null, _get_fields_decorators, { kind: "getter", name: "fields", static: false, private: false, access: { has: obj => "fields" in obj, get: obj => obj.fields }, metadata: _metadata }, null, _instanceExtraInitializers);
             __esDecorate(_a, null, _get_knownFields_decorators, { kind: "getter", name: "knownFields", static: false, private: false, access: { has: obj => "knownFields" in obj, get: obj => obj.knownFields }, metadata: _metadata }, null, _instanceExtraInitializers);
             __esDecorate(_a, null, _get_accessors_decorators, { kind: "getter", name: "accessors", static: false, private: false, access: { has: obj => "accessors" in obj, get: obj => obj.accessors }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(_a, null, _get_dirty_decorators, { kind: "getter", name: "dirty", static: false, private: false, access: { has: obj => "dirty" in obj, get: obj => obj.dirty }, metadata: _metadata }, null, _instanceExtraInitializers);
             if (_metadata) Object.defineProperty(_a, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
         })(),
         _a;

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,14 +19,15 @@ 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.isFieldDirty(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]);
     const onFormSubmit = useCallback(function () {
-        if (model.validateAll()) {
+        if (model.validateSubmit()) {
             onValidFormSubmit === null || onValidFormSubmit === void 0 ? void 0 : onValidFormSubmit(model.value);
         }
     }, [