@unicom-cloud/ui 0.8.155 → 0.8.156

package/image/ImagePreview.js

@@ -1,41 +1,41 @@
-/* 潘启宝 2026-04-03 16:46:01 星期五 */
-import { isServerRendering as e, isUndefined as t } from "../utils/is.js";
-import { ArrowDown as n, ArrowLeft as r, ArrowRight as ee, ArrowUp as te, Esc as ne } from "../utils/keyboardCode.js";
-import re from "../hooks/use-merge-value/index.js";
-import i from "../utils/className.js";
-import ie from "../hooks/use-merge-props/index.js";
-import { off as a, on as o } from "../utils/dom.js";
-import ae from "../config-provider/context.js";
-import oe from "../config-provider/index.js";
-import se from "../utils/copy.js";
-import ce from "../utils/findRootElement.js";
-import le from "../hooks/use-resize-observers/index.js";
-import ue from "../hooks/use-overflow-hidden/index.js";
-import de from "../hooks/use-update-effect/index.js";
-import fe from "../portal/index.js";
-import { ImagePreviewGroupContext as pe } from "./context.js";
-import me from "./ImagePreviewArrow.js";
-import he from "./ImagePreviewToolbar.js";
-import ge from "./utils/getFixTranslate.js";
-import _e, { defaultScales as ve } from "./utils/getScale.js";
-import ye from "./utils/hook/useImageStatus.js";
-import { forwardRef as be, useCallback as xe, useContext as Se, useEffect as s, useImperativeHandle as Ce, useMemo as we, useRef as c, useState as l } from "react";
+/* 潘启宝 2026-04-14 16:51:07 星期二 */
+import { isHTMLElement as e, isServerRendering as t, isUndefined as n } from "../utils/is.js";
+import { ArrowDown as r, ArrowLeft as ee, ArrowRight as te, ArrowUp as ne, Esc as re } from "../utils/keyboardCode.js";
+import ie from "../hooks/use-merge-value/index.js";
+import ae from "../utils/className.js";
+import oe from "../hooks/use-merge-props/index.js";
+import { off as i, on as a } from "../utils/dom.js";
+import se from "../config-provider/context.js";
+import ce from "../config-provider/index.js";
+import le from "../utils/copy.js";
+import ue from "../utils/findRootElement.js";
+import de from "../hooks/use-resize-observers/index.js";
+import fe from "../hooks/use-overflow-hidden/index.js";
+import pe from "../hooks/use-update-effect/index.js";
+import me from "../portal/index.js";
+import { ImagePreviewGroupContext as he } from "./context.js";
+import ge from "./ImagePreviewArrow.js";
+import _e from "./ImagePreviewToolbar.js";
+import ve from "./utils/getFixTranslate.js";
+import ye, { defaultScales as o } from "./utils/getScale.js";
+import be from "./utils/hook/useImageStatus.js";
+import { forwardRef as xe, useCallback as Se, useContext as Ce, useEffect as s, useImperativeHandle as we, useMemo as Te, useRef as c, useState as l } from "react";
 import { getBodyContainer as u } from "@unicom-cloud/ui-common/utils/dom";
 import { jsx as d, jsxs as f } from "react/jsx-runtime";
