mobx-formkit 1.1.2 → 1.1.3

package/umd/MobxFormkit.umd.js

@@ -129,6 +129,8 @@
     class ArrayMap {
         /** Duck-typing marker for utility code */
         _isArrayMap = true;
+        /** Called after a successful `move()` — used to flag the change as dirty */
+        onMove;
         /** Internal observable array: entries stored as [key, value] pairs */
         _entries = mobx.observable.array([]);
         constructor(entries) {
@@ -246,6 +248,7 @@
                     return;
                 const [entry] = this._entries.splice(fromIndex, 1);
                 this._entries.splice(toIndex, 0, entry);
+                this.onMove?.();
             });
         }
         /**
@@ -963,7 +966,14 @@
                 set: mobx.action,
                 add: mobx.action,
                 del: mobx.action,
+                move: mobx.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, fallback = {}, ...args) => $try(fallback[name], this.$hooks[name], this.noop).apply(this, [this, ...args]);
         execHandler = (name, args, fallback = undefined, hook = null, execHook = true) => [
@@ -1204,10 +1214,21 @@
         deepCheck(type, prop, fields) {
             const $fields = getObservableMapValues(fields);
             return lodash.transform($fields, (check, field) => {
-                if (!field.fields.size ||
-                    !Array.isArray(field.initial) ||
-                    prop === FieldPropsEnum.isValid ||
-                    prop === FieldPropsEnum.hasError) {
+                // 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,
+                ].includes(prop);
+                if (isContainerProp ||
+                    !field.fields.size ||
+                    !Array.isArray(field.initial)) {
                     check.push(field[prop]);
                 }
                 check.push(checkPropOccurrence({
@@ -1474,17 +1495,41 @@
                 return this;
             }
             let key;
+            const tree = pathToFieldsTree(this.state.struct(), this.path ?? "", 0, true);
+            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 = lodash.isPlainObject(obj)
+                ? Object.keys(obj).filter((k) => k !== FieldPropsEnum.key)
+                : [];
+            const isValuesPayload = !!nestedFields &&
+                lodash.isPlainObject(obj) &&
+                !lodash.has(obj, FieldPropsEnum.value) &&
+                !lodash.has(obj, FieldPropsEnum.fields) &&
+                payloadKeys.length > 0 &&
+                (!lodash.has(obj, FieldPropsEnum.name) ||
+                    Object.prototype.hasOwnProperty.call(nestedFields, FieldPropsEnum.name));
             if (lodash.has(obj, FieldPropsEnum.key))
                 key = obj.key;
-            if (lodash.has(obj, FieldPropsEnum.name))
+            if (!isValuesPayload && lodash.has(obj, FieldPropsEnum.name))
                 key = obj.name;
             if (!key)
                 key = maxKey(this.fields);
             const $path = ($key) => [this.path, $key].join(".").replace(/^\.+/, "");
-            const tree = pathToFieldsTree(this.state.struct(), this.path ?? "", 0, true);
-            const field = this.initField(key, $path(key), lodash.merge(tree[0], obj));
+            const field = this.initField(key, $path(key), isValuesPayload ? tree[0] : lodash.merge(tree[0], obj));
             const hasValues = lodash.has(obj, FieldPropsEnum.value) || lodash.has(obj, FieldPropsEnum.fields);
-            if (!hasValues) {
+            if (isValuesPayload) {
+                lodash.each(payloadKeys, (fieldName) => {
+                    const nestedField = field.select(fieldName);
+                    if (nestedField && !nestedField.hasNestedFields) {
+                        nestedField.set(FieldPropsEnum.value, obj[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' }))
@@ -2526,11 +2571,12 @@
         }
         get isDirty() {
             const value = this.changed ? this.value : this.initial;
-            return !lodash.isEqual(this.initial, value);
+            // a soft deleted field differs from its initial state
+            return !lodash.isEqual(this.initial, value) || this.deleted;
         }
         get isPristine() {
             const value = this.changed ? this.value : this.initial;
-            return lodash.isEqual(this.initial, value);
+            return lodash.isEqual(this.initial, value) && !this.deleted;
         }
         get isEmpty() {
             if (this.hasNestedFields)
@@ -2561,9 +2607,10 @@
                 : this.$touched;
         }
         get deleted() {
-            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;
         }
         /* ------------------------------------------------------------------ */
         /* EVENTS HANDLERS */