@unicom-cloud/ui 0.8.45 → 0.8.47

package/chunk/z7sBNzI4.js

@@ -0,0 +1,739 @@
+var pe = Object.defineProperty;
+var ue = (d, m, e) => m in d ? pe(d, m, { enumerable: !0, configurable: !0, writable: !0, value: e }) : d[m] = e;
+var f = (d, m, e) => ue(d, typeof m != "symbol" ? m + "" : m, e);
+import { jsx as c, jsxs as k } from "react/jsx-runtime";
+import S from "@unicom-cloud/icons/context";
+import he from "@unicom-cloud/utils/tinycolor";
+import Ce from "lodash/isPlainObject";
+import D, { forwardRef as Z, useContext as z, createContext as ge, useRef as G, useImperativeHandle as _, Component as xe, createRef as ve, useState as be, useEffect as L } from "react";
+import ee from "../hooks/useMergeProps.js";
+import { j as te, P as re } from "./uUGMUxt_.js";
+import T from "lodash/isNumber";
+import I from "lodash/isUndefined";
+import ye from "@unicom-cloud/icons/IconUiCheckCircleFill";
+import B from "@unicom-cloud/icons/IconUiClose";
+import $e from "@unicom-cloud/icons/IconUiCloseCircleFill";
+import Ne from "@unicom-cloud/icons/IconUiExclamationCircleFill";
+import Ee from "@unicom-cloud/icons/IconUiInfoCircleFill";
+import Pe from "@unicom-cloud/icons/IconUiLoading";
+import { createPortal as Ie } from "react-dom";
+import se from "../NotificationBase.js";
+import M from "@unicom-cloud/utils/class-name";
+import { render as oe } from "../utils/reactDOM.js";
+import we from "@unicom-cloud/icons/IconUiEmpty";
+import Re from "../locale/zh-CN.js";
+import Te from "../utils/omit.js";
+import Me from "lodash/isString";
+function qe(d, m) {
+  const {
+    getPrefixCls: e,
+    locale: t,
+    componentConfig: s
+  } = z(R), p = ee(
+    d,
+    {},
+    s == null ? void 0 : s.Empty
+  ), { style: l, className: o, description: u, icon: n, imgSrc: r, ...a } = p, h = e("empty"), g = M(h, o), C = t.Empty.noData, i = typeof u == "string" ? u : "empty";
+  return /* @__PURE__ */ c("div", { ref: m, className: g, style: l, ...a, children: /* @__PURE__ */ k("div", { className: `${h}-wrapper`, children: [
+    /* @__PURE__ */ c("div", { className: `${h}-image`, children: r ? /* @__PURE__ */ c("img", { alt: i, src: r }) : n || /* @__PURE__ */ c(we, {}) }),
+    /* @__PURE__ */ c("div", { className: `${h}-description`, children: u || C })
+  ] }) });
+}
+const ne = Z(qe);
+ne.displayName = "Empty";
+const Le = D.memo(ne);
+function Oe(d) {
+  switch (d) {
+    default:
+      return /* @__PURE__ */ c(Le, {});
+  }
+}
+const ie = {
+  locale: Re,
+  prefixCls: "pqb",
+  getPopupContainer: () => document.body,
+  size: "default",
+  renderEmpty: Oe
+}, R = ge({
+  getPrefixCls: (d, m) => `${m || "pqb"}-${d}`,
+  ...ie
+});
+function ke(d, m) {
+  const {
+    children: e,
+    className: t,
+    disabled: s,
+    prefix: p,
+    size: l = "default",
+    ...o
+  } = d, { getPrefixCls: u } = z(R), n = u("icon-hover"), r = G();
+  return _(m, () => ({
+    getRootDOMNode: () => r.current
+  })), /* @__PURE__ */ c(
+    "span",
+    {
+      ref: r,
+      className: M(
+        n,
+        {
+          [`${p}-icon-hover`]: p,
+          [`${n}-size-${l}`]: l && l !== "default",
+          [`${n}-disabled`]: s
+        },
+        t
+      ),
+      onClick: d.onClick,
+      ...o,
+      children: e
+    }
+  );
+}
+const W = D.forwardRef(ke);
+class j extends xe {
+  constructor(e) {
+    super(e);
+    f(this, "context");
+    f(this, "wrapper");
+    f(this, "timer");
+    f(this, "rootDOMRef");
+    f(this, "getRootDOMNode", () => this.rootDOMRef.current);
+    f(this, "startTimer", () => {
+      const { duration: e, onClose: t, id: s } = this.props;
+      e !== 0 && (this.timer = window.setTimeout(() => {
+        t == null || t(s), this.removeTimer();
+      }, e));
+    });
+    f(this, "removeTimer", () => {
+      this.timer && (window.clearTimeout(this.timer), this.timer = null);
+    });
+    f(this, "onClose", () => {
+      var e, t;
+      (t = (e = this.props).onClose) == null || t.call(e, this.props.id);
+    });
+    f(this, "renderIcon", () => {
+      const { showIcon: e, icon: t, type: s, prefixCls: p, iconPrefix: l } = this.props;
+      let o;
+      if (t)
+        o = t;
+      else if (e) {
+        switch (s) {
+          case "info":
+            o = /* @__PURE__ */ c(Ee, {});
+            break;
+          case "success":
+            o = /* @__PURE__ */ c(ye, {});
+            break;
+          case "error":
+            o = /* @__PURE__ */ c($e, {});
+            break;
+          case "warning":
+            o = /* @__PURE__ */ c(Ne, {});
+            break;
+          case "loading":
+            o = /* @__PURE__ */ c(Pe, {});
+            break;
+        }
+        o = /* @__PURE__ */ c(
+          S.Provider,
+          {
+            value: l ? { prefixCls: l } : {},
+            children: o
+          }
+        );
+      }
+      return /* @__PURE__ */ c("span", { className: `${p}-icon`, children: o });
+    });
+    f(this, "onMouseEnter", () => {
+      this.removeTimer();
+    });
+    f(this, "onMouseLeave", () => {
+      this.removeTimer(), this.startTimer();
+    });
+    this.rootDOMRef = ve();
+  }
+  componentDidMount() {
+    this.startTimer();
+  }
+  componentDidUpdate(e) {
+    (e.duration !== this.props.duration || this.props.update) && (this.removeTimer(), this.startTimer());
+  }
+  componentWillUnmount() {
+    this.removeTimer();
+  }
+  render() {
+    const {
+      title: e,
+      content: t,
+      showIcon: s,
+      className: p,
+      style: l,
+      type: o,
+      btn: u,
+      icon: n,
+      prefixCls: r,
+      closable: a,
+      noticeType: h,
+      iconPrefix: g,
+      rtl: C,
+      closeIcon: i,
+      classPrefixCls: x
+    } = this.props, v = M(
+      r,
+      `${r}-${o}`,
+      {
+        [`${r}-closable`]: a,
+        [`${r}-rtl`]: C
+      },
+      p
+    );
+    let y = "closable" in this.props ? a : !0, b = s;
+    o === "normal" && !n && (b = !1);
+    const q = { ...this.context };
+    if (x && (q.prefixCls = x), h === "message")
+      return y = a, /* @__PURE__ */ c(U, { ...q, children: /* @__PURE__ */ c(
+        "div",
+        {
+          style: { textAlign: "center" },
+          onMouseEnter: this.onMouseEnter,
+          onMouseLeave: this.onMouseLeave,
+          ref: this.rootDOMRef,
+          children: /* @__PURE__ */ k("div", { className: v, style: l, role: "alert", children: [
+            b && this.renderIcon(),
+            /* @__PURE__ */ c("span", { className: `${r}-content`, children: t }),
+            y && (i !== void 0 ? /* @__PURE__ */ c(
+              "span",
+              {
+                onClick: this.onClose,
+                className: `${r}-close-btn`,
+                children: i
+              }
+            ) : /* @__PURE__ */ c(
+              W,
+              {
+                prefix: r,
+                className: `${r}-close-btn`,
+                onClick: this.onClose,
+                children: /* @__PURE__ */ c(B, {})
+              }
+            ))
+          ] })
+        }
+      ) });
+    if (h === "notification")
+      return /* @__PURE__ */ c(U, { ...q, children: /* @__PURE__ */ c(
+        "div",
+        {
+          ref: this.rootDOMRef,
+          onMouseEnter: this.onMouseEnter,
+          onMouseLeave: this.onMouseLeave,
+          children: /* @__PURE__ */ k("div", { className: v, style: l, role: "alert", children: [
+            b && /* @__PURE__ */ c("div", { className: `${r}-left`, children: this.renderIcon() }),
+            /* @__PURE__ */ k("div", { className: `${r}-right`, children: [
+              e && /* @__PURE__ */ c("div", { className: `${r}-title`, children: e }),
+              /* @__PURE__ */ c("div", { className: `${r}-content`, children: t }),
+              u && /* @__PURE__ */ c("div", { className: `${r}-btn-wrapper`, children: u })
+            ] }),
+            y && (i !== void 0 ? /* @__PURE__ */ c(
+              "span",
+              {
+                onClick: this.onClose,
+                className: `${r}-close-btn`,
+                children: i
+              }
+            ) : /* @__PURE__ */ c(
+              W,
+              {
+                prefix: r,
+                className: `${r}-close-btn`,
+                onClick: this.onClose,
+                children: /* @__PURE__ */ c(
+                  S.Provider,
+                  {
+                    value: g ? { prefixCls: g } : {},
+                    children: /* @__PURE__ */ c(B, {})
+                  }
+                )
+              }
+            ))
+          ] })
+        }
+      ) });
+  }
+}
+f(j, "defaultProps", {
+  type: "info",
+  showIcon: !0,
+  noticeType: "message",
+  duration: 3e3
+}), f(j, "contextType", R);
+function le(d, m) {
+  const e = z(R), [t, s] = be([]);
+  function p(u) {
+    s((n) => [...n, u]);
+  }
+  function l(u) {
+    s(
+      (n) => n.filter((r) => u !== r)
+    );
+  }
+  function o() {
+    return e;
+  }
+  return _(m, () => ({
+    addInstance: p,
+    removeInstance: l,
+    getContextConfig: o
+  })), D.Children.map(
+    t,
+    (u, n) => D.cloneElement(u, { key: n })
+  );
+}
+le.displayName = "ContextHolderElement";
+const ce = Z(le);
+function De(d = {}) {
+  const { maxCount: m, duration: e = 3e3, prefixCls: t } = d, s = G(), p = /* @__PURE__ */ c(ce, { ref: s }), l = {};
+  let o;
+  function u(r) {
+    let a, h;
+    if (s.current) {
+      const b = s.current.getContextConfig();
+      h = b.rtl, a = b.prefixCls;
+    }
+    const g = t || a, C = {
+      position: "top",
+      duration: e,
+      ...r
+    }, { position: i, transitionClassNames: x } = C;
+    let v;
+    if (l[i]) {
+      const b = l[i].state.notices;
+      b.length >= m ? (v = b[0].id, b.shift(), l[i].add({ ...C, id: v })) : v = l[i].add(C);
+    } else
+      o = /* @__PURE__ */ c(
+        $,
+        {
+          transitionClassNames: x,
+          ref: (b) => {
+            l[i] = b, l[i] && (v = l[i].add(C));
+          },
+          prefixCls: g,
+          rtl: h
+        }
+      ), s.current.addInstance(o);
+    return () => {
+      l[i] && l[i].remove(v);
+    };
+  }
+  const n = {};
+  return ["info", "success", "warning", "error", "normal"].forEach((r) => {
+    n[r] = (a) => {
+      const h = Me(a) ? { content: a } : a;
+      return u({
+        ...h,
+        type: r
+      });
+    };
+  }), [n, p];
+}
+const je = [
+  "info",
+  "success",
+  "error",
+  "warning",
+  "loading",
+  "normal"
+];
+let P = {}, ae, J, de, A, K, Q;
+function fe(d) {
+  const m = {
+    position: "top",
+    duration: de,
+    ...d
+  }, { position: e, transitionClassNames: t, transitionTimeout: s } = m;
+  let p;
+  const { instance: l, pending: o } = P[e] || {};
+  if (l || o) {
+    const n = () => {
+      const { instance: r } = P[e] || {}, a = r.state.notices, h = a.find((C) => C.id === d.id), g = {
+        ...m,
+        update: h
+      };
+      a.length >= ae ? h ? r.add({
+        ...g,
+        id: h.id
+      }) : (a.shift(), r.add(g)) : p = r.add(g);
+    };
+    l ? n() : o != null && o.then && o.then(() => {
+      n(), P[e].pending = null;
+    });
+  } else {
+    const n = document.createElement("div");
+    (A || document.body).appendChild(n), P[e] = {}, P[e].pending = new Promise((r) => {
+      oe(
+        /* @__PURE__ */ c(
+          $,
+          {
+            transitionClassNames: t,
+            transitionTimeout: s,
+            ref: (a) => {
+              P[e] || (P[e] = {}), P[e].instance = a, p = a.add(m), r(null);
+            }
+          }
+        ),
+        n
+      );
+    });
+  }
+  return () => {
+    var n, r;
+    (r = (n = P[e]) == null ? void 0 : n.instance) == null || r.remove(p);
+  };
+}
+class $ extends se {
+  constructor() {
+    super(...arguments);
+    f(this, "remove", (e) => {
+      const t = this.state.notices.find((s) => s.id === e);
+      t && this.update({
+        ...t,
+        style: { ...t.style, opacity: 0 }
+      }), setTimeout(() => {
+        super.remove(e);
+      }, 100);
+    });
+  }
+  render() {
+    const {
+      transitionClassNames: e,
+      transitionTimeout: t,
+      prefixCls: s,
+      rtl: p,
+      closable: l
+    } = this.props, { notices: o, position: u } = this.state, n = s || J, r = I(p) ? K : p, a = I(l) ? Q : l, h = n ? `${n}-message` : "pqb-message", g = {
+      enter: T(t == null ? void 0 : t.enter) ? t == null ? void 0 : t.enter : 100,
+      exit: T(t == null ? void 0 : t.exit) ? t == null ? void 0 : t.exit : 300
+    }, C = M(
+      `${h}-wrapper`,
+      `${h}-wrapper-${u}`
+    );
+    return /* @__PURE__ */ c("div", { className: C, children: /* @__PURE__ */ c(te, { component: null, children: o.map((i) => /* @__PURE__ */ c(
+      re,
+      {
+        timeout: g,
+        classNames: e || "fadeMessage",
+        onExit: (x) => {
+          x && (x.style.height = `${x.scrollHeight}px`);
+        },
+        onExiting: (x) => {
+          x && (x.style.height = 0);
+        },
+        onExited: (x) => {
+          var v;
+          x && (x.style.height = 0, (v = i.onClose) == null || v.call(i));
+        },
+        children: /* @__PURE__ */ c(
+          j,
+          {
+            ...i,
+            prefixCls: h,
+            classPrefixCls: n,
+            iconPrefix: n,
+            onClose: this.remove,
+            noticeType: "message",
+            rtl: r,
+            ...I(a) ? {} : { closable: a }
+          }
+        )
+      },
+      i.id
+    )) }) });
+  }
+}
+f($, "useMessage"), f($, "success"), f($, "info"), f($, "warning"), f($, "error"), f($, "loading"), f($, "normal"), f($, "config", (e = {}) => {
+  var t;
+  T(e.maxCount) && (ae = e.maxCount), e.prefixCls && (J = e.prefixCls), T(e.duration) && (de = e.duration), typeof e.rtl == "boolean" && (K = e.rtl), typeof e.closable == "boolean" && (Q = e.closable), ((t = e.getContainer) == null ? void 0 : t.call(e)) !== A && (A = e.getContainer(), Object.values(P).forEach(
+    ({ instance: s }) => s == null ? void 0 : s.clear()
+  ), P = {});
+}), f($, "clear", () => {
+  Object.values(P).forEach(({ instance: e }) => {
+    e == null || e.clear();
+  });
+}), f($, "addInstance", fe);
+je.forEach((d) => {
+  $[d] = (m) => fe({
+    ...typeof m == "string" ? { content: m } : m,
+    type: d
+  });
+});
+$.useMessage = De;
+let me = {};
+function Ue(d) {
+  me = {
+    ...d
+  };
+}
+function pt() {
+  return me;
+}
+let F = {
+  simple: !0
+};
+const ut = (d) => {
+  F = {
+    ...F,
+    ...d
+  };
+}, ht = () => F, Ct = [];
+function He(d = {}) {
+  const {
+    maxCount: m,
+    duration: e = 3e3,
+    prefixCls: t,
+    getContainer: s
+  } = d, p = G(), l = /* @__PURE__ */ c(ce, { ref: p }), o = {};
+  let u;
+  function n(a) {
+    let h, g;
+    if (p.current) {
+      const y = p.current.getContextConfig();
+      g = y.rtl, h = y.prefixCls;
+    }
+    const C = t || h;
+    let i = a.position;
+    I(a.position) && (i = g ? "topLeft" : "topRight");
+    const x = {
+      duration: e,
+      ...a
+    };
+    let v;
+    if (o[i]) {
+      const y = o[i].state.notices;
+      y.length >= m ? (v = y[0].id, y.shift(), o[i].add({ ...x, id: v })) : v = o[i].add(x);
+    } else
+      u = /* @__PURE__ */ c(
+        w,
+        {
+          ref: (y) => {
+            o[i] = y, o[i] && (v = o[i].add(x));
+          },
+          prefixCls: C,
+          rtl: g,
+          getContainer: s
+        }
+      ), p.current.addInstance(u);
+    return o[i];
+  }
+  const r = {};
+  return ["info", "success", "warning", "error", "normal"].forEach((a) => {
+    r[a] = (h) => n({
+      ...h,
+      type: a
+    });
+  }), [r, l];
+}
+const Se = ["info", "success", "error", "warning", "normal"];
+let N = {}, V, X, Y, H, O;
+const E = class E extends se {
+  constructor() {
+    super(...arguments);
+    f(this, "remove", (e) => {
+      const t = this.state.notices.find((s) => s.id === e);
+      t && this.update({
+        ...t,
+        style: { ...t.style, opacity: 0 }
+      }), setTimeout(() => {
+        super.remove(e);
+      }, 200);
+    });
+  }
+  render() {
+    const { notices: e } = this.state, { prefixCls: t, rtl: s, getContainer: p } = this.props;
+    let l = this.state.position;
+    const o = I(s) ? O : s;
+    I(l) && (l = o ? "topLeft" : "topRight");
+    const u = t || X, n = u ? `${u}-notification` : "pqb-notification";
+    let r;
+    l === "topLeft" || l === "bottomLeft" ? r = "slideNoticeLeft" : r = "slideNoticeRight";
+    const a = M(
+      `${n}-wrapper`,
+      `${n}-wrapper-${l}`,
+      { [`${n}-wrapper-rtl`]: O }
+    ), h = p == null ? void 0 : p(), g = /* @__PURE__ */ c("div", { className: a, children: /* @__PURE__ */ c(te, { component: null, children: e.map((C) => /* @__PURE__ */ c(
+      re,
+      {
+        timeout: {
+          enter: 400,
+          exit: 300
+        },
+        classNames: r,
+        onExit: (i) => {
+          i && (i.style.height = `${i.scrollHeight}px`);
+        },
+        onExiting: (i) => {
+          i && (i.style.height = 0);
+        },
+        onExited: (i) => {
+          var x;
+          i && (i.style.height = 0, (x = C.onClose) == null || x.call(C));
+        },
+        children: /* @__PURE__ */ c(
+          j,
+          {
+            ...C,
+            onClose: this.remove,
+            prefixCls: n,
+            iconPrefix: u,
+            classPrefixCls: u,
+            noticeType: "notification",
+            rtl: o
+          }
+        )
+      },
+      C.id
+    )) }) });
+    return h ? Ie(g, h) : g;
+  }
+};
+f(E, "useNotification"), f(E, "success"), f(E, "info"), f(E, "warning"), f(E, "error"), f(E, "normal"), f(E, "config", (e = {}) => {
+  var t;
+  T(e.maxCount) && (V = e.maxCount), e.prefixCls && (X = e.prefixCls), T(e.duration) && (Y = e.duration), typeof e.rtl == "boolean" && (O = e.rtl), e.getContainer && ((t = e.getContainer) == null ? void 0 : t.call(e)) !== H && (H = e.getContainer(), Object.values(N).forEach(
+    ({ instance: s }) => s == null ? void 0 : s.clear()
+  ), N = {});
+}), f(E, "clear", () => {
+  Object.values(N).forEach(({ instance: e }) => {
+    e == null || e.clear();
+  });
+}), f(E, "remove", (e) => {
+  Object.values(N).forEach(({ instance: t }) => {
+    t == null || t.remove(e);
+  });
+}), f(E, "addInstance", (e) => {
+  let t = e.position;
+  I(e.position) && (t = O ? "topLeft" : "topRight");
+  const s = {
+    duration: Y,
+    ...e
+  }, { instance: p, pending: l } = N[t] || {};
+  if (p || l) {
+    const u = () => {
+      const { instance: n } = N[t] || {}, r = n.state.notices, a = r.find((g) => g.id === e.id), h = {
+        ...s,
+        update: a
+      };
+      return r.length >= V ? a ? n.add({
+        ...h,
+        id: a.id
+      }) : (r.shift(), n.add(h)) : n.add({ ...h }), n;
+    };
+    return p ? u() : l != null && l.then && l.then(() => {
+      u(), N[t].pending = null;
+    }), p;
+  }
+  const o = document.createElement("div");
+  return (H || document.body).appendChild(o), N[t] = {}, N[t].pending = new Promise((u) => {
+    oe(
+      /* @__PURE__ */ c(
+        E,
+        {
+          ref: (n) => (N[t] || (N[t] = {}), N[t].instance = n, n.add(s), u(null), n)
+        }
+      ),
+      o
+    );
+  }), N[t].instance;
+});
+let w = E;
+Se.forEach((d) => {
+  w[d] = (m) => w.addInstance({
+    ...m,
+    type: d
+  });
+});
+w.useNotification = He;
+const Ae = {
+  primaryColor: {
+    default: "--pqbblue-6",
+    hover: "--pqbblue-5",
+    active: "--pqbblue-7"
+  },
+  successColor: {
+    default: "--green-6",
+    hover: "--green-5",
+    active: "--green-7"
+  },
+  infoColor: {
+    default: "--pqbblue-6",
+    hover: "--pqbblue-5",
+    active: "--pqbblue-7"
+  },
+  warningColor: {
+    default: "--orangered-6",
+    hover: "--orangered-5",
+    active: "--orangered-7"
+  },
+  dangerColor: {
+    default: "--red-6",
+    hover: "--red-5",
+    active: "--red-7"
+  }
+}, Fe = ie, ze = {};
+function U(d) {
+  const m = ee(
+    d,
+    Fe,
+    ze
+  ), {
+    theme: e,
+    themeType: t,
+    prefixCls: s,
+    children: p,
+    locale: l,
+    rtl: o,
+    effectGlobalNotice: u = !0,
+    effectGlobalModal: n = !0
+  } = m, r = window.document.body;
+  L(() => {
+    Ce(e) && Object.entries(Ae).forEach(([C, i], x, v) => {
+      let y = e == null ? void 0 : e[C];
+      if (y) {
+        let b = new he(y);
+        r.style.setProperty(i.default, b.lighten(0).toRgbArrayString()), e != null && e[`${C}Hover`] || r.style.setProperty(i.hover, b.lighten(10).toRgbArrayString()), e != null && e[`${C}Active`] || r.style.setProperty(i.active, b.lighten(-10).toRgbArrayString());
+      }
+    });
+  }, [e]), L(() => {
+    t && (t === "dark" ? r.setAttribute("pqb-theme", "dark") : r.removeAttribute("pqb-theme"));
+  }, [t]), L(() => {
+    u && ($.config({ prefixCls: s, rtl: o }), w.config({ prefixCls: s, rtl: o }));
+  }, [s, o, u]);
+  function a(C, i) {
+    return `${i || s}-${C}`;
+  }
+  const h = {
+    ...Te(m, ["children"]),
+    getPrefixCls: a
+  };
+  L(() => {
+    n && Ue({ locale: l, prefixCls: s, rtl: o });
+  }, [l, s, o, n]);
+  let g = p;
+  return s && s !== "pqb" && (g = /* @__PURE__ */ c(S.Provider, { value: { prefixCls: s }, children: p })), /* @__PURE__ */ c(R.Provider, { value: h, children: g });
+}
+U.ConfigContext = R;
+U.displayName = "ConfigProvider";
+const gt = R.Consumer;
+export {
+  gt as C,
+  Le as E,
+  W as I,
+  $ as M,
+  w as N,
+  R as a,
+  U as b,
+  Ae as c,
+  Ct as d,
+  ht as e,
+  ce as f,
+  pt as g,
+  j as h,
+  ut as s
+};