-import Te from "@unicom-cloud/ui-common/transition-group/TransitionCSS";
-import Ee from "@unicom-cloud/icons/IconUiClose";
-import De from "@unicom-cloud/icons/IconUiLoading";
-import Oe from "@unicom-cloud/icons/IconUiCopy";
-import ke from "@unicom-cloud/icons/IconUiLeft";
-import Ae from "@unicom-cloud/icons/IconUiRight";
-import je from "@unicom-cloud/icons/IconUiFullscreen";
-import Me from "@unicom-cloud/icons/IconUiOriginalSize";
-import Ne from "@unicom-cloud/icons/IconUiRotateLeft";
-import Pe from "@unicom-cloud/icons/IconUiRotateRight";
-import Fe from "@unicom-cloud/icons/IconUiZoomIn";
-import Ie from "@unicom-cloud/icons/IconUiZoomOut";
+import Ee from "@unicom-cloud/ui-common/transition/TransitionCSS";
+import De from "@unicom-cloud/icons/IconUiClose";
+import Oe from "@unicom-cloud/icons/IconUiLoading";
+import ke from "@unicom-cloud/icons/IconUiCopy";
+import Ae from "@unicom-cloud/icons/IconUiLeft";
+import je from "@unicom-cloud/icons/IconUiRight";
+import Me from "@unicom-cloud/icons/IconUiFullscreen";
+import Ne from "@unicom-cloud/icons/IconUiOriginalSize";
+import Pe from "@unicom-cloud/icons/IconUiRotateLeft";
+import Fe from "@unicom-cloud/icons/IconUiRotateRight";
+import Ie from "@unicom-cloud/icons/IconUiZoomIn";
+import Le from "@unicom-cloud/icons/IconUiZoomOut";
 //#region components/pc/image/ImagePreview.tsx
