@blocklet/pdf 1.6.61

package/LICENSE

@@ -0,0 +1,13 @@
+Copyright 2018-2020 ArcBlock
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.

package/README.md

@@ -0,0 +1,65 @@
+# @blocklet/pdf
+
+**@blocklet/pdf** is a package that integrates the **react/pdf** service to provide universal pdf capability for blocklets. For more information about react/pdf, refer to the [official documentation](https://www.npmjs.com/package/react-pdf).
+
+## Package Structure
+
+The package is composed of both frontend and backend components. The frontend code resides in the `index.js` file
+
+## Development
+
+### Install In Blocklet
+
+```
+# You can use npm / yarn
+pnpm add @blocklet/pdf
+```
+
+### Install Dependencies
+
+To install the required dependencies, run the following command:
+
+```
+pnpm i
+```
+
+### Build Packages
+
+To build the packages, execute the following command:
+
+```
+pnpm build
+```
+
+### Build, Watch, and Run Development Server
+
+For building, watching changes, and running the development server, use the following command:
+
+```
+pnpm run dev
+```
+
+## Frontend Example
+
+```jsx
+import { lazy } from 'react';
+
+const PdfComponent = React.lazy(() =>
+  // @ts-ignore
+  import('@blocklet/pdf').then((module) => {
+    return {
+      default: module.PdfComponent,
+    };
+  })
+);
+
+---
+
+<Box>
+  <PdfComponent url={pdfUrl} maxHeight="60vh" />
+</Box>;
+```
+
+## License
+
+This package is licensed under the MIT license.

package/lib/index.cjs

@@ -0,0 +1,333 @@
+'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.js`;
+reactPdf.pdfjs.GlobalWorkerOptions.workerSrc = workerSrc;
+const preventScrollChangeThumbnailTimerMap = {};
+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,
+      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

@@ -0,0 +1,13 @@
+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

@@ -0,0 +1,13 @@
+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

@@ -0,0 +1,13 @@
+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

@@ -0,0 +1,333 @@
+'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.js`;
+reactPdf.pdfjs.GlobalWorkerOptions.workerSrc = workerSrc;
+const preventScrollChangeThumbnailTimerMap = {};
+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,
+      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

@@ -0,0 +1,318 @@
+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.js`;
+pdfjs.GlobalWorkerOptions.workerSrc = workerSrc;
+const preventScrollChangeThumbnailTimerMap = {};
+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,
+      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 };

package/package.json

@@ -0,0 +1,63 @@
+{
+  "name": "@blocklet/pdf",
+  "version": "1.6.61",
+  "description": "blocklet pdf component",
+  "publishConfig": {
+    "access": "public"
+  },
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "require": "./lib/index.cjs",
+      "import": "./lib/index.mjs",
+      "types": "./lib/index.d.ts"
+    },
+    "./lib/": "./lib/"
+  },
+  "main": "./lib/index.cjs",
+  "module": "./lib/index.mjs",
+  "types": "./lib/index.d.ts",
+  "files": [
+    "lib",
+    "*.d.ts"
+  ],
+  "scripts": {
+    "coverage": "yarn test -- --coverage",
+    "test": "vitest tests",
+    "build": "unbuild",
+    "build:watch": "npx nodemon --ext 'ts,tsx,json,js,jsx' --exec 'yarn run build' --ignore 'lib/*' ",
+    "dev": "yarn run build:watch",
+    "prepublish": "yarn run build",
+    "prebuild:dep": "yarn run build"
+  },
+  "keywords": [
+    "blocklet",
+    "pdf"
+  ],
+  "author": "arcblock <blocklet@arcblock.io> https://github.com/blocklet",
+  "license": "ISC",
+  "dependencies": {
+    "@mui/icons-material": "^5.15.4",
+    "@mui/material": "^5.15.4",
+    "@mui/system": "^5.15.4",
+    "ahooks": "^3.7.8",
+    "react": "^18.2.0",
+    "react-pdf": "^7.7.0"
+  },
+  "devDependencies": {
+    "@arcblock/eslint-config-ts": "^0.2.4",
+    "@types/express": "^4.17.21",
+    "@types/lodash": "^4.14.202",
+    "@types/mime-types": "^2.1.4",
+    "@types/node": "^20.10.7",
+    "@types/react": "^18.2.47",
+    "@types/url-join": "^4.0.3",
+    "@vitest/coverage-c8": "^0.33.0",
+    "jsdom": "^22.1.0",
+    "typescript": "^5.3.3",
+    "unbuild": "^2.0.0",
+    "vitest": "^1.1.3",
+    "vitest-fetch-mock": "^0.2.2"
+  },
+  "gitHead": "c48a7dafae8605afaca690f4b1aeb70976f965f2"
+}