react-antd-xform 1.0.0

package/dist/form/model.js

@@ -0,0 +1,504 @@
+import invariant from "../node_modules/.pnpm/invariant@2.2.4/node_modules/invariant/browser.js";
+import { makeObservable, action, computed, observable, toJS } from "mobx";
+import { ModelType, FieldType } from "./enum.js";
+import { composeValue, observableGetIn, keyToValueShape, splitToPath, observableSetIn } from "./common-utils.js";
+const EMPTY_PATH = [];
+const ROOT_MODEL_CREATE_OPTIONS = {
+  modelType: ModelType.rootModel
+};
+class IdGenerator {
+  constructor(prefix) {
+    this._nextId = 1;
+    this.prefix = prefix;
+  }
+  getNextId() {
+    return `${this.prefix}_${this._nextId++}`;
+  }
+}
+class FormModel {
+  constructor(initValues, options = ROOT_MODEL_CREATE_OPTIONS) {
+    this.state = {};
+    this._fieldMap = /* @__PURE__ */ new Map();
+    this._valueShape = "auto";
+    this._checkMap = /* @__PURE__ */ new Map();
+    this._selfDeleted = false;
+    if ((options == null ? void 0 : options.modelType) === ModelType.subModel) {
+      this._modelType = ModelType.subModel;
+      this.parent = options.parent;
+      this.root = this.parent.root;
+      this.name = options.name;
+      this.id = this.root._modelIdGenerator.getNextId();
+    } else {
+      this._modelType = ModelType.rootModel;
+      this.parent = this;
+      this.root = this;
+      this.name = "";
+      this._modelIdGenerator = new IdGenerator("Model");
+      this._fieldIdGenerator = new IdGenerator("Field");
+      this.id = this._modelIdGenerator.getNextId();
+      this._values = composeValue(initValues, {});
+      if (this._values == null) {
+        console.warn("[xform] FormModel 根节点的初始 values 不能为 null");
+      }
+    }
+    makeObservable(
+      this,
+      {
+        // root model 才会使用 this._values
+        _values: this._modelType === ModelType.rootModel ? observable : false,
+        values: computed,
+        state: observable,
+        setValue: action,
+        // 注意 name 是可以变化的；在数组元素调换位置的情况下 name 会进行变更
+        name: observable.ref,
+        path: computed,
+        _selfDeleted: observable.ref,
+        isDeleted: computed,
+        _markDeleted: action
+      },
+      { name: `${this.id}(${this.name})` }
+    );
+  }
+  get values() {
+    if (this._modelType === ModelType.rootModel) {
+      return this._values;
+    } else {
+      return this.parent.getValue(this.name);
+    }
+  }
+  set values(nextValues) {
+    if (this.isDeleted) {
+      console.warn(
+        "[xform] 对已删除的 Model 进行赋值将被忽略。请不要对已删除的 Model/Field 进行操作。"
+      );
+      return;
+    }
+    if (this._modelType === ModelType.rootModel) {
+      if (nextValues == null) {
+        console.warn("[xform] FormModel 根节点的 values 不能设置为 null/undefined");
+      }
+      this._values = nextValues;
+    } else {
+      this.parent.setValue(this.name, nextValues);
+    }
+  }
+  get path() {
+    if (this._modelType == ModelType.rootModel) {
+      return EMPTY_PATH;
+    } else {
+      return [...this.parent.path, this.name];
+    }
+  }
+  getValue(name, defaultValue) {
+    return observableGetIn(this.values, String(name), defaultValue);
+  }
+  setValue(name, value) {
+    if (this.isDeleted) {
+      console.warn(
+        "[xform] 对已删除的 Model 进行赋值将被忽略。请不要对已删除的 Model/Field 进行操作。"
+      );
+      return;
+    }
+    if (this._modelType === ModelType.subModel && this.values == null) {
+      this._updateValueShape(keyToValueShape(splitToPath(String(name))[0]));
+      this.values = this._valueShape === "array" ? [] : {};
+    }
+    observableSetIn(this.values, name, value);
+  }
+  getSubModel(name) {
+    const path = Array.isArray(name) ? name : splitToPath(name);
+    let mod = this;
+    for (let i = 0; i < path.length - 1; i++) {
+      mod = mod._getSubModelByShortName(path[i]);
+    }
+    return mod._getSubModelByShortName(path[path.length - 1]);
+  }
+  getField(name) {
+    const path = Array.isArray(name) ? name : splitToPath(name);
+    if (path.length > 1) {
+      const lastName = path[path.length - 1];
+      const subModel = this.getSubModel(path.slice(0, -1));
+      return subModel.getField([lastName]);
+    }
+    const shortName = path[0];
+    this._updateValueShape(keyToValueShape(shortName));
+    let field = this._fieldMap.get(shortName);
+    if (field == null) {
+      field = new Field({
+        fieldType: FieldType.normal,
+        parent: this,
+        name: shortName
+      });
+      this._fieldMap.set(shortName, field);
+    }
+    return field;
+  }
+  getTupleField(...tupleParts) {
+    this._updateValueShape("object");
+    const name = `tuple(${tupleParts.join(",")})`;
+    let field = this._fieldMap.get(name);
+    if (field == null) {
+      field = new Field({
+        fieldType: FieldType.tuple,
+        parent: this,
+        name,
+        tupleParts
+      });
+      this._fieldMap.set(name, field);
+    }
+    return field;
+  }
+  _asField() {
+    if (this._modelType === ModelType.rootModel) {
+      throw new Error("[xform] 根节点下不支持使用 name=&。根节点的数据结构只能为普通对象。");
+    }
+    return this.parent.getField(this.name);
+  }
+  _updateValueShape(valueShape) {
+    if (this._valueShape === "auto") {
+      this._valueShape = valueShape;
+      this._subModels = valueShape === "object" ? {} : [];
+    } else {
+      invariant(
+        this._valueShape === valueShape,
+        "[xform] FormModel 的结构需要在使用过程中保持一致，一个数据索引对应的结构不能从数组变为对象，也不能从对象变为数组"
+      );
+    }
+  }
+  /** 递归前序遍历该 model 下所有的 model 对象（包含 model 本身） */
+  iterateModels(iteratee) {
+    iteratee(this);
+    if (this._subModels != null) {
+      for (const subModel of Object.values(this._subModels)) {
+        subModel.iterateModels(iteratee);
+      }
+    }
+  }
+  /** 递归遍历该 model 下（包括 model 本身）所有存在的 field 对象（包括 normal field 和 tuple field，也包括所有 fork） */
+  iterateFields(iteratee) {
+    this.iterateModels((model) => {
+      model._fieldMap.forEach((field) => {
+        field._forkMap.forEach(iteratee);
+      });
+    });
+  }
+  /** 递归遍历该 model 下（包括 model 本身）所有存在的 check 对象） */
+  iterateChecks(iteratee) {
+    this.iterateModels((model) => {
+      model._checkMap.forEach(iteratee);
+    });
+  }
+  _getSubModelByShortName(name) {
+    this._updateValueShape(keyToValueShape(name));
+    let subModel = this._subModels[name];
+    if (subModel == null) {
+      subModel = new FormModel(null, {
+        modelType: ModelType.subModel,
+        parent: this,
+        name
+      });
+      this._subModels[name] = subModel;
+    }
+    return subModel;
+  }
+  getCheck(name) {
+    let check = this._checkMap.get(name);
+    if (check == null) {
+      check = new Check(this, name);
+      this._checkMap.set(name, check);
+    }
+    return check;
+  }
+  /** 判断当前 model 是否已经删除 */
+  get isDeleted() {
+    if (this._selfDeleted) {
+      return true;
+    }
+    return this._modelType === ModelType.subModel && this.parent.isDeleted;
+  }
+  _markDeleted() {
+    invariant(this._modelType === ModelType.subModel, "只有 subModels 才允许被删除.");
+    this.name = "(deleted)";
+    this._selfDeleted = true;
+  }
+}
+class Check {
+  constructor(parent, name) {
+    this.isMounted = false;
+    this.config = null;
+    this.error = void 0;
+    this.cancelValidation = null;
+    this.validating = false;
+    this.parent = parent;
+    this.name = name;
+    makeObservable(this, {
+      path: computed,
+      validate: action,
+      error: observable,
+      cancelValidation: observable.ref,
+      validating: observable.ref
+    });
+  }
+  get path() {
+    return this.parent.path.concat([this.name]);
+  }
+  _track(config) {
+    if (this.isMounted) {
+      console.warn(`[xform] check \`${this.path.join(".")}\` 已在视图中被加载。`);
+      return;
+    }
+    this.config = config;
+    this.isMounted = true;
+    return () => {
+      this.config = null;
+      this.isMounted = false;
+    };
+  }
+  async validate() {
+    var _a;
+    if (!this.isMounted) {
+      return;
+    }
+    const { validate } = this.config;
+    let cancelled = false;
+    (_a = this.cancelValidation) == null ? void 0 : _a.call(this);
+    this.validating = true;
+    this.cancelValidation = action(() => {
+      cancelled = true;
+      this.cancelValidation = null;
+      this.validating = false;
+    });
+    const handleValidateResult = action((error) => {
+      if (cancelled) {
+        return;
+      }
+      this.cancelValidation = null;
+      this.validating = false;
+      this.error = error;
+      return error;
+    });
+    const model = this.parent;
+    const result = validate(toJS(model.values), model);
+    if (typeof (result == null ? void 0 : result.then) === "function") {
+      return Promise.resolve(result).then(handleValidateResult);
+    } else {
+      return handleValidateResult(result);
+    }
+  }
+}
+const _Field = class _Field {
+  constructor(opts) {
+    this.config = null;
+    this.isMounted = false;
+    this.state = {};
+    this.handleFocus = () => {
+    };
+    this.handleBlur = () => {
+      return this.validate("blur");
+    };
+    this.handleChange = (nextValue, ...rest) => {
+      var _a, _b, _c;
+      if (nextValue === void 0 && ((_a = this.config) == null ? void 0 : _a.defaultValue) !== void 0) {
+        console.warn(
+          "[xform] xform 中所有组件均为受控用法，不支持 onChange(undefined)，该调用将自动变为 onChange(null)"
+        );
+        nextValue = null;
+      }
+      this.value = nextValue;
+      (_c = (_b = this.config) == null ? void 0 : _b.afterChange) == null ? void 0 : _c.call(_b, nextValue, ...rest);
+      return this.validate("change");
+    };
+    this.clear = () => {
+      var _a, _b;
+      if (this.isDeleted) {
+        return;
+      }
+      const parent = this.parent;
+      (_b = (_a = this.state).cancelValidation) == null ? void 0 : _b.call(_a);
+      this.state.error = null;
+      if (parent.values == null) {
+        return;
+      }
+      if (this.fieldType === FieldType.normal) {
+        delete parent.values[this.name];
+      } else if (this.fieldType === FieldType.tuple) {
+        for (const part of this._tupleParts) {
+          delete parent.values[part];
+        }
+      }
+    };
+    this.fieldType = opts.fieldType;
+    this.parent = opts.parent;
+    this.name = opts.name;
+    this.id = this.parent.root._fieldIdGenerator.getNextId();
+    this._forkName = opts.forkName ?? _Field.ORIGINAL;
+    if (opts.fieldType === FieldType.tuple) {
+      this._tupleParts = opts.tupleParts;
+    } else if (opts.fieldType === FieldType.readonly) {
+      this._readonlyValue = opts.value;
+    }
+    const name = this.name;
+    const forkName = this._forkName;
+    makeObservable(
+      this,
+      {
+        state: observable,
+        value: computed,
+        path: computed,
+        validate: action,
+        handleBlur: action,
+        handleChange: action,
+        clear: action,
+        isDeleted: computed
+      },
+      {
+        name: `${this.id}(${name}${forkName === _Field.ORIGINAL ? "" : "#" + forkName})`
+      }
+    );
+    if (forkName === _Field.ORIGINAL) {
+      this._forkMap = /* @__PURE__ */ new Map();
+    } else {
+      const original = this.parent.getField(name);
+      this._forkMap = original._forkMap;
+    }
+    this._forkMap.set(forkName, this);
+  }
+  static getHtmlId(prefix, field) {
+    if (prefix == null || typeof prefix !== "string") {
+      return void 0;
+    }
+    const path = field.path.join(".");
+    const fork = field._forkName !== _Field.ORIGINAL ? `#${field._forkName}` : "";
+    return `${prefix}${path}${fork}`;
+  }
+  get value() {
+    if (this.fieldType === FieldType.normal) {
+      return this.parent.getValue(this.name);
+    } else if (this.fieldType === FieldType.tuple) {
+      return this._tupleParts.map((part) => this.parent.getValue(part));
+    } else if (this.fieldType === FieldType.readonly) {
+      return this._readonlyValue;
+    }
+  }
+  set value(value) {
+    if (this.isDeleted) {
+      console.warn(
+        "[xform] 对已删除的 Field 进行赋值将被忽略。请不要对已删除的 Model/Field 进行操作。"
+      );
+      return;
+    }
+    if (this.fieldType === FieldType.normal) {
+      this.parent.setValue(this.name, value);
+    } else if (this.fieldType === FieldType.tuple) {
+      this._tupleParts.forEach((part, index) => {
+        this.parent.setValue(part, value == null ? value : value[index]);
+      });
+    } else if (this.fieldType === FieldType.readonly) {
+      console.warn(
+        "[xform] 对只读 Field 进行赋值将被忽略，请检查是否为 FormItem 设置了 props.name 或 props.field."
+      );
+    }
+  }
+  get path() {
+    return this.parent.path.concat([this.name]);
+  }
+  _track(config) {
+    if (this.isMounted) {
+      console.warn(
+        `[xform] field \`${this.path.join(
+          "."
+        )}\` 已在视图中被加载，你需要 fork 该字段来进行多次加载.`
+      );
+      return;
+    }
+    this.config = config;
+    this.isMounted = true;
+    return () => {
+      this.config = null;
+      this.isMounted = false;
+    };
+  }
+  getFork(forkName) {
+    if (this._forkMap.has(forkName)) {
+      return this._forkMap.get(forkName);
+    } else {
+      const common = { parent: this.parent, name: this.name, forkName };
+      if (this.fieldType === FieldType.normal) {
+        return new _Field({ fieldType: FieldType.normal, ...common });
+      } else if (this.fieldType === FieldType.tuple) {
+        return new _Field({
+          fieldType: FieldType.tuple,
+          tupleParts: this._tupleParts,
+          ...common
+        });
+      } else if (this.fieldType === FieldType.readonly) {
+        return new _Field({
+          fieldType: FieldType.readonly,
+          value: this._readonlyValue,
+          ...common
+        });
+      }
+    }
+  }
+  async validate(trigger = "*") {
+    var _a, _b;
+    if (!this.isMounted) {
+      return;
+    }
+    const {
+      validate,
+      defaultValue,
+      isEmpty,
+      required,
+      requiredMessage = "该字段为必填项",
+      validateOnMount,
+      validateOnBlur,
+      validateOnChange
+    } = this.config;
+    const needValidate = trigger === "*" || validateOnBlur && trigger === "blur" || validateOnMount && trigger === "mount" || validateOnChange && trigger === "change";
+    if (!needValidate) {
+      return;
+    }
+    let cancelled = false;
+    (_b = (_a = this.state).cancelValidation) == null ? void 0 : _b.call(_a);
+    this.state.validating = true;
+    this.state.cancelValidation = action(() => {
+      cancelled = true;
+      this.state.cancelValidation = null;
+      this.state.validating = false;
+    });
+    const handleValidateResult = action((error) => {
+      if (cancelled) {
+        return;
+      }
+      this.state.cancelValidation = null;
+      this.state.validating = false;
+      this.state.error = error;
+      return error;
+    });
+    const value = toJS(composeValue(this.value, defaultValue));
+    if (required && isEmpty(value)) {
+      return handleValidateResult(requiredMessage);
+    }
+    if (validate) {
+      const result = validate(value, this, trigger);
+      if (typeof (result == null ? void 0 : result.then) === "function") {
+        return Promise.resolve(result).then(handleValidateResult);
+      } else {
+        return handleValidateResult(result);
+      }
+    } else {
+      return handleValidateResult(null);
+    }
+  }
+  get isDeleted() {
+    return this.parent.isDeleted;
+  }
+};
+_Field.ORIGINAL = "original";
+let Field = _Field;
+export {
+  Check,
+  Field,
+  FormModel
+};