@flowgram.ai/form 0.1.14 → 0.1.16

package/dist/esm/index.js

@@ -36,14 +36,7 @@ function shallowSetIn(obj, path, value) {
   if ((i === 0 ? obj : resVal)[pathArray[i]] === value) {
     return obj;
   }
-  if (value === void 0) {
-    delete resVal[pathArray[i]];
-  } else {
-    resVal[pathArray[i]] = value;
-  }
-  if (i === 0 && value === void 0) {
-    delete res[pathArray[i]];
-  }
+  resVal[pathArray[i]] = value;
   return res;
 }
 function keepValidKeys(obj, validKeys) {
@@ -309,14 +302,14 @@ var Path = class _Path {
   replaceParent(parent, newParent) {
     if (parent.value.length > this.value.length) {
       throw new Error(
-        `[Form] Error in Path.getChildSuffixByParent: invalid parent param: ${parent}, parent length should not greater than current length.`
+        `[Form] Error in Path.replaceParent: invalid parent param: ${parent}, parent length should not greater than current length.`
       );
     }
     const rest = [];
     for (let i = 0; i < this.value.length; i++) {
       if (i < parent.value.length && parent.value[i] !== this.value[i]) {
         throw new Error(
-          `[Form] Error in Path.getChildSuffixByParent: invalid parent param: ${parent}`
+          `[Form] Error in Path.replaceParent: invalid parent param: '${parent}' is not a parent of '${this.toString()}'`
         );
       }
       if (i >= parent.value.length) {
@@ -329,7 +322,7 @@ var Path = class _Path {
 
 // src/core/utils.ts
 function updateFeedbacksName(feedbacks, name) {
-  return feedbacks.map((f) => ({
+  return (feedbacks || []).map((f) => ({
     ...f,
     name
   }));
@@ -390,7 +383,7 @@ var FieldEventUtils;
   FieldEventUtils2.shouldTriggerFieldChangeEvent = shouldTriggerFieldChangeEvent;
   function shouldTriggerFieldValidateWhenChange(payload, fieldName) {
     const { name: changedName, options } = payload;
-    if (options?.action === "array-splice") {
+    if (options?.action === "array-splice" || options?.action === "array-swap") {
       return fieldName === changedName;
     }
     return FieldEventUtils2.shouldTriggerFieldChangeEvent(payload, fieldName);
@@ -478,7 +471,8 @@ function toForm(model) {
     },
     state: toFormState(model.state),
     getValueIn: (name) => model.getValueIn(name),
-    setValueIn: (name, value) => model.setValueIn(name, value)
+    setValueIn: (name, value) => model.setValueIn(name, value),
+    validate: model.validate.bind(model)
   };
   Object.defineProperty(res, "_formModel", {
     enumerable: false,
@@ -614,7 +608,12 @@ function toFieldArray(model) {
     },
     map: (cb) => model.map((f, index) => cb(toField(f), index)),
     append: (value) => toField(model.append(value)),
+    /**
+     * @deprecated: use remove instead
+     * @param index
+     */
     delete: (index) => model.delete(index),
+    remove: (index) => model.delete(index),
     swap: (from, to) => model.swap(from, to),
     move: (from, to) => model.move(from, to)
   };
@@ -1020,7 +1019,7 @@ var FieldArrayModel = class extends FieldModel {
     return newElemField;
   }
   /**
-   * 删除数组项，该操作会删除数组项的值并销毁数组项的Field模型
+   * Delete the element in given index and delete the corresponding FieldModel as well
    * @param index
    */
   delete(index) {
@@ -1101,12 +1100,49 @@ var FieldArrayModel = class extends FieldModel {
         `[Form]: FieldArrayModel.swap Error: invalid params 'form' and 'to', form=${from} to=${to}. expect the value between 0 to ${length - 1}`
       );
     }
+    const oldFormValues = this.form.values;
     const tempValue = [...this.value];
     const fromValue = tempValue[from];
     const toValue = tempValue[to];
     tempValue[to] = fromValue;
     tempValue[from] = toValue;
-    this.form.setValueIn(this.name, tempValue);
+    this.form.store.setIn(this.path, tempValue);
+    this.form.fireOnFormValuesChange({
+      values: this.form.values,
+      prevValues: oldFormValues,
+      name: this.name,
+      options: {
+        action: "array-swap",
+        indexes: [from, to]
+      }
+    });
+    const newFieldMap = new Map(this.form.fieldMap);
+    const fromFields = this.findAllFieldsAt(from);
+    const toFields = this.findAllFieldsAt(to);
+    const fromRootPath = this.getPathAt(from);
+    const toRootPath = this.getPathAt(to);
+    const leafFieldsModified = [];
+    fromFields.forEach((f) => {
+      const newName = f.path.replaceParent(fromRootPath, toRootPath).toString();
+      f.name = newName;
+      if (!f.children.length) {
+        f.updateNameForLeafState(newName);
+        leafFieldsModified.push(f);
+      }
+      newFieldMap.set(newName, f);
+    });
+    toFields.forEach((f) => {
+      const newName = f.path.replaceParent(toRootPath, fromRootPath).toString();
+      f.name = newName;
+      if (!f.children.length) {
+        f.updateNameForLeafState(newName);
+      }
+      newFieldMap.set(newName, f);
+      leafFieldsModified.push(f);
+    });
+    this.form.fieldMap = newFieldMap;
+    leafFieldsModified.forEach((f) => f.bubbleState());
+    this.form.alignStateWithFieldMap();
   }
   move(from, to) {
     if (!this.value) {
@@ -1123,6 +1159,41 @@ var FieldArrayModel = class extends FieldModel {
     tempValue.splice(to, 0, fromValue);
     this.form.setValueIn(this.name, tempValue);
   }
+  insertAt(index, value) {
+    if (!this.value) {
+      return;
+    }
+    if (index < 0 || index > this.value.length) {
+      throw new Error(`[Form]: FieldArrayModel.insertAt Error: index exceeds array boundary`);
+    }
+    const tempValue = [...this.value];
+    tempValue.splice(index, 0, value);
+    this.form.setValueIn(this.name, tempValue);
+  }
+  /**
+   * get element path at given index
+   * @param index
+   * @protected
+   */
+  getPathAt(index) {
+    return this.path.concat(index);
+  }
+  /**
+   * find all fields including child and grandchild fields at given index.
+   * @param index
+   * @protected
+   */
+  findAllFieldsAt(index) {
+    const rootPath = this.getPathAt(index);
+    const rootPathString = rootPath.toString();
+    const res = this.form.fieldMap.get(rootPathString) ? [this.form.fieldMap.get(rootPathString)] : [];
+    this.form.fieldMap.forEach((field, fieldName) => {
+      if (rootPath.isChildOrGrandChild(fieldName)) {
+        res.push(field);
+      }
+    });
+    return res;
+  }
 };
 
 // src/core/form-model.ts
@@ -1444,7 +1515,7 @@ function FieldArray({
   const formModel = useFormModel();
   const fieldModel = React4.useMemo(
     () => formModel.getField(name) || formModel.createFieldArray(name),
-    []
+    [name]
   );
   const field = React4.useMemo(() => toFieldArray(fieldModel), [fieldModel]);
   const refresh = useRefresh3();