mobx-formkit 1.1.3 → 1.2.0

package/umd/MobxFormkit.umd.js

@@ -1095,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
@@ -1111,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),
@@ -1272,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) => {
@@ -1309,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);
                     }
                 }
             });
@@ -1494,7 +1508,36 @@
                 execEvent && this.execHook(FieldPropsEnum.onAdd);
                 return this;
             }
-            let key;
+            // 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 nestedFields = tree[0]?.fields ?? null;
             // An object without field-definition props, whose keys match the
@@ -1512,14 +1555,14 @@
                 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 (!isValuesPayload && lodash.has(obj, FieldPropsEnum.name))
-                key = obj.name;
-            if (!key)
-                key = maxKey(this.fields);
-            const $path = ($key) => [this.path, $key].join(".").replace(/^\.+/, "");
-            const field = this.initField(key, $path(key), isValuesPayload ? tree[0] : lodash.merge(tree[0], obj));
+            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 (isValuesPayload) {
                 lodash.each(payloadKeys, (fieldName) => {
@@ -1559,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 ?? this.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
          */
@@ -2616,19 +2719,24 @@
         /* 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);
+            }
+            else {
+                $value = $get(e);
             }
-            if (!lodash.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.applyArrayValue(this, $value);
                 return;
             }
-            this.value = e;
+            this.value = $value;
         });
         onSync = (...args) => this.type === "file"
             ? this.onDrop(...args)
@@ -2832,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),
@@ -2847,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),