@react-pdf-kit/viewer 2.0.0-beta.1 → 2.0.0-beta.11

package/dist/components/layout/sidebar/RPSidebar.js

@@ -1,19 +1,21 @@
-import "react/jsx-runtime";
-import "react";
-import "../../icons/Thumbnail.js";
-import "../../ui/Button.js";
-import { a0 as Eo } from "../../../ToolbarLayout.module-37619c4b.js";
-import "./RPSplitter.js";
-import "../../../contexts/ToolbarComponentContext.js";
-import "../../../contexts/IconContext.js";
-import "../../ui/RPTooltip.js";
-import "../../../contexts/LocalizationContext.js";
-import "../../../contexts/IconToolContext.js";
-import "../../../utils/constants.js";
+import { jsx as t, Fragment as f, jsxs as l } from "react/jsx-runtime";
+import { useState as T, useRef as s, useCallback as C, useMemo as I } from "react";
+import { ThumbnailIcon as _ } from "../../icons/Thumbnail.js";
+import { UIButton as w } from "../../ui/Button.js";
+import { Thumbnails as x } from "./Thumbnails.js";
+import { RPSplitter as R } from "./RPSplitter.js";
+import { useThumbnailContext as v } from "../../../contexts/ThumbnailsContext.js";
+import { useToolbarComponentContext as N } from "../../../contexts/ToolbarComponentContext.js";
+import { useIconContext as S } from "../../../contexts/IconContext.js";
+import k from "../../ui/RPTooltip.js";
+import { useLocalizationContext as z } from "../../../contexts/LocalizationContext.js";
+import { useIconToolContext as q } from "../../../contexts/IconToolContext.js";
+import { THUMBNAIL_MIN_WIDTH as y } from "../../../utils/constants.js";
 import "../../../clsx-0c6e471a.js";
 import "../../../utils/withRef.js";
-import "../../icons/ChevronUpIcon.js";
-import "../../ui/Input.js";
+import "./Thumbnail.js";
+import "../../icons/LoaderIcon.js";
+import "../../../PaginationContext-9217cab4.js";
 import "../../../utils/types.js";
 import "../../../th_TH-d627cd51.js";
 import "../../../contexts/ScrollModeContext.js";
@@ -28,115 +30,83 @@ import "../../../contexts/DocumentPasswordContext.js";
 import "../../../utils/hooks/usePdfProperties.js";
 import "../../../utils/convertPdfDate.js";
 import "../../../utils/formatFileSize.js";
-import "../../../contexts/DarkModeContext.js";
-import "../../../utils/hooks/useDarkMode.js";
-import "../../../contexts/RotationContext.js";
-import "../../../contexts/LayerContext.js";
-import "../../../contexts/ZoomContext.js";
-import "../../../utils/getZoomLevel.js";
-import "../../../contexts/LayoutContainerContext.js";
-import "../../../contexts/ViewModeContext.js";
 import "../../../contexts/GlobalCurrentPage.js";
 import "../../../contexts/EventCallbackContext.js";
-import "../../../utils/hooks/useDebounce.js";
+import "../../../contexts/ViewModeContext.js";
 import "../../../contexts/VirtualScrollContext.js";
 import "../../../contexts/VirtualGridContext.js";
-import "../../../contexts/SelectionModeContext.js";
-import "../../../contexts/FullScreenContext.js";
-import "../../../utils/hooks/useFullScreen.js";
-import "../../../contexts/FileInputContext.js";
-import "../../../contexts/DropFileZoneContext.js";
-import "../../../contexts/ToolComponentContext.js";
-import "../../../utils/highlight.js";
-import "../../../utils/charators.js";
+import "../../../utils/smoothScrollTo.js";
 import "../../../contexts/DimensionPagesContext.js";
+import "../../../contexts/ZoomContext.js";
+import "../../../utils/getZoomLevel.js";
+import "../../../contexts/LayoutContainerContext.js";
+import "../../../contexts/RotationContext.js";
+import "../../../utils/hooks/useDebounce.js";
 import "../../../contexts/PagesRotateContext.js";
-import "../../../contexts/HighlightContext.js";
-import "../../../utils/hooks/useHighlight.js";
-import "../../../contexts/LicenseContext.js";
-import "../../../utils/hooks/useLicense.js";
-import "../../../contexts/DownloadContext.js";
 import "../../../contexts/SmoothScrollContext.js";
-import "../../../contexts/ElementPageContext.js";
-import "../../../utils/const.js";
 import "../../../utils/getScrollDistance.js";
