@lobehub/ui
Version:
Lobe UI is an open-source UI component library for building AIGC web apps
54 lines (53 loc) • 1.64 kB
JavaScript
"use client";
import ActionIcon from "../../ActionIcon/ActionIcon.mjs";
import { useTranslation } from "../../i18n/useTranslation.mjs";
import { styles } from "../style.mjs";
import image_default from "../../i18n/resources/en/image.mjs";
import GalleryNav from "./GalleryNav.mjs";
import Toolbar from "./Toolbar.mjs";
import { useChromeIdle } from "./useChromeIdle.mjs";
import { memo, useCallback } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
import { X } from "lucide-react";
//#region src/Image/viewer/ViewerChrome.tsx
const ViewerChrome = memo(({ chromeRef, current, hasNext, hasPrev, next, onClose, prev, total, ...toolbarProps }) => {
const { t } = useTranslation(image_default);
const idle = useChromeIdle();
const handleChromeClick = useCallback((event) => {
event.stopPropagation();
}, []);
return /* @__PURE__ */ jsx("div", {
className: styles.viewerChrome,
ref: chromeRef,
onClick: handleChromeClick,
children: /* @__PURE__ */ jsxs("div", {
className: styles.viewerChromeIdle,
"data-idle-hidden": idle.hidden ? "" : void 0,
ref: idle.ref,
children: [
/* @__PURE__ */ jsx(ActionIcon, {
className: styles.viewerClose,
icon: X,
title: t("image.close"),
onClick: onClose
}),
total > 1 && /* @__PURE__ */ jsx(GalleryNav, {
current,
hasNext,
hasPrev,
next,
prev,
total
}),
/* @__PURE__ */ jsx(Toolbar, {
...toolbarProps,
onMoreOpenChange: idle.setHeld
})
]
})
});
});
ViewerChrome.displayName = "ViewerChrome";
//#endregion
export { ViewerChrome as default };
//# sourceMappingURL=ViewerChrome.mjs.map