@unicom-cloud/ui 0.8.44 → 0.8.46

package/drawer/Drawer.js

@@ -0,0 +1,226 @@
+import { jsxs as g, Fragment as ue, jsx as t } from "react/jsx-runtime";
+import pe from "@unicom-cloud/icons/IconUiClose";
+import fe from "lodash/isFunction";
+import he, { useContext as Ce, useRef as T, useState as d, useCallback as xe, useMemo as ye, useImperativeHandle as ke, useEffect as z } from "react";
+import F from "../Button.js";
+/* empty css                  */
+import B from "../config-provider/ConfigProvider.js";
+import Ne from "../hooks/useMergeProps.js";
+import ge from "../hooks/useOverflowHidden.js";
+import we from "../IconHover.js";
+import be from "../Portal.js";
+import j from "../utils/CSSTransition.js";
+import w from "@unicom-cloud/utils/class-name";
+import { isServerRendering as ve, contains as Ie } from "../utils/dom.js";
+import { Esc as $e } from "../utils/keyCode.js";
+import Pe from "../utils/omit.js";
+import { findDOMNode as Ee } from "../utils/reactDOM.js";
+import { ConfigContext as Re } from "../config-provider/context.js";
+const Se = {
+  placement: "right",
+  width: 250,
+  height: 250,
+  escToExit: !0,
+  mask: !0,
+  closable: !0,
+  maskClosable: !0,
+  mountOnEnter: !0,
+  getPopupContainer: () => document.body
+};
+function Oe(H, M) {
+  const m = Ce(Re), { locale: b, getPrefixCls: Z, componentConfig: u, rtl: L } = m, o = Ne(
+    H,
+    Se,
+    u == null ? void 0 : u.Drawer
+  ), {
+    style: W,
+    className: q,
+    children: G,
+    wrapClassName: K,
+    maskStyle: U,
+    headerStyle: A,
+    bodyStyle: J,
+    title: p,
+    footer: l,
+    okText: Q,
+    cancelText: V,
+    width: X,
+    height: Y,
+    placement: c,
+    mask: f,
+    visible: r,
+    closable: _,
+    maskClosable: ee,
+    confirmLoading: te,
+    mountOnEnter: h,
+    unmountOnExit: v,
+    afterOpen: C,
+    afterClose: x,
+    getPopupContainer: a,
+    escToExit: ne,
+    getChildrenPopupContainer: I,
+    okButtonProps: oe,
+    cancelButtonProps: re,
+    zIndex: $,
+    closeIcon: P,
+    ...ie
+  } = o, s = T(null), E = T(null), [se, le] = d(!1), [y, ae] = d(), n = Z("drawer"), [R, k] = d(!1), [Te, S] = d(!1), O = /* @__PURE__ */ g(ue, { children: [
+    /* @__PURE__ */ t(F, { onClick: o.onCancel, ...re, children: V || b.Drawer.cancelText }),
+    /* @__PURE__ */ t(
+      F,
+      {
+        type: "primary",
+        loading: te,
+        onClick: o.onOk,
+        ...oe,
+        children: Q || b.Drawer.okText
+      }
+    )
+  ] }), N = xe(() => {
+    const e = a == null ? void 0 : a();
+    return Ee(e) || document.body;
+  }, [a]), ce = ye(() => !ve && N() === document.body, [se, N]);
+  ge(N, { hidden: (r || R) && f }), ke(M, () => s.current), z(() => {
+    r && o.getPopupContainer && le(!0);
+  }, []), z(() => {
+    var e, i;
+    r && Ie(document.body, s.current) && ((i = (e = s.current) == null ? void 0 : e.focus) == null || i.call(e));
+  }, [r]);
+  const de = () => {
+    var e;
+    if (r && y === void 0 && s.current) {
+      const i = +((e = window.getComputedStyle(s.current, null)) == null ? void 0 : e.zIndex);
+      isNaN(i) || ae(i + 1);
+    }
+  }, me = /* @__PURE__ */ g("div", { className: `${n}-scroll`, tabIndex: -1, children: [
+    p !== null && /* @__PURE__ */ t("div", { className: `${n}-header`, style: A, children: /* @__PURE__ */ t("div", { className: `${n}-header-title`, children: p }) }),
+    _ && (P !== void 0 ? /* @__PURE__ */ t("span", { onClick: o.onCancel, className: `${n}-close-icon`, children: P }) : /* @__PURE__ */ t(
+      we,
+      {
+        onClick: o.onCancel,
+        className: `${n}-close-icon`,
+        children: /* @__PURE__ */ t(pe, {})
+      }
+    )),
+    /* @__PURE__ */ t(
+      "div",
+      {
+        ref: (e) => {
+          E.current = e, de();
+        },
+        style: J,
+        className: w(`${n}-content`, {
+          [`${n}-content-nofooter`]: l === null,
+          [`${n}-content-noheader`]: p === null
+        }),
+        children: /* @__PURE__ */ t(
+          B,
+          {
+            ...m,
+            zIndex: y || 1050,
+            getPopupContainer: (e) => typeof I == "function" ? I(e) : E.current,
+            children: G
+          }
+        )
+      }
+    ),
+    l !== null && /* @__PURE__ */ t("div", { className: `${n}-footer`, children: fe(l) ? l(O) : l || O })
+  ] });
+  return /* @__PURE__ */ t(
+    be,
+    {
+      forceRender: !h,
+      visible: r,
+      getContainer: a,
+      children: /* @__PURE__ */ g(
+        "div",
+        {
+          ...Pe(ie, ["onCancel", "onOk"]),
+          ref: s,
+          onKeyDown: (e) => {
+            var D;
+            e.key === $e.key && ne && r && ((D = o.onCancel) == null || D.call(o, e));
+          },
+          className: w(
+            `${n}-wrapper`,
+            {
+              [`${n}-no-mask`]: !f,
+              [`${n}-wrapper-hide`]: !r
+            },
+            K
+          ),
+          style: ce ? { position: "fixed", zIndex: $ } : { zIndex: $ || "inherit", position: "absolute" },
+          children: [
+            f ? /* @__PURE__ */ t(
+              j,
+              {
+                in: r,
+                appear: !0,
+                timeout: 300,
+                classNames: "fadeInStandard",
+                mountOnEnter: h,
+                unmountOnExit: v,
+                children: /* @__PURE__ */ t(
+                  "div",
+                  {
+                    className: `${n}-mask`,
+                    style: U,
+                    onClick: (e) => {
+                      var i;
+                      !R && ee && ((i = o.onCancel) == null || i.call(o, e));
+                    }
+                  }
+                )
+              }
+            ) : null,
+            /* @__PURE__ */ t(
+              j,
+              {
+                in: r,
+                appear: !0,
+                timeout: 300,
+                classNames: {
+                  top: "slideTop",
+                  bottom: "slideBottom",
+                  left: "slideLeft",
+                  right: "slideRight"
+                }[c],
+                mountOnEnter: h,
+                unmountOnExit: v,
+                onEnter: (e) => {
+                  e && (e.parentNode.style.display = "block", k(!1));
+                },
+                onEntered: () => {
+                  S(!0), C == null || C();
+                },
+                onExit: () => {
+                  S(!1), k(!0);
+                },
+                onExited: (e) => {
+                  e && (k(!1), e.parentNode.style.display = "", x == null || x());
+                },
+                children: /* @__PURE__ */ t(
+                  "div",
+                  {
+                    className: w(n, q, { [`${n}-rtl`]: L }),
+                    style: Object.assign(
+                      c === "left" || c === "right" ? { width: X } : { height: Y },
+                      { [c]: 0 },
+                      W
+                    ),
+                    children: /* @__PURE__ */ t("div", { className: `${n}-inner`, children: /* @__PURE__ */ t(B, { ...m, zIndex: y || 1050, children: me }) })
+                  }
+                )
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
+const De = he.forwardRef(Oe);
+De.displayName = "Drawer";
+export {
+  De as default
+};

package/dropdown/Button.js

@@ -0,0 +1,91 @@
+import { jsx as t, jsxs as D } from "react/jsx-runtime";
+import d from "@unicom-cloud/icons/IconUiMore";
+import { forwardRef as w, useContext as j } from "react";
+import k from "../Dropdown.js";
+import p from "../Button.js";
+/* empty css                  */
+import "../config-provider/ConfigProvider.js";
+import M from "../hooks/useMergeProps.js";
+import { pickDataAttributes as N } from "../utils/pick.js";
+import { ConfigContext as v } from "../config-provider/context.js";
+const z = {
+  position: "br",
+  trigger: "hover",
+  type: "default",
+  icon: /* @__PURE__ */ t(d, {}),
+  unmountOnExit: !0
+};
+function A(f, a) {
+  const { componentConfig: e } = j(v), s = M(
+    f,
+    z,
+    e == null ? void 0 : e["Dropdown.Button"]
+  ), {
+    className: c,
+    style: g,
+    children: b,
+    disabled: r,
+    position: B = "br",
+    type: m = "default",
+    size: u,
+    icon: h = /* @__PURE__ */ t(d, {}),
+    onClick: x,
+    buttonProps: C,
+    rightButtonProps: P,
+    // 潘启宝添加
+    buttonsRender: l,
+    ...n
+  } = s;
+  let i = /* @__PURE__ */ t(
+    p,
+    {
+      disabled: r,
+      type: m,
+      size: u,
+      onClick: x,
+      ...C,
+      children: b
+    }
+  ), o = /* @__PURE__ */ t(
+    p,
+    {
+      disabled: r,
+      type: m,
+      size: u,
+      icon: h,
+      ...P
+    }
+  );
+  l && ([i, o] = l([i, o]));
+  const y = r || !o || o.props && o.props.loading;
+  return /* @__PURE__ */ D(
+    p.Group,
+    {
+      className: c,
+      style: g,
+      ref: a,
+      ...N(s),
+      children: [
+        i,
+        /* @__PURE__ */ t(
+          k,
+          {
+            disabled: r,
+            position: B,
+            ...n,
+            triggerProps: {
+              disabled: y,
+              ...n == null ? void 0 : n.triggerProps
+            },
+            children: o
+          }
+        )
+      ]
+    }
+  );
+}
+const E = w(A);
+E.displayName = "DropdownButton";
+export {
+  E as default
+};

package/form/Control.js

@@ -0,0 +1,264 @@
+var D = Object.defineProperty;
+var N = (p, g, e) => g in p ? D(p, g, { enumerable: !0, configurable: !0, writable: !0, value: e }) : p[g] = e;
+var r = (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 S 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 U from "../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 {
+  constructor(e, t) {
+    var i, s;
+    super(e);
+    r(this, "context");
+    // 校验信息
+    r(this, "errors", null);
+    // 校验 warning 信息
+    r(this, "warnings", null);
+    // undefined => validating => success / error => (validating or undefined)
+    r(this, "validateStatus");
+    // 是否被用户操作过
+    r(this, "touched");
+    r(this, "isDestroyed", !1);
+    // 保存 props.children 或函数类型 props.children() 的返回值
+    r(this, "childrenElement", null);
+    r(this, "removeRegisterField");
+    // 触发 store 进行状态收集
+    // TODO: error, validateStatus ,touched 状态和 UI 组件解耦，统一维护在 store 内部
+    r(this, "triggerStateCollect", () => {
+      const { innerCollectFormState: e } = this.context.store.getInnerMethods(!0);
+      e();
+    });
+    // 切换校验状态
+    r(this, "toggleValidateStatus", (e) => {
+      this.validateStatus = e, this.triggerStateCollect();
+    });
+    // 切换 touch 状态
+    r(this, "toggleTouched", (e) => {
+      this.touched = R(e) ? e : !this.touched, this.triggerStateCollect();
+    });
+    r(this, "setWarnings", (e) => {
+      this.warnings = e, this.triggerStateCollect();
+    });
+    r(this, "setErrors", (e) => {
+      this.errors = e, this.triggerStateCollect();
+    });
+    r(this, "getErrors", () => this.errors);
+    r(this, "getWarnings", () => this.warnings || []);
+    r(this, "isTouched", () => this.touched);
+    r(this, "getValidateStatus", () => this.props.validateStatus ? this.props.validateStatus : this.validateStatus);
+    r(this, "hasFieldProps", () => !!this.props.field);
+    r(this, "clearFormItemError", (e = this.props.field) => {
+      const { updateFormItem: t } = this.context;
+      t == null || t(e, { errors: null, warnings: null });
+    });
+    r(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
+      });
+    });
+    r(this, "getFieldValue", () => {
+      const e = this.props.field, t = this.context.store;
+      return e ? t.getInnerMethods(!0).innerGetFieldValue(e) : void 0;
+    });
+    r(this, "onStoreChange", (e, t) => {
+      const i = b(t.field) ? t.field : [t.field], { field: s, shouldUpdate: l, dependencies: o } = this.props, a = (d) => {
+        if (o && l && U(!0, "`shouldUpdate` of the `Form.Item` will be ignored."), o)
+          (b(o) || o.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), o || l ? a() : this.updateFormItem();
+          break;
+        case "innerSetValue":
+          if (C(s, i)) {
+            this.toggleTouched(!0), this.updateFormItem();
+            return;
+          }
+          a({
+            isInner: !0,
+            isFormList: t.isFormList
+          });
+          break;
+        case "setFieldValue":
+          if (C(s, 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(S(t.prev, s), S(t.current, s)) || this.setErrors(null), this.updateFormItem();
+            return;
+          }
+          a();
+          break;
+      }
+    });
+    r(this, "innerSetFieldValue", (e, t) => {
+      var o, a;
+      if (!e) return;
+      const { store: i } = this.context;
+      i.getInnerMethods(!0).innerSetFieldValue(e, t);
+      const l = {};
+      j(l, e, t), (a = (o = this.props) == null ? void 0 : o.onValuesChange) == null || a.call(o, l, {
+        ...i.getFieldsValue()
+      });
+    });
+    // 仅仅校验下值，不做任何状态变更
+    r(this, "validateFieldOnly", () => {
+      const { validateMessages: e } = this.context, { field: t, rules: i } = this.props, s = this.getFieldValue();
+      return k(t, s, i, e).then(
+        ({ error: l, warning: o }) => Promise.resolve({ error: l, value: s, warning: o, field: t })
+      );
+    });
+    /**
+     *
+     * @param triggerType the value of validateTrigger.
+     * @returns
+     */
+    r(this, "validateField", (e) => {
+      const { validateTrigger: t, validateMessages: i } = this.context, { field: s, rules: l, validateTrigger: o } = 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 || o || t
+      ).indexOf(e) > -1) : l;
+      return n && n.length && s ? (d(), k(s, a, n, i).then(
+        ({ error: h, warning: c }) => {
+          var u;
+          return this.setErrors(h ? h[s] : 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: s });
+        }
+      )) : Promise.resolve({ error: null, value: a, field: s });
+    });
+    // 每次 render 都会作为 onChange 传递给 children，需要保证引用地址不变
+    // 所以 handleTrigger 需要声明在类上，并且直接作为 children.props.onChange
+    r(this, "handleTrigger", (e, ...t) => {
+      const i = this.childrenElement || this.props.children, { store: s } = this.context, { field: l, trigger: o, 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, s.getFieldValue(l), {
+        ...s.getFieldsValue()
+      })), this.toggleTouched(!0), this.innerSetFieldValue(l, h), this.validateField(o), A(i) && i.props && i.props[o] && (this.props.isFormList || i.props[o](h, ...t));
+    });
+    r(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;
+    });
+    "initialValue" in e && this.hasFieldProps() && ((s = (i = t == null ? void 0 : t.store) == null ? void 0 : i.setInitialValue) == null || s.call(i, e.field, e.initialValue));
+  }
+  componentDidMount() {
+    const { store: e } = this.context ?? {};
+    if (e) {
+      const t = e.getInnerMethods(!0);
+      this.removeRegisterField = t.registerField(this);
+    }
+    this.isDestroyed = !1;
+  }
+  componentDidUpdate(e) {
+    (e.field !== this.props.field && this.props._key && e._key === this.props._key || /* 以下条件判断潘启宝添加于 2023年10月23日 星期一 13时10分43秒 CST */
+    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;
+  }
+  /**
+   * 收集rules里的validateTrigger字段
+   */
+  getValidateTrigger() {
+    const e = this.props.validateTrigger || this.context.validateTrigger || "onChange", t = this.props.rules || [];
+    let i = [];
+    return t.map((s) => {
+      i = i.concat(s.validateTrigger || e);
+    }), Array.from(new Set(i));
+  }
+  renderControl(e, t) {
+    var T;
+    const {
+      field: i,
+      trigger: s = "onChange",
+      triggerPropName: l = "value",
+      validateStatus: o,
+      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 = {
+      // used by label
+      id: G(((T = c.props) == null ? void 0 : T.id) || { [`${t}${B}`]: t })
+    };
+    this.getValidateTrigger().forEach((V) => {
+      u[V] = (M) => {
+        var f, w;
+        this.validateField(V), (w = (f = c.props) == null ? void 0 : f[V]) == null || w.call(f, M);
+      };
+    }), u[s] = this.handleTrigger, h !== void 0 && !("disabled" in c.props) && (u.disabled = h);
+    let v = S(d.getInnerMethods(!0).innerGetStore(), i);
+    return F(a) && (v = a(v)), u[l] = v, !o && this.errors && (u.error = !0), I.cloneElement(c, u);
+  }
+  render() {
+    const { noStyle: e, field: t, isFormList: i, hasFeedback: s } = this.props, l = this.getValidateStatus(), { prefixCls: o, 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: `${o}-item-control-wrapper`, children: /* @__PURE__ */ m("div", { className: `${o}-item-control`, id: n, children: /* @__PURE__ */ E("div", { className: `${o}-item-control-children`, children: [
+      d,
+      l && s && /* @__PURE__ */ E(
+        "div",
+        {
+          className: `${o}-item-feedback ${o}-item-feedback-${l}`,
+          children: [
+            l === "warning" && /* @__PURE__ */ m($, {}),
+            l === "success" && /* @__PURE__ */ m(P, {}),
+            l === "error" && /* @__PURE__ */ m(W, {}),
+            l === "validating" && /* @__PURE__ */ m(L, {})
+          ]
+        }
+      )
+    ] }) }) });
+  }
+}
+r(x, "defaultProps", {
+  trigger: "onChange",
+  triggerPropName: "value"
+}), r(x, "isFormControl", !0), r(x, "contextType", O);
+export {
+  x as default
+};