mobx-formkit 1.1.2 → 1.1.4

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) => [
@@ -1085,7 +1095,7 @@
                 }
             });
         }
-        initField(key, path, data, update = false) {
+        initField(key, path, data, update = false, value) {
             const initial = this.state.get("current", "props");
             const struct = pathToStruct(path);
             // try to get props from separated objects
@@ -1101,7 +1111,9 @@
                 return t;
             };
             const props = {
-                $value: lodash.get(initial[SeparatedPropsMode.values], path),
+                $value: value !== void 0
+                    ? value
+                    : lodash.get(initial[SeparatedPropsMode.values], path),
                 $computed: _try(SeparatedPropsMode.computed),
                 $label: _try(SeparatedPropsMode.labels),
                 $placeholder: _try(SeparatedPropsMode.placeholders),
@@ -1204,10 +1216,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({
@@ -1251,6 +1274,17 @@
                     this.state.form.select(this.path ?? "", null, false);
                 const applyInputConverterOnUpdate = this.state.options.get(OptionsEnum.applyInputConverterOnUpdate, this);
                 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 = lodash.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 = Math.max(-1, ...Object.keys(field.fields || {}).map(Number));
                         getObservableMapValues($field.fields).forEach(($f) => {
@@ -1288,17 +1322,18 @@
                     // 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, lodash.get(raw, $path));
                 }
                 else if (recursion) {
                     if (lodash.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);
                     }
                 }
             });
@@ -1473,18 +1508,71 @@
                 execEvent && this.execHook(FieldPropsEnum.onAdd);
                 return this;
             }
-            let key;
-            if (lodash.has(obj, FieldPropsEnum.key))
-                key = obj.key;
-            if (lodash.has(obj, FieldPropsEnum.name))
-                key = obj.name;
-            if (!key)
-                key = maxKey(this.fields);
-            const $path = ($key) => [this.path, $key].join(".").replace(/^\.+/, "");
+            // a plain field holding an array value gets the new item appended
+            if (this.isPlainArrayField() &&
+                !lodash.has(obj, FieldPropsEnum.key) &&
+                !lodash.has(obj, FieldPropsEnum.name)) {
+                const $values = Array.isArray(this.value)
+                    ? [...this.value]
+                    : [];
+                $values.push(lodash.has(obj, FieldPropsEnum.value)
+                    ? obj[FieldPropsEnum.value]
+                    : defaultValue({
+                        fallbackValueOption: this.state.options.get(OptionsEnum.fallbackValue, this),
+                        nullable: this.$nullable,
+                        type: this.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;
+        }
+        /**
+          Create a new field into this container (no change counters, no hooks)
+        */
+        createField(obj, key) {
             const tree = pathToFieldsTree(this.state.struct(), this.path ?? "", 0, true);
-            const field = this.initField(key, $path(key), lodash.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 = 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));
+            const $key = key ?? obj?.[FieldPropsEnum.key];
+            const $fieldKey = $key !== void 0
+                ? $key
+                : !isValuesPayload && obj?.[FieldPropsEnum.name] !== void 0
+                    ? obj[FieldPropsEnum.name]
+                    : maxKey(this.fields);
+            const $path = ($k) => [this.path, $k].join(".").replace(/^\.+/, "");
+            const field = this.initField($fieldKey, $path($fieldKey), isValuesPayload ? tree[0] : lodash.merge(tree[0], obj), false, lodash.has(obj, FieldPropsEnum.value) ? obj[FieldPropsEnum.value] : void 0);
             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' }))
@@ -1514,11 +1602,71 @@
                     })));
                 }
             }
-            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) {
+            const struct = this.state.struct();
+            if (!Array.isArray(struct))
+                return false;
+            const structPath = (path ?? "").replace(/\.\d+\./g, "[].");
+            return struct.some((s) => 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() {
+            return (!this.hasNestedFields &&
+                !this.isArrayContainer(this.path ?? "") &&
+                Array.isArray(this.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, value) {
+            if (value === void 0)
+                return;
+            if (lodash.isPlainObject(value) && $field.fields.size) {
+                lodash.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, values) {
+            // remove the nested fields which are not in the new values
+            getObservableMapValues($field.fields).forEach(($f) => {
+                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(lodash.isPlainObject(value) ? value : { [FieldPropsEnum.value]: value }, key);
+                }
+            });
+        }
         /**
           Del Field
          */
@@ -2526,11 +2674,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,27 +2710,33 @@
                 : 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 */
         sync = mobx.action((e, v = null) => {
             const $get = ($) => isBool($, this.value) ? $.target.checked : $.target.value;
-            // assume "v" or "e" are the values
+            // resolve the value to be set
+            let $value;
             if (lodash.isNil(e) || lodash.isNil(e.target)) {
                 if (!lodash.isNil(v) && !lodash.isNil(v.target)) {
                     v = $get(v); // eslint-disable-line
                 }
-                this.value = $try(e, v);
-                return;
+                $value = $try(e, v);
             }
-            if (!lodash.isNil(e.target)) {
-                this.value = $get(e);
+            else {
+                $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.applyArrayValue(this, $value);
                 return;
             }
-            this.value = e;
+            this.value = $value;
         });
         onSync = (...args) => this.type === "file"
             ? this.onDrop(...args)
@@ -2785,7 +2940,13 @@
                 nullable: this.$nullable,
                 type: this.type,
             });
-            deep && this.each((field) => 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) => this.fields.delete($f.name));
+            }
+            else {
+                deep && this.each((field) => field.clear(deep));
+            }
             this.state.options.get(OptionsEnum.validateOnClear, this)
                 ? this.validate({
                     showErrors: this.state.options.get(OptionsEnum.showErrorsOnClear, this),
@@ -2800,11 +2961,31 @@
             this.$changed = 0;
             this.files = undefined;
             const useDefaultValue = this.$default !== this.$initial;
-            if (useDefaultValue)
-                this.value = this.$default;
-            if (!useDefaultValue)
-                this.value = this.$initial;
-            deep && this.each((field) => field.reset(deep));
+            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;
+                const $fields = getObservableMapValues(this.fields);
+                const $match = $fields.length === $values.length &&
+                    $fields.every(($f, i) => lodash.isEqual($f.value, $values[i]));
+                if (!$match) {
+                    $fields.forEach(($f) => this.fields.delete($f.name));
+                    $values.forEach((value, index) => this.createField(lodash.isPlainObject(value) ? value : { [FieldPropsEnum.value]: value }, String(index)));
+                }
+                else {
+                    deep && this.each((field) => field.reset(deep));
+                }
+            }
+            else {
+                if (useDefaultValue)
+                    this.value = this.$default;
+                if (!useDefaultValue)
+                    this.value = this.$initial;
+                deep && this.each((field) => field.reset(deep));
+            }
             this.state.options.get(OptionsEnum.validateOnReset, this)
                 ? this.validate({
                     showErrors: this.state.options.get(OptionsEnum.showErrorsOnReset, this),