@pdf-viewer/react/dist/components/layout/toolbar/tools/InputPageTool.js

A react-pdf-viewer component for React and Next.js. Suitable for react-pdf document.

import { jsxs as u, Fragment as h, jsx as g } from "react/jsx-runtime";
import { useState as d, useEffect as S, useCallback as o } from "react";
import { u as x, j as p } from "../../../../ToolbarLayout.module-cbc8e216.js";
import { useLocalizationContext as C } from "../../../../contexts/LocalizationContext.js";
import y from "../../../ui/RPTooltip.js";
import { UIInput as E } from "../../../ui/Input.js";
const k = () => {
  const { focusedPage: n, totalPages: s, goToPage: c } = x(), { localeMessages: a } = C(), [r, e] = d(n.toString());
  S(() => {
    e(n.toString());
  }, [n]);
  const m = o((t) => {
    const l = t.target.value;
    e(l);
  }, []), i = o(async () => {
    const t = c(r);
    t.success || e(t.currentPage.toString());
  }, [c, r, s]), f = o(() => {
    e(n.toString());
  }, [n]), P = o(
    (t) => {
      t.key === "Enter" && i();
    },
    [i]
  );
  return /* @__PURE__ */ u(h, { children: [
    /* @__PURE__ */ g(y, { content: a == null ? void 0 : a.currentPageTooltip, children: /* @__PURE__ */ g(
      E,
      {
        onKeyDown: P,
        onBlur: f,
        onChange: m,
        value: r,
        className: p["rp-page-input"]
      }
    ) }),
    /* @__PURE__ */ u("span", { className: p["rp-total-page"], children: [
      "/",
      s
    ] })
  ] });
};
export {
  k as InputPageTool
};