@flowgram.ai/form 0.1.6 → 0.1.7

package/dist/index.js

@@ -105,6 +105,16 @@ function shallowSetIn(obj, path, value) {
   }
   return res;
 }
+function keepValidKeys(obj, validKeys) {
+  const validKeysSet = new Set(validKeys);
+  const newObj = {};
+  Object.keys(obj).forEach((key) => {
+    if (validKeysSet.has(key)) {
+      newObj[key] = obj[key];
+    }
+  });
+  return newObj;
+}
 
 // src/utils/dom.ts
 function isReactChangeEvent(e) {
@@ -522,6 +532,9 @@ function toForm(model) {
     get values() {
       return model.values;
     },
+    set values(v) {
+      model.values = v;
+    },
     state: toFormState(model.state),
     getValueIn: (name) => model.getValueIn(name),
     setValueIn: (name, value) => model.setValueIn(name, value)
@@ -622,7 +635,8 @@ function Field({
       if (fieldModel.renderCount > 1) {
         fieldModel.renderCount = fieldModel.renderCount - 1;
       } else {
-        fieldModel.dispose();
+        const newFieldModel = formModel.getField(fieldModel.name);
+        if (newFieldModel === fieldModel) fieldModel.dispose();
       }
     };
   }, [fieldModel]);
@@ -738,6 +752,9 @@ var Store = class {
   get values() {
     return this._values;
   }
+  set values(v) {
+    this._values = v;
+  }
   setInitialValues(values) {
     this._values = values;
   }
@@ -1139,6 +1156,7 @@ var FieldArrayModel = class extends FieldModel {
       f.dispose();
     });
     this.form.fieldMap = newFieldMap;
+    this.form.alignStateWithFieldMap();
   }
   swap(from, to) {
     if (!this.value) {
@@ -1214,6 +1232,15 @@ var FormModel = class {
   get values() {
     return (0, import_lodash8.cloneDeep)(this.store.values) || (0, import_lodash8.cloneDeep)(this.initialValues);
   }
+  set values(v) {
+    const prevValues = this.values;
+    this.store.values = v;
+    this.fireOnFormValuesChange({
+      values: this.values,
+      prevValues,
+      name: ""
+    });
+  }
   get validationTrigger() {
     return this._options.validateTrigger;
   }
@@ -1376,6 +1403,23 @@ var FormModel = class {
     this.onValidateEmitter.fire(this.state);
     return (0, import_lodash8.flatten)(feedbacksArr).filter(Boolean);
   }
+  alignStateWithFieldMap() {
+    const keys = Array.from(this.fieldMap.keys());
+    if (this.state.errors) {
+      this.state.errors = keepValidKeys(this.state.errors, keys);
+    }
+    if (this.state.warnings) {
+      this.state.warnings = keepValidKeys(this.state.warnings, keys);
+    }
+    this.fieldMap.forEach((f) => {
+      if (f.state.errors) {
+        f.state.errors = keepValidKeys(f.state.errors, keys);
+      }
+      if (f.state.warnings) {
+        f.state.warnings = keepValidKeys(f.state.warnings, keys);
+      }
+    });
+  }
   dispose() {
     this.fieldMap.forEach((f) => f.dispose());
     this.store.dispose();
@@ -1432,9 +1476,9 @@ function useForm() {
 
 // src/react/use-watch.ts
 var import_react4 = require("react");
-var import_utils13 = require("@flowgram.ai/utils");
+var import_utils14 = require("@flowgram.ai/utils");
 function useWatch(name) {
-  const refresh = (0, import_utils13.useRefresh)();
+  const refresh = (0, import_utils14.useRefresh)();
   const formModel = useFormModel();
   if (!formModel) {
     throw new Error("[Form] error in useWatch, formModel not found");
@@ -1454,7 +1498,7 @@ function useWatch(name) {
 // src/react/field-array.tsx
 var React4 = __toESM(require("react"));
 var import_lodash10 = require("lodash");
-var import_utils15 = require("@flowgram.ai/utils");
+var import_utils16 = require("@flowgram.ai/utils");
 var import_reactive4 = require("@flowgram.ai/reactive");
 function FieldArray({
   name,
@@ -1469,7 +1513,7 @@ function FieldArray({
     []
   );
   const field = React4.useMemo(() => toFieldArray(fieldModel), [fieldModel]);
-  const refresh = (0, import_utils15.useRefresh)();
+  const refresh = (0, import_utils16.useRefresh)();
   const fieldModelState = (0, import_reactive4.useReadonlyReactiveState)(fieldModel.reactiveState);
   const formModelState = (0, import_reactive4.useReadonlyReactiveState)(formModel.reactiveState);
   const fieldState = toFieldState(fieldModelState);
@@ -1480,7 +1524,7 @@ function FieldArray({
       formModel.setInitValueIn(name, defaultValue);
       refresh();
     }
-    const disposableCollection = new import_utils15.DisposableCollection();
+    const disposableCollection = new import_utils16.DisposableCollection();
     disposableCollection.push(
       fieldModel.onValueChange(() => {
         refresh();
@@ -1501,7 +1545,8 @@ function FieldArray({
       if (fieldModel.renderCount > 1) {
         fieldModel.renderCount = fieldModel.renderCount - 1;
       } else {
-        fieldModel.dispose();
+        const newFieldModel = formModel.getField(fieldModel.name);
+        if (newFieldModel === fieldModel) fieldModel.dispose();
       }
     };
   }, [fieldModel]);
@@ -1519,11 +1564,11 @@ function FieldArray({
 
 // src/react/use-field.ts
 var import_react5 = require("react");
-var import_utils17 = require("@flowgram.ai/utils");
+var import_utils18 = require("@flowgram.ai/utils");
 function useField(name) {
   const currentFieldModel = (0, import_react5.useContext)(FieldModelContext);
   const formModel = useFormModel();
-  const refresh = (0, import_utils17.useRefresh)();
+  const refresh = (0, import_utils18.useRefresh)();
   const fieldModel = name ? formModel.getField(name) : currentFieldModel;
   (0, import_react5.useEffect)(() => {
     let disposable;