@unicom-cloud/ui 0.8.106 → 0.8.107

package/modal/Modal.js

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