@unicom-cloud/ui 0.8.96 → 0.8.98

package/form/Control.js

@@ -1,192 +1,42 @@
-var M = Object.defineProperty;
-var N = (p, g, e) => g in p ? M(p, g, { enumerable: !0, configurable: !0, writable: !0, value: e }) : p[g] = e;
-var s = (p, g, e) => N(p, typeof g != "symbol" ? g + "" : g, e);
-import { jsx as m, jsxs as E } from "react/jsx-runtime";
-import P from "@unicom-cloud/icons/IconUiCheckCircleFill";
-import W from "@unicom-cloud/icons/IconUiCloseCircleFill";
-import $ from "@unicom-cloud/icons/IconUiExclamationCircleFill";
-import L from "@unicom-cloud/icons/IconUiLoading";
-import V from "lodash/get";
-import b from "lodash/isArray";
-import R from "lodash/isBoolean";
-import y from "lodash/isEqualWith";
-import F from "lodash/isFunction";
-import _ from "lodash/isNil";
-import j from "lodash/set";
-import I, { Component as z, isValidElement as A } from "react";
-import G from "@unicom-cloud/utils/class-name";
-import { warning as U } from "../components/common/utils/warning.js";
-import { FormItemContext as O } from "./context.js";
-import { isFieldMatch as C, schemaValidate as k, isSyntheticEvent as q, ID_SUFFIX as B } from "./util.js";
-class x extends z {
+import { jsx as u, jsxs as I } from "react/jsx-runtime";
+import T from "@unicom-cloud/icons/IconUiCheckCircleFill";
+import w from "@unicom-cloud/icons/IconUiCloseCircleFill";
+import b from "@unicom-cloud/icons/IconUiExclamationCircleFill";
+import y from "@unicom-cloud/icons/IconUiLoading";
+import f from "lodash/get";
+import S from "lodash/isArray";
+import M from "lodash/isBoolean";
+import V from "lodash/isEqualWith";
+import g from "lodash/isFunction";
+import U from "lodash/isNil";
+import k from "lodash/set";
+import F, { Component as D, isValidElement as N } from "react";
+import P from "@unicom-cloud/utils/class-name";
+import { warning as C } from "../components/common/utils/warning.js";
+import { FormItemContext as W } from "./context.js";
+import { isFieldMatch as v, schemaValidate as x, isSyntheticEvent as $, ID_SUFFIX as L } from "./util.js";
+class re extends D {
+  static defaultProps = {
+    trigger: "onChange",
+    triggerPropName: "value"
+  };
+  static isFormControl = !0;
+  static contextType = W;
+  context;
+  // 校验信息
+  errors = null;
+  // 校验 warning 信息
+  warnings = null;
+  // undefined => validating => success / error => (validating or undefined)
+  validateStatus;
+  // 是否被用户操作过
+  touched;
+  isDestroyed = !1;
+  // 保存 props.children 或函数类型 props.children() 的返回值
+  childrenElement = null;
+  removeRegisterField;
   constructor(e, t) {
-    var i, o, l;
-    super(e);
-    s(this, "context");
-    // 校验信息
-    s(this, "errors", null);
-    // 校验 warning 信息
-    s(this, "warnings", null);
-    // undefined => validating => success / error => (validating or undefined)
-    s(this, "validateStatus");
-    // 是否被用户操作过
-    s(this, "touched");
-    s(this, "isDestroyed", !1);
-    // 保存 props.children 或函数类型 props.children() 的返回值
-    s(this, "childrenElement", null);
-    s(this, "removeRegisterField");
-    // 触发 store 进行状态收集
-    // TODO: error, validateStatus ,touched 状态和 UI 组件解耦，统一维护在 store 内部
-    s(this, "triggerStateCollect", () => {
-      const { innerCollectFormState: e } = this.context.store.getInnerMethods(!0);
-      e();
-    });
-    // 切换校验状态
-    s(this, "toggleValidateStatus", (e) => {
-      this.validateStatus = e, this.triggerStateCollect();
-    });
-    // 切换 touch 状态
-    s(this, "toggleTouched", (e) => {
-      this.touched = R(e) ? e : !this.touched, this.triggerStateCollect();
-    });
-    s(this, "setWarnings", (e) => {
-      this.warnings = e, this.triggerStateCollect();
-    });
-    s(this, "setErrors", (e) => {
-      this.errors = e, this.triggerStateCollect();
-    });
-    s(this, "getErrors", () => this.errors);
-    s(this, "getWarnings", () => this.warnings || []);
-    s(this, "isTouched", () => this.touched);
-    s(this, "getValidateStatus", () => this.props.validateStatus ? this.props.validateStatus : this.validateStatus);
-    s(this, "hasFieldProps", () => !!this.props.field);
-    s(this, "clearFormItemError", (e = this.props.field) => {
-      const { updateFormItem: t } = this.context;
-      t == null || t(e, { errors: null, warnings: null });
-    });
-    s(this, "updateFormItem", () => {
-      if (this.isDestroyed) return;
-      this.forceUpdate();
-      const { updateFormItem: e } = this.context;
-      e == null || e(this.props.field, {
-        errors: this.errors,
-        warnings: this.warnings
-      });
-    });
-    s(this, "getFieldValue", () => {
-      const e = this.props.field, t = this.context.store;
-      return e ? t.getInnerMethods(!0).innerGetFieldValue(e) : void 0;
-    });
-    s(this, "onStoreChange", (e, t) => {
-      const i = b(t.field) ? t.field : [t.field], { field: o, shouldUpdate: l, dependencies: r } = this.props, a = (d) => {
-        if (r && l && U(!0, "`shouldUpdate` of the `Form.Item` will be ignored."), r)
-          b(r) && r.some((n) => C(n, i)) && this.isTouched() && this.validateField();
-        else if (l) {
-          let n = !1;
-          F(l) ? n = l(t.prev, t.current, {
-            field: t.field,
-            ...d
-          }) : n = !y(t.prev, t.current), n && this.updateFormItem();
-        }
-      };
-      switch (e) {
-        case "reset":
-          this.toggleTouched(!1), this.toggleValidateStatus(void 0), this.setErrors(null), this.setWarnings(null), r || l ? a() : this.updateFormItem();
-          break;
-        case "innerSetValue":
-          if (C(o, i)) {
-            this.toggleTouched(!0), this.updateFormItem();
-            return;
-          }
-          a({
-            isInner: !0,
-            isFormList: t.isFormList
-          });
-          break;
-        case "setFieldValue":
-          if (C(o, i)) {
-            this.toggleTouched(!0), t.data && "touched" in t.data && this.toggleTouched(t.data.touched), t.data && "warnings" in t.data && this.setWarnings(
-              _(t.data.warnings) ? [] : [].concat(t.data.warnings)
-            ), t.data && "errors" in t.data ? this.setErrors(t.data.errors) : y(V(t.prev, o), V(t.current, o)) || this.setErrors(null), this.updateFormItem();
-            return;
-          }
-          a();
-          break;
-      }
-    });
-    s(this, "innerSetFieldValue", (e, t) => {
-      var r, a;
-      if (!e) return;
-      const { store: i } = this.context;
-      i.getInnerMethods(!0).innerSetFieldValue(e, t);
-      const l = {};
-      j(l, e, t), (a = (r = this.props) == null ? void 0 : r.onValuesChange) == null || a.call(r, l, {
-        ...i.getFieldsValue()
-      });
-    });
-    // 仅仅校验下值，不做任何状态变更
-    s(this, "validateFieldOnly", () => {
-      const { validateMessages: e } = this.context, { field: t, rules: i } = this.props, o = this.getFieldValue();
-      return k(t, o, i, e).then(
-        ({ error: l, warning: r }) => Promise.resolve({ error: l, value: o, warning: r, field: t })
-      );
-    });
-    /**
-     *
-     * @param triggerType the value of validateTrigger.
-     * @returns
-     */
-    s(this, "validateField", (e) => {
-      const { validateTrigger: t, validateMessages: i } = this.context, { field: o, rules: l, validateTrigger: r } = this.props, a = this.getFieldValue(), d = () => {
-        var c;
-        const h = this.errors || ((c = this.warnings) == null ? void 0 : c.length);
-        this.toggleValidateStatus("validating"), this.setErrors(null), this.setWarnings(null), h && this.updateFormItem();
-      }, n = e ? (l || []).filter((h) => [].concat(
-        h.validateTrigger || r || t
-      ).indexOf(e) > -1) : l;
-      return n && n.length && o ? (d(), k(o, a, n, i).then(
-        ({ error: h, warning: c }) => {
-          var u;
-          return this.setErrors(h ? h[o] : null), this.setWarnings(c || null), this.toggleValidateStatus(
-            this.errors ? "error" : (u = this.warnings) != null && u.length ? "warning" : "success"
-          ), this.updateFormItem(), Promise.resolve({ error: h, value: a, field: o });
-        }
-      )) : Promise.resolve({ error: null, value: a, field: o });
-    });
-    // 每次 render 都会作为 onChange 传递给 children，需要保证引用地址不变
-    // 所以 handleTrigger 需要声明在类上，并且直接作为 children.props.onChange
-    s(this, "handleTrigger", (e, ...t) => {
-      const i = this.childrenElement || this.props.children, { store: o } = this.context, { field: l, trigger: r, normalize: a, getValueFromEvent: d } = this.props, n = F(d) ? d(e, ...t) : e;
-      let h = n;
-      if (q(n)) {
-        U(
-          !0,
-          "changed value missed, please check whether extra elements is outta input/select controled by Form.Item"
-        ), n.stopPropagation();
-        return;
-      }
-      typeof a == "function" && (h = a(n, o.getFieldValue(l), {
-        ...o.getFieldsValue()
-      })), this.toggleTouched(!0), this.innerSetFieldValue(l, h), this.validateField(r), A(i) && i.props && i.props[r] && (this.props.isFormList || i.props[r](h, ...t));
-    });
-    s(this, "getChild", () => {
-      const { children: e } = this.props, { store: t } = this.context;
-      let i = e;
-      return F(e) && (i = e(
-        t.getFields(),
-        {
-          ...t
-        },
-        this.props.isFormList && {
-          value: this.getFieldValue(),
-          onChange: this.handleTrigger
-        }
-      )), this.childrenElement = i, i;
-    });
-    if ("initialValue" in e && this.hasFieldProps()) {
-      const r = (o = (i = t == null ? void 0 : t.store) == null ? void 0 : i.getInnerMethods) == null ? void 0 : o.call(i, !0);
-      (l = r == null ? void 0 : r.innerSetInitialValue) == null || l.call(r, e.field, e.initialValue);
-    }
+    super(e), "initialValue" in e && this.hasFieldProps() && t?.store?.getInnerMethods?.(!0)?.innerSetInitialValue?.(e.field, e.initialValue);
   }
   componentDidMount() {
     const { store: e } = this.context ?? {};
@@ -201,65 +51,201 @@ class x extends z {
     this.props.disabled !== e.disabled && this.props.disabled || this.props.rules !== e.rules && !this.props.rules) && (this.updateFormItem(), this.clearFormItemError(e.field));
   }
   componentWillUnmount() {
-    var e;
-    (e = this.removeRegisterField) == null || e.call(this), this.removeRegisterField = null, this.clearFormItemError(), this.isDestroyed = !0;
+    this.removeRegisterField?.(), this.removeRegisterField = null, this.clearFormItemError(), this.isDestroyed = !0;
   }
+  // 触发 store 进行状态收集
+  // TODO: error, validateStatus ,touched 状态和 UI 组件解耦，统一维护在 store 内部
+  triggerStateCollect = () => {
+    const { innerCollectFormState: e } = this.context.store.getInnerMethods(!0);
+    e();
+  };
+  // 切换校验状态
+  toggleValidateStatus = (e) => {
+    this.validateStatus = e, this.triggerStateCollect();
+  };
+  // 切换 touch 状态
+  toggleTouched = (e) => {
+    this.touched = M(e) ? e : !this.touched, this.triggerStateCollect();
+  };
+  setWarnings = (e) => {
+    this.warnings = e, this.triggerStateCollect();
+  };
+  setErrors = (e) => {
+    this.errors = e, this.triggerStateCollect();
+  };
+  getErrors = () => this.errors;
+  getWarnings = () => this.warnings || [];
+  isTouched = () => this.touched;
+  getValidateStatus = () => this.props.validateStatus ? this.props.validateStatus : this.validateStatus;
+  hasFieldProps = () => !!this.props.field;
+  clearFormItemError = (e = this.props.field) => {
+    const { updateFormItem: t } = this.context;
+    t?.(e, { errors: null, warnings: null });
+  };
+  updateFormItem = () => {
+    if (this.isDestroyed) return;
+    this.forceUpdate();
+    const { updateFormItem: e } = this.context;
+    e?.(this.props.field, {
+      errors: this.errors,
+      warnings: this.warnings
+    });
+  };
+  getFieldValue = () => {
+    const e = this.props.field, t = this.context.store;
+    return e ? t.getInnerMethods(!0).innerGetFieldValue(e) : void 0;
+  };
+  onStoreChange = (e, t) => {
+    const r = S(t.field) ? t.field : [t.field], { field: s, shouldUpdate: i, dependencies: o } = this.props, n = (a) => {
+      if (o && i && C(!0, "`shouldUpdate` of the `Form.Item` will be ignored."), o)
+        S(o) && o.some((l) => v(l, r)) && this.isTouched() && this.validateField();
+      else if (i) {
+        let l = !1;
+        g(i) ? l = i(t.prev, t.current, {
+          field: t.field,
+          ...a
+        }) : l = !V(t.prev, t.current), l && this.updateFormItem();
+      }
+    };
+    switch (e) {
+      case "reset":
+        this.toggleTouched(!1), this.toggleValidateStatus(void 0), this.setErrors(null), this.setWarnings(null), o || i ? n() : this.updateFormItem();
+        break;
+      case "innerSetValue":
+        if (v(s, r)) {
+          this.toggleTouched(!0), this.updateFormItem();
+          return;
+        }
+        n({
+          isInner: !0,
+          isFormList: t.isFormList
+        });
+        break;
+      case "setFieldValue":
+        if (v(s, r)) {
+          this.toggleTouched(!0), t.data && "touched" in t.data && this.toggleTouched(t.data.touched), t.data && "warnings" in t.data && this.setWarnings(
+            U(t.data.warnings) ? [] : [].concat(t.data.warnings)
+          ), t.data && "errors" in t.data ? this.setErrors(t.data.errors) : V(f(t.prev, s), f(t.current, s)) || this.setErrors(null), this.updateFormItem();
+          return;
+        }
+        n();
+        break;
+    }
+  };
+  innerSetFieldValue = (e, t) => {
+    if (!e) return;
+    const { store: r } = this.context;
+    r.getInnerMethods(!0).innerSetFieldValue(e, t);
+    const i = {};
+    k(i, e, t), this.props?.onValuesChange?.(i, {
+      ...r.getFieldsValue()
+    });
+  };
+  // 仅仅校验下值，不做任何状态变更
+  validateFieldOnly = () => {
+    const { validateMessages: e } = this.context, { field: t, rules: r } = this.props, s = this.getFieldValue();
+    return x(t, s, r, e).then(
+      ({ error: i, warning: o }) => Promise.resolve({ error: i, value: s, warning: o, field: t })
+    );
+  };
+  /**
+   *
+   * @param triggerType the value of validateTrigger.
+   * @returns
+   */
+  validateField = (e) => {
+    const { validateTrigger: t, validateMessages: r } = this.context, { field: s, rules: i, validateTrigger: o } = this.props, n = this.getFieldValue(), a = () => {
+      const d = this.errors || this.warnings?.length;
+      this.toggleValidateStatus("validating"), this.setErrors(null), this.setWarnings(null), d && this.updateFormItem();
+    }, l = e ? (i || []).filter((d) => [].concat(
+      d.validateTrigger || o || t
+    ).indexOf(e) > -1) : i;
+    return l && l.length && s ? (a(), x(s, n, l, r).then(
+      ({ error: d, warning: h }) => (this.setErrors(d ? d[s] : null), this.setWarnings(h || null), this.toggleValidateStatus(
+        this.errors ? "error" : this.warnings?.length ? "warning" : "success"
+      ), this.updateFormItem(), Promise.resolve({ error: d, value: n, field: s }))
+    )) : Promise.resolve({ error: null, value: n, field: s });
+  };
   /**
    * 收集rules里的validateTrigger字段
    */
   getValidateTrigger() {
     const e = this.props.validateTrigger || this.context.validateTrigger || "onChange", t = this.props.rules || [];
-    let i = [];
-    return t.map((o) => {
-      i = i.concat(o.validateTrigger || e);
-    }), Array.from(new Set(i));
+    let r = [];
+    return t.map((s) => {
+      r = r.concat(s.validateTrigger || e);
+    }), Array.from(new Set(r));
   }
+  // 每次 render 都会作为 onChange 传递给 children，需要保证引用地址不变
+  // 所以 handleTrigger 需要声明在类上，并且直接作为 children.props.onChange
+  handleTrigger = (e, ...t) => {
+    const r = this.childrenElement || this.props.children, { store: s } = this.context, { field: i, trigger: o, normalize: n, getValueFromEvent: a } = this.props, l = g(a) ? a(e, ...t) : e;
+    let d = l;
+    if ($(l)) {
+      C(
+        !0,
+        "changed value missed, please check whether extra elements is outta input/select controled by Form.Item"
+      ), l.stopPropagation();
+      return;
+    }
+    typeof n == "function" && (d = n(l, s.getFieldValue(i), {
+      ...s.getFieldsValue()
+    })), this.toggleTouched(!0), this.innerSetFieldValue(i, d), this.validateField(o), N(r) && r.props && r.props[o] && (this.props.isFormList || r.props[o](d, ...t));
+  };
   renderControl(e, t) {
-    var T;
     const {
-      field: i,
-      trigger: o = "onChange",
-      triggerPropName: l = "value",
-      validateStatus: r,
-      formatter: a
-    } = this.props, { store: d, disabled: n } = this.context, h = "disabled" in this.props ? this.props.disabled : n, c = I.Children.only(e), u = {
+      field: r,
+      trigger: s = "onChange",
+      triggerPropName: i = "value",
+      validateStatus: o,
+      formatter: n
+    } = this.props, { store: a, disabled: l } = this.context, d = "disabled" in this.props ? this.props.disabled : l, h = F.Children.only(e), c = {
       // used by label
-      id: G(((T = c.props) == null ? void 0 : T.id) || { [`${t}${B}`]: t })
+      id: P(h.props?.id || { [`${t}${L}`]: t })
     };
-    this.getValidateTrigger().forEach((S) => {
-      u[S] = (D) => {
-        var f, w;
-        this.validateField(S), (w = (f = c.props) == null ? void 0 : f[S]) == null || w.call(f, D);
+    this.getValidateTrigger().forEach((p) => {
+      c[p] = (E) => {
+        this.validateField(p), h.props?.[p]?.(E);
       };
-    }), u[o] = this.handleTrigger, h !== void 0 && !("disabled" in c.props) && (u.disabled = h);
-    let v = V(d.getInnerMethods(!0).innerGetStore(), i);
-    return F(a) && (v = a(v)), u[l] = v, !r && this.errors && (u.error = !0), I.cloneElement(c, u);
+    }), c[s] = this.handleTrigger, d !== void 0 && !("disabled" in h.props) && (c.disabled = d);
+    let m = f(a.getInnerMethods(!0).innerGetStore(), r);
+    return g(n) && (m = n(m)), c[i] = m, !o && this.errors && (c.error = !0), F.cloneElement(h, c);
   }
+  getChild = () => {
+    const { children: e } = this.props, { store: t } = this.context;
+    let r = e;
+    return g(e) && (r = e(
+      t.getFields(),
+      {
+        ...t
+      },
+      this.props.isFormList && {
+        value: this.getFieldValue(),
+        onChange: this.handleTrigger
+      }
+    )), this.childrenElement = r, r;
+  };
   render() {
-    const { noStyle: e, field: t, isFormList: i, hasFeedback: o } = this.props, l = this.getValidateStatus(), { prefixCls: r, getFormElementId: a } = this.context;
-    let d = this.getChild();
-    const n = this.hasFieldProps() ? a == null ? void 0 : a(t) : void 0;
-    return this.hasFieldProps() && !i && I.Children.count(d) === 1 && (d = this.renderControl(d, n)), e ? d : /* @__PURE__ */ m("div", { className: `${r}-item-control-wrapper`, children: /* @__PURE__ */ m("div", { className: `${r}-item-control`, id: n, children: /* @__PURE__ */ E("div", { className: `${r}-item-control-children`, children: [
-      d,
-      l && o && /* @__PURE__ */ E(
+    const { noStyle: e, field: t, isFormList: r, hasFeedback: s } = this.props, i = this.getValidateStatus(), { prefixCls: o, getFormElementId: n } = this.context;
+    let a = this.getChild();
+    const l = this.hasFieldProps() ? n?.(t) : void 0;
+    return this.hasFieldProps() && !r && F.Children.count(a) === 1 && (a = this.renderControl(a, l)), e ? a : /* @__PURE__ */ u("div", { className: `${o}-item-control-wrapper`, children: /* @__PURE__ */ u("div", { className: `${o}-item-control`, id: l, children: /* @__PURE__ */ I("div", { className: `${o}-item-control-children`, children: [
+      a,
+      i && s && /* @__PURE__ */ I(
         "div",
         {
-          className: `${r}-item-feedback ${r}-item-feedback-${l}`,
+          className: `${o}-item-feedback ${o}-item-feedback-${i}`,
           children: [
-            l === "warning" && /* @__PURE__ */ m($, {}),
-            l === "success" && /* @__PURE__ */ m(P, {}),
-            l === "error" && /* @__PURE__ */ m(W, {}),
-            l === "validating" && /* @__PURE__ */ m(L, {})
+            i === "warning" && /* @__PURE__ */ u(b, {}),
+            i === "success" && /* @__PURE__ */ u(T, {}),
+            i === "error" && /* @__PURE__ */ u(w, {}),
+            i === "validating" && /* @__PURE__ */ u(y, {})
           ]
         }
       )
     ] }) }) });
   }
 }
-s(x, "defaultProps", {
-  trigger: "onChange",
-  triggerPropName: "value"
-}), s(x, "isFormControl", !0), s(x, "contextType", O);
 export {
-  x as default
+  re as default
 };