@pdf-viewer/react
Version:
A react-pdf-viewer component for React and Next.js. Suitable for react-pdf document.
131 lines (130 loc) • 5.77 kB
JavaScript
import { jsx as t, jsxs as c, Fragment as y } from "react/jsx-runtime";
import { useState as T, useRef as D, useCallback as x, useMemo as h, useEffect as G } from "react";
import { useZoomContext as _ } from "../../../contexts/ZoomContext.js";
import { ChevronUpIcon as F } from "../../icons/ChevronUpIcon.js";
import { ZoomInIcon as H } from "../../icons/ZoomInIcon.js";
import { ZoomOutIcon as R } from "../../icons/ZoomOutIcon.js";
import { UIButton as z } from "../../ui/Button.js";
import { c as e } from "../../../ZoomTool.module-6c5eabbb.js";
import { UIDropDown as U } from "../../ui/DropDown.js";
import { useLayoutContainer as j } from "../../../contexts/LayoutContainerContext.js";
import { G as b } from "../../../index-f4a9ae4d.js";
import { MenuItem as u } from "./MenuItem.js";
import { MenuSeparator as B } from "./MenuSeparator.js";
import { useToolbarComponentContext as V } from "../../../contexts/ToolbarComponentContext.js";
import { useIconContext as O } from "../../../contexts/IconContext.js";
import { useViewportContext as X } from "../../../contexts/ViewportContext.js";
import a from "../../ui/RPTooltip.js";
import { ZoomLevel as p } from "../../../utils/types.js";
import { useLocalizationContext as $ } from "../../../contexts/LocalizationContext.js";
import { c as q } from "../../../clsx-0c6e471a.js";
import { useIconToolContext as Z } from "../../../contexts/IconToolContext.js";
import { useToolComponentContext as J } from "../../../contexts/ToolComponentContext.js";
const K = 25, I = 1e3, Q = [50, 75, 100, 125, 150, 200, 300, 400], Y = () => {
const { zoomInIcon: r } = O(), { zoomInIcon: n } = Z();
return r || n || /* @__PURE__ */ t(H, {});
}, g = () => {
const { zoomOutIcon: r } = O(), { zoomOutIcon: n } = Z();
return r || n || /* @__PURE__ */ t(R, {});
}, Oo = () => {
const { zoomLevel: r, setZoomLevel: n, currentZoom: i } = _(), { container: v, pagesRef: d } = j(), { zoomTool: l = !0 } = V(), { zoomTool: f = !0 } = J(), { isSmallScreen: A } = X(), { localeMessages: o } = $(), [w, L] = T(0), [s, S] = T(!1), C = D(
new ResizeObserver((m) => {
L(m[0].contentRect.height);
})
), P = x(() => {
n(() => {
const m = Math.floor(i * 100 / 25) * 25;
return Math.min(m + 25, I);
});
}, [n, i]), N = x(() => {
n(() => {
const m = Math.ceil(i * 100 / 25) * 25;
return Math.min(m - 25, I);
});
}, [n, i]), k = h(() => i * 100 <= K, [i]), E = h(() => i * 100 >= I, [i]);
G(() => (d && C.current.observe(d), () => {
C.current.disconnect();
}), [d]);
const W = h(() => {
switch (r) {
case p.ACTUAL:
return o == null ? void 0 : o.zoomActualSize;
case p.PAGE_FIT:
return o == null ? void 0 : o.zoomPageFit;
case p.PAGE_WIDTH:
return o == null ? void 0 : o.zoomPageWidth;
}
return r;
}, [r, o]);
return !l || !f ? null : typeof l == "function" ? /* @__PURE__ */ t(l, { zoomLevel: r, setZoomLevel: n }) : typeof f == "function" ? /* @__PURE__ */ t(f, { zoomLevel: r, setZoomLevel: n }) : /* @__PURE__ */ c("div", { className: e["rp-zoom-wrapper"], children: [
/* @__PURE__ */ t(a, { content: o == null ? void 0 : o.zoomOutTooltip, children: /* @__PURE__ */ t(
z,
{
disabled: k,
onClick: N,
"aria-label": o == null ? void 0 : o.zoomOutTooltip,
children: /* @__PURE__ */ t(g, {})
}
) }),
!A && /* @__PURE__ */ t(
U,
{
container: v,
open: s,
onOpenChange: S,
triggerComponent: /* @__PURE__ */ t("div", { role: "button", children: /* @__PURE__ */ t(a, { content: o == null ? void 0 : o.zoomSelectTooltip, children: /* @__PURE__ */ c(
z,
{
className: q(
e["rp-current-zoom-wrapper"],
s && e.active
),
"aria-label": o == null ? void 0 : o.zoomSelectTooltip,
children: [
typeof r == "number" ? /* @__PURE__ */ c(y, { children: [
/* @__PURE__ */ t("span", { className: e["rp-current-zoom-text"], children: r }),
/* @__PURE__ */ t("span", { className: e["rp-current-zoom-text"], children: "%" })
] }) : /* @__PURE__ */ t("span", { className: e["rp-current-zoom-text"], children: W }),
/* @__PURE__ */ t(F, { className: e["rp-current-zoom-icon"] })
]
}
) }) }),
style: { minWidth: "200px" },
align: "center",
side: "bottom",
avoidCollisions: !1,
children: /* @__PURE__ */ c(
"div",
{
style: { maxHeight: `${w}px`, overflow: "auto" },
className: e["rp-zoom-dropdown-content"],
children: [
/* @__PURE__ */ c(b, { children: [
/* @__PURE__ */ t(u, { onClick: () => n(p.ACTUAL), children: o == null ? void 0 : o.zoomActualSize }),
/* @__PURE__ */ t(u, { onClick: () => n(p.PAGE_FIT), children: o == null ? void 0 : o.zoomPageFit }),
/* @__PURE__ */ t(u, { onClick: () => n(p.PAGE_WIDTH), children: o == null ? void 0 : o.zoomPageWidth })
] }),
/* @__PURE__ */ t(B, {}),
/* @__PURE__ */ t(b, { children: Q.map((m) => /* @__PURE__ */ c(u, { onClick: () => n(m), children: [
m,
" %"
] }, m)) })
]
}
)
}
),
/* @__PURE__ */ t(a, { content: o == null ? void 0 : o.zoomInTooltip, children: /* @__PURE__ */ t(
z,
{
disabled: E,
onClick: P,
"aria-label": o == null ? void 0 : o.zoomInTooltip,
children: /* @__PURE__ */ t(Y, {})
}
) })
] });
};
export {
Oo as ZoomTool
};