@pdf-viewer/react
Version:
A react-pdf-viewer component for React and Next.js. Suitable for react-pdf document.
66 lines (65 loc) • 3.03 kB
JavaScript
import { jsx as r, Fragment as z, jsxs as i } from "react/jsx-runtime";
import { useState as v, useRef as x, useEffect as C } from "react";
import { useZoomContext as L } from "../../../../contexts/ZoomContext.js";
import { UIButton as T } from "../../../ui/Button.js";
import { c as e } from "../../../../ZoomTool.module-6c5eabbb.js";
import { UIDropDown as w } from "../../../ui/DropDown.js";
import { useLayoutContainer as I } from "../../../../contexts/LayoutContainerContext.js";
import { G as h } from "../../../../index-f4a9ae4d.js";
import { MenuItem as m } from "../MenuItem.js";
import { MenuSeparator as b } from "../MenuSeparator.js";
import A from "../../../ui/RPTooltip.js";
import { ZoomLevel as p } from "../../../../utils/types.js";
import { useLocalizationContext as N } from "../../../../contexts/LocalizationContext.js";
import { ChevronDownIcon as P } from "../../../icons/ChevronDownIcon.js";
const R = [50, 75, 100, 125, 150, 200, 300, 400], _ = ({ icon: l }) => {
const { zoomLevel: u, setZoomLevel: n } = L(), { container: a, pagesRef: c } = I(), { localeMessages: o } = N(), [f, s] = v(0), d = x(
new ResizeObserver((t) => {
s(t[0].contentRect.height);
})
);
return C(() => (c && d.current.observe(c), () => {
d.current.disconnect();
}), [c]), /* @__PURE__ */ r(z, { children: /* @__PURE__ */ r(
w,
{
container: a,
triggerComponent: /* @__PURE__ */ r("div", { role: "button", children: /* @__PURE__ */ r(A, { content: o == null ? void 0 : o.zoomSelectTooltip, children: /* @__PURE__ */ i(
T,
{
className: e["rp-current-zoom-wrapper"],
"aria-label": o == null ? void 0 : o.zoomSelectTooltip,
children: [
/* @__PURE__ */ r("span", { className: e["rp-current-zoom-text"], children: u }),
/* @__PURE__ */ r("span", { className: e["rp-current-zoom-text"], children: "%" }),
/* @__PURE__ */ r("div", { className: e["rp-zoom-level-icon"], children: l || /* @__PURE__ */ r(P, {}) })
]
}
) }) }),
style: { minWidth: "200px" },
align: "center",
children: /* @__PURE__ */ i(
"div",
{
style: { maxHeight: `${f}px`, overflow: "auto" },
className: e["rp-zoom-dropdown-content"],
children: [
/* @__PURE__ */ i(h, { children: [
/* @__PURE__ */ r(m, { onClick: () => n(p.ACTUAL), children: o == null ? void 0 : o.zoomActualSize }),
/* @__PURE__ */ r(m, { onClick: () => n(p.PAGE_FIT), children: o == null ? void 0 : o.zoomPageFit }),
/* @__PURE__ */ r(m, { onClick: () => n(p.PAGE_WIDTH), children: o == null ? void 0 : o.zoomPageWidth })
] }),
/* @__PURE__ */ r(b, {}),
/* @__PURE__ */ r(h, { children: R.map((t) => /* @__PURE__ */ i(m, { onClick: () => n(t), children: [
t,
" %"
] }, t)) })
]
}
)
}
) });
};
export {
_ as ZoomLevelTool
};