@flowgram.ai/form 0.1.0-alpha.3 → 0.1.0-alpha.31

package/dist/esm/index.js

@@ -1,11 +1,11 @@
 // src/react/field.tsx
 import * as React2 from "react";
-import { isFunction } from "lodash";
+import { isFunction } from "lodash-es";
 import { DisposableCollection, useRefresh } from "@flowgram.ai/utils";
 import { useReadonlyReactiveState } from "@flowgram.ai/reactive";
 
 // src/utils/object.ts
-import { clone, toPath } from "lodash";
+import { clone, toPath } from "lodash-es";
 var isObject = (obj) => obj !== null && typeof obj === "object";
 var isInteger = (obj) => String(Math.floor(Number(obj))) === obj;
 function getIn(obj, key, def, p = 0) {
@@ -33,17 +33,10 @@ function shallowSetIn(obj, path, value) {
       resVal = resVal[currentPath] = isInteger(nextPath) && Number(nextPath) >= 0 ? [] : {};
     }
   }
-  if ((i === 0 ? obj : resVal)[pathArray[i]] === value) {
+  if ((i === 0 ? obj : resVal)[pathArray[i]] === value && pathArray[i] in obj) {
     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) {
@@ -66,7 +59,7 @@ function isCheckBoxEvent(e) {
 }
 
 // src/utils/glob.ts
-import { flatten, get, isArray, isObject as isObject2 } from "lodash";
+import { flatten, get, isArray, isObject as isObject2 } from "lodash-es";
 var Glob;
 ((Glob2) => {
   Glob2.DIVIDER = ".";
@@ -175,7 +168,7 @@ var Glob;
     let curPaths = [];
     let curValue = obj;
     while (curKey) {
-      let isObject3 = typeof curValue === "object";
+      let isObject3 = typeof curValue === "object" && curValue !== null;
       if (!isObject3) return [];
       if (curKey === Glob2.ALL) {
         const parentPath = curPaths.join(Glob2.DIVIDER);
@@ -201,18 +194,20 @@ 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 FeedbackLevel = /* @__PURE__ */ ((FeedbackLevel2) => {
+  FeedbackLevel2["Error"] = "error";
+  FeedbackLevel2["Warning"] = "warning";
+  return FeedbackLevel2;
+})(FeedbackLevel || {});
 var ValidateTrigger = /* @__PURE__ */ ((ValidateTrigger2) => {
   ValidateTrigger2["onChange"] = "onChange";
   ValidateTrigger2["onBlur"] = "onBlur";
@@ -220,10 +215,10 @@ var ValidateTrigger = /* @__PURE__ */ ((ValidateTrigger2) => {
 })(ValidateTrigger || {});
 
 // src/core/utils.ts
-import { isEmpty, isEqual } from "lodash";
+import { isEmpty, isEqual } from "lodash-es";
 
 // src/core/path.ts
-import { toPath as toPath2 } from "lodash";
+import { toPath as toPath2 } from "lodash-es";
 var Path = class _Path {
   constructor(path) {
     this._path = [];
@@ -309,14 +304,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 +324,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 +385,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 +473,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,
@@ -550,6 +546,11 @@ function Field({
   const formState = toFormState(formModelState);
   const refresh = useRefresh();
   React2.useEffect(() => {
+    if (fieldModel.disposed) {
+      refresh();
+      return () => {
+      };
+    }
     fieldModel.renderCount = fieldModel.renderCount + 1;
     if (!formModel.getValueIn(name) !== void 0 && defaultValue !== void 0) {
       formModel.setInitValueIn(name, defaultValue);
@@ -590,12 +591,13 @@ function Field({
     }
     return React2.cloneElement(children, { ...field });
   };
+  if (fieldModel.disposed) return /* @__PURE__ */ React2.createElement(React2.Fragment, null);
   return /* @__PURE__ */ React2.createElement(FieldModelContext.Provider, { value: fieldModel }, renderInner());
 }
 
 // src/react/form.tsx
 import React3, { Children, useEffect as useEffect2, useMemo as useMemo2 } from "react";
-import { isFunction as isFunction2 } from "lodash";
+import { isFunction as isFunction2 } from "lodash-es";
 
 // src/core/to-field-array.ts
 function toFieldArray(model) {
@@ -614,7 +616,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)
   };
@@ -628,7 +635,8 @@ function toFieldArray(model) {
 }
 
 // src/core/form-model.ts
-import { cloneDeep, flatten as flatten2, get as get4 } from "lodash";
+import { flatten as flatten2, get as get4 } from "lodash-es";
+import { deepEqual } from "fast-equals";
 import { Emitter as Emitter3 } from "@flowgram.ai/utils";
 import { ReactiveState as ReactiveState2 } from "@flowgram.ai/reactive";
 
@@ -652,14 +660,7 @@ function feedbackToFieldErrorsOrWarnings(name, feedback) {
     [name]: feedback ? [feedback] : []
   };
 }
-var hasError = (errors) => {
-  for (let fieldErrors in errors) {
-    if (fieldErrors.length) {
-      return true;
-    }
-  }
-  return false;
-};
+var hasError = (errors) => Object.keys(errors).some((key) => errors[key]?.length > 0);
 
 // src/constants.ts
 var DEFAULT_FIELD_STATE = {
@@ -688,22 +689,19 @@ function createFieldModelState(initialState) {
 }
 
 // src/core/store.ts
-import { get as get2 } from "lodash";
+import { get as get2, clone as clone2, cloneDeep } from "lodash-es";
 var Store = class {
   get values() {
-    return this._values;
+    return clone2(this._values);
   }
   set values(v) {
-    this._values = v;
-  }
-  setInitialValues(values) {
-    this._values = values;
+    this._values = cloneDeep(v);
   }
   setIn(path, value) {
     this._values = shallowSetIn(this._values || {}, path.toString(), value);
   }
   getIn(path) {
-    return get2(this._values, path.value);
+    return get2(this.values, path.value);
   }
   dispose() {
   }
@@ -711,7 +709,7 @@ var Store = class {
 
 // src/core/field-model.ts
 import { nanoid } from "nanoid";
-import { get as get3, groupBy, some } from "lodash";
+import { get as get3, groupBy, some } from "lodash-es";
 import { DisposableCollection as DisposableCollection2, Emitter } from "@flowgram.ai/utils";
 import { ReactiveState } from "@flowgram.ai/reactive";
 var FieldModel = class {
@@ -932,21 +930,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 };
   }
@@ -960,6 +956,9 @@ var FieldModel = class {
   onDispose(fn) {
     this.toDispose.onDispose(fn);
   }
+  get disposed() {
+    return this.toDispose.disposed;
+  }
 };
 
 // src/core/field-array-model.ts
@@ -983,7 +982,7 @@ var FieldArrayModel = class extends FieldModel {
       const p1 = f1.path.value;
       const p2 = f2.path.value;
       const i1 = parseInt(p1[p1.length - 1]);
-      const i2 = parseInt(p1[p2.length - 1]);
+      const i2 = parseInt(p2[p2.length - 1]);
       return i1 - i2;
     });
   }
@@ -1027,7 +1026,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) {
@@ -1108,12 +1107,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) {
@@ -1130,6 +1166,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
@@ -1152,6 +1223,7 @@ var FormModel = class {
       createFormModelState()
     );
     this._initialized = false;
+    this.validateDisabled = false;
   }
   set fieldMap(map) {
     this._fieldMap = map;
@@ -1171,10 +1243,13 @@ var FormModel = class {
     return this._options.initialValues;
   }
   get values() {
-    return cloneDeep(this.store.values) || cloneDeep(this.initialValues);
+    return this.store.values;
   }
   set values(v) {
     const prevValues = this.values;
+    if (deepEqual(prevValues, v)) {
+      return;
+    }
     this.store.values = v;
     this.fireOnFormValuesChange({
       values: this.values,
@@ -1211,7 +1286,7 @@ var FormModel = class {
     this._options = options;
     if (options.initialValues) {
       const prevValues = this.store.values;
-      this.store.setInitialValues(options.initialValues);
+      this.store.values = options.initialValues;
       this.fireOnFormValuesInit({
         values: options.initialValues,
         prevValues,
@@ -1290,41 +1365,60 @@ var FormModel = class {
     this.setValueIn(name, void 0);
   }
   async validateIn(name) {
-    if (!this._options.validate) {
+    if (this.validateDisabled) return [];
+    const validateOptions = this.getValidateOptions();
+    if (!validateOptions) {
       return;
     }
-    const validateKey = Object.keys(this._options.validate).find(
+    const validateKeys = Object.keys(validateOptions).filter(
       (pattern) => Glob.isMatch(pattern, name)
     );
-    if (validateKey) {
-      const validate = this._options.validate[validateKey];
+    const validatePromises = validateKeys.map(async (validateKey) => {
+      const validate = validateOptions[validateKey];
       return validate({
         value: this.getValueIn(name),
         formValues: this.values,
         context: this.context,
         name
       });
+    });
+    return Promise.all(validatePromises);
+  }
+  getValidateOptions() {
+    const validate = this._options.validate;
+    if (typeof validate === "function") {
+      return validate(this.values, this.context);
     }
+    return validate;
   }
   async validate() {
-    if (!this._options.validate) {
+    if (this.validateDisabled) return [];
+    const validateOptions = this.getValidateOptions();
+    if (!validateOptions) {
       return [];
     }
-    const feedbacksArrPromises = Object.keys(this._options.validate).map(async (nameRule) => {
-      const validate = this._options.validate[nameRule];
-      const paths = Glob.findMatchPathsWithEmptyValue(this.values, nameRule);
+    const feedbacksArrPromises = Object.keys(validateOptions).map(async (nameRule) => {
+      const validate = validateOptions[nameRule];
+      const values = this.values;
+      const paths = Glob.findMatchPathsWithEmptyValue(values, nameRule);
       return Promise.all(
         paths.map(async (path) => {
           const result = await validate({
-            value: get4(this.values, path),
-            formValues: this.values,
+            value: get4(values, path),
+            formValues: values,
             context: this.context,
             name: path
           });
           const feedback = toFeedback(result, path);
           const field = this.getField(path);
-          const errors = feedbackToFieldErrorsOrWarnings(path, feedback);
-          const warnings = feedbackToFieldErrorsOrWarnings(path, feedback);
+          const errors = feedbackToFieldErrorsOrWarnings(
+            path,
+            feedback?.level === "error" /* Error */ ? feedback : void 0
+          );
+          const warnings = feedbackToFieldErrorsOrWarnings(
+            path,
+            feedback?.level === "warning" /* Warning */ ? feedback : void 0
+          );
           if (field) {
             field.state.errors = errors;
             field.state.warnings = warnings;
@@ -1391,6 +1485,10 @@ function createForm(options) {
 }
 
 // src/react/form.tsx
+function FormContentRender(props) {
+  const { form, render } = props;
+  return /* @__PURE__ */ React3.createElement(React3.Fragment, null, render({ form }));
+}
 function Form(props) {
   const { children, keepModelOnUnMount = false, control, ...restOptions } = props;
   const { _formModel: formModel } = useMemo2(
@@ -1406,7 +1504,7 @@ function Form(props) {
     []
   );
   const form = useMemo2(() => toForm(formModel), [formModel]);
-  return /* @__PURE__ */ React3.createElement(FormModelContext.Provider, { value: formModel }, children ? isFunction2(children) ? children({ form }) : Children.only(children) : null);
+  return /* @__PURE__ */ React3.createElement(FormModelContext.Provider, { value: formModel }, children ? isFunction2(children) ? /* @__PURE__ */ React3.createElement(FormContentRender, { form, render: children }) : Children.only(children) : null);
 }
 
 // src/react/use-form.ts
@@ -1438,7 +1536,7 @@ function useWatch(name) {
 
 // src/react/field-array.tsx
 import * as React4 from "react";
-import { isFunction as isFunction3 } from "lodash";
+import { isFunction as isFunction3 } from "lodash-es";
 import { DisposableCollection as DisposableCollection3, useRefresh as useRefresh3 } from "@flowgram.ai/utils";
 import { useReadonlyReactiveState as useReadonlyReactiveState2 } from "@flowgram.ai/reactive";
 function FieldArray({
@@ -1449,10 +1547,7 @@ function FieldArray({
   children
 }) {
   const formModel = useFormModel();
-  const fieldModel = React4.useMemo(
-    () => formModel.getField(name) || formModel.createFieldArray(name),
-    []
-  );
+  const fieldModel = formModel.getField(name) || formModel.createFieldArray(name);
   const field = React4.useMemo(() => toFieldArray(fieldModel), [fieldModel]);
   const refresh = useRefresh3();
   const fieldModelState = useReadonlyReactiveState2(fieldModel.reactiveState);
@@ -1460,6 +1555,11 @@ function FieldArray({
   const fieldState = toFieldState(fieldModelState);
   const formState = React4.useMemo(() => toFormState(formModelState), [formModelState]);
   React4.useEffect(() => {
+    if (fieldModel.disposed) {
+      refresh();
+      return () => {
+      };
+    }
     fieldModel.renderCount = fieldModel.renderCount + 1;
     if (!formModel.getValueIn(name) !== void 0 && defaultValue !== void 0) {
       formModel.setInitValueIn(name, defaultValue);
@@ -1500,6 +1600,7 @@ function FieldArray({
     }
     return /* @__PURE__ */ React4.createElement(React4.Fragment, null, "Invalid Array render");
   };
+  if (fieldModel.disposed) return /* @__PURE__ */ React4.createElement(React4.Fragment, null);
   return /* @__PURE__ */ React4.createElement(FieldModelContext.Provider, { value: fieldModel }, renderInner());
 }
 
@@ -1578,6 +1679,7 @@ function useCurrentFieldState() {
   return useMemo4(() => toFieldState(fieldModelState), [fieldModelState]);
 }
 export {
+  FeedbackLevel,
   Field,
   FieldArray,
   FieldArrayModel,