react-antd-xform 1.0.0

package/dist/form/model-utils.js

@@ -0,0 +1,171 @@
+import { action, runInAction, observable, toJS } from "mobx";
+import { FieldType } from "./enum.js";
+import { observableSetIn } from "./common-utils.js";
+const modelUtils = {
+  clearError: action(function(model) {
+    model.iterateFields((field) => {
+      field.state.error = null;
+    });
+    model.iterateChecks((check) => {
+      check.error = null;
+    });
+  }),
+  scrollToFirstError(errorFields) {
+    var _a;
+    for (const field of errorFields) {
+      if (!((_a = field.config) == null ? void 0 : _a.htmlId)) {
+        continue;
+      }
+      const div = document.querySelector(
+        `*[data-xform-id="${field.config.htmlId}"]`
+      );
+      if (!div) {
+        continue;
+      }
+      if (typeof div.scrollIntoViewIfNeeded === "function") {
+        div.scrollIntoViewIfNeeded();
+      } else {
+        div.scrollIntoView({ block: "nearest" });
+      }
+      return;
+    }
+  },
+  animateErrorFields(errorFields) {
+    var _a;
+    for (const field of errorFields) {
+      if (!((_a = field.config) == null ? void 0 : _a.htmlId)) {
+        continue;
+      }
+      const div = document.querySelector(
+        `*[data-xform-id="${field.config.htmlId}"]`
+      );
+      if (!div) {
+        continue;
+      }
+      div.animate(
+        [
+          { offset: 0, transform: "translateX(0)" },
+          { offset: 0.065, transform: "translateX(-6px) rotateY(-9deg)" },
+          { offset: 0.185, transform: "translateX(5px) rotateY(7deg)" },
+          { offset: 0.315, transform: "translateX(-3px) rotateY(-5deg)" },
+          { offset: 0.435, transform: "translateX(2px) rotateY(3deg)" },
+          { offset: 0.5, transform: "translateX(0)" }
+        ],
+        { duration: 750 }
+      );
+    }
+  },
+  validateAll: action(function(model, trigger = "*") {
+    let hasError = false;
+    const errors = observable(model._valueShape === "array" ? [] : {});
+    const errorFields = [];
+    const promises = [];
+    model.iterateFields((field) => {
+      if (!field.isMounted) {
+        return;
+      }
+      promises.push(
+        field.validate(trigger).then(
+          action((error) => {
+            if (error) {
+              hasError = true;
+              observableSetIn(errors, field.path, error);
+              errorFields.push(field);
+            }
+          })
+        )
+      );
+    });
+    model.iterateChecks((check) => {
+      promises.push(
+        check.validate().then(
+          action((error) => {
+            if (error) {
+              hasError = true;
+              observableSetIn(errors, check.path, error);
+            }
+          })
+        )
+      );
+    });
+    return Promise.all(promises).then(() => ({
+      hasError,
+      errors: toJS(errors),
+      errorFields
+    }));
+  }),
+  submit: action(async function(model, options = {}) {
+    const {
+      onError,
+      onSubmit,
+      valueFilter = "mounted",
+      mergeDefaultValue = true,
+      animateErrorFields = false,
+      scrollToFirstError = true
+    } = options;
+    const { hasError, errors, errorFields } = await modelUtils.validateAll(model);
+    if (hasError) {
+      if (scrollToFirstError) {
+        modelUtils.scrollToFirstError(errorFields);
+      }
+      if (animateErrorFields) {
+        modelUtils.animateErrorFields(errorFields);
+      }
+      onError == null ? void 0 : onError(errors, model);
+    } else if (typeof onSubmit === "function") {
+      runInAction(() => {
+        const result = observable(
+          valueFilter === "all" ? toJS(model.values) : model._valueShape === "array" ? [] : {}
+        );
+        _mergeValuesFromViewToTarget(result, model, { mergeDefaultValue });
+        onSubmit(toJS(result), model);
+      });
+    }
+  }),
+  reset: action(function(model, { onReset } = {}) {
+    model.values = {};
+    modelUtils.clearError(model);
+    onReset == null ? void 0 : onReset(model);
+  }),
+  acceptValuesFormView: action((model, opts = {}) => {
+    _mergeValuesFromViewToTarget(model.values, model, opts);
+  }),
+  mergeValuesFromViewToView: _mergeValuesFromViewToTarget
+};
+function _mergeValuesFromViewToTarget(target, model, { mergeDefaultValue = true } = {}) {
+  model.iterateFields((field) => {
+    if (!field.isMounted) {
+      return;
+    }
+    if (field.fieldType === FieldType.normal) {
+      if (field.config.valueProp !== void 0) {
+        observableSetIn(target, field.path, field.config.valueProp);
+      } else if (field.value !== void 0) {
+        observableSetIn(target, field.path, field.value);
+      } else {
+        const defaultValueProp = field.config.defaultValueProp;
+        if (mergeDefaultValue && defaultValueProp !== void 0) {
+          observableSetIn(target, field.path, defaultValueProp);
+        }
+      }
+    } else if (field.fieldType === FieldType.tuple) {
+      const model2 = field.parent;
+      const hasValue = field.value.some((v) => v !== void 0);
+      if (hasValue) {
+        field._tupleParts.map((part, index) => {
+          observableSetIn(target, [...model2.path, part], field.value[index]);
+        });
+      } else {
+        const defaultValueProp = field.config.defaultValueProp;
+        if (mergeDefaultValue && defaultValueProp !== void 0) {
+          field._tupleParts.map((part, index) => {
+            observableSetIn(target, [...model2.path, part], defaultValueProp == null ? void 0 : defaultValueProp[index]);
+          });
+        }
+      }
+    }
+  });
+}
+export {
+  modelUtils
+};

