mobx-formkit 1.1.2 → 1.1.4

package/src/Base.ts

@@ -110,7 +110,15 @@ export default abstract class Base<
       set: action,
       add: action,
       del: action,
+      move: action,
     });
+
+    // Any reorder of the fields (also when `fields.move()` is called
+    // directly) flags the field and the form as changed. (#657)
+    this.fields.onMove = () => {
+      this.$changed++;
+      this.state.form.$changed++;
+    };
   }
 
   execHook = (name: string, fallback: any = {}, ...args: any[]): any =>
@@ -294,6 +302,7 @@ export default abstract class Base<
     path: string,
     data: any,
     update: boolean = false,
+    value?: any,
   ): any {
     const initial = this.state.get("current", "props");
     const struct = pathToStruct(path);
@@ -316,7 +325,10 @@ export default abstract class Base<
     };
 
     const props = {
-      $value: get(initial[SeparatedPropsMode.values], path),
+      $value:
+        value !== void 0
+          ? value
+          : get(initial[SeparatedPropsMode.values], path),
       $computed: _try(SeparatedPropsMode.computed),
       $label: _try(SeparatedPropsMode.labels),
       $placeholder: _try(SeparatedPropsMode.placeholders),
@@ -455,11 +467,24 @@ export default abstract class Base<
     return transform(
       $fields,
       (check: any, field: any) => {
+        // Array containers are skipped because most of their props are
+        // computed recursively on their nested fields. Some props are not
+        // recursive (isDirty/isPristine compare the container value with
+        // its initial value) or must aggregate the container itself
+        // (isValid/hasError), so they are taken into account for array
+        // containers too. (#656, #657)
+        const isContainerProp = (
+          [
+            FieldPropsEnum.isValid,
+            FieldPropsEnum.hasError,
+            FieldPropsEnum.isDirty,
+            FieldPropsEnum.isPristine,
+          ] as string[]
+        ).includes(prop);
         if (
+          isContainerProp ||
           !field.fields.size ||
-          !Array.isArray(field.initial) ||
-          prop === FieldPropsEnum.isValid ||
-          prop === FieldPropsEnum.hasError
+          !Array.isArray(field.initial)
         ) {
           check.push(field[prop]);
         }
@@ -531,6 +556,24 @@ export default abstract class Base<
       );
 
       if ($field != null && field !== void 0) {
+        // an array provided for a field which is not an array container
+        // is the field value itself (not a set of nested fields)
+        const $rawValue = get(raw, $path);
+        const $absPath = [this.path ?? "", $path].join(".").replace(/^\.+/, "");
+        if (Array.isArray($rawValue) && !this.isArrayContainer($absPath)) {
+          $field.value = parseInput(
+            applyInputConverterOnUpdate ? $field.$input : (val) => val,
+            {
+              fallbackValueOption: this.state.options.get(
+                OptionsEnum.fallbackValue,
+                this,
+              ),
+              separated: $rawValue,
+            },
+          );
+          return;
+        }
+
         if (Array.isArray($field.values())) {
           const n: number = Math.max(
             -1,
@@ -586,15 +629,22 @@ export default abstract class Base<
         // init field into the container field
         $container.$changed++;
         $container.state.form.$changed++;
-        $container.initField($key, $newFieldPath, field, true);
+        // the value provided by the update wins over the declared values
+        $container.initField(
+          $key,
+          $newFieldPath,
+          field,
+          true,
+          get(raw, $path),
+        );
       } else if (recursion) {
         if (has(field, FieldPropsEnum.fields) && field.fields != null) {
           // handle nested fields if defined
-          this.deepUpdate(field.fields, $path);
+          this.deepUpdate(field.fields, $path, true, raw);
         } else {
           // handle nested fields if undefined or null
           const $fields = pathToFieldsTree(this.state.struct(), $path);
-          this.deepUpdate($fields, $path, false);
+          this.deepUpdate($fields, $path, false, raw);
         }
       }
     });
@@ -868,24 +918,99 @@ export default abstract class Base<
       return this;
     }
 
-    let key;
-    if (has(obj, FieldPropsEnum.key)) key = obj.key;
-    if (has(obj, FieldPropsEnum.name)) key = obj.name;
-    if (!key) key = maxKey(this.fields);
+    // a plain field holding an array value gets the new item appended
+    if (
+      this.isPlainArrayField() &&
+      !has(obj, FieldPropsEnum.key) &&
+      !has(obj, FieldPropsEnum.name)
+    ) {
+      const $values = Array.isArray((this as any).value)
+        ? [...((this as any).value as any[])]
+        : [];
+      $values.push(
+        has(obj, FieldPropsEnum.value)
+          ? obj[FieldPropsEnum.value]
+          : defaultValue({
+              fallbackValueOption: this.state.options.get(
+                OptionsEnum.fallbackValue,
+                this,
+              ),
+              nullable: (this as any).$nullable,
+              type: (this as any).type,
+            }),
+      );
+      this.set(FieldPropsEnum.value, $values);
+      this.$changed++;
+      this.state.form.$changed++;
+      execEvent && this.execHook(FieldPropsEnum.onAdd);
+      return this;
+    }
+
+    const field = this.createField(obj);
+
+    this.$changed++;
+    this.state.form.$changed++;
+    execEvent && this.execHook(FieldPropsEnum.onAdd);
+    return field;
+  }
 
