@blocklet/pdf 2.0.132 → 2.0.134

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/pdf",
-  "version": "2.0.132",
+  "version": "2.0.134",
   "description": "blocklet pdf component",
   "publishConfig": {
     "access": "public"
@@ -8,15 +8,19 @@
   "sideEffects": false,
   "exports": {
     ".": {
-      "require": "./lib/index.cjs",
-      "import": "./lib/index.mjs",
-      "types": "./lib/index.d.ts"
+      "require": "./cjs/index.js",
+      "import": "./es/index.js",
+      "types": "./es/index.d.ts"
     },
-    "./lib/": "./lib/"
+    "./lib/": {
+      "require": "./cjs/",
+      "import": "./es/",
+      "types": "./es/"
+    }
   },
-  "main": "./lib/index.cjs",
-  "module": "./lib/index.mjs",
-  "types": "./lib/index.d.ts",
+  "main": "./cjs/index.js",
+  "module": "./es/index.js",
+  "types": "./es/index.d.ts",
   "files": [
     "lib",
     "*.d.ts"
@@ -59,5 +63,5 @@
     "vitest": "^1.4.0",
     "vitest-fetch-mock": "^0.2.2"
   },
-  "gitHead": "71a1b39f9aa329268770182b848c6b7d216facf7"
+  "gitHead": "26c60853821624da8f8a3894129959ec997428ad"
 }

package/lib/index.cjs

