@unicom-cloud/ui 0.8.90 → 0.8.91

package/image/ImagePreview.js

@@ -1,41 +1,487 @@
-import "react/jsx-runtime";
-import "@unicom-cloud/icons/IconUiClose";
-import "@unicom-cloud/icons/IconUiCopy";
-import "@unicom-cloud/icons/IconUiFullscreen";
-import "@unicom-cloud/icons/IconUiLeft";
-import "@unicom-cloud/icons/IconUiLoading";
-import "@unicom-cloud/icons/IconUiOriginalSize";
-import "@unicom-cloud/icons/IconUiRight";
-import "@unicom-cloud/icons/IconUiRotateLeft";
-import "@unicom-cloud/icons/IconUiRotateRight";
-import "@unicom-cloud/icons/IconUiZoomIn";
-import "@unicom-cloud/icons/IconUiZoomOut";
-import "lodash/isUndefined";
-import "react";
-import "../chunk/B44Hj5ad.js";
+import { jsx as o, jsxs as N } from "react/jsx-runtime";
+import ve from "@unicom-cloud/icons/IconUiClose";
+import dt from "@unicom-cloud/icons/IconUiCopy";
+import gt from "@unicom-cloud/icons/IconUiFullscreen";
+import vt from "@unicom-cloud/icons/IconUiLeft";
+import kt from "@unicom-cloud/icons/IconUiLoading";
+import yt from "@unicom-cloud/icons/IconUiOriginalSize";
+import wt from "@unicom-cloud/icons/IconUiRight";
+import Ct from "@unicom-cloud/icons/IconUiRotateLeft";
+import bt from "@unicom-cloud/icons/IconUiRotateRight";
+import ht from "@unicom-cloud/icons/IconUiZoomIn";
+import It from "@unicom-cloud/icons/IconUiZoomOut";
+import xt from "lodash/isUndefined";
+import { forwardRef as St, useContext as ke, useState as u, useRef as g, useMemo as ye, useImperativeHandle as Rt, useCallback as Pt, useEffect as f } from "react";
+import Nt from "../config-provider/ConfigProvider.js";
 import "lodash/isEqualWith";
-import "../chunk/D5wldVRB.js";
-import "../chunk/ClM74To2.js";
-import "@unicom-cloud/utils/constant/keyboardCode";
+import zt from "../components/common/hooks/useMergeValue.js";
+import "../components/common/utils/is.js";
+import { ArrowDown as Tt, ArrowUp as Lt, ArrowLeft as Ot, ArrowRight as $t, Esc as Et } from "@unicom-cloud/utils/constant/keyboardCode";
 import "lodash/isNumber";
 import "lodash/merge";
-import "../utils/dom.js";
-import "../chunk/B4WG1mhs.js";
-import "../chunk/BFTV6myl.js";
-import "../chunk/DU1RCDfh.js";
-import "../chunk/BZ3igxQN.js";
+import { isServerRendering as Mt, on as q, off as K } from "../components/common/utils/dom.js";
+import "../components/common/hooks/useIntersectionObserver.js";
+import Ut from "../components/common/hooks/useMergeProps.js";
+import At from "../components/common/hooks/useOverflowHidden.js";
+import { findDOMNode_ as Yt } from "../components/common/utils/reactDOM.js";
 import "@unicom-cloud/utils/constant";
-import "../chunk/a3hR6zLw.js";
+import Dt from "../components/common/hooks/useUpdateEffect.js";
 import "lodash/debounce";
-import "../portal/index.js";
-import "../chunk/NPajzdOv.js";
-import "@unicom-cloud/utils/class-name";
-import "@unicom-cloud/utils/clipboard-copy";
-import "../chunk/CIRG541s.js";
-import "./ImagePreviewArrow.js";
-import "./ImagePreviewToolbar.js";
-import "./previewGroupContext.js";
-import { P as M } from "../chunk/CPCJg6bv.js";
+import Xt from "../portal/index.js";
+import { PqbCSSTransition as we } from "../components/common/utils/PqbCSSTransition.js";
+import Ce from "@unicom-cloud/utils/class-name";
+import Vt from "@unicom-cloud/utils/clipboard-copy";
+import { resizeObserverEffect as Wt } from "../components/common/utils/resizeObserverEffect.js";
+import Bt from "./ImagePreviewArrow.js";
+import Ft from "./ImagePreviewToolbar.js";
+import { PreviewGroupContext as Zt } from "./previewGroupContext.js";
+import jt from "./util/getFixTranslate.js";
+import Ht, { defaultScales as Gt } from "./util/getScale.js";
+import _t from "./util/hook/useImageStatus.js";
+import qt from "../config-provider/context.js";
+const J = 90, Kt = {
+  maskClosable: !0,
+  closable: !0,
+  breakPoint: 316,
+  actionsLayout: [
+    // 'fullScreen', // 潘启宝注释于2023年9月16日
+    "zoomOut",
+    "zoomIn",
+    "maximize",
+    "originalSize",
+    "rotateLeft",
+    "rotateRight",
+    "prev",
+    "next",
+    "copy",
+    "extra",
+    // 潘启宝更改
+    "close"
+  ],
+  getPopupContainer: () => document.body,
+  escToExit: !0,
+  scales: Gt,
+  resetTranslate: !0
+};
+function Jt(be, he) {
+  const {
+    previewGroup: k,
+    previewUrlMap: w,
+    currentIndex: c,
+    setCurrentIndex: Ie,
+    infinite: C,
+    previewPropsMap: xe
+  } = ke(Zt), Se = k ? xe.get(c) : {}, z = Ut(
+    be,
+    Kt,
+    Se
+  ), {
+    className: Re,
+    style: Pe,
+    src: Ne,
+    defaultVisible: ze,
+    maskClosable: Te,
+    closable: Le,
+    breakPoint: Oe,
+    actions: $e,
+    actionsLayout: Ee,
+    getPopupContainer: b,
+    onVisibleChange: T,
+    scales: L,
+    escToExit: Q,
+    imgAttributes: Me = {},
+    imageRender: O,
+    extra: Ue = null,
+    resetTranslate: ee
+  } = z, h = k ? w.get(c) : Ne, [$, Ae] = u(h), [i, Ye] = zt(!1, {
+    defaultValue: ze,
+    value: z.visible
+  }), te = ke(qt), { getPrefixCls: E, locale: r, rtl: De } = te, oe = E == null ? void 0 : E("image"), a = `${oe}-preview`, Xe = Ce(
+    a,
+    {
+      [`${a}-hide`]: !i,
+      [`${a}-rtl`]: De
+    },
+    Re
+  ), I = g(), Ve = g(), p = g(), ne = g(), M = g(!1), y = g({
+    pageX: 0,
+    pageY: 0,
+    originX: 0,
+    originY: 0
+  }), { isLoading: We, isLoaded: Be, setStatus: U } = _t("loading"), [Fe, Ze] = u(!1), [m, A] = u({ x: 0, y: 0 }), [n, Y] = u(1), [re, ie] = u(!1), [x, D] = u(0), [l, ae] = u(!1), d = ye(() => new Ht(L), []), {
+    onLoad: X,
+    onError: V,
+    onMouseDown: W,
+    style: je,
+    className: He,
+    ...Ge
+  } = Me, se = !C && c <= 0, ce = !C && c >= w.size - 1;
+  function B() {
+    A({ x: 0, y: 0 }), Y(1), D(0);
+  }
+  Rt(he, () => ({
+    reset: B,
+    getRootDOMNode: () => ne.current
+  }));
+  const [S, _e] = u(), me = Pt(() => S, [S]);
+  f(() => {
+    const e = b == null ? void 0 : b(), t = Yt(e) || document.body;
+    _e(t);
+  }, [b]), At(me, { hidden: i });
+  const qe = ye(
+    () => !Mt && S === document.body,
+    [S]
+  );
+  function le(e) {
+    const t = w.size;
+    C && (e %= t, e < 0 && (e = t - Math.abs(e))), e !== c && e >= 0 && e <= t - 1 && Ie(e);
+  }
+  function F() {
+    le(c - 1);
+  }
+  function Z() {
+    le(c + 1);
+  }
+  function Ke() {
+    D(x === 0 ? 360 - J : x - J);
+  }
+  function Je() {
+    D((x + J) % 360);
+  }
+  const j = g(null), Qe = () => {
+    !re && ie(!0), j.current && clearTimeout(j.current), j.current = setTimeout(() => {
+      ie(!1);
+    }, 1e3);
+  }, R = (e) => {
+    n !== e && (Y(e), Qe());
+  };
+  function H() {
+    const e = d.getNextScale(n, "zoomIn");
+    R(e);
+  }
+  function G() {
+    const e = d.getNextScale(n, "zoomOut");
+    R(e);
+  }
+  function et(e) {
+    e.deltaY > 0 ? n >= d.minScale && G() : n <= d.maxScale && H();
+  }
+  function tt() {
+    R(1);
+  }
+  function ot() {
+    const e = p.current.getBoundingClientRect(), t = I.current.getBoundingClientRect(), s = e.height / (t.height / n), v = e.width / (t.width / n), _ = Math.max(s, v);
+    R(_);
+  }
+  function ue(e) {
+    e.target === e.currentTarget && Te && P();
+  }
+  function nt() {
+    Vt($);
+  }
+  function fe() {
+    P();
+  }
+  function rt(e) {
+    P();
+  }
+  function P() {
+    i && (T == null || T(!1, i), xt(z.visible) && Ye(!1));
+  }
+  function it(e) {
+    if (e && e.length) {
+      const s = e[0].contentRect.width < Oe;
+      Ze(s);
+    }
+  }
+  const pe = () => {
+    if (!p.current || !I.current)
+      return;
+    const e = p.current.getBoundingClientRect(), t = I.current.getBoundingClientRect(), [s, v] = jt(
+      e,
+      t,
+      m.x,
+      m.y,
+      n
+    );
+    (s !== m.x || v !== m.y) && A({
+      x: s,
+      y: v
+    });
+  }, de = (e) => {
+    var t;
+    if (i && l) {
+      (t = e.preventDefault) == null || t.call(e);
+      const { originX: s, originY: v, pageX: _, pageY: ut } = y.current, ft = s + (e.pageX - _) / n, pt = v + (e.pageY - ut) / n;
+      A({
+        x: ft,
+        y: pt
+      });
+    }
+  }, ge = (e) => {
+    var t;
+    (t = e.preventDefault) == null || t.call(e), ae(!1);
+  };
+  function at(e) {
+    U("loaded"), X == null || X(e);
+  }
+  function st(e) {
+    U("error"), V == null || V(e);
+  }
+  const ct = (e) => {
+    var s;
+    (s = e.preventDefault) == null || s.call(e), ae(!0);
+    const t = e.type === "touchstart" ? e.touches[0] : e;
+    y.current.pageX = t.pageX, y.current.pageY = t.pageY, y.current.originX = m.x, y.current.originY = m.y, W == null || W(e);
+  };
+  f(() => (i && l && (q(document, "mousemove", de, !1), q(document, "mouseup", ge, !1)), () => {
+    K(document, "mousemove", de, !1), K(document, "mouseup", ge, !1);
+  }), [i, l]), f(() => {
+    ee && !l && pe();
+  }, [l, m]), f(() => {
+    ee && pe();
+  }, [n]), f(() => {
+    i && B();
+  }, [i]), f(() => {
+    Ae(h), U(h ? "loading" : "loaded"), B();
+  }, [h]), Dt(() => {
+    d.updateScale(L), Y(1);
+  }, [L]), f(() => {
+    const e = (t) => {
+      if (t)
+        switch (t.key) {
+          case Et.key:
+            Q && P();
+            break;
+          case $t.key:
+            Z();
+            break;
+          case Ot.key:
+            F();
+            break;
+          case Lt.key:
+            H();
+            break;
+          case Tt.key:
+            G();
+            break;
+        }
+    };
+    return i && !l && !M.current && (M.current = !0, q(document, "keydown", e)), () => {
+      M.current = !1, K(document, "keydown", e);
+    };
+  }, [i, Q, l, c, n]);
+  const mt = [
+    !1,
+    {
+      key: "rotateRight",
+      name: r == null ? void 0 : r.ImagePreview.rotateRight,
+      content: /* @__PURE__ */ o(bt, {}),
+      onClick: Je
+    },
+    {
+      key: "rotateLeft",
+      name: r == null ? void 0 : r.ImagePreview.rotateLeft,
+      content: /* @__PURE__ */ o(Ct, {}),
+      onClick: Ke
+    },
+    {
+      key: "zoomIn",
+      name: r == null ? void 0 : r.ImagePreview.zoomIn,
+      content: /* @__PURE__ */ o(ht, {}),
+      onClick: H,
+      disabled: n === d.maxScale
+    },
+    {
+      key: "zoomOut",
+      name: r == null ? void 0 : r.ImagePreview.zoomOut,
+      content: /* @__PURE__ */ o(It, {}),
+      onClick: G,
+      disabled: n === d.minScale
+    },
+    {
+      key: "originalSize",
+      name: r == null ? void 0 : r.ImagePreview.originalSize,
+      content: /* @__PURE__ */ o(yt, {}),
+      onClick: tt
+    },
+    {
+      key: "maximize",
+      name: "最大化",
+      content: /* @__PURE__ */ o(gt, {}),
+      onClick: ot
+    },
+    !!k && {
+      key: "next",
+      name: "下一张",
+      content: /* @__PURE__ */ o(wt, {}),
+      disabled: ce,
+      onClick: Z
+    },
+    !!k && {
+      key: "prev",
+      name: "上一张",
+      content: /* @__PURE__ */ o(vt, {}),
+      disabled: se,
+      onClick: F
+    },
+    {
+      key: "copy",
+      name: "复制",
+      content: /* @__PURE__ */ o(dt, {}),
+      onClick: nt
+    },
+    {
+      key: "close",
+      name: "关闭",
+      content: /* @__PURE__ */ o(ve, {}),
+      onClick: fe
+    }
+  ].filter(Boolean);
+  f(() => {
+    const e = Wt([p.current], it);
+    return () => {
+      e();
+    };
+  }, [p.current]);
+  const lt = () => {
+    const e = /* @__PURE__ */ o(
+      "img",
+      {
+        onWheel: et,
+        ref: I,
+        className: Ce(He, `${a}-img`, {
+          [`${a}-img-moving`]: l
+        }),
+        style: {
+          ...je,
+          transform: `translate(${m.x}px, ${m.y}px) rotate(${x}deg)`
+        },
+        src: $,
+        ...Ge,
+        onLoad: at,
+        onError: st,
+        onMouseDown: (t) => {
+          t.button === 0 && ct(t);
+        }
+      },
+      $
+    );
+    return (O == null ? void 0 : O(e)) ?? e;
+  };
+  return /* @__PURE__ */ o(Xt, { visible: i, forceRender: !1, getContainer: me, children: /* @__PURE__ */ o(
+    Nt,
+    {
+      ...te,
+      childrenName: "ImagePreview",
+      getPopupContainer: () => p.current,
+      children: /* @__PURE__ */ N(
+        "div",
+        {
+          className: Xe,
+          style: {
+            ...Pe || {},
+            ...qe ? {} : { zIndex: "inherit", position: "absolute" }
+          },
+          ref: ne,
+          children: [
+            /* @__PURE__ */ o(
+              we,
+              {
+                in: i,
+                timeout: 400,
+                appear: !0,
+                classNames: "fadeImage",
+                mountOnEnter: !0,
+                unmountOnExit: !1,
+                onEnter: (e) => {
+                  e && (e.parentNode.style.display = "block", e.style.display = "block");
+                },
+                onExited: (e) => {
+                  e && (e.parentNode.style.display = "", e.style.display = "none");
+                },
+                children: /* @__PURE__ */ o("div", { className: `${a}-mask`, onClick: rt })
+              }
+            ),
+            i && /* @__PURE__ */ N(
+              "div",
+              {
+                ref: p,
+                className: `${a}-wrapper`,
+                onClick: ue,
+                children: [
+                  /* @__PURE__ */ N(
+                    "div",
+                    {
+                      ref: Ve,
+                      className: `${a}-img-container`,
+                      style: { transform: `scale(${n}, ${n})` },
+                      onClick: ue,
+                      children: [
+                        lt(),
+                        We && /* @__PURE__ */ o("div", { className: `${a}-loading`, children: /* @__PURE__ */ o(kt, {}) })
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ o(
+                    we,
+                    {
+                      in: re,
+                      timeout: 400,
+                      appear: !0,
+                      classNames: "fadeImage",
+                      unmountOnExit: !0,
+                      children: /* @__PURE__ */ N("div", { className: `${a}-scale-value`, children: [
+                        (n * 100).toFixed(0),
+                        "%"
+                      ] })
+                    }
+                  ),
+                  Be && /* @__PURE__ */ o(
+                    Ft,
+                    {
+                      prefixCls: oe,
+                      previewPrefixCls: a,
+                      actions: $e,
+                      actionsLayout: Ee,
+                      defaultActions: mt,
+                      simple: Fe
+                    }
+                  ),
+                  Le && /* @__PURE__ */ o(
+                    "div",
+                    {
+                      className: `${a}-close-btn`,
+                      onClick: fe,
+                      children: /* @__PURE__ */ o(ve, {})
+                    }
+                  ),
+                  k && /* @__PURE__ */ o(
+                    Bt,
+                    {
+                      previewCount: w.size,
+                      current: c,
+                      infinite: C,
+                      disableLeft: se,
+                      disableRight: ce,
+                      onPrev: F,
+                      onNext: Z
+                    }
+                  ),
+                  Ue
+                ]
+              }
+            )
+          ]
+        }
+      )
+    }
+  ) });
+}
+const Qt = St(
+  Jt
+);
+Qt.displayName = "ImagePreview";
 export {
-  M as default
+  Qt as default
 };

package/image/ImagePreviewArrow.js

@@ -2,18 +2,19 @@ import { jsxs as f, jsx as e } from "react/jsx-runtime";
 import d from "@unicom-cloud/icons/IconUiLeft";
 import p from "@unicom-cloud/icons/IconUiRight";
 import { useContext as w } from "react";
-import { a as u } from "../chunk/B44Hj5ad.js";
+import "../config-provider/ConfigProvider.js";
 import s from "@unicom-cloud/utils/class-name";
-function j(m) {
+import u from "../config-provider/context.js";
+function k(l) {
   const {
     current: v,
     previewCount: h,
     infinite: C = !1,
     disableLeft: n,
-    disableRight: l,
+    disableRight: m,
     onPrev: i,
     onNext: o
-  } = m, { getPrefixCls: t } = w(u), r = t == null ? void 0 : t("image-preview"), c = s(`${r}-arrow`);
+  } = l, { getPrefixCls: t } = w(u), r = t == null ? void 0 : t("image-preview"), c = s(`${r}-arrow`);
   return /* @__PURE__ */ f("div", { className: c, children: [
     /* @__PURE__ */ e(
       "div",
@@ -31,10 +32,10 @@ function j(m) {
       "div",
       {
         className: s(`${r}-arrow-right`, {
-          [`${r}-arrow-disabled`]: l
+          [`${r}-arrow-disabled`]: m
         }),
         onClick: (a) => {
-          a.preventDefault(), !l && (o == null || o());
+          a.preventDefault(), !m && (o == null || o());
         },
         children: /* @__PURE__ */ e(p, {})
       }
@@ -42,5 +43,5 @@ function j(m) {
   ] });
 }
 export {
-  j as default
+  k as default
 };

package/image/ImagePreviewGroup.js

@@ -3,9 +3,9 @@ import J from "lodash/isArray";
 import K from "lodash/isPlainObject";
 import Q from "lodash/isUndefined";
 import a, { forwardRef as T, useMemo as W, useState as X, useRef as g, useEffect as Y, useImperativeHandle as Z } from "react";
-import { u as $ } from "../chunk/oopARUrq.js";
-import { u as x } from "../chunk/D5wldVRB.js";
-import { P as ee } from "../chunk/CPCJg6bv.js";
+import $ from "../components/common/hooks/useIsFirstRender.js";
+import x from "../components/common/hooks/useMergeValue.js";
+import ee from "./ImagePreview.js";
 import { PreviewGroupContext as re } from "./previewGroupContext.js";
 function te(I, C) {
   const {
@@ -26,13 +26,13 @@ function te(I, C) {
   }), i = W(
     () => u ? new Map(u.map((e, r) => [r, { url: e, preview: !0 }])) : null,
     [u]
-  ), A = $(), d = () => i ? new Map(i) : /* @__PURE__ */ new Map(), [E, p] = X(d()), m = g(), F = m.current || /* @__PURE__ */ new Map(), P = (e) => {
+  ), A = $(), d = () => i ? new Map(i) : /* @__PURE__ */ new Map(), [E, p] = X(d()), m = g(), F = m.current || /* @__PURE__ */ new Map(), M = (e) => {
     m.current = e(m.current);
   };
   Y(() => {
     A || p(d());
   }, [i]);
-  const M = new Map(
+  const P = new Map(
     Array.from(E).filter(([, { preview: e }]) => e).map(([e, { url: r }]) => [e, r])
   ), [L, S] = x(0, {
     value: b,
@@ -52,10 +52,10 @@ function te(I, C) {
     };
   }
   function H(e, r) {
-    return P(
+    return M(
       (n) => new Map(n).set(e, K(r) ? r : {})
     ), function() {
-      P((s) => {
+      M((s) => {
         const o = new Map(s);
         return o.delete(e) ? o : s;
       });
@@ -82,7 +82,7 @@ function te(I, C) {
     };
     return n(e);
   }, q = () => {
-    const e = Array.from(M.values());
+    const e = Array.from(P.values());
     return e.length > 0 ? /* @__PURE__ */ v("div", { style: { display: "none" }, children: e.map((r) => /* @__PURE__ */ v("img", { src: r }, r)) }) : null;
   };
   return /* @__PURE__ */ B(
@@ -90,7 +90,7 @@ function te(I, C) {
     {
       value: {
         previewGroup: !0,
-        previewUrlMap: M,
+        previewUrlMap: P,
         previewPropsMap: F,
         infinite: U,
         currentIndex: L,

package/image/index.js

@@ -1,8 +1,8 @@
 import o from "./Image.js";
-import { P as m } from "../chunk/CPCJg6bv.js";
-import { default as p } from "./ImagePreviewGroup.js";
+import { default as m } from "./ImagePreview.js";
+import { default as f } from "./ImagePreviewGroup.js";
 export {
   m as ImagePreview,
-  p as ImagePreviewGroup,
+  f as ImagePreviewGroup,
   o as default
 };

package/image/util/getFixTranslate.js

@@ -0,0 +1,7 @@
+function s(f, t, b, l, h) {
+  let o = b, i = l;
+  return b && (f.width > t.width ? o = 0 : (t.left > f.left && (o -= Math.abs(f.left - t.left) / h), t.right < f.right && (o += Math.abs(f.right - t.right) / h))), l && (f.height > t.height ? i = 0 : (t.top > f.top && (i -= Math.abs(f.top - t.top) / h), t.bottom < f.bottom && (i += Math.abs(f.bottom - t.bottom) / h))), [o, i];
+}
+export {
+  s as default
+};