@unicom-cloud/ui 0.8.44 → 0.8.46

package/image/Image.js

@@ -0,0 +1,189 @@
+import { jsx as i, jsxs as f } from "react/jsx-runtime";
+import Ce from "@unicom-cloud/icons/IconUiImageClose";
+import Ie from "@unicom-cloud/icons/IconUiLoading";
+import E from "lodash/isNumber";
+import H from "lodash/isPlainObject";
+import $e from "lodash/isUndefined";
+import Ne, { useContext as J, useMemo as p, useRef as Q, useEffect as g } from "react";
+/* empty css                  */
+import "../config-provider/ConfigProvider.js";
+import Ve from "../hooks/useInView.js";
+import xe from "../hooks/useKeyboardEvent.js";
+import Le from "../hooks/useMergeProps.js";
+import ye from "../hooks/useMergeValue.js";
+import T from "@unicom-cloud/utils/class-name";
+import Ee from "../utils/omit.js";
+import { ImageFooter as Re } from "./ImageFooter.js";
+import W from "./ImagePreview.js";
+import Ge from "./ImagePreviewGroup.js";
+import { PreviewGroupContext as je } from "./previewGroupContext.js";
+import Se from "./util/hook/useImageStatus.js";
+import Ue from "./util/hook/useShowFooter.js";
+import { ConfigContext as Fe } from "../config-provider/context.js";
+let R = 0;
+const Me = {
+  footerPosition: "inner",
+  preview: !0
+};
+function Oe(X, Y) {
+  const { getPrefixCls: Z, componentConfig: v, rtl: ee } = J(Fe), re = Le(
+    X,
+    Me,
+    v == null ? void 0 : v.Image
+  ), {
+    style: oe,
+    className: te,
+    src: t,
+    width: j,
+    height: S,
+    title: w,
+    description: U,
+    actions: F,
+    footerPosition: M,
+    simple: O,
+    loader: h,
+    loaderClassName: ie,
+    error: se,
+    preview: a,
+    previewProps: b,
+    alt: P,
+    onClick: C,
+    index: I,
+    _index: z,
+    onError: $,
+    onLoad: N,
+    lazyload: l,
+    ...ne
+  } = re, ae = xe(), {
+    previewGroup: m,
+    handleVisibleChange: le,
+    registerPreviewUrl: ce,
+    registerPreviewProps: me,
+    setCurrentIndex: de
+  } = J(je), o = p(() => H(b) ? b : {}, [b]), ue = p(() => H(l) ? l : {}, [l]), s = p(() => E(I) || E(z) ? (R = E(I) ? I : z, R) : R++, []), V = o.src || t, [x] = Ue({ title: w, description: U, actions: F }), { isLoading: K, isError: L, isLoaded: c, isBeforeLoad: fe, setStatus: d } = Se("beforeLoad"), u = Q(!1), [_, pe] = ye(!1, {
+    defaultValue: o.defaultVisible,
+    value: o.visible
+  }), y = p(() => Ee(o, [
+    "visible",
+    "defaultVisible",
+    "src",
+    "onVisibleChange"
+  ]), [o]), e = Z("image"), ge = !$e(o.visible), ve = T(
+    e,
+    {
+      [`${e}-rtl`]: ee,
+      [`${e}-simple`]: O,
+      [`${e}-before-load`]: fe,
+      [`${e}-loading`]: K,
+      [`${e}-loading-error`]: L,
+      [`${e}-with-footer-inner`]: c && x && M === "inner",
+      [`${e}-with-footer-outer`]: c && x && M === "outer",
+      [`${e}-with-preview`]: c && a && !L && !ge
+    },
+    te
+  ), n = Q();
+  function we(r) {
+    u.current = !0, d("loaded"), N == null || N(r);
+  }
+  function he(r) {
+    u.current = !0, d("error"), $ == null || $(r);
+  }
+  function k(r) {
+    a && m ? (de(s), le(!0)) : a && B(!0), C == null || C(r);
+  }
+  function B(r) {
+    var D;
+    (D = o == null ? void 0 : o.onVisibleChange) == null || D.call(o, r, _), pe(r);
+  }
+  const { inView: q } = Ve({
+    target: n.current,
+    defaultInView: !l,
+    ...ue
+  });
+  g(() => {
+    u.current = !1, t || d("error");
+  }, [t]), g(() => {
+    n.current && (q ? ((n.current.src || t) && n.current.src !== t && (n.current.src = t), !u.current && !n.current.complete && d("loading")) : d("lazyload"));
+  }, [t, q]), g(() => {
+    if (!m) return;
+    const r = me(s, y);
+    return () => r(s);
+  }, [s, m, y]), g(() => {
+    if (!m) return;
+    const r = ce(s, V, a);
+    return () => r(s);
+  }, [s, m, V, a]);
+  const be = /* @__PURE__ */ f("div", { className: `${e}-error`, children: [
+    /* @__PURE__ */ i("div", { className: `${e}-error-icon`, children: /* @__PURE__ */ i(Ce, {}) }),
+    P && /* @__PURE__ */ i("div", { className: `${e}-error-alt`, children: P })
+  ] }), A = /* @__PURE__ */ i("div", { className: T(`${e}-loader`, ie), children: /* @__PURE__ */ f("div", { className: `${e}-loader-spin`, children: [
+    /* @__PURE__ */ i(Ie, {}),
+    /* @__PURE__ */ i("div", { className: `${e}-loader-spin-text`, children: "Loading" })
+  ] }) }), Pe = () => {
+    if (h === !0) return A;
+    const r = h || A;
+    return l || h ? r : null;
+  };
+  return /* @__PURE__ */ f(
+    "div",
+    {
+      className: ve,
+      style: Object.assign({ width: j, height: S }, oe),
+      ref: Y,
+      children: [
+        /* @__PURE__ */ i(
+          "img",
+          {
+            ref: n,
+            className: `${e}-img`,
+            tabIndex: 0,
+            ...ae({
+              onPressEnter: k
+            }),
+            ...ne,
+            ...l || t === void 0 ? {} : { src: t },
+            title: w,
+            width: j,
+            height: S,
+            onLoad: we,
+            onError: he,
+            onClick: k,
+            alt: P
+          }
+        ),
+        !c && /* @__PURE__ */ f("div", { className: `${e}-overlay`, children: [
+          L && (se || be),
+          K && Pe()
+        ] }),
+        c && x && /* @__PURE__ */ i(
+          Re,
+          {
+            title: w,
+            description: U,
+            actions: F,
+            prefixCls: e,
+            simple: O
+          }
+        ),
+        c && a && /* @__PURE__ */ i(
+          W,
+          {
+            visible: _,
+            src: V,
+            ...y,
+            onVisibleChange: B
+          }
+        )
+      ]
+    }
+  );
+}
+const ze = Ne.forwardRef(
+  Oe
+), G = ze;
+G.Preview = W;
+G.PreviewGroup = Ge;
+G.displayName = "Image";
+export {
+  G as default
+};

package/image/ImageFooter.js

@@ -0,0 +1,45 @@
+import { jsxs as m, jsx as s } from "react/jsx-runtime";
+import w from "@unicom-cloud/icons/IconUiMore";
+import c from "@unicom-cloud/utils/class-name";
+import { TriggerForToolbar as x } from "./TriggerForToolbar.js";
+import F from "./util/hook/useShowFooter.js";
+const I = (d) => {
+  const { style: p, className: h, title: o, description: t, actions: r, prefixCls: i, simple: n } = d, [$, N, a] = F({
+    title: o,
+    description: t,
+    actions: r
+  });
+  if (!$) return null;
+  const e = `${i}-footer`, f = c(e, h, {
+    [`${e}-with-actions`]: a
+  }), v = () => {
+    const l = /* @__PURE__ */ s("div", { className: `${i}-actions-list`, children: r.map((u, g) => /* @__PURE__ */ s("div", { className: `${i}-actions-item`, children: u }, `${g}`)) });
+    return n ? /* @__PURE__ */ s("div", { className: `${i}-actions-list`, children: /* @__PURE__ */ s(x, { prefixCls: i, popup: () => l, children: /* @__PURE__ */ s(
+      "div",
+      {
+        className: c(
+          `${i}-actions-item`,
+          `${i}-actions-item-trigger`
+        ),
+        children: /* @__PURE__ */ s("span", { children: /* @__PURE__ */ s(w, {}) })
+      }
+    ) }) }) : l;
+  };
+  return /* @__PURE__ */ m("div", { className: f, style: p, children: [
+    N && /* @__PURE__ */ m("div", { className: c(`${e}-block`, `${i}-caption`), children: [
+      o && /* @__PURE__ */ s("div", { className: `${i}-caption-title`, title: o, children: o }),
+      t && !n && /* @__PURE__ */ s(
+        "div",
+        {
+          className: `${i}-caption-description`,
+          title: t,
+          children: t
+        }
+      )
+    ] }),
+    a && /* @__PURE__ */ s("div", { className: c(`${e}-block`, `${i}-actions`), children: v() })
+  ] });
+};
+export {
+  I as ImageFooter
+};

package/image/ImagePreview.js

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