@@ -1,335 +0,0 @@
-'use strict';
-
-const jsxRuntime = require('react/jsx-runtime');
-const react = require('react');
-const reactPdf = require('react-pdf');
-const ahooks = require('ahooks');
-const useTheme = require('@mui/material/styles/useTheme');
-const useMediaQuery = require('@mui/material/useMediaQuery');
-const Box = require('@mui/material/Box');
-const Skeleton = require('@mui/material/Skeleton');
-const IconButton = require('@mui/material/IconButton');
-const FullscreenIcon = require('@mui/icons-material/Fullscreen');
-const ZoomOutIcon = require('@mui/icons-material/ZoomOut');
-const ZoomInIcon = require('@mui/icons-material/ZoomIn');
-const DownloadIcon = require('@mui/icons-material/Download');
-const ArrowOutwardOutlinedIcon = require('@mui/icons-material/ArrowOutwardOutlined');
-const material = require('@mui/material');
-require('react-pdf/dist/Page/AnnotationLayer.css');
-require('react-pdf/dist/Page/TextLayer.css');
-
-function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e.default : e; }
-
-const useTheme__default = /*#__PURE__*/_interopDefaultCompat(useTheme);
-const useMediaQuery__default = /*#__PURE__*/_interopDefaultCompat(useMediaQuery);
-const Box__default = /*#__PURE__*/_interopDefaultCompat(Box);
-const Skeleton__default = /*#__PURE__*/_interopDefaultCompat(Skeleton);
-const IconButton__default = /*#__PURE__*/_interopDefaultCompat(IconButton);
-const FullscreenIcon__default = /*#__PURE__*/_interopDefaultCompat(FullscreenIcon);
-const ZoomOutIcon__default = /*#__PURE__*/_interopDefaultCompat(ZoomOutIcon);
-const ZoomInIcon__default = /*#__PURE__*/_interopDefaultCompat(ZoomInIcon);
-const DownloadIcon__default = /*#__PURE__*/_interopDefaultCompat(DownloadIcon);
-const ArrowOutwardOutlinedIcon__default = /*#__PURE__*/_interopDefaultCompat(ArrowOutwardOutlinedIcon);
-
-const workerSrc = `//unpkg.com/pdfjs-dist@${reactPdf.pdfjs.version}/legacy/build/pdf.worker.min.mjs`;
-reactPdf.pdfjs.GlobalWorkerOptions.workerSrc = workerSrc;
-const preventScrollChangeThumbnailTimerMap = {};
-const documentOptions = { isEvalSupported: false };
-const getBorder = (color) => `2px solid ${color}`;
-const defaultLoading = (props) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(Skeleton__default, { variant: "rectangular", width: "100%", ...props });
-};
-function PdfComponent({
-  url,
-  backgroundColor = "#fbfbfb",
-  loading = defaultLoading,
-  maxHeight = "60vh",
-  ...rest
-}) {
-  const pdfPageWrapperRef = react.useRef(null);
-  const thumbnailWrapperRef = react.useRef(null);
-  const preventScrollChangeThumbnailRef = react.useRef(false);
-  const state = ahooks.useReactive({
-    currentPage: 1,
-    totalPage: 1,
-    scale: 1
-  });
-  const wrapperSize = ahooks.useSize(pdfPageWrapperRef);
-  const theme = useTheme__default();
-  const isMobile = useMediaQuery__default(theme.breakpoints.down("sm"));
-  const pdfUrl = url;
-  const getPdfItemHeight = () => pdfPageWrapperRef.current?.children[0]?.offsetHeight;
-  const onDocumentLoadSuccess = (pdf) => {
-    state.totalPage = pdf.numPages;
-  };
-  const onPageChange = (page) => {
-    state.currentPage = page;
-    preventScrollChangeThumbnailRef.current = true;
-    const top = getPdfItemHeight() * (page - 1);
-    pdfPageWrapperRef?.current?.scrollTo({
-      top,
-      behavior: "smooth"
-    });
-    if (preventScrollChangeThumbnailTimerMap[pdfUrl])
-      clearTimeout(preventScrollChangeThumbnailTimerMap[pdfUrl]);
-    preventScrollChangeThumbnailTimerMap[pdfUrl] = setTimeout(() => {
-      preventScrollChangeThumbnailRef.current = false;
-      preventScrollChangeThumbnailTimerMap[pdfUrl] = null;
-    }, 1e3);
-  };
-  const scrollEvent = (value) => {
-    if (preventScrollChangeThumbnailRef.current) {
-      return false;
-    }
-    const scrollPage = Math.floor(value.top / getPdfItemHeight()) + 1;
-    if (scrollPage > 0 && scrollPage !== state.currentPage) {
-      state.currentPage = scrollPage;
-      thumbnailWrapperRef.current?.scrollTo({
-        // @ts-ignore
-        top: document.getElementById(`thumbnail-${scrollPage}`).offsetTop,
-        behavior: "smooth"
-      });
-      return true;
-    }
-  };
-  const { run: runScrollEvent } = ahooks.useDebounceFn(scrollEvent, {
-    wait: 200
-  });
-  ahooks.useScroll(pdfPageWrapperRef, runScrollEvent);
-  const commonPdfProps = {
-    canvasBackground: backgroundColor
-  };
-  const [, { enterFullscreen }] = ahooks.useFullscreen(() => document.querySelector(".pdf-wrapper"));
-  return /* @__PURE__ */ jsxRuntime.jsx(Root, { children: /* @__PURE__ */ jsxRuntime.jsx(
-    reactPdf.Document,
-    {
-      loading: () => loading({
-        height: maxHeight
-      }),
-      file: pdfUrl,
-      onLoadSuccess: onDocumentLoadSuccess,
-      options: documentOptions,
-      children: /* @__PURE__ */ jsxRuntime.jsxs(
-        Box__default,
-        {
-          className: "pdf-wrapper",
-          sx: {
-            // default max-height: 60vh
-            maxHeight
-          },
-          ...rest,
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsxs(
-              Box__default,
-              {
-                className: "pdf-page",
-                ref: pdfPageWrapperRef,
-                sx: {
-                  background: backgroundColor,
-                  position: "relative"
-                },
-                children: [
-                  new Array(state.totalPage || 0).fill(0).map((_, index) => {
-                    const currentPage = index + 1;
-                    return /* @__PURE__ */ jsxRuntime.jsx(
-                      reactPdf.Page,
-                      {
-                        pageNumber: currentPage,
-                        renderTextLayer: false,
-                        width: wrapperSize?.width,
-                        scale: state.scale,
-                        ...commonPdfProps,
-                        loading: () => loading({
-                          height: maxHeight
-                        })
-                      },
-                      `${pdfUrl}-${currentPage}`
-                    );
-                  }),
-                  /* @__PURE__ */ jsxRuntime.jsxs(Box__default, { className: "pdf-page-toolbar", children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(
-                      IconButton__default,
-                      {
-                        onClick: () => {
-                          if (state.scale > 0.1) {
-                            state.scale -= 0.1;
-                          }
-                        },
-                        children: /* @__PURE__ */ jsxRuntime.jsx(ZoomOutIcon__default, {})
-                      }
-                    ),
-                    /* @__PURE__ */ jsxRuntime.jsx(
-                      IconButton__default,
-                      {
-                        onClick: () => {
-                          state.scale += 0.1;
-                        },
-                        children: /* @__PURE__ */ jsxRuntime.jsx(ZoomInIcon__default, {})
-                      }
-                    ),
-                    /* @__PURE__ */ jsxRuntime.jsx(IconButton__default, { onClick: enterFullscreen, children: /* @__PURE__ */ jsxRuntime.jsx(FullscreenIcon__default, {}) }),
-                    /* @__PURE__ */ jsxRuntime.jsx(
-                      IconButton__default,
-                      {
-                        onClick: () => {
-                          const link = document.createElement("a");
-                          link.href = pdfUrl;
-                          link.download = pdfUrl.split("/").pop() || "download.pdf";
-                          link.click();
-                        },
-                        children: /* @__PURE__ */ jsxRuntime.jsx(DownloadIcon__default, {})
-                      }
-                    ),
-                    /* @__PURE__ */ jsxRuntime.jsx(
-                      IconButton__default,
-                      {
-                        onClick: () => {
-                          window.open(pdfUrl, "_blank");
-                        },
-                        children: /* @__PURE__ */ jsxRuntime.jsx(ArrowOutwardOutlinedIcon__default, {})
-                      }
-                    )
-                  ] })
-                ]
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              Box__default,
-              {
-                className: "pdf-thumbnail",
-                ref: thumbnailWrapperRef,
-                sx: {
-                  ".active": {
-                    border: getBorder(theme?.palette?.primary?.main),
-                    ".pdf-thumbnail-index": {
-                      background: theme?.palette?.primary?.main
-                    }
-                  },
-                  ".no-active": {
-                    border: getBorder("transparent")
-                  },
-                  "*": {
-                    transition: "all 0.2s",
-                    cursor: "pointer"
-                  }
-                },
-                children: new Array(state.totalPage || 0).fill(0).map((_, index) => {
-                  const currentPage = index + 1;
-                  const key = `thumbnail-${currentPage}`;
-                  const width = isMobile ? 90 : 120;
-                  return /* @__PURE__ */ jsxRuntime.jsx(
-                    Box__default,
-                    {
-                      id: key,
-                      className: `${state.currentPage === currentPage ? "active" : "no-active"}`,
-                      component: "a",
-                      sx: {
-                        width: width + 4
-                        // add border width
-                      },
-                      children: /* @__PURE__ */ jsxRuntime.jsx(
-                        reactPdf.Thumbnail,
-                        {
-                          pageIndex: currentPage,
-                          pageNumber: currentPage,
-                          width,
-                          ...commonPdfProps,
-                          onClick: (e) => {
-                            e.stopPropagation();
-                            e.preventDefault();
-                            onPageChange(currentPage);
-                          },
-                          loading: loading({
-                            height: `calc(${maxHeight} / ${isMobile ? 5 : 4})`,
-                            sx: {
-                              border: getBorder("transparent")
-                            }
-                          }),
-                          children: /* @__PURE__ */ jsxRuntime.jsxs(
-                            Box__default,
-                            {
-                              className: "pdf-thumbnail-index",
-                              component: "span",
-                              sx: {
-                                position: "absolute",
-                                textAlign: "center",
-                                bottom: 0,
-                                left: 0,
-                                right: 0,
-                                color: "#fff",
-                                fontSize: 13,
-                                p: 0.5,
-                                background: "rgba(0,0,0,0.25)"
-                              },
-                              children: [
-                                "# ",
-                                currentPage
-                              ]
-                            },
-                            `index-${currentPage}`
-                          )
-                        }
-                      )
-                    },
-                    key
-                  );
-                })
-              }
-            )
-          ]
-        }
-      )
-    }
-  ) });
-}
-const Root = material.styled(Box__default)`
-  .pdf-wrapper {
-    display: flex;
-    justify-content: center;
-    align-items: stretch;
-  }
-
-  .pdf-page {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    align-items: center;
-    overflow-y: auto;
-  }
-
-  .pdf-page-toolbar {
-    position: sticky;
-    margin-top: 16px;
-    bottom: 16px;
-    right: 0;
-    left: 0;
-    background: rgba(0, 0, 0, 0.5);
-    border-radius: 4px;
-    display: flex;
-    align-items: center;
-    padding: 2px 8px;
-    gap: 4px;
-    * {
-      color: white;
-    }
-  }
-
-  .pdf-thumbnail {
-    margin-left: 16px;
-    display: flex;
-    justify-content: flex-start;
-    align-items: center;
-    flex-direction: column;
-    gap: 16px;
-    overflow-y: auto;
-  }
-
-  .react-pdf__Page__annotations {
-    display: none !important;
-    height: 0px !important;
-    width: 0px !important;
-  }
-`;
-
-exports.PdfComponent = PdfComponent;

package/lib/index.d.cts

@@ -1,13 +0,0 @@
-import { BoxProps } from '@mui/system';
-import * as react_jsx_runtime from 'react/jsx-runtime';
-
-interface PdfProps extends BoxProps {
-    url: string;
-    backgroundColor?: string;
-    loading?: any;
-    maxHeight?: number | string;
-}
-
-declare function PdfComponent({ url, backgroundColor, loading, maxHeight, ...rest }: PdfProps): react_jsx_runtime.JSX.Element;
-
-export { PdfComponent, type PdfProps };

package/lib/index.d.mts

@@ -1,13 +0,0 @@
-import { BoxProps } from '@mui/system';
-import * as react_jsx_runtime from 'react/jsx-runtime';
-
-interface PdfProps extends BoxProps {
-    url: string;
-    backgroundColor?: string;
-    loading?: any;
-    maxHeight?: number | string;
-}
-
-declare function PdfComponent({ url, backgroundColor, loading, maxHeight, ...rest }: PdfProps): react_jsx_runtime.JSX.Element;
-
-export { PdfComponent, type PdfProps };

package/lib/index.d.ts

@@ -1,13 +0,0 @@
-import { BoxProps } from '@mui/system';
-import * as react_jsx_runtime from 'react/jsx-runtime';
-
-interface PdfProps extends BoxProps {
-    url: string;
-    backgroundColor?: string;
-    loading?: any;
-    maxHeight?: number | string;
-}
-
-declare function PdfComponent({ url, backgroundColor, loading, maxHeight, ...rest }: PdfProps): react_jsx_runtime.JSX.Element;
-
-export { PdfComponent, type PdfProps };

package/lib/index.js

@@ -1,335 +0,0 @@
-'use strict';
-
-const jsxRuntime = require('react/jsx-runtime');
-const react = require('react');
-const reactPdf = require('react-pdf');
-const ahooks = require('ahooks');
-const useTheme = require('@mui/material/styles/useTheme');
-const useMediaQuery = require('@mui/material/useMediaQuery');
-const Box = require('@mui/material/Box');
-const Skeleton = require('@mui/material/Skeleton');
-const IconButton = require('@mui/material/IconButton');
-const FullscreenIcon = require('@mui/icons-material/Fullscreen');
-const ZoomOutIcon = require('@mui/icons-material/ZoomOut');
-const ZoomInIcon = require('@mui/icons-material/ZoomIn');
-const DownloadIcon = require('@mui/icons-material/Download');
-const ArrowOutwardOutlinedIcon = require('@mui/icons-material/ArrowOutwardOutlined');
-const material = require('@mui/material');
-require('react-pdf/dist/Page/AnnotationLayer.css');
-require('react-pdf/dist/Page/TextLayer.css');
-
-function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e.default : e; }
-
-const useTheme__default = /*#__PURE__*/_interopDefaultCompat(useTheme);
-const useMediaQuery__default = /*#__PURE__*/_interopDefaultCompat(useMediaQuery);
-const Box__default = /*#__PURE__*/_interopDefaultCompat(Box);
-const Skeleton__default = /*#__PURE__*/_interopDefaultCompat(Skeleton);
-const IconButton__default = /*#__PURE__*/_interopDefaultCompat(IconButton);
-const FullscreenIcon__default = /*#__PURE__*/_interopDefaultCompat(FullscreenIcon);
-const ZoomOutIcon__default = /*#__PURE__*/_interopDefaultCompat(ZoomOutIcon);
-const ZoomInIcon__default = /*#__PURE__*/_interopDefaultCompat(ZoomInIcon);
-const DownloadIcon__default = /*#__PURE__*/_interopDefaultCompat(DownloadIcon);
-const ArrowOutwardOutlinedIcon__default = /*#__PURE__*/_interopDefaultCompat(ArrowOutwardOutlinedIcon);
-
-const workerSrc = `//unpkg.com/pdfjs-dist@${reactPdf.pdfjs.version}/legacy/build/pdf.worker.min.mjs`;
-reactPdf.pdfjs.GlobalWorkerOptions.workerSrc = workerSrc;
-const preventScrollChangeThumbnailTimerMap = {};
-const documentOptions = { isEvalSupported: false };
-const getBorder = (color) => `2px solid ${color}`;
-const defaultLoading = (props) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(Skeleton__default, { variant: "rectangular", width: "100%", ...props });
-};
-function PdfComponent({
-  url,
-  backgroundColor = "#fbfbfb",
-  loading = defaultLoading,
-  maxHeight = "60vh",
-  ...rest
-}) {
-  const pdfPageWrapperRef = react.useRef(null);
-  const thumbnailWrapperRef = react.useRef(null);
-  const preventScrollChangeThumbnailRef = react.useRef(false);
-  const state = ahooks.useReactive({
-    currentPage: 1,
-    totalPage: 1,
-    scale: 1
-  });
-  const wrapperSize = ahooks.useSize(pdfPageWrapperRef);
-  const theme = useTheme__default();
-  const isMobile = useMediaQuery__default(theme.breakpoints.down("sm"));
-  const pdfUrl = url;
-  const getPdfItemHeight = () => pdfPageWrapperRef.current?.children[0]?.offsetHeight;
-  const onDocumentLoadSuccess = (pdf) => {
-    state.totalPage = pdf.numPages;
-  };
-  const onPageChange = (page) => {
-    state.currentPage = page;
-    preventScrollChangeThumbnailRef.current = true;
-    const top = getPdfItemHeight() * (page - 1);
-    pdfPageWrapperRef?.current?.scrollTo({
-      top,
-      behavior: "smooth"
-    });
-    if (preventScrollChangeThumbnailTimerMap[pdfUrl])
-      clearTimeout(preventScrollChangeThumbnailTimerMap[pdfUrl]);
-    preventScrollChangeThumbnailTimerMap[pdfUrl] = setTimeout(() => {
-      preventScrollChangeThumbnailRef.current = false;
-      preventScrollChangeThumbnailTimerMap[pdfUrl] = null;
-    }, 1e3);
-  };
-  const scrollEvent = (value) => {
-    if (preventScrollChangeThumbnailRef.current) {
-      return false;
-    }
-    const scrollPage = Math.floor(value.top / getPdfItemHeight()) + 1;
-    if (scrollPage > 0 && scrollPage !== state.currentPage) {
-      state.currentPage = scrollPage;
-      thumbnailWrapperRef.current?.scrollTo({
-        // @ts-ignore
-        top: document.getElementById(`thumbnail-${scrollPage}`).offsetTop,
-        behavior: "smooth"
-      });
-      return true;
-    }
-  };
-  const { run: runScrollEvent } = ahooks.useDebounceFn(scrollEvent, {
-    wait: 200
-  });
-  ahooks.useScroll(pdfPageWrapperRef, runScrollEvent);
-  const commonPdfProps = {
-    canvasBackground: backgroundColor
-  };
-  const [, { enterFullscreen }] = ahooks.useFullscreen(() => document.querySelector(".pdf-wrapper"));
-  return /* @__PURE__ */ jsxRuntime.jsx(Root, { children: /* @__PURE__ */ jsxRuntime.jsx(
-    reactPdf.Document,
-    {
-      loading: () => loading({
-        height: maxHeight
-      }),
-      file: pdfUrl,
-      onLoadSuccess: onDocumentLoadSuccess,
-      options: documentOptions,
-      children: /* @__PURE__ */ jsxRuntime.jsxs(
-        Box__default,
-        {
-          className: "pdf-wrapper",
-          sx: {
-            // default max-height: 60vh
-            maxHeight
-          },
-          ...rest,
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsxs(
-              Box__default,
-              {
-                className: "pdf-page",
-                ref: pdfPageWrapperRef,
-                sx: {
-                  background: backgroundColor,
-                  position: "relative"
-                },
-                children: [
-                  new Array(state.totalPage || 0).fill(0).map((_, index) => {
-                    const currentPage = index + 1;
-                    return /* @__PURE__ */ jsxRuntime.jsx(
-                      reactPdf.Page,
-                      {
-                        pageNumber: currentPage,
-                        renderTextLayer: false,
-                        width: wrapperSize?.width,
-                        scale: state.scale,
-                        ...commonPdfProps,
-                        loading: () => loading({
-                          height: maxHeight
-                        })
-                      },
-                      `${pdfUrl}-${currentPage}`
-                    );
-                  }),
-                  /* @__PURE__ */ jsxRuntime.jsxs(Box__default, { className: "pdf-page-toolbar", children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(
-                      IconButton__default,
-                      {
-                        onClick: () => {
-                          if (state.scale > 0.1) {
-                            state.scale -= 0.1;
-                          }
-                        },
-                        children: /* @__PURE__ */ jsxRuntime.jsx(ZoomOutIcon__default, {})
-                      }
-                    ),
-                    /* @__PURE__ */ jsxRuntime.jsx(
-                      IconButton__default,
-                      {
-                        onClick: () => {
-                          state.scale += 0.1;
-                        },
-                        children: /* @__PURE__ */ jsxRuntime.jsx(ZoomInIcon__default, {})
-                      }
-                    ),
-                    /* @__PURE__ */ jsxRuntime.jsx(IconButton__default, { onClick: enterFullscreen, children: /* @__PURE__ */ jsxRuntime.jsx(FullscreenIcon__default, {}) }),
-                    /* @__PURE__ */ jsxRuntime.jsx(
-                      IconButton__default,
-                      {
-                        onClick: () => {
-                          const link = document.createElement("a");
-                          link.href = pdfUrl;
-                          link.download = pdfUrl.split("/").pop() || "download.pdf";
-                          link.click();
-                        },
-                        children: /* @__PURE__ */ jsxRuntime.jsx(DownloadIcon__default, {})
-                      }
-                    ),
-                    /* @__PURE__ */ jsxRuntime.jsx(
-                      IconButton__default,
-                      {
-                        onClick: () => {
-                          window.open(pdfUrl, "_blank");
-                        },
-                        children: /* @__PURE__ */ jsxRuntime.jsx(ArrowOutwardOutlinedIcon__default, {})
-                      }
-                    )
-                  ] })
-                ]
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              Box__default,
-              {
-                className: "pdf-thumbnail",
-                ref: thumbnailWrapperRef,
-                sx: {
-                  ".active": {
-                    border: getBorder(theme?.palette?.primary?.main),
-                    ".pdf-thumbnail-index": {
-                      background: theme?.palette?.primary?.main
-                    }
-                  },
-                  ".no-active": {
-                    border: getBorder("transparent")
-                  },
-                  "*": {
-                    transition: "all 0.2s",
-                    cursor: "pointer"
-                  }
-                },
-                children: new Array(state.totalPage || 0).fill(0).map((_, index) => {
-                  const currentPage = index + 1;
-                  const key = `thumbnail-${currentPage}`;
-                  const width = isMobile ? 90 : 120;
-                  return /* @__PURE__ */ jsxRuntime.jsx(
-                    Box__default,
-                    {
-                      id: key,
-                      className: `${state.currentPage === currentPage ? "active" : "no-active"}`,
-                      component: "a",
-                      sx: {
-                        width: width + 4
-                        // add border width
-                      },
-                      children: /* @__PURE__ */ jsxRuntime.jsx(
-                        reactPdf.Thumbnail,
-                        {
-                          pageIndex: currentPage,
-                          pageNumber: currentPage,
-                          width,
-                          ...commonPdfProps,
-                          onClick: (e) => {
-                            e.stopPropagation();
-                            e.preventDefault();
-                            onPageChange(currentPage);
-                          },
-                          loading: loading({
-                            height: `calc(${maxHeight} / ${isMobile ? 5 : 4})`,
-                            sx: {
-                              border: getBorder("transparent")
-                            }
-                          }),
-                          children: /* @__PURE__ */ jsxRuntime.jsxs(
-                            Box__default,
-                            {
-                              className: "pdf-thumbnail-index",
-                              component: "span",
-                              sx: {
-                                position: "absolute",
-                                textAlign: "center",
-                                bottom: 0,
-                                left: 0,
-                                right: 0,
-                                color: "#fff",
-                                fontSize: 13,
-                                p: 0.5,
-                                background: "rgba(0,0,0,0.25)"
-                              },
-                              children: [
-                                "# ",
-                                currentPage
-                              ]
-                            },
-                            `index-${currentPage}`
-                          )
-                        }
-                      )
-                    },
-                    key
-                  );
-                })
-              }
-            )
-          ]
-        }
-      )
-    }
-  ) });
-}
-const Root = material.styled(Box__default)`
-  .pdf-wrapper {
-    display: flex;
-    justify-content: center;
-    align-items: stretch;
-  }
-
-  .pdf-page {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    align-items: center;
-    overflow-y: auto;
-  }
-
-  .pdf-page-toolbar {
-    position: sticky;
-    margin-top: 16px;
-    bottom: 16px;
-    right: 0;
-    left: 0;
-    background: rgba(0, 0, 0, 0.5);
-    border-radius: 4px;
-    display: flex;
-    align-items: center;
-    padding: 2px 8px;
-    gap: 4px;
-    * {
-      color: white;
-    }
-  }
-
-  .pdf-thumbnail {
-    margin-left: 16px;
-    display: flex;
-    justify-content: flex-start;
-    align-items: center;
-    flex-direction: column;
-    gap: 16px;
-    overflow-y: auto;
-  }
-
-  .react-pdf__Page__annotations {
-    display: none !important;
-    height: 0px !important;
-    width: 0px !important;
-  }
-`;
-
-exports.PdfComponent = PdfComponent;

package/lib/index.mjs

@@ -1,320 +0,0 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { useRef } from 'react';
-import { pdfjs, Document, Page, Thumbnail } from 'react-pdf';
-import { useReactive, useSize, useDebounceFn, useScroll, useFullscreen } from 'ahooks';
-import useTheme from '@mui/material/styles/useTheme';
-import useMediaQuery from '@mui/material/useMediaQuery';
-import Box from '@mui/material/Box';
-import Skeleton from '@mui/material/Skeleton';
-import IconButton from '@mui/material/IconButton';
-import FullscreenIcon from '@mui/icons-material/Fullscreen';
-import ZoomOutIcon from '@mui/icons-material/ZoomOut';
-import ZoomInIcon from '@mui/icons-material/ZoomIn';
-import DownloadIcon from '@mui/icons-material/Download';
-import ArrowOutwardOutlinedIcon from '@mui/icons-material/ArrowOutwardOutlined';
-import { styled } from '@mui/material';
-import 'react-pdf/dist/Page/AnnotationLayer.css';
-import 'react-pdf/dist/Page/TextLayer.css';
-
-const workerSrc = `//unpkg.com/pdfjs-dist@${pdfjs.version}/legacy/build/pdf.worker.min.mjs`;
-pdfjs.GlobalWorkerOptions.workerSrc = workerSrc;
-const preventScrollChangeThumbnailTimerMap = {};
-const documentOptions = { isEvalSupported: false };
-const getBorder = (color) => `2px solid ${color}`;
-const defaultLoading = (props) => {
-  return /* @__PURE__ */ jsx(Skeleton, { variant: "rectangular", width: "100%", ...props });
-};
-function PdfComponent({
-  url,
-  backgroundColor = "#fbfbfb",
-  loading = defaultLoading,
-  maxHeight = "60vh",
-  ...rest
-}) {
-  const pdfPageWrapperRef = useRef(null);
-  const thumbnailWrapperRef = useRef(null);
-  const preventScrollChangeThumbnailRef = useRef(false);
-  const state = useReactive({
-    currentPage: 1,
-    totalPage: 1,
-    scale: 1
-  });
-  const wrapperSize = useSize(pdfPageWrapperRef);
-  const theme = useTheme();
-  const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
-  const pdfUrl = url;
-  const getPdfItemHeight = () => pdfPageWrapperRef.current?.children[0]?.offsetHeight;
-  const onDocumentLoadSuccess = (pdf) => {
-    state.totalPage = pdf.numPages;
-  };
-  const onPageChange = (page) => {
-    state.currentPage = page;
-    preventScrollChangeThumbnailRef.current = true;
-    const top = getPdfItemHeight() * (page - 1);
-    pdfPageWrapperRef?.current?.scrollTo({
-      top,
-      behavior: "smooth"
-    });
-    if (preventScrollChangeThumbnailTimerMap[pdfUrl])
-      clearTimeout(preventScrollChangeThumbnailTimerMap[pdfUrl]);
-    preventScrollChangeThumbnailTimerMap[pdfUrl] = setTimeout(() => {
-      preventScrollChangeThumbnailRef.current = false;
-      preventScrollChangeThumbnailTimerMap[pdfUrl] = null;
-    }, 1e3);
-  };
-  const scrollEvent = (value) => {
-    if (preventScrollChangeThumbnailRef.current) {
-      return false;
-    }
-    const scrollPage = Math.floor(value.top / getPdfItemHeight()) + 1;
-    if (scrollPage > 0 && scrollPage !== state.currentPage) {
-      state.currentPage = scrollPage;
-      thumbnailWrapperRef.current?.scrollTo({
-        // @ts-ignore
-        top: document.getElementById(`thumbnail-${scrollPage}`).offsetTop,
-        behavior: "smooth"
-      });
-      return true;
-    }
-  };
-  const { run: runScrollEvent } = useDebounceFn(scrollEvent, {
-    wait: 200
-  });
-  useScroll(pdfPageWrapperRef, runScrollEvent);
-  const commonPdfProps = {
-    canvasBackground: backgroundColor
-  };
-  const [, { enterFullscreen }] = useFullscreen(() => document.querySelector(".pdf-wrapper"));
-  return /* @__PURE__ */ jsx(Root, { children: /* @__PURE__ */ jsx(
-    Document,
-    {
-      loading: () => loading({
-        height: maxHeight
-      }),
-      file: pdfUrl,
-      onLoadSuccess: onDocumentLoadSuccess,
-      options: documentOptions,
-      children: /* @__PURE__ */ jsxs(
-        Box,
-        {
-          className: "pdf-wrapper",
-          sx: {
-            // default max-height: 60vh
-            maxHeight
-          },
-          ...rest,
-          children: [
-            /* @__PURE__ */ jsxs(
-              Box,
-              {
-                className: "pdf-page",
-                ref: pdfPageWrapperRef,
-                sx: {
-                  background: backgroundColor,
-                  position: "relative"
-                },
-                children: [
-                  new Array(state.totalPage || 0).fill(0).map((_, index) => {
-                    const currentPage = index + 1;
-                    return /* @__PURE__ */ jsx(
-                      Page,
-                      {
-                        pageNumber: currentPage,
-                        renderTextLayer: false,
-                        width: wrapperSize?.width,
-                        scale: state.scale,
-                        ...commonPdfProps,
-                        loading: () => loading({
-                          height: maxHeight
-                        })
-                      },
-                      `${pdfUrl}-${currentPage}`
-                    );
-                  }),
-                  /* @__PURE__ */ jsxs(Box, { className: "pdf-page-toolbar", children: [
-                    /* @__PURE__ */ jsx(
-                      IconButton,
-                      {
-                        onClick: () => {
-                          if (state.scale > 0.1) {
-                            state.scale -= 0.1;
-                          }
-                        },
-                        children: /* @__PURE__ */ jsx(ZoomOutIcon, {})
-                      }
-                    ),
-                    /* @__PURE__ */ jsx(
-                      IconButton,
-                      {
-                        onClick: () => {
-                          state.scale += 0.1;
-                        },
-                        children: /* @__PURE__ */ jsx(ZoomInIcon, {})
-                      }
-                    ),
-                    /* @__PURE__ */ jsx(IconButton, { onClick: enterFullscreen, children: /* @__PURE__ */ jsx(FullscreenIcon, {}) }),
-                    /* @__PURE__ */ jsx(
-                      IconButton,
-                      {
-                        onClick: () => {
-                          const link = document.createElement("a");
-                          link.href = pdfUrl;
-                          link.download = pdfUrl.split("/").pop() || "download.pdf";
-                          link.click();
-                        },
-                        children: /* @__PURE__ */ jsx(DownloadIcon, {})
-                      }
-                    ),
-                    /* @__PURE__ */ jsx(
-                      IconButton,
-                      {
-                        onClick: () => {
-                          window.open(pdfUrl, "_blank");
-                        },
-                        children: /* @__PURE__ */ jsx(ArrowOutwardOutlinedIcon, {})
-                      }
-                    )
-                  ] })
-                ]
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              Box,
-              {
-                className: "pdf-thumbnail",
-                ref: thumbnailWrapperRef,
-                sx: {
-                  ".active": {
-                    border: getBorder(theme?.palette?.primary?.main),
-                    ".pdf-thumbnail-index": {
-                      background: theme?.palette?.primary?.main
-                    }
-                  },
-                  ".no-active": {
-                    border: getBorder("transparent")
-                  },
-                  "*": {
-                    transition: "all 0.2s",
-                    cursor: "pointer"
-                  }
-                },
-                children: new Array(state.totalPage || 0).fill(0).map((_, index) => {
-                  const currentPage = index + 1;
-                  const key = `thumbnail-${currentPage}`;
-                  const width = isMobile ? 90 : 120;
-                  return /* @__PURE__ */ jsx(
-                    Box,
-                    {
-                      id: key,
-                      className: `${state.currentPage === currentPage ? "active" : "no-active"}`,
-                      component: "a",
-                      sx: {
-                        width: width + 4
-                        // add border width
-                      },
-                      children: /* @__PURE__ */ jsx(
-                        Thumbnail,
-                        {
-                          pageIndex: currentPage,
-                          pageNumber: currentPage,
-                          width,
-                          ...commonPdfProps,
-                          onClick: (e) => {
-                            e.stopPropagation();
-                            e.preventDefault();
-                            onPageChange(currentPage);
-                          },
-                          loading: loading({
-                            height: `calc(${maxHeight} / ${isMobile ? 5 : 4})`,
-                            sx: {
-                              border: getBorder("transparent")
-                            }
-                          }),
-                          children: /* @__PURE__ */ jsxs(
-                            Box,
-                            {
-                              className: "pdf-thumbnail-index",
-                              component: "span",
-                              sx: {
-                                position: "absolute",
-                                textAlign: "center",
-                                bottom: 0,
-                                left: 0,
-                                right: 0,
-                                color: "#fff",
-                                fontSize: 13,
-                                p: 0.5,
-                                background: "rgba(0,0,0,0.25)"
-                              },
-                              children: [
-                                "# ",
-                                currentPage
-                              ]
-                            },
-                            `index-${currentPage}`
-                          )
-                        }
-                      )
-                    },
-                    key
-                  );
-                })
-              }
-            )
-          ]
-        }
-      )
-    }
-  ) });
-}
-const Root = styled(Box)`
-  .pdf-wrapper {
-    display: flex;
-    justify-content: center;
-    align-items: stretch;
-  }
-
-  .pdf-page {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    align-items: center;
-    overflow-y: auto;
-  }
-
-  .pdf-page-toolbar {
-    position: sticky;
-    margin-top: 16px;
-    bottom: 16px;
-    right: 0;
-    left: 0;
-    background: rgba(0, 0, 0, 0.5);
-    border-radius: 4px;
-    display: flex;
-    align-items: center;
-    padding: 2px 8px;
-    gap: 4px;
-    * {
-      color: white;
-    }
-  }
-
-  .pdf-thumbnail {
-    margin-left: 16px;
-    display: flex;
-    justify-content: flex-start;
-    align-items: center;
-    flex-direction: column;
-    gap: 16px;
-    overflow-y: auto;
-  }
-
-  .react-pdf__Page__annotations {
-    display: none !important;
-    height: 0px !important;
-    width: 0px !important;
-  }
-`;
-
-export { PdfComponent };