@unicom-cloud/ui 0.8.41

package/chunk/Dc_89PVN.js

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