-var p = 90, Le = {
+var p = 90, Re = {
 	maskClosable: !0,
 	closable: !0,
 	breakPoint: 316,
@@ -54,65 +54,65 @@ var p = 90, Le = {
 	],
 	getPopupContainer: u,
 	escToExit: !0,
-	scales: ve,
+	scales: o,
 	resetTranslate: !0
 };
-function m(ve, be) {
-	let { previewGroup: m, previewUrlMap: h, currentIndex: g, setCurrentIndex: Re, infinite: _, previewPropsMap: ze } = Se(pe), v = ie(ve, Le, m ? ze.get(g) : {}), { className: Be, style: Ve, src: He, defaultVisible: Ue, maskClosable: We, closable: Ge, breakPoint: Ke, actions: qe, actionsLayout: Je, getPopupContainer: y, onVisibleChange: Ye, scales: b, escToExit: x, imgAttributes: Xe = {}, imageRender: Ze, extra: Qe = null, resetTranslate: S } = v, C = m ? h.get(g) : He, [w, $e] = l(C), [T, et] = re(!1, {
-		defaultValue: Ue,
+function m(o, xe) {
+	let { previewGroup: m, previewUrlMap: h, currentIndex: g, setCurrentIndex: ze, infinite: _, previewPropsMap: Be } = Ce(he), v = oe(o, Re, m ? Be.get(g) : {}), { className: Ve, style: He, src: Ue, defaultVisible: We, maskClosable: Ge, closable: Ke, breakPoint: qe, actions: Je, actionsLayout: Ye, getPopupContainer: y, onVisibleChange: Xe, scales: b, escToExit: x, imgAttributes: Ze = {}, imageRender: Qe, extra: $e = null, resetTranslate: S } = v, C = m ? h.get(g) : Ue, [w, et] = l(C), [T, tt] = ie(!1, {
+		defaultValue: We,
 		value: v.visible
-	}), E = Se(ae), { prefixCls: tt, getPrefixCls: nt, locale: D, rtl: rt } = E, O = nt?.("image"), k = `${O}-preview`, it = i(k, {
+	}), E = Ce(se), { prefixCls: nt, getPrefixCls: rt, locale: D, rtl: it } = E, O = rt?.("image"), k = `${O}-preview`, at = ae(k, {
 		[`${k}-hide`]: !T,
-		[`${k}-rtl`]: rt
-	}, Be), A = c(void 0), at = c(void 0), j = c(void 0), M = c(void 0), ot = c(void 0), N = c(!1), P = c({
+		[`${k}-rtl`]: it
+	}, Ve), A = c(void 0), ot = c(void 0), j = c(void 0), M = c(void 0), st = c(void 0), N = c(!1), P = c({
 		pageX: 0,
 		pageY: 0,
 		originX: 0,
 		originY: 0
-	}), { isLoading: st, isLoaded: ct, setStatus: F } = ye("loading"), [lt, ut] = l(!1), [I, L] = l({
+	}), { isLoading: ct, isLoaded: lt, setStatus: F } = be("loading"), [ut, dt] = l(!1), [I, L] = l({
 		x: 0,
 		y: 0
-	}), [R, z] = l(1), [dt, ft] = l(!1), [B, V] = l(0), [H, pt] = l(!1), U = we(() => new _e(b), []), { onLoad: mt, onError: ht, onMouseDown: gt, style: _t, className: vt, ...yt } = Xe, bt = !_ && g <= 0, xt = !_ && g >= h.size - 1;
+	}), [R, z] = l(1), [ft, pt] = l(!1), [B, V] = l(0), [H, mt] = l(!1), U = Te(() => new ye(b), []), { onLoad: ht, onError: gt, onMouseDown: _t, style: vt, className: yt, ...bt } = Ze, xt = !_ && g <= 0, St = !_ && g >= h.size - 1;
 	function W() {
 		L({
 			x: 0,
 			y: 0
 		}), z(1), V(0);
 	}
-	Ce(be, () => ({
+	we(xe, () => ({
 		reset: W,
 		getRootElement() {
 			return M.current;
 		}
 	}));
-	let [G, St] = l(), Ct = xe(() => G, [G]);
+	let [G, Ct] = l(), wt = Se(() => G, [G]);
 	s(() => {
 		let e = y?.();
-		St(ce(e) || u());
-	}, [y]), ue(Ct, { hidden: T });
-	let wt = we(() => !e && G === u(), [G]);
-	function Tt(e) {
+		Ct(ue(e) || u());
+	}, [y]), fe(wt, { hidden: T });
+	let Tt = Te(() => !t && G === u(), [G]);
+	function Et(e) {
 		let t = h.size;
-		_ && (e %= t, e < 0 && (e = t - Math.abs(e))), e !== g && e >= 0 && e <= t - 1 && Re(e);
+		_ && (e %= t, e < 0 && (e = t - Math.abs(e))), e !== g && e >= 0 && e <= t - 1 && ze(e);
 	}
 	function K() {
-		Tt(g - 1);
+		Et(g - 1);
 	}
 	function q() {
-		Tt(g + 1);
+		Et(g + 1);
 	}
-	function Et() {
+	function Dt() {
 		V(B === 0 ? 360 - p : B - p);
 	}
-	function Dt() {
+	function Ot() {
 		V((B + p) % 360);
 	}
-	let J = c(null), Ot = () => {
-		!dt && ft(!0), J.current && clearTimeout(J.current), J.current = setTimeout(() => {
-			ft(!1);
+	let J = c(null), kt = () => {
+		!ft && pt(!0), J.current && clearTimeout(J.current), J.current = setTimeout(() => {
+			pt(!1);
 		}, 1e3);
 	}, Y = (e) => {
-		R !== e && (z(e), Ot());
+		R !== e && (z(e), kt());
 	};
 	function X() {
 		Y(U.getNextScale(R, "zoomIn"));
@@ -120,42 +120,45 @@ function m(ve, be) {
 	function Z() {
 		Y(U.getNextScale(R, "zoomOut"));
 	}
-	function kt(e) {
+	function At(e) {
 		e.deltaY > 0 ? R >= U.minScale && Z() : R <= U.maxScale && X();
 	}
-	function At() {
-		Y(1);
-	}
 	function jt() {
-		let e = j.current.getBoundingClientRect(), t = A.current.getBoundingClientRect(), n = e.height / (t.height / R), r = e.width / (t.width / R);
-		Y(Math.max(n, r));
+		Y(1);
 	}
-	function Mt(e) {
-		e.target === e.currentTarget && We && Q();
+	function Mt() {
+		let e = j.current?.getBoundingClientRect?.(), t = A.current?.getBoundingClientRect?.();
+		if (e instanceof DOMRect && t instanceof DOMRect) {
+			let n = e.height / (t.height / R), r = e.width / (t.width / R);
+			Y(Math.max(n, r));
+		}
 	}
-	function Nt() {
-		se(w);
+	function Nt(e) {
+		e.target === e.currentTarget && Ge && Q();
 	}
 	function Pt() {
+		le(w);
+	}
+	function Ft() {
 		Q();
 	}
-	function Ft(e) {
+	function It(e) {
 		Q();
 	}
 	function Q() {
-		T && (Ye?.(!1, T), t(v.visible) && et(!1));
+		T && (Xe?.(!1, T), n(v.visible) && tt(!1));
 	}
-	function It(e) {
-		e && e.length && ut(e[0].contentRect.width < Ke);
+	function Lt(e) {
+		e && e.length && dt(e[0].contentRect.width < qe);
 	}
-	let Lt = () => {
+	let Rt = () => {
 		if (!j.current || !A.current) return;
-		let [e, t] = ge(j.current.getBoundingClientRect(), A.current.getBoundingClientRect(), I.x, I.y, R);
+		let [e, t] = ve(j.current.getBoundingClientRect(), A.current.getBoundingClientRect(), I.x, I.y, R);
 		(e !== I.x || t !== I.y) && L({
 			x: e,
 			y: t
 		});
-	}, Rt = (e) => {
+	}, zt = (e) => {
 		if (T && H) {
 			e.preventDefault?.();
 			let { originX: t, originY: n, pageX: r, pageY: ee } = P.current;
@@ -165,54 +168,54 @@ function m(ve, be) {
 			});
 		}
 	}, $ = (e) => {
-		e.preventDefault?.(), pt(!1);
+		e.preventDefault?.(), mt(!1);
 	};
-	function zt(e) {
-		F("loaded"), mt?.(e);
-	}
 	function Bt(e) {
-		F("error"), ht?.(e);
+		F("loaded"), ht?.(e);
+	}
+	function Vt(e) {
+		F("error"), gt?.(e);
 	}
-	let Vt = (e) => {
-		e.preventDefault?.(), pt(!0);
+	let Ht = (e) => {
+		e.preventDefault?.(), mt(!0);
 		let t = e.type === "touchstart" ? e.touches[0] : e;
-		P.current.pageX = t.pageX, P.current.pageY = t.pageY, P.current.originX = I.x, P.current.originY = I.y, gt?.(e);
+		P.current.pageX = t.pageX, P.current.pageY = t.pageY, P.current.originX = I.x, P.current.originY = I.y, _t?.(e);
 	};
-	s(() => (T && H && (o(document, "mousemove", Rt, !1), o(document, "mouseup", $, !1)), () => {
-		a(document, "mousemove", Rt, !1), a(document, "mouseup", $, !1);
+	s(() => (T && H && (a(document, "mousemove", zt, !1), a(document, "mouseup", $, !1)), () => {
+		i(document, "mousemove", zt, !1), i(document, "mouseup", $, !1);
 	}), [T, H]), s(() => {
-		S && !H && Lt();
+		S && !H && Rt();
 	}, [H, I]), s(() => {
-		S && Lt();
+		S && Rt();
 	}, [R]), s(() => {
 		T && W();
 	}, [T]), s(() => {
-		$e(C), F(C ? "loading" : "loaded"), W();
-	}, [C]), de(() => {
+		et(C), F(C ? "loading" : "loaded"), W();
+	}, [C]), pe(() => {
 		U.updateScale(b), z(1);
 	}, [b]), s(() => {
 		let e = (e) => {
 			if (e) switch (e.key) {
-				case ne.key:
+				case re.key:
 					x && Q();
 					break;
-				case ee.key:
+				case te.key:
 					q();
 					break;
-				case r.key:
+				case ee.key:
 					K();
 					break;
-				case te.key:
+				case ne.key:
 					X();
 					break;
-				case n.key:
+				case r.key:
 					Z();
 					break;
 				default:
 			}
 		};
-		return T && !H && !N.current && (N.current = !0, o(document, "keydown", e)), () => {
-			N.current = !1, a(document, "keydown", e);
+		return T && !H && !N.current && (N.current = !0, a(document, "keydown", e)), () => {
+			N.current = !1, i(document, "keydown", e);
 		};
 	}, [
 		T,
@@ -221,173 +224,178 @@ function m(ve, be) {
 		g,
 		R
 	]);
-	let Ht = [
+	let Ut = [
 		!1,
 		{
 			key: "rotateRight",
 			name: D?.ImagePreview?.rotateRight,
-			content: /* @__PURE__ */ d(Pe, {}),
-			onClick: Dt
+			content: /* @__PURE__ */ d(Fe, {}),
+			onClick: Ot
 		},
 		{
 			key: "rotateLeft",
 			name: D?.ImagePreview?.rotateLeft,
-			content: /* @__PURE__ */ d(Ne, {}),
-			onClick: Et
+			content: /* @__PURE__ */ d(Pe, {}),
+			onClick: Dt
 		},
 		{
 			key: "zoomIn",
 			name: D?.ImagePreview?.zoomIn,
-			content: /* @__PURE__ */ d(Fe, {}),
+			content: /* @__PURE__ */ d(Ie, {}),
 			onClick: X,
 			disabled: R === U.maxScale
 		},
 		{
 			key: "zoomOut",
 			name: D?.ImagePreview?.zoomOut,
-			content: /* @__PURE__ */ d(Ie, {}),
+			content: /* @__PURE__ */ d(Le, {}),
 			onClick: Z,
 			disabled: R === U.minScale
 		},
 		{
 			key: "originalSize",
 			name: D?.ImagePreview?.originalSize,
-			content: /* @__PURE__ */ d(Me, {}),
-			onClick: At
+			content: /* @__PURE__ */ d(Ne, {}),
+			onClick: jt
 		},
 		{
 			key: "maximize",
 			name: "最大化",
-			content: /* @__PURE__ */ d(je, {}),
-			onClick: jt
+			content: /* @__PURE__ */ d(Me, {}),
+			onClick: Mt
 		},
 		!!m && {
 			key: "next",
 			name: "下一张",
-			content: /* @__PURE__ */ d(Ae, {}),
-			disabled: xt,
+			content: /* @__PURE__ */ d(je, {}),
+			disabled: St,
 			onClick: q
 		},
 		!!m && {
 			key: "prev",
 			name: "上一张",
-			content: /* @__PURE__ */ d(ke, {}),
-			disabled: bt,
+			content: /* @__PURE__ */ d(Ae, {}),
+			disabled: xt,
 			onClick: K
 		},
 		{
 			key: "copy",
 			name: "复制",
-			content: /* @__PURE__ */ d(Oe, {}),
-			onClick: Nt
+			content: /* @__PURE__ */ d(ke, {}),
+			onClick: Pt
 		},
 		{
 			key: "close",
 			name: "关闭",
-			content: /* @__PURE__ */ d(Ee, {}),
-			onClick: Pt
+			content: /* @__PURE__ */ d(De, {}),
+			onClick: Ft
 		}
 	].filter(Boolean);
-	le((e) => {
-		It(e);
+	de((e) => {
+		Lt(e);
 	}, [j.current]);
-	let Ut = () => {
+	let Wt = () => {
 		let e = /* @__PURE__ */ d("img", {
-			onWheel: kt,
+			onWheel: At,
 			ref: A,
-			className: i(vt, `${k}-img`, { [`${k}-img-moving`]: H }),
+			className: ae(yt, `${k}-img`, { [`${k}-img-moving`]: H }),
 			style: {
-				..._t,
+				...vt,
 				transform: `translate(${I.x}px, ${I.y}px) rotate(${B}deg)`
 			},
 			src: w,
-			...yt,
-			onLoad: zt,
-			onError: Bt,
+			...bt,
+			onLoad: Bt,
+			onError: Vt,
 			onMouseDown: (e) => {
-				e.button === 0 && Vt(e);
+				e.button === 0 && Ht(e);
 			}
 		}, w);
-		return Ze?.(e) ?? e;
+		return Qe?.(e) ?? e;
 	};
-	return /* @__PURE__ */ d(fe, {
+	return /* @__PURE__ */ d(me, {
 		visible: T,
-		forceRender: !1,
-		getContainer: Ct,
-		children: /* @__PURE__ */ d(oe, {
+		getContainer: wt,
+		children: /* @__PURE__ */ d(ce, {
 			...E,
 			childrenName: "ImagePreview",
 			getPopupContainer: () => j.current,
-			children: /* @__PURE__ */ d(Te, {
+			children: /* @__PURE__ */ d(Ee, {
 				in: T,
 				duration: 400,
 				appear: !0,
 				classNames: `${k}-fade`,
 				mountOnEnter: !0,
 				unmountOnExit: !1,
-				onEnter: (e) => {
-					e && (e.parentNode.style.display = "block", e.style.display = "block");
+				onEnter: (t) => {
+					if (t ||= M.current, e(t)) {
+						let n = t.parentNode;
+						e(n) && (n.style.display = "block"), t.style.display = "block";
+					}
 				},
-				onExited: (e) => {
-					e && (e.parentNode.style.display = "", e.style.display = "none");
+				onExited: (t) => {
+					if (t ||= M.current, e(t)) {
+						let n = t.parentNode;
+						e(n) && (n.style.display = ""), t.style.display = "none";
+					}
 				},
 				refElement: M,
 				children: /* @__PURE__ */ f("div", {
-					className: it,
 					style: {
-						...Ve || {},
-						...wt ? {} : {
+						...He || {},
+						...Tt ? {} : {
 							zIndex: "inherit",
 							position: "absolute"
 						}
 					},
+					className: at,
 					ref: M,
 					children: [/* @__PURE__ */ d("div", {
-						ref: ot,
+						ref: st,
 						className: `${k}-mask`,
-						onClick: Ft
+						onClick: It
 					}), /* @__PURE__ */ f("div", {
 						ref: j,
 						className: `${k}-wrapper`,
-						onClick: Mt,
+						onClick: Nt,
 						children: [
 							/* @__PURE__ */ f("div", {
-								ref: at,
+								ref: ot,
 								className: `${k}-img-container`,
 								style: { transform: `scale(${R}, ${R})` },
-								onClick: Mt,
-								children: [Ut(), st && /* @__PURE__ */ d("div", {
+								onClick: Nt,
+								children: [Wt(), ct && /* @__PURE__ */ d("div", {
 									className: `${k}-loading`,
-									children: /* @__PURE__ */ d(De, {})
+									children: /* @__PURE__ */ d(Oe, {})
 								})]
 							}),
-							dt && /* @__PURE__ */ f("div", {
+							ft && /* @__PURE__ */ f("div", {
 								className: `${k}-scale-value`,
 								children: [(R * 100).toFixed(0), "%"]
 							}),
-							ct && /* @__PURE__ */ d(he, {
+							lt && /* @__PURE__ */ d(_e, {
 								prefixCls: O,
 								previewPrefixCls: k,
-								actions: qe,
-								actionsLayout: Je,
-								defaultActions: Ht,
-								simple: lt
+								actions: Je,
+								actionsLayout: Ye,
+								defaultActions: Ut,
+								simple: ut
 							}),
-							Ge && /* @__PURE__ */ d("div", {
+							Ke && /* @__PURE__ */ d("div", {
 								className: `${k}-close-btn`,
-								onClick: Pt,
-								children: /* @__PURE__ */ d(Ee, {})
+								onClick: Ft,
+								children: /* @__PURE__ */ d(De, {})
 							}),
-							m && /* @__PURE__ */ d(me, {
+							m && /* @__PURE__ */ d(ge, {
 								previewCount: h.size,
 								current: g,
 								infinite: _,
-								disableLeft: bt,
-								disableRight: xt,
+								disableLeft: xt,
+								disableRight: St,
 								onPrev: K,
 								onNext: q
 							}),
-							Qe
+							$e
 						]
 					})]
 				})
@@ -395,7 +403,7 @@ function m(ve, be) {
 		})
 	});
 }
-var h = be(m);
+var h = xe(m);
 h.displayName = "ImagePreview";
 //#endregion
 export { h as default };

package/image/ImagePreviewArrow.js

@@ -1,4 +1,4 @@
-/* 潘启宝 2026-04-03 16:46:01 星期五 */
+/* 潘启宝 2026-04-14 16:51:07 星期二 */
 import e from "../utils/className.js";
 import t from "../config-provider/context.js";
 import "../config-provider/index.js";