-import "../../../utils/getElementPositionInPage.js";
+import "../../../utils/calculatePage.js";
+import "../../../contexts/RenderQueueProvider.js";
 import "../../../utils/Queue.js";
 import "../../../utils/renderPage.js";
-import "../../../contexts/LoaderContext.js";
-import "../../icons/LoaderIcon.js";
-import "../../../contexts/OtherToolContext.js";
-import "../../RPConfig.js";
-import "../../RPTheme.js";
-import "../../../contexts/ThemeContext.js";
-import "../../../utils/hooks/useLoadWorker.js";
-import "../Container.js";
-import "../../../contexts/ViewportContext.js";
-import "../WrapperLayout.js";
-import "../../../LayoutWrapper-6224491f.js";
-import "../../RPDropFileZone.js";
-import "../../icons/LightPdfIcon.js";
-import "../../icons/DarkPdfIcon.js";
-import "../../../utils/hooks/useLocalization.js";
-import "../../../SearchCloseButton-08d57275.js";
-import "../../icons/CloseIcon.js";
-import "../../ui/Checkbox.js";
-import "../../../index-c9a2990a.js";
-import "react-dom";
-import "../../icons/CheckIcon.js";
-import "../../ui/DropDown.js";
-import "../../../index-a48ec088.js";
-import "../../../index-808ea7bf.js";
-import "../toolbar/MenuItem.js";
-import "../toolbar/MenuSeparator.js";
-import "../../../utils/dateFormatter.js";
-import "../toolbar/PropertyItem.js";
-import "../../../RotateTool.module-67946714.js";
 import "../../../utils/hooks/useInfiniteScroll.js";
-import "../../../utils/link_service.js";
-import "../../../utils/annotations.js";
-import "../../../utils/sanitizeExternalUrl.js";
-import "../../page/searchHighlight.js";
-import "../../page/CustomElement.js";
-import "../../../utils/calculatePage.js";
-import "../../../utils/hooks/useMousePressed.js";
-import "../../../utils/hooks/useGrabScroll.js";
-import "../../../utils/hooks/usePinch.js";
-import "../../ui/PasswordModal.js";
-import "../../../utils/approximateFragtion.js";
-import "../../../utils/getWordPositionInPage.js";
-import "../../../utils/smoothScrollTo.js";
-import "../toolbar/FileUploadTool.js";
-import "../../icons/FileUploadDefaultIcon.js";
-import "../toolbar/DarkModeTool.js";
-import "../../icons/MoonIcon.js";
-import "../../icons/SunIcon.js";
-import "../../icons/ThreeDotIcon.js";
-import "../toolbar/DocumentProperties.js";
-import "../../icons/InfoIcon.js";
-import "../toolbar/RotateTool.js";
-import "../../icons/ClockwiseIcon.js";
-import "../../../utils/hooks/useRotate.js";
-import "../toolbar/ViewModeTool.js";
-import "../../icons/SinglePageIcon.js";
-import "../../icons/DualPageIcon.js";
-import "../toolbar/ScrollModeTool.js";
-import "../../icons/PageScrollingIcon.js";
-import "../../icons/VerticalScrollingIcon.js";
-import "../../icons/HorizontalScrollingIcon.js";
-import "../../icons/FileDownloadDefaultIcon.js";
-import "../../icons/PrintDefaultIcon.js";
-import "../toolbar/FullScreenTool.js";
-import "../../icons/FullScreenIcon.js";
-import "../../icons/GoToDownIcon.js";
-import "../toolbar/SelectionModeTool.js";
-import "../../icons/TextSelectionDefaultIcon.js";
-import "../../icons/HandModeDefaultIcon.js";
-import "../../icons/ZoomInIcon.js";
-import "../../icons/ZoomOutIcon.js";
-import "../../../utils/zoom.js";
-import "../../icons/SearchIcon.js";
-import "../../icons/ClearIcon.js";
+import "../../../utils/hooks/useThumbnail.js";
+import "../../../index-c0faa594.js";
+import "react-dom";
+import "../../../index-e3ee9457.js";
+import "../../../floating-ui.react-dom-5ec29bd6.js";
+import "../../../index-655864a7.js";
+import "../../../utils/hooks/useLocalization.js";
+const n = {
+  "rp-sidebar-content-wrapper": "_rp-sidebar-content-wrapper_1bqgz_1",
+  "rp-sidebar-content": "_rp-sidebar-content_1bqgz_1",
+  "rp-thumbnails-wrapper": "_rp-thumbnails-wrapper_1bqgz_16"
+}, B = () => {
+  const { thumbnailIcon: o } = S(), { thumbnailIcon: m } = q();
+  return o || m || /* @__PURE__ */ t(_, {});
+}, Dt = () => {
+  const { active: o, setActive: m } = v(), [c, b] = T(y), e = s(null), a = s(null), { thumbnailTool: i, sidebarEnable: u } = N(), { localeMessages: r } = z(), p = C(() => {
+    m((d) => !d);
+  }, []), h = I(() => typeof i != "boolean" && i ? /* @__PURE__ */ t(i, { onClick: p, active: o }) : i ? /* @__PURE__ */ t(k, { content: r == null ? void 0 : r.thumbnailTooltip, children: /* @__PURE__ */ t(
+    w,
+    {
+      onClick: p,
+      active: o,
+      "aria-label": r == null ? void 0 : r.thumbnailTooltip,
+      children: /* @__PURE__ */ t(B, {})
+    }
+  ) }) : null, [i, o, p, r]);
+  return /* @__PURE__ */ t(f, { children: u && /* @__PURE__ */ l(
+    "div",
+    {
+      style: { "--rp-thumbnail-width": `${c}px` },
+      className: n["rp-sidebar-content-wrapper"],
+      "data-rp": "sidebar",
+      children: [
+        /* @__PURE__ */ t("div", { ref: a, className: n["rp-sidebar-content"], children: h }),
+        /* @__PURE__ */ l(
+          "div",
+          {
+            "data-rp": "thumbnailSidebar",
+            hidden: !o,
+            className: n["rp-thumbnails-wrapper"],
+            children: [
+              /* @__PURE__ */ t(x, { show: o, ref: e }),
+              /* @__PURE__ */ t(
+                R,
+                {
+                  onWidthChange: b,
+                  thumbnailRef: e,
+                  leftSidebarRef: a
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  ) });
+};
 export {
-  Eo as RPSidebar
+  Dt as RPSidebar
 };

package/dist/components/layout/sidebar/Thumbnail.js

@@ -1,142 +1,136 @@
-import "react/jsx-runtime";
-import "react";
-import { $ as Fo } from "../../../ToolbarLayout.module-37619c4b.js";
-import "../../../clsx-0c6e471a.js";
-import "../../icons/LoaderIcon.js";
-import "../../../contexts/PagesRotateContext.js";
-import "../../../contexts/RPDocumentContext.js";
-import "../../../contexts/DocumentPasswordContext.js";
-import "../../../contexts/DarkModeContext.js";
-import "../../../contexts/RotationContext.js";
-import "../../../contexts/LayerContext.js";
-import "../../../contexts/ZoomContext.js";
-import "../../../contexts/ViewModeContext.js";
+import { jsxs as S, jsx as r } from "react/jsx-runtime";
+import { useRef as l, useState as y, useMemo as _, useCallback as L, useEffect as x } from "react";
+import { c as j } from "../../../clsx-0c6e471a.js";
+import { LoaderIcon as k } from "../../icons/LoaderIcon.js";
+import { u as q } from "../../../PaginationContext-9217cab4.js";
+import { usePagesRotateContext as I } from "../../../contexts/PagesRotateContext.js";
+import { useRenderQueue as M } from "../../../contexts/RenderQueueProvider.js";
+import { useDocumentContext as Q } from "../../../contexts/RPDocumentContext.js";
+import "../../../utils/types.js";
+import "../../../th_TH-d627cd51.js";
 import "../../../contexts/ScrollModeContext.js";
-import "../../../contexts/VirtualScrollContext.js";
-import "../../../contexts/VirtualGridContext.js";
-import "../../../contexts/SelectionModeContext.js";
+import "../../../utils/appConsole.js";
 import "../../../contexts/InitialStateContext.js";
-import "../../../contexts/FullScreenContext.js";
-import "../../../contexts/FileInputContext.js";
-import "../../../contexts/DropFileZoneContext.js";
-import "../../../contexts/LayoutContainerContext.js";
-import "../../../contexts/DimensionPagesContext.js";
-import "../../../contexts/LocalizationContext.js";
-import "../../../contexts/HighlightContext.js";
-import "../../../contexts/LicenseContext.js";
-import "../../../contexts/DownloadContext.js";
-import "../../../contexts/SmoothScrollContext.js";
-import "../../../contexts/ElementPageContext.js";
 import "../../../contexts/GlobalCurrentPage.js";
-import "../../../contexts/LoaderContext.js";
-import "../../../contexts/ToolComponentContext.js";
-import "../../../contexts/IconToolContext.js";
-import "../../../contexts/OtherToolContext.js";
 import "../../../contexts/EventCallbackContext.js";
-import "../../RPConfig.js";
-import "../Container.js";
-import "../../../contexts/ViewportContext.js";
-import "../../../contexts/ToolbarComponentContext.js";
-import "./RPSplitter.js";
-import "../WrapperLayout.js";
-import "../../../LayoutWrapper-6224491f.js";
-import "../../../contexts/ThemeContext.js";
-import "../../RPDropFileZone.js";
-import "../../ui/Button.js";
-import "../../../SearchCloseButton-08d57275.js";
-import "../../ui/Input.js";
-import "../../ui/Checkbox.js";
-import "../../../contexts/IconContext.js";
-import "../../ui/RPTooltip.js";
-import "../../ui/DropDown.js";
-import "../toolbar/MenuItem.js";
-import "../toolbar/MenuSeparator.js";
-import "../../../utils/dateFormatter.js";
-import "../toolbar/PropertyItem.js";
-import "../../../RotateTool.module-67946714.js";
-import "../../icons/ChevronUpIcon.js";
-import "../../../utils/types.js";
-import "../../../th_TH-d627cd51.js";
-import "../../../utils/highlight.js";
-import "../../../utils/charators.js";
-import "../../../utils/Queue.js";
-import "../../../utils/renderPage.js";
-import "pdfjs-dist";
-import "../../icons/Thumbnail.js";
-import "../../../utils/withRef.js";
-import "../../../utils/hooks/useInfiniteScroll.js";
+import "../../../contexts/ViewModeContext.js";
+import "../../../contexts/VirtualScrollContext.js";
+import "../../../contexts/VirtualGridContext.js";
+import "../../../utils/smoothScrollTo.js";
+import "../../../contexts/DimensionPagesContext.js";
+import "../../../contexts/ZoomContext.js";
 import "../../../utils/constants.js";
-import "../../../utils/link_service.js";
-import "../../../utils/annotations.js";
-import "../../../utils/sanitizeExternalUrl.js";
-import "../../page/searchHighlight.js";
-import "../../../utils/const.js";
-import "../../page/CustomElement.js";
-import "../../../utils/appConsole.js";
+import "../../../utils/getZoomLevel.js";
+import "../../../contexts/LayoutContainerContext.js";
+import "../../../contexts/RotationContext.js";
 import "../../../utils/hooks/useLoadPdf.js";
+import "pdfjs-dist";
 import "../../../utils/getThumbnailViewport.js";
 import "../../../contexts/ConfigContext.js";
+import "../../../contexts/DocumentPasswordContext.js";
 import "../../../utils/hooks/usePdfProperties.js";
 import "../../../utils/convertPdfDate.js";
 import "../../../utils/formatFileSize.js";
-import "../../../utils/getZoomLevel.js";
 import "../../../utils/hooks/useDebounce.js";
-import "../../../utils/hooks/useLicense.js";
+import "../../../contexts/SmoothScrollContext.js";
 import "../../../utils/getScrollDistance.js";
-import "../../../utils/getElementPositionInPage.js";
 import "../../../utils/calculatePage.js";
-import "../../../utils/hooks/useMousePressed.js";
-import "../../../utils/hooks/useGrabScroll.js";
-import "../../../utils/hooks/usePinch.js";
-import "../../ui/PasswordModal.js";
-import "../../../utils/hooks/useLocalization.js";
-import "../../../utils/approximateFragtion.js";
-import "../../../utils/getWordPositionInPage.js";
-import "../../../utils/smoothScrollTo.js";
-import "../toolbar/FileUploadTool.js";
-import "../../icons/FileUploadDefaultIcon.js";
-import "../../../index-a48ec088.js";
-import "../../../index-c9a2990a.js";
-import "react-dom";
-import "../../../index-808ea7bf.js";
-import "../toolbar/DarkModeTool.js";
-import "../../icons/MoonIcon.js";
-import "../../icons/SunIcon.js";
-import "../../../utils/hooks/useDarkMode.js";
-import "../../icons/ThreeDotIcon.js";
-import "../../icons/CloseIcon.js";
-import "../toolbar/DocumentProperties.js";
-import "../../icons/InfoIcon.js";
-import "../toolbar/RotateTool.js";
-import "../../icons/ClockwiseIcon.js";
-import "../../../utils/hooks/useRotate.js";
-import "../toolbar/ViewModeTool.js";
-import "../../icons/SinglePageIcon.js";
-import "../../icons/DualPageIcon.js";
-import "../../icons/CheckIcon.js";
-import "../toolbar/ScrollModeTool.js";
-import "../../icons/PageScrollingIcon.js";
-import "../../icons/VerticalScrollingIcon.js";
-import "../../icons/HorizontalScrollingIcon.js";
-import "../../icons/FileDownloadDefaultIcon.js";
-import "../../icons/PrintDefaultIcon.js";
-import "../toolbar/FullScreenTool.js";
-import "../../icons/FullScreenIcon.js";
-import "../../../utils/hooks/useFullScreen.js";
-import "../../icons/GoToDownIcon.js";
-import "../toolbar/SelectionModeTool.js";
-import "../../icons/TextSelectionDefaultIcon.js";
-import "../../icons/HandModeDefaultIcon.js";
-import "../../icons/ZoomInIcon.js";
-import "../../icons/ZoomOutIcon.js";
-import "../../../utils/zoom.js";
-import "../../icons/SearchIcon.js";
-import "../../icons/ClearIcon.js";
-import "../../../utils/hooks/useHighlight.js";
-import "../../RPTheme.js";
-import "../../../utils/hooks/useLoadWorker.js";
-import "../../icons/LightPdfIcon.js";
-import "../../icons/DarkPdfIcon.js";
+import "../../../utils/Queue.js";
+import "../../../utils/renderPage.js";
+const i = {
+  "rp-thumbnail-wrapper": "_rp-thumbnail-wrapper_3fenb_1",
+  "rp-thumbnail-text": "_rp-thumbnail-text_3fenb_10",
+  "rp-thumbnail": "_rp-thumbnail_3fenb_1",
+  "rp-thumbnail-active": "_rp-thumbnail-active_3fenb_22",
+  "rp-thumbnail-loader": "_rp-thumbnail-loader_3fenb_31"
+}, Rt = (w) => {
+  const { pageNumber: t, isFocused: h, viewport: s } = w, { goToPage: b } = q(), { pageRotate: R } = I(), o = l(null), n = M(), { pages: m } = Q(), [a, f] = y(null), u = l(!1), d = l(), C = _(() => h ? i["rp-thumbnail-active"] : "", [h]), p = _(() => ({
+    width: Math.round(s.width),
+    height: Math.round(s.height)
+  }), [s]), P = L(() => {
+    t && b(t);
+  }, [b, t]);
+  return x(() => {
+    const e = m.get(t);
+    d.current === e || (f(null), d.current = e);
+  }, [m, t]), x(() => {
+    const e = m.get(t);
+    if (!o.current || !t || !e || a)
+      return;
+    const c = new IntersectionObserver(($) => {
+      $.forEach((E) => {
+        if (u.current) {
+          u.current = !1, n.removeQueue(`thumbnail-${t}`);
+          return;
+        }
+        if (E.isIntersecting) {
+          const g = document.createElement("canvas");
+          u.current = !0, n.enqueue(
+            `thumbnail-${t}`,
+            {
+              page: e.page,
+              canvasElem: g,
+              options: {
+                scale: 1
+              },
+              onLoaded: () => {
+                g.toBlob((v) => {
+                  if (!v)
+                    return;
+                  const N = URL.createObjectURL(v);
+                  f(N);
+                });
+              }
+            },
+            2
+          );
+        }
+      });
+    });
+    return o.current && c.observe(o.current), () => {
+      c.disconnect(), n.removeQueue(`thumbnail-${t}`);
+    };
+  }, [n, t, m, a]), /* @__PURE__ */ S(
+    "div",
+    {
+      onClick: P,
+      id: `page-${t}`,
+      className: i["rp-thumbnail-wrapper"],
+      ref: o,
+      children: [
+        /* @__PURE__ */ r(
+          "div",
+          {
+            style: {
+              transform: `rotate(${R[t || 0]}deg)`
+            },
+            className: j(C, i["rp-thumbnail"]),
+            children: a ? /* @__PURE__ */ r(
+              "img",
+              {
+                src: a,
+                width: p.width,
+                height: p.height,
+                alt: "thumbnail"
+              }
+            ) : /* @__PURE__ */ r(
+              "div",
+              {
+                className: i["rp-thumbnail-loader"],
+                style: {
+                  width: `${p.width}px`,
+                  height: `${p.height}px`
+                },
+                children: /* @__PURE__ */ r(k, {})
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ r("div", { className: i["rp-thumbnail-text"], children: t })
+      ]
+    }
+  );
+};
 export {
-  Fo as Thumbnail
+  Rt as Thumbnail
 };