package/dist/form/model.d.ts

@@ -0,0 +1,103 @@
+import { ModelType, FieldType } from './enum';
+import { XName, ResolveXName, ValueShape, FieldConfig, CheckConfig, FieldState, FieldCreateOptions, FieldValidateTrigger, FormModelCreateOptions } from './type';
+declare class IdGenerator {
+    private _nextId;
+    private prefix;
+    constructor(prefix: string);
+    getNextId(): string;
+}
+export declare class FormModel<D extends {
+    [key: string]: any;
+} = unknown> implements FormModel<D> {
+    _modelIdGenerator: IdGenerator;
+    _fieldIdGenerator: IdGenerator;
+    readonly id: string;
+    state: any;
+    readonly root: FormModel<any>;
+    readonly parent: FormModel<any>;
+    name: string;
+    /** 当前 Model 的类型，目前只有两种类型： rootModel 和 subModel */
+    _modelType: ModelType;
+    _values: D;
+    _fieldMap: Map<string, Field<unknown>>;
+    _valueShape: 'auto' | ValueShape;
+    _subModels: D extends any[] ? FormModel[] : {
+        [key: string]: FormModel;
+    };
+    _checkMap: Map<string, Check<D>>;
+    /**
+     * 标记当前 model 是否已经删除.
+     * 当某个对象从数组中移除时，该对象对应的 model 就被会标记为 _selfDeleted=true
+     * */
+    _selfDeleted: boolean;
+    get values(): D;
+    set values(nextValues: D);
+    get path(): string[];
+    constructor(initValues?: D, options?: FormModelCreateOptions);
+    getValue<N extends XName<D>>(name: N, defaultValue?: ResolveXName<D, N>): ResolveXName<D, N>;
+    setValue<N extends XName<D>>(name: N, value: ResolveXName<D, N>): void;
+    getSubModel<N extends XName<D>>(name: N | string[]): FormModel<ResolveXName<D, N>>;
+    getField<N extends XName<D>>(name: N | string[]): Field<ResolveXName<D, N>>;
+    getTupleField<NS extends (keyof D & string)[]>(...tupleParts: NS): Field<{
+        [Index in keyof NS]: NS[Index] extends keyof D ? D[NS[Index]] : never;
+    }>;
+    _asField(): Field<D>;
+    _updateValueShape(valueShape: 'array' | 'object'): void;
+    /** 递归前序遍历该 model 下所有的 model 对象（包含 model 本身） */
+    iterateModels(iteratee: (mod: FormModel) => void): void;
+    /** 递归遍历该 model 下（包括 model 本身）所有存在的 field 对象（包括 normal field 和 tuple field，也包括所有 fork） */
+    iterateFields(iteratee: (field: Field) => void): void;
+    /** 递归遍历该 model 下（包括 model 本身）所有存在的 check 对象） */
+    iterateChecks(iteratee: (check: Check) => void): void;
+    _getSubModelByShortName(name: string): FormModel<any>;
+    getCheck(name: string): Check<D>;
+    /** 判断当前 model 是否已经删除 */
+    get isDeleted(): boolean;
+    _markDeleted(): void;
+}
+export declare class Check<D = unknown> {
+    /** Check 是否在视图中被渲染 */
+    isMounted: boolean;
+    /** Check 配置的最新缓存（注意不要修改该值）*/
+    config?: CheckConfig<D>;
+    readonly parent: FormModel<D>;
+    readonly name: string;
+    error: any;
+    cancelValidation: () => void;
+    validating: boolean;
+    get path(): string[];
+    constructor(parent: FormModel<D>, name: string);
+    _track(config: CheckConfig<D>): () => void;
+    validate(): Promise<any>;
+}
+export declare class Field<V = unknown> {
+    static ORIGINAL: string;
+    static getHtmlId(prefix: string, field: Field): string;
+    /** 字段配置的最新缓存（注意不要修改该值）*/
+    config?: FieldConfig<V>;
+    /** 字段是否在视图中被渲染 */
+    isMounted: boolean;
+    readonly parent: FormModel<any>;
+    readonly name: string;
+    readonly _forkName: string;
+    readonly _tupleParts: string[];
+    readonly id: string;
+    readonly _forkMap: Map<string, Field>;
+    readonly fieldType: FieldType;
+    readonly _readonlyValue: any;
+    state: FieldState;
+    get value(): V;
+    set value(value: V);
+    get path(): string[];
+    constructor(opts: FieldCreateOptions);
+    _track(config: FieldConfig<V>): () => void;
+    getFork(forkName: string): Field<V>;
+    validate(trigger?: FieldValidateTrigger): Promise<any>;
+    handleFocus: () => void;
+    handleBlur: () => Promise<any>;
+    handleChange: (nextValue: any, ...rest: any[]) => Promise<any>;
+    get isDeleted(): boolean;
+    /** 清理字段，将清空字段的错误与值 */
+    clear: () => void;
+}
+export {};