-    const $path = ($key: string) =>
-      [this.path, $key].join(".").replace(/^\.+/, "");
+  /**
+    Create a new field into this container (no change counters, no hooks)
+  */
+  createField(obj?: any, key?: string): any {
     const tree = pathToFieldsTree(
       this.state.struct(),
       this.path ?? "",
       0,
       true,
     );
-    const field = this.initField(key, $path(key), merge(tree[0], obj));
+    const nestedFields = tree[0]?.fields ?? null;
+
+    // An object without field-definition props, whose keys match the
+    // nested fields of the container, holds the values of the new item
+    // (e.g. add({ name: 'John', qty: 1 })). The 'name' prop is ambiguous:
+    // it is treated as a value only when the container defines a nested
+    // field called 'name'. (#657)
+    const payloadKeys = isPlainObject(obj)
+      ? Object.keys(obj).filter((k) => k !== FieldPropsEnum.key)
+      : [];
+    const isValuesPayload =
+      !!nestedFields &&
+      isPlainObject(obj) &&
+      !has(obj, FieldPropsEnum.value) &&
+      !has(obj, FieldPropsEnum.fields) &&
+      payloadKeys.length > 0 &&
+      (!has(obj, FieldPropsEnum.name) ||
+        Object.prototype.hasOwnProperty.call(nestedFields, FieldPropsEnum.name));
+
+    const $key = key ?? obj?.[FieldPropsEnum.key];
+    const $fieldKey: any =
+      $key !== void 0
+        ? $key
+        : !isValuesPayload && obj?.[FieldPropsEnum.name] !== void 0
+          ? obj[FieldPropsEnum.name]
+          : maxKey(this.fields);
+
+    const $path = ($k: any) =>
+      [this.path, $k].join(".").replace(/^\.+/, "");
+    const field = this.initField(
+      $fieldKey,
+      $path($fieldKey),
+      isValuesPayload ? tree[0] : merge(tree[0], obj),
+      false,
+      has(obj, FieldPropsEnum.value) ? obj[FieldPropsEnum.value] : void 0,
+    );
     const hasValues =
       has(obj, FieldPropsEnum.value) || has(obj, FieldPropsEnum.fields);
 
-    if (!hasValues) {
+    if (isValuesPayload) {
+      each(payloadKeys, (fieldName) => {
+        const nestedField = field.select(fieldName);
+        if (nestedField && !nestedField.hasNestedFields) {
+          nestedField.set(FieldPropsEnum.value, (obj as any)[fieldName]);
+        }
+      });
+    } else if (!hasValues) {
       // When the struct defines nested fields and obj is a plain object
       // without field-definition props (key, name), treat obj properties
       // directly as nested field values (e.g. add({ firstname: 'John' }))
@@ -925,12 +1050,81 @@ export default abstract class Base<
       }
     }
 
-    this.$changed++;
-    this.state.form.$changed++;
-    execEvent && this.execHook(FieldPropsEnum.onAdd);
     return field;
   }
 
+  /**
+    Checks if the given path refers to an array container
+    (a struct entry like `path[]` or `path[].subfield`)
+  */
+  isArrayContainer(path: string): boolean {
+    const struct = this.state.struct();
+    if (!Array.isArray(struct)) return false;
+    const structPath = (path ?? "").replace(/\.\d+\./g, "[].");
+    return struct.some(
+      (s: any) => typeof s === "string" && s.startsWith(`${structPath}[]`),
+    );
+  }
+
+  /**
+    Checks if the field is a plain field holding an array value
+    (not an array container with nested fields)
+  */
+  isPlainArrayField(): boolean {
+    return (
+      !this.hasNestedFields &&
+      !this.isArrayContainer(this.path ?? "") &&
+      Array.isArray((this as any).value)
+    );
+  }
+
+  /**
+    Applies a value to a field: for fields with nested fields the value is
+    applied to the nested fields, otherwise the field value is set
+  */
+  applyValue($field: any, value: any): void {
+    if (value === void 0) return;
+    if (isPlainObject(value) && $field.fields.size) {
+      each(value, (val, key) => {
+        const $nested = $field.select(key);
+        if ($nested) {
+          $nested.fields.size
+            ? this.applyValue($nested, val)
+            : $nested.set(FieldPropsEnum.value, val);
+        }
+      });
+      return;
+    }
+    $field.set(FieldPropsEnum.value, value);
+  }
+
+  /**
+    Writes an array of values into an array container: the nested fields are
+    created, updated and removed to match the given array
+  */
+  applyArrayValue($field: any, values: any[]): void {
+    // remove the nested fields which are not in the new values
+    getObservableMapValues($field.fields).forEach(($f: any) => {
+      if (Number($f.name) >= values.length) {
+        $field.fields.delete($f.name);
+      }
+    });
+
+    // create or update the nested fields
+    values.forEach((value, index) => {
+      const key = String(index);
+      const $nested = $field.fields.get(key);
+      if ($nested) {
+        this.applyValue($nested, value);
+      } else {
+        $field.createField(
+          isPlainObject(value) ? value : { [FieldPropsEnum.value]: value },
+          key,
+        );
+      }
+    });
+  }
+
   /**
     Del Field
    */

package/src/Field.ts

@@ -20,6 +20,7 @@ import {
   isEvent,
   pathToStruct,
   isArrayFromStruct,
+  getObservableMapValues,
 } from "./utils";
 
 import { parseInput, parseCheckOutput, defaultValue } from "./parser";
@@ -503,12 +504,13 @@ export default class Field<T = any> extends Base<Record<string, any>> implements
 
   get isDirty(): boolean {
     const value = this.changed ? this.value : this.initial;
-    return !isEqual(this.initial, value);
+    // a soft deleted field differs from its initial state
+    return !isEqual(this.initial, value) || this.deleted;
   }
 
   get isPristine(): boolean {
     const value = this.changed ? this.value : this.initial;
-    return isEqual(this.initial, value);
+    return isEqual(this.initial, value) && !this.deleted;
   }
 
   get isEmpty(): boolean {
@@ -539,9 +541,9 @@ export default class Field<T = any> extends Base<Record<string, any>> implements
   }
 
   get deleted(): boolean {
-    return this.hasNestedFields
-      ? this.check(FieldPropsEnum.deleted, true)
-      : this.$deleted;
+    // an explicit flag on the field itself always wins
+    if (this.$deleted) return true;
+    return this.hasNestedFields ? this.check(FieldPropsEnum.deleted, true) : false;
   }
 
   /* ------------------------------------------------------------------ */
@@ -551,22 +553,25 @@ export default class Field<T = any> extends Base<Record<string, any>> implements
     const $get = ($: any) =>
       isBool($, this.value) ? $.target.checked : $.target.value;
 
-    // assume "v" or "e" are the values
+    // resolve the value to be set
+    let $value: any;
     if (isNil(e) || isNil(e.target)) {
       if (!isNil(v) && !isNil(v.target)) {
         v = $get(v); // eslint-disable-line
       }
-
-      this.value = $try(e, v);
-      return;
+      $value = $try(e, v);
+    } else {
+      $value = $get(e);
     }
 
-    if (!isNil(e.target)) {
-      this.value = $get(e);
+    // an array set on a field with nested fields is applied to the nested
+    // fields, otherwise the value would be silently dropped
+    if (this.hasNestedFields && Array.isArray($value)) {
+      (this.state.form as any).applyArrayValue(this, $value);
       return;
     }
 
-    this.value = e;
+    this.value = $value;
   });
 
   onSync = (...args: any) =>
@@ -876,7 +881,14 @@ export default class Field<T = any> extends Base<Record<string, any>> implements
       type: this.type,
     });
 
-    deep && this.each((field: FieldInterface) => field.clear(deep));
+    if (this.isArrayContainer(this.path ?? "") && Array.isArray(this.value)) {
+      // an array container is emptied: the nested fields are removed
+      getObservableMapValues(this.fields).forEach(($f: any) =>
+        this.fields.delete($f.name),
+      );
+    } else {
+      deep && this.each((field: FieldInterface) => field.clear(deep));
+    }
 
     this.state.options.get(OptionsEnum.validateOnClear, this)
       ? this.validate({
@@ -897,10 +909,37 @@ export default class Field<T = any> extends Base<Record<string, any>> implements
     this.files = undefined;
 
     const useDefaultValue = this.$default !== this.$initial;
-    if (useDefaultValue) this.value = this.$default;
-    if (!useDefaultValue) this.value = this.$initial;
+    const $target = useDefaultValue ? this.$default : this.$initial;
+
+    if (
+      this.isArrayContainer(this.path ?? "") &&
+      !useDefaultValue &&
+      Array.isArray($target)
+    ) {
+      // an array container is rebuilt from its initial (or default) array:
+      // the removed nested fields are restored and the added ones dropped
+      const $values = $target as any[];
+      const $fields = getObservableMapValues(this.fields);
+      const $match =
+        $fields.length === $values.length &&
+        $fields.every(($f: any, i: number) => isEqual($f.value, $values[i]));
+      if (!$match) {
+        $fields.forEach(($f: any) => this.fields.delete($f.name));
+        $values.forEach((value, index) =>
+          this.createField(
+            isPlainObject(value) ? value : { [FieldPropsEnum.value]: value },
+            String(index),
+          ),
+        );
+      } else {
+        deep && this.each((field: FieldInterface) => field.reset(deep));
+      }
+    } else {
+      if (useDefaultValue) this.value = this.$default;
+      if (!useDefaultValue) this.value = this.$initial;
 
-    deep && this.each((field: FieldInterface) => field.reset(deep));
+      deep && this.each((field: FieldInterface) => field.reset(deep));
+    }
 
     this.state.options.get(OptionsEnum.validateOnReset, this)
       ? this.validate({