@flowgram.ai/form 0.1.0-alpha.4 → 0.1.0-alpha.6

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) {
@@ -201,18 +194,15 @@ var Glob;
   }
   Glob2.findMatchPaths = findMatchPaths;
   function findMatchPathsWithEmptyValue(obj, pattern) {
+    if (!pattern.includes("*")) {
+      return [pattern];
+    }
     return findMatchPaths(obj, pattern, true);
   }
   Glob2.findMatchPathsWithEmptyValue = findMatchPathsWithEmptyValue;
 })(Glob || (Glob = {}));
 
 // src/types/validate.ts
-function isFieldWarning(f) {
-  if (f.level === "warning" /* Warning */) {
-    return true;
-  }
-  return false;
-}
 var ValidateTrigger = /* @__PURE__ */ ((ValidateTrigger2) => {
   ValidateTrigger2["onChange"] = "onChange";
   ValidateTrigger2["onBlur"] = "onBlur";
@@ -309,14 +299,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 +319,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 +380,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 +468,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 +605,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)
   };
@@ -925,21 +921,19 @@ var FieldModel = class {
     this.form.onValidateEmitter.fire(this.form.state);
   }
   async _runAsyncValidate() {
-    const errors = [];
-    const warnings = [];
-    const result = await this.form.validateIn(this.name);
-    if (!result) {
+    let errors = [];
+    let warnings = [];
+    const results = await this.form.validateIn(this.name);
+    if (!results?.length) {
       return {};
     } else {
-      const feedback = toFeedback(result, this.name);
-      if (!feedback) {
+      const feedbacks = results.map((result) => toFeedback(result, this.name)).filter(Boolean);
+      if (!feedbacks?.length) {
         return {};
       }
-      if (isFieldWarning(feedback)) {
-        warnings.push(feedback);
-      } else {
-        errors.push(feedback);
-      }
+      const groupedFeedbacks = groupBy(feedbacks, "level");
+      warnings = warnings.concat(groupedFeedbacks["warning" /* Warning */]);
+      errors = errors.concat(groupedFeedbacks["error" /* Error */]);
     }
     return { errors, warnings };
   }
@@ -1020,7 +1014,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 +1095,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 +1154,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
@@ -1286,10 +1352,10 @@ var FormModel = class {
     if (!this._options.validate) {
       return;
     }
-    const validateKey = Object.keys(this._options.validate).find(
+    const validateKeys = Object.keys(this._options.validate).filter(
       (pattern) => Glob.isMatch(pattern, name)
     );
-    if (validateKey) {
+    const validatePromises = validateKeys.map(async (validateKey) => {
       const validate = this._options.validate[validateKey];
       return validate({
         value: this.getValueIn(name),
@@ -1297,7 +1363,8 @@ var FormModel = class {
         context: this.context,
         name
       });
-    }
+    });
+    return Promise.all(validatePromises);
   }
   async validate() {
     if (!this._options.validate) {
@@ -1319,7 +1386,6 @@ var FormModel = class {
           const errors = feedbackToFieldErrorsOrWarnings(path, feedback);
           const warnings = feedbackToFieldErrorsOrWarnings(path, feedback);
           if (field) {
-            debugger;
             field.state.errors = errors;
             field.state.warnings = warnings;
             field.state.invalid = hasError(errors);
@@ -1445,7 +1511,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();