@unicom-cloud/ui 0.8.43 → 0.8.45

package/menu/util.js

@@ -0,0 +1,80 @@
+import u from "react";
+const C = [
+  "popup",
+  "triggerProps",
+  "selectable"
+], i = (t) => {
+  let r = [];
+  return u.Children.forEach(t, (e) => {
+    var p;
+    const o = (p = e == null ? void 0 : e.type) == null ? void 0 : p.menuType;
+    o === "MenuItem" || o === "SubMenu" ? r.push(e) : o === "MenuGroup" && (r = r.concat(
+      i(e.props.children)
+    ));
+  }), r;
+}, k = (t, r = [], e = {}) => {
+  const o = i(t);
+  return o.forEach((p, n) => {
+    var f, h;
+    const s = p.key, l = p.type.menuType, c = [s, ...r], y = {
+      keyPath: [],
+      prev: ((f = o[n - 1]) == null ? void 0 : f.key) || null,
+      next: ((h = o[n + 1]) == null ? void 0 : h.key) || null
+    };
+    if (n === 0 || n === o.length - 1) {
+      const a = c[1], d = n === 0 ? "firstChild" : "lastChild";
+      a && (e[a] = {
+        ...e[a],
+        [d]: s
+      });
+    }
+    switch (l) {
+      case "SubMenu":
+        y.keyPath = c, k(p.props.children, c, e);
+        break;
+      case "MenuItem":
+        y.keyPath = c, y.disabled = p.props.disabled;
+        break;
+    }
+    e[s] = {
+      ...e[s],
+      ...y
+    };
+  }), e;
+}, M = (t, r) => u.Children.map(t, (e, o) => {
+  if (!e || !e.props)
+    return e;
+  const p = typeof e.type == "string";
+  if (!(e.type && e.type.menuType) && e.props.children) {
+    const s = p ? {} : r, l = M(e.props.children, r);
+    return u.cloneElement(e, {
+      ...s,
+      _key: e.key,
+      children: l.length === 1 ? l[0] : l
+    });
+  }
+  return p ? e : u.cloneElement(e, {
+    ...r,
+    // Properties of the component itself have higher priority
+    ...e.props,
+    _key: e.key || `$menu-${o}`
+  });
+});
+function E(t, r) {
+  let e = !1;
+  function o(p) {
+    !p || e || u.Children.forEach(p, (n) => {
+      if (n && n.props && n.type && !e) {
+        const s = n.type.menuType, l = n.props.selectable;
+        (s === "MenuItem" || s === "SubMenu" && l) && (e = r.indexOf(n.key) !== -1), !e && n.props.children && o(n.props.children);
+      }
+    });
+  }
+  return o(t), e;
+}
+export {
+  C as PROPS_NEED_TO_BE_PASSED_IN_SUBMENU,
+  k as generateInfoMap,
+  E as isChildrenSelected,
+  M as processChildren
+};

package/message/useMessage.js

@@ -0,0 +1,53 @@
+import { jsx as d } from "react/jsx-runtime";
+import _ from "lodash/isString";
+import { useRef as H } from "react";
+import I from "../Message.js";
+import M from "../utils/contextHolder.js";
+function S(m = {}) {
+  const { maxCount: u, duration: p = 3e3, prefixCls: x } = m, r = H(), C = /* @__PURE__ */ d(M, { ref: r }), e = {};
+  let a;
+  function g(i) {
+    let s, c;
+    if (r.current) {
+      const o = r.current.getContextConfig();
+      c = o.rtl, s = o.prefixCls;
+    }
+    const h = x || s, f = {
+      position: "top",
+      duration: p,
+      ...i
+    }, { position: t, transitionClassNames: E } = f;
+    let n;
+    if (e[t]) {
+      const o = e[t].state.notices;
+      o.length >= u ? (n = o[0].id, o.shift(), e[t].add({ ...f, id: n })) : n = e[t].add(f);
+    } else
+      a = /* @__PURE__ */ d(
+        I,
+        {
+          transitionClassNames: E,
+          ref: (o) => {
+            e[t] = o, e[t] && (n = e[t].add(f));
+          },
+          prefixCls: h,
+          rtl: c
+        }
+      ), r.current.addInstance(a);
+    return () => {
+      e[t] && e[t].remove(n);
+    };
+  }
+  const l = {};
+  return ["info", "success", "warning", "error", "normal"].forEach((i) => {
+    l[i] = (s) => {
+      const c = _(s) ? { content: s } : s;
+      return g({
+        ...c,
+        type: i
+      });
+    };
+  }), [l, C];
+}
+export {
+  S as default
+};

package/modal/Confirm.js

@@ -0,0 +1,98 @@
+import { jsx as l, jsxs as x } from "react/jsx-runtime";
+import F from "@unicom-cloud/icons/IconUiCheckCircleFill";
+import y from "@unicom-cloud/icons/IconUiCloseCircleFill";
+import u from "@unicom-cloud/icons/IconUiExclamationCircleFill";
+import I from "@unicom-cloud/icons/IconUiInfoCircleFill";
+/* empty css                  */
+import P from "../config-provider/ConfigProvider.js";
+import { render as N } from "../utils/reactDOM.js";
+import O from "./Modal.js";
+import { destroyList as m, getConfigProviderProps as U, getModalConfig as w } from "./config.js";
+function E(e) {
+  const { prefixCls: o, simple: n } = w();
+  return /* @__PURE__ */ l(O, { prefixCls: o, simple: n, ...e, children: e.content });
+}
+const f = (e) => {
+  let o = e.icon;
+  if (!o && o !== null && (o = /* @__PURE__ */ l(u, {}), e.isNotice))
+    switch (e.noticeType) {
+      case "info":
+        o = /* @__PURE__ */ l(I, {});
+        break;
+      case "success":
+        o = /* @__PURE__ */ l(F, {});
+        break;
+      case "warning":
+        o = /* @__PURE__ */ l(u, {});
+        break;
+      case "error":
+        o = /* @__PURE__ */ l(y, {});
+        break;
+    }
+  return e.noticeType === "show" && (o = e.icon), e.isNotice && (e.hideCancel = !0), e.title = o === null && e.title === null ? null : /* @__PURE__ */ x("span", { children: [
+    o,
+    e.title
+  ] }), e;
+};
+function G(e, o) {
+  let n;
+  const s = document.createElement("div");
+  document.body.appendChild(s);
+  const p = U();
+  function C(r) {
+    const i = /* @__PURE__ */ l(P, { ...p, children: /* @__PURE__ */ l(E, { ...r, onCancel: a }) });
+    n ? n.render(i) : n = N(i, s);
+  }
+  const c = C;
+  let t = {
+    ...e,
+    visible: !1
+  };
+  const h = () => {
+    let r;
+    const i = e.onOk;
+    i && (r = i(a)), r && r.then && (t.confirmLoading = !0, c(t), r.then(
+      () => {
+        a(!0);
+      },
+      (v) => {
+        console.error(v), t.confirmLoading = !1, c(t);
+      }
+    )), r || a(!0);
+  };
+  t.onOk = h, t = f(t), t.visible = !0, c(t);
+  function k() {
+    n = n == null ? void 0 : n._unmount(), s.parentNode && s.parentNode.removeChild(s);
+    for (let r = 0; r < m.length; r++)
+      if (m[r] === d) {
+        m.splice(r, 1);
+        break;
+      }
+  }
+  function a(r) {
+    var i;
+    !r && ((i = e.onCancel) == null || i.call(e)), d();
+  }
+  function b(r) {
+    t = {
+      ...t,
+      title: e.title,
+      // 避免 newConfig 未传递 title 时，icon 出现多个的问题
+      ...r
+    }, t = f(t), c(t);
+  }
+  function d() {
+    t.visible = !1, t.afterClose = () => {
+      var r;
+      (r = e.afterClose) == null || r.call(e), k();
+    }, c(t);
+  }
+  return m.push(d), {
+    close: d,
+    update: b
+  };
+}
+export {
+  G as default,
+  f as normalizeConfig
+};

package/modal/Modal.js

@@ -0,0 +1,419 @@
+import { jsxs as y, jsx as r, Fragment as Ke } from "react/jsx-runtime";
+import Ge from "@unicom-cloud/icons/IconUiClose";
+import pe from "lodash/isFunction";
+import Je, { forwardRef as Qe, useContext as _e, useRef as c, useState as N, useCallback as D, useEffect as Z } from "react";
+import ge from "../Button.js";
+/* empty css                  */
+import en from "../config-provider/ConfigProvider.js";
+import nn from "../hooks/useMergeProps.js";
+import tn from "../hooks/useMergeValue.js";
+import rn from "../hooks/useOverflowHidden.js";
+import on from "../IconHover.js";
+import ln from "../Portal.js";
+import Ce from "../utils/CSSTransition.js";
+import xe from "@unicom-cloud/utils/class-name";
+import { isServerRendering as sn, contains as an } from "../utils/dom.js";
+import { Esc as cn } from "../utils/keyCode.js";
+import un from "../utils/omit.js";
+import { findDOMNode as mn } from "../utils/reactDOM.js";
+import A from "./Confirm.js";
+import { setModalConfig as dn, destroyList as be } from "./config.js";
+import fn from "./use-modal/index.js";
+import { ConfigContext as pn } from "../config-provider/context.js";
+let j = null, gn = 0;
+sn || document.documentElement.addEventListener(
+  "click",
+  (o) => {
+    j = {
+      left: o.clientX,
+      top: o.clientY
+    }, setTimeout(() => {
+      j = null;
+    }, 100);
+  },
+  !0
+);
+const Cn = {
+  mask: !0,
+  maskClosable: !0,
+  mountOnEnter: !0,
+  escToExit: !0,
+  getPopupContainer: () => document.body,
+  alignCenter: !0
+};
+function xn(o, P) {
+  var fe;
+  const p = _e(pn), s = nn(
+    o,
+    Cn,
+    (fe = p.componentConfig) == null ? void 0 : fe.Modal
+  ), {
+    className: he,
+    style: ve,
+    visible: i,
+    simple: K,
+    title: h,
+    subtitle: $,
+    children: we,
+    cancelText: Ee,
+    okText: Me,
+    okButtonProps: Te,
+    cancelButtonProps: ke,
+    getPopupContainer: R = () => document.body,
+    footer: v,
+    afterClose: I,
+    confirmLoading: ye,
+    mountOnEnter: X,
+    unmountOnExit: Y,
+    afterOpen: B,
+    hideCancel: Ne,
+    maskClosable: De,
+    mask: w,
+    alignCenter: Pe,
+    getChildrenPopupContainer: G,
+    wrapClassName: $e,
+    escToExit: O,
+    modalRender: J,
+    maskStyle: Re,
+    wrapStyle: Ie,
+    closeIcon: Q,
+    fullscreenable: bn,
+    ..._
+  } = s, g = c(null), ee = c(null), a = c(null), [ne, te] = N(), [re, Xe] = N(), E = c(null), C = c(!1), [Ye, oe] = N(""), [le, se] = N(""), L = c(!0);
+  i && L.current && (L.current = !1);
+  const M = c();
+  M.current || (M.current = gn++);
+  const [Be, S] = tn(!1, {
+    defaultValue: !1,
+    value: ye
+  }), t = p.getPrefixCls("modal", s.prefixCls), { locale: H, rtl: ie } = p, Oe = !K || _.noticeType === "show", Le = "closable" in s ? s.closable : Oe, Se = D(() => mn(R()), [R]);
+  rn(Se, { hidden: i && w });
+  function V(e) {
+    e.stopPropagation(), z();
+  }
+  function z() {
+    var e;
+    (e = s.onCancel) == null || e.call(s);
+  }
+  const He = (e) => {
+    O && i && e.key === cn.key && (e.stopPropagation(), z());
+  }, F = c(!1), Ve = (e) => {
+    C.current && (C.current = !1, !F.current && De && w && e.target === e.currentTarget && setTimeout(() => {
+      z();
+    }, 100));
+  }, ze = (e) => {
+    var l;
+    let n = (l = s.onOk ?? s.onConfirm) == null ? void 0 : l(e);
+    n != null && n.then && (S(!0), n.then(
+      () => {
+        S(!1);
+      },
+      (u) => {
+        S(!1), console.error(u);
+      }
+    ));
+  };
+  Z(() => {
+    let e = null;
+    return O && (e = setTimeout(() => {
+      var n;
+      an(document.body, g.current) && ((n = g.current) == null || n.focus());
+    })), () => {
+      e && clearTimeout(e);
+    };
+  }, [i, O]);
+  const Fe = () => {
+    var e;
+    if (i && re === void 0 && g.current) {
+      const n = +((e = window.getComputedStyle(g.current, null)) == null ? void 0 : e.zIndex);
+      isNaN(n) || Xe(n + 1);
+    }
+  }, qe = () => {
+    if (v === null) return;
+    const e = /* @__PURE__ */ r(ge, { onClick: V, ...ke, children: Ee || H.Modal.cancelText }), n = /* @__PURE__ */ r(
+      ge,
+      {
+        loading: Be,
+        onClick: ze,
+        type: "primary",
+        ...Te,
+        children: Me || H.Modal.okText
+      }
+    ), l = pe(v) ? v(e, n) : v || /* @__PURE__ */ y(Ke, { children: [
+      !Ne && e,
+      n
+    ] });
+    return /* @__PURE__ */ r("div", { className: `${t}-footer`, children: l });
+  }, q = c(
+    ue()
+  ), Ue = D((e) => {
+    var l, u, d, f, k;
+    if (!a.current)
+      return;
+    e.preventDefault();
+    let n = q.current;
+    n.screenX = e.screenX, n.screenY = e.screenY, n.prewTranslateX = n.translateX, n.prewTranslateY = n.translateY, n.boundingClientRect = ((u = (l = a.current) == null ? void 0 : l.getBoundingClientRect) == null ? void 0 : u.call(l)) ?? {}, n.offsetParentBoundingClientRect = ((k = (f = (d = a.current) == null ? void 0 : d.offsetParent) == null ? void 0 : f.getBoundingClientRect) == null ? void 0 : k.call(f)) ?? {}, T(), We();
+  }, []), ae = D((e) => {
+    e.preventDefault();
+    let n = q.current, { left: l, right: u, top: d, bottom: f } = n.boundingClientRect ?? {}, { width: k, height: Ae } = n.offsetParentBoundingClientRect ?? {}, x = Math.max(e.screenX - n.screenX, -l);
+    x = Math.min(x, k - u);
+    let b = Math.max(e.screenY - n.screenY, -d);
+    b = Math.min(b, Ae - f), x += n.prewTranslateX, b += n.prewTranslateY, n.translateX = x, n.translateY = b, oe(`translate(${x}px, ${b}px)`);
+  }, []), ce = D((e) => {
+    e.preventDefault(), T();
+  }, []);
+  function We() {
+    document.documentElement.addEventListener(
+      "mousemove",
+      ae
+    ), document.documentElement.addEventListener(
+      "mouseup",
+      ce
+    );
+  }
+  function T() {
+    document.documentElement.removeEventListener(
+      "mousemove",
+      ae
+    ), document.documentElement.removeEventListener(
+      "mouseup",
+      ce
+    );
+  }
+  function ue() {
+    return {
+      screenX: 0,
+      screenY: 0,
+      prewTranslateX: 0,
+      prewTranslateY: 0,
+      translateX: 0,
+      translateY: 0,
+      boundingClientRect: null,
+      offsetParentBoundingClientRect: null
+    };
+  }
+  function U() {
+    q.current = ue(), oe(""), se("");
+  }
+  Z(() => () => {
+    U(), T();
+  }, []), Z(() => (a.current || (U(), T()), () => {
+  }), [a.current]);
+  const Ze = /* @__PURE__ */ y(
+    en,
+    {
+      ...p,
+      prefixCls: s.prefixCls || p.prefixCls,
+      locale: H,
+      zIndex: re || 1050,
+      getPopupContainer: (e) => typeof G == "function" ? G(e) : ee.current,
+      children: [
+        (!!h || !!$) && /* @__PURE__ */ y("div", { className: `${t}-header`, children: [
+          !!h && /* @__PURE__ */ r(
+            "div",
+            {
+              className: `${t}-title`,
+              id: `pqb-dialog-${M.current}`,
+              children: h
+            }
+          ),
+          !!$ && /* @__PURE__ */ r("div", { className: `${t}-subtitle`, children: $ })
+        ] }),
+        /* @__PURE__ */ r("div", { ref: ee, className: `${t}-content`, children: we }),
+        qe(),
+        !s.fullscreenable && /* @__PURE__ */ r(
+          "div",
+          {
+            className: `${t}-drag-icon`,
+            onMouseDown: Ue,
+            onDoubleClick: U
+          }
+        ),
+        (Le || !!s.fullscreenable) && (Q !== void 0 ? /* @__PURE__ */ r(
+          "span",
+          {
+            className: `${t}-close-icon`,
+            onClick: V,
+            children: Q
+          }
+        ) : /* @__PURE__ */ r(
+          on,
+          {
+            tabIndex: -1,
+            className: `${t}-close-icon`,
+            onClick: V,
+            role: "button",
+            "aria-label": "Close",
+            children: /* @__PURE__ */ r(Ge, {})
+          }
+        ))
+      ]
+    }
+  ), je = h ? { "aria-labelledby": `pqb-dialog-${M.current}` } : {}, me = /* @__PURE__ */ r(
+    "div",
+    {
+      role: "dialog",
+      "aria-modal": "true",
+      ...je,
+      className: xe(
+        t,
+        {
+          [`${t}-simple`]: K,
+          [`${t}-rtl`]: ie,
+          [`${t}-fullscreenable`]: s.fullscreenable
+        },
+        he
+      ),
+      style: {
+        ...ve,
+        transform: Ye,
+        transformOrigin: le
+      },
+      ref: a,
+      children: Ze
+    }
+  ), W = (e) => {
+    if (le)
+      return;
+    let n = "";
+    if (E.current) {
+      const l = e.getBoundingClientRect(), { left: u, top: d } = E.current;
+      n = `${u - l.left}px ${d - l.top}px`;
+    }
+    se(n);
+  }, de = L.current ? !X : !!a.current;
+  return i || de ? /* @__PURE__ */ r(
+    ln,
+    {
+      visible: i,
+      forceRender: de,
+      getContainer: R,
+      children: /* @__PURE__ */ y("div", { ref: P, children: [
+        w ? /* @__PURE__ */ r(
+          Ce,
+          {
+            in: i,
+            timeout: 400,
+            appear: !0,
+            mountOnEnter: X,
+            classNames: "fadeModal",
+            unmountOnExit: Y,
+            onEnter: (e) => {
+              e && (e.style.display = "block");
+            },
+            onExited: (e) => {
+              e && (e.style.display = "none");
+            },
+            children: /* @__PURE__ */ r(
+              "div",
+              {
+                "aria-hidden": !0,
+                className: `${t}-mask`,
+                style: Re
+              }
+            )
+          }
+        ) : null,
+        /* @__PURE__ */ r(
+          "div",
+          {
+            ...un(_, [
+              "content",
+              "icon",
+              "showIcon",
+              "isNotice",
+              "noticeType",
+              "onCancel",
+              "onOk",
+              "onConfirm",
+              "closable",
+              "prefixCls"
+            ]),
+            tabIndex: -1,
+            ref: (e) => {
+              g.current = e, Fe();
+            },
+            className: xe(
+              `${t}-wrapper`,
+              {
+                [`${t}-wrapper-no-mask`]: !w,
+                [`${t}-wrapper-align-center`]: Pe,
+                [`${t}-wrapper-rtl`]: ie
+              },
+              $e
+            ),
+            style: {
+              ...Ie || {},
+              // 必须 visible=false，立即设置display:none，否则modal加载react-monaco-editor的时候，编辑器显示异常
+              display: i || ne ? "block" : "none",
+              overflow: !i && ne ? "hidden" : ""
+            },
+            onKeyDown: He,
+            onMouseDown: (e) => {
+              C.current = e.target === e.currentTarget;
+            },
+            onClick: Ve,
+            children: /* @__PURE__ */ r(
+              Ce,
+              {
+                in: i,
+                timeout: 400,
+                appear: !0,
+                classNames: "zoomModal",
+                unmountOnExit: Y,
+                mountOnEnter: X,
+                onEnter: (e) => {
+                  e && (te(!0), E.current = j, W(e), a.current = e);
+                },
+                onEntered: (e) => {
+                  e && (W(e), E.current = null, B == null || B());
+                },
+                onExit: () => {
+                  F.current = !0;
+                },
+                onExited: (e) => {
+                  e && (te(!1), W(e), I == null || I(), F.current = !1, Y && (a.current = null));
+                },
+                children: Je.cloneElement(
+                  pe(J) ? J(me) : me,
+                  {
+                    onMouseDown: () => {
+                      C.current = !1;
+                    },
+                    onMouseUp: () => {
+                      C.current = !1;
+                    }
+                  }
+                )
+              }
+            )
+          }
+        )
+      ] })
+    }
+  ) : null;
+}
+const m = Qe(
+  xn
+);
+m.displayName = "Modal";
+m.config = dn;
+m.show = (o) => A({ ...o, noticeType: "show" });
+m.confirm = (o) => A(o);
+m.useModal = fn;
+["info", "success", "warning", "error"].forEach((o) => {
+  m[o] = (P) => A({
+    ...P,
+    isNotice: !0,
+    noticeType: o
+  });
+});
+m.destroyAll = () => {
+  for (; be.length; ) {
+    const o = be.pop();
+    o && o();
+  }
+};
+export {
+  m as default
+};

package/modal/config.js

@@ -0,0 +1,25 @@
+let e = {};
+function n(o) {
+  e = {
+    ...o
+  };
+}
+function r() {
+  return e;
+}
+let t = {
+  simple: !0
+};
+const i = (o) => {
+  t = {
+    ...t,
+    ...o
+  };
+}, s = () => t, f = [];
+export {
+  f as destroyList,
+  r as getConfigProviderProps,
+  s as getModalConfig,
+  n as setConfigProviderProps,
+  i as setModalConfig
+};