@strictly/react-form 0.0.24 → 0.0.26

package/dist/index.d.ts

@@ -112,6 +112,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]>;
+};
 declare enum Validation {
     None = 0,
     Changed = 1,
@@ -133,6 +136,7 @@ declare abstract class FormModel<T extends Type, ValueToTypePaths extends Readon
     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;
@@ -142,23 +146,33 @@ declare abstract class FormModel<T extends Type, ValueToTypePaths extends Readon
     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;
 }
 
 type ValueOfModel<M extends FormModel<any, any, any, any, any>> = M extends FormModel<infer T, any, any, any, any> ? ValueOfType<ReadonlyTypeOfType<T>> : never;

package/dist/index.js

@@ -313,6 +313,7 @@ import {
   UnreachableError as UnreachableError2
 } from "@strictly/base";
 import {
+  equals,
   flattenAccessorsOfType,
   flattenTypesOfType,
   flattenValuesOfType,
@@ -332,8 +333,8 @@ var Validation = /* @__PURE__ */ ((Validation2) => {
   Validation2[Validation2["Always"] = 2] = "Always";
   return Validation2;
 })(Validation || {});
-var _accessors_dec, _knownFields_dec, _fields_dec, _validation_dec, _fieldOverrides_dec, _value_dec, _init, _value, _fieldOverrides, _validation;
-_value_dec = [observable.ref], _fieldOverrides_dec = [observable.shallow], _validation_dec = [observable.shallow], _fields_dec = [computed], _knownFields_dec = [computed], _accessors_dec = [computed];
+var _dirty_dec, _accessors_dec, _knownFields_dec, _fields_dec, _validation_dec, _errorOverrides_dec, _fieldOverrides_dec, _value_dec, _init, _value, _fieldOverrides, _errorOverrides, _validation;
+_value_dec = [observable.ref], _fieldOverrides_dec = [observable.shallow], _errorOverrides_dec = [observable.shallow], _validation_dec = [observable.shallow], _fields_dec = [computed], _knownFields_dec = [computed], _accessors_dec = [computed], _dirty_dec = [computed];
 var FormModel = class {
   constructor(type, originalValue, adapters, mode) {
     this.type = type;
@@ -342,7 +343,8 @@ var FormModel = class {
     __runInitializers(_init, 5, this);
     __privateAdd(this, _value, __runInitializers(_init, 8, this)), __runInitializers(_init, 11, this);
     __privateAdd(this, _fieldOverrides, __runInitializers(_init, 12, this)), __runInitializers(_init, 15, this);
-    __privateAdd(this, _validation, __runInitializers(_init, 16, this, {})), __runInitializers(_init, 19, this);
+    __privateAdd(this, _errorOverrides, __runInitializers(_init, 16, this, {})), __runInitializers(_init, 19, this);
+    __privateAdd(this, _validation, __runInitializers(_init, 20, this, {})), __runInitializers(_init, 23, this);
     __publicField(this, "flattenedTypeDefs");
     // cannot be type safe
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -432,8 +434,7 @@ var FormModel = class {
     }
     return this.synthesizeFieldByPaths(valuePath, typePath);
   }
-  synthesizeFieldByPaths(valuePath, typePath) {
-    var _a;
+  getField(valuePath, typePath) {
     const adapter2 = this.adapters[typePath];
     if (adapter2 == null) {
       return;
@@ -461,39 +462,68 @@ var FormModel = class {
       valuePath,
       context
     );
-    let error = void 0;
     const displayedValue = fieldOverride != null ? fieldOverride[0] : value;
+    return {
+      context,
+      convert,
+      create,
+      revert,
+      displayedValue,
+      // value,
+      required,
+      readonly,
+      defaultValue
+    };
+  }
+  synthesizeFieldByPaths(valuePath, typePath) {
+    var _a;
+    const field = this.getField(valuePath, typePath);
+    if (field == null) {
+      return;
+    }
+    const {
+      context,
+      convert,
+      revert,
+      displayedValue,
+      required,
+      readonly,
+      defaultValue
+    } = field;
     const validation = (_a = this.validation[valuePath]) != null ? _a : 0 /* None */;
-    switch (validation) {
-      case 0 /* None */:
-        break;
-      case 1 /* Changed */:
-        if (revert != null) {
-          const originalValue = valuePath in this.originalValues ? this.originalValues[valuePath] : defaultValue;
-          const { value: originalDisplayedValue } = convert(originalValue, valuePath, context);
-          if (displayedValue !== originalDisplayedValue) {
-            const revertResult = revert(displayedValue, valuePath, context);
+    let error = this.errorOverrides[valuePath];
+    if (error == null) {
+      switch (validation) {
+        case 0 /* None */:
+          break;
+        case 1 /* Changed */:
+          if (revert != null) {
+            const originalValue = valuePath in this.originalValues ? this.originalValues[valuePath] : defaultValue;
+            const { value: originalDisplayedValue } = convert(originalValue, valuePath, context);
+            if (displayedValue !== originalDisplayedValue) {
+              const revertResult = revert(displayedValue, valuePath, context);
+              if ((revertResult == null ? void 0 : revertResult.type) === 1 /* Failure */) {
+                ;
+                ({ error } = revertResult);
+              }
+            }
+          }
+          break;
+        case 2 /* Always */:
+          {
+            const revertResult = revert == null ? void 0 : revert(displayedValue, valuePath, context);
             if ((revertResult == null ? void 0 : revertResult.type) === 1 /* Failure */) {
               ;
               ({ error } = revertResult);
             }
           }
-        }
-        break;
-      case 2 /* Always */:
-        {
-          const revertResult = revert == null ? void 0 : revert(displayedValue, valuePath, context);
-          if ((revertResult == null ? void 0 : revertResult.type) === 1 /* Failure */) {
-            ;
-            ({ error } = revertResult);
-          }
-        }
-        break;
-      default:
-        throw new UnreachableError2(validation);
+          break;
+        default:
+          throw new UnreachableError2(validation);
+      }
     }
     return {
-      value: fieldOverride != null ? fieldOverride[0] : value,
+      value: displayedValue,
       error,
       readonly: readonly && !this.forceMutableFields,
       required
@@ -523,6 +553,11 @@ var FormModel = class {
       valuePath
     );
   }
+  get dirty() {
+    return Object.keys(this.accessors).some((valuePath) => {
+      return this.isFieldDirty(valuePath);
+    });
+  }
   typePath(valuePath) {
     return valuePathToTypePath(this.type, valuePath, true);
   }
@@ -668,6 +703,7 @@ var FormModel = class {
     const accessor = this.getAccessorForValuePath(valuePath);
     return runInAction(() => {
       this.fieldOverrides[valuePath] = [value];
+      delete this.errorOverrides[valuePath];
       if (validation != null) {
         this.validation[valuePath] = validation;
       }
@@ -685,11 +721,26 @@ var FormModel = class {
       }
     });
   }
+  /**
+   * 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];
       });
     }
   }
@@ -712,12 +763,14 @@ var FormModel = class {
     runInAction(() => {
       this.fieldOverrides[key] = [displayValue];
       delete this.validation[key];
+      delete this.errorOverrides[key];
     });
   }
   clearAll(value) {
     runInAction(() => {
       this.validation = {};
       this.fieldOverrides = {};
+      this.errorOverrides = {};
       this.value = mobxCopy(this.type, value);
     });
   }
@@ -730,9 +783,44 @@ var FormModel = class {
     var _a;
     return (_a = this.validation[valuePath]) != null ? _a : 0 /* None */;
   }
+  isFieldDirty(valuePath) {
+    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;
+    const originalValue = valuePath in this.originalValues ? this.originalValues[valuePath] : defaultValue;
+    if (revert != null) {
+      const typeDef = this.flattenedTypeDefs[typePath];
+      const {
+        value,
+        type
+      } = revert(displayedValue, valuePath, context);
+      if (type === 0 /* Success */) {
+        if (equals(typeDef, originalValue, value)) {
+          return false;
+        }
+      }
+    }
+    const { value: originalDisplayedValue } = convert(originalValue, valuePath, context);
+    return displayedValue !== originalDisplayedValue;
+  }
   validateField(valuePath, validation = 2 /* Always */) {
     runInAction(() => {
       this.validation[valuePath] = validation;
+      delete this.errorOverrides[valuePath];
     });
     return this.fields[valuePath].error == null;
   }
@@ -750,17 +838,23 @@ var FormModel = class {
       }
     );
   }
+  validateSubmit() {
+    return this.validateAll();
+  }
 };
 _init = __decoratorStart(null);
 _value = new WeakMap();
 _fieldOverrides = new WeakMap();
+_errorOverrides = new WeakMap();
 _validation = new WeakMap();
 __decorateElement(_init, 4, "value", _value_dec, FormModel, _value);
 __decorateElement(_init, 4, "fieldOverrides", _fieldOverrides_dec, FormModel, _fieldOverrides);
+__decorateElement(_init, 4, "errorOverrides", _errorOverrides_dec, FormModel, _errorOverrides);
 __decorateElement(_init, 4, "validation", _validation_dec, FormModel, _validation);
 __decorateElement(_init, 2, "fields", _fields_dec, FormModel);
 __decorateElement(_init, 2, "knownFields", _knownFields_dec, FormModel);
 __decorateElement(_init, 2, "accessors", _accessors_dec, FormModel);
+__decorateElement(_init, 2, "dirty", _dirty_dec, FormModel);
 __decoratorMetadata(_init, FormModel);
 
 // core/mobx/hooks.tsx
@@ -773,7 +867,8 @@ function useDefaultMobxFormHooks(model, {
 } = {}) {
   const onFieldValueChange = useCallback(
     function(path, value) {
-      model.setFieldValue(path, value);
+      const validation = Math.min(model.getValidation(path), 1 /* Changed */);
+      model.setFieldValue(path, value, validation);
     },
     [model]
   );
@@ -792,7 +887,7 @@ function useDefaultMobxFormHooks(model, {
   const onFieldBlur = useCallback(
     function(path) {
       setTimeout(function() {
-        if (model.isValuePathActive(path)) {
+        if (model.isValuePathActive(path) && model.isFieldDirty(path)) {
           model.validateField(path, Math.max(1 /* Changed */, model.getValidation(path)));
         }
       }, 100);
@@ -801,7 +896,7 @@ function useDefaultMobxFormHooks(model, {
   );
   const onFormSubmit = useCallback(
     function() {
-      if (model.validateAll()) {
+      if (model.validateSubmit()) {
         onValidFormSubmit == null ? void 0 : onValidFormSubmit(model.value);
       }
     },

package/package.json

@@ -72,7 +72,7 @@
     "test:watch": "vitest"
   },
   "type": "module",
-  "version": "0.0.24",
+  "version": "0.0.26",
   "exports": {
     ".": {
       "import": {