@blocklet/pdf 2.0.137 → 2.0.139

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/cjs/index.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ export * from './types';
2
+ export * from './pdf';
package/cjs/index.js ADDED
@@ -0,0 +1,27 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ var _types = require("./types");
7
+ Object.keys(_types).forEach(function (key) {
8
+ if (key === "default" || key === "__esModule") return;
9
+ if (key in exports && exports[key] === _types[key]) return;
10
+ Object.defineProperty(exports, key, {
11
+ enumerable: true,
12
+ get: function () {
13
+ return _types[key];
14
+ }
15
+ });
16
+ });
17
+ var _pdf = require("./pdf");
18
+ Object.keys(_pdf).forEach(function (key) {
19
+ if (key === "default" || key === "__esModule") return;
20
+ if (key in exports && exports[key] === _pdf[key]) return;
21
+ Object.defineProperty(exports, key, {
22
+ enumerable: true,
23
+ get: function () {
24
+ return _pdf[key];
25
+ }
26
+ });
27
+ });
package/cjs/pdf.d.ts ADDED
@@ -0,0 +1,5 @@
1
+ import { PdfProps } from './types';
2
+ import 'react-pdf/dist/Page/AnnotationLayer.css';
3
+ import 'react-pdf/dist/Page/TextLayer.css';
4
+ export declare function PdfComponent({ url, backgroundColor, loading, maxHeight, ...rest }: PdfProps): import("react").JSX.Element;
5
+ export default PdfComponent;
package/cjs/pdf.js ADDED
@@ -0,0 +1,290 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.PdfComponent = PdfComponent;
7
+
8
+ var _jsxRuntime = require("react/jsx-runtime");
9
+ var _react = require("react");
10
+ var _reactPdf = require("react-pdf");
11
+ var _ahooks = require("ahooks");
12
+ var _useTheme = _interopRequireDefault(require("@mui/material/styles/useTheme"));
13
+ var _useMediaQuery = _interopRequireDefault(require("@mui/material/useMediaQuery"));
14
+ var _Box = _interopRequireDefault(require("@mui/material/Box"));
15
+ var _Skeleton = _interopRequireDefault(require("@mui/material/Skeleton"));
16
+ var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
17
+ var _Fullscreen = _interopRequireDefault(require("@mui/icons-material/Fullscreen"));
18
+ var _ZoomOut = _interopRequireDefault(require("@mui/icons-material/ZoomOut"));
19
+ var _ZoomIn = _interopRequireDefault(require("@mui/icons-material/ZoomIn"));
20
+ var _Download = _interopRequireDefault(require("@mui/icons-material/Download"));
21
+ var _ArrowOutwardOutlined = _interopRequireDefault(require("@mui/icons-material/ArrowOutwardOutlined"));
22
+ var _material = require("@mui/material");
23
+ require("react-pdf/dist/Page/AnnotationLayer.css");
24
+ require("react-pdf/dist/Page/TextLayer.css");
25
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
26
+ const workerSrc = `//unpkg.com/pdfjs-dist@${_reactPdf.pdfjs.version}/legacy/build/pdf.worker.min.mjs`;
27
+ _reactPdf.pdfjs.GlobalWorkerOptions.workerSrc = workerSrc;
28
+ const preventScrollChangeThumbnailTimerMap = {};
29
+ const documentOptions = {
30
+ isEvalSupported: false
31
+ };
32
+ const getBorder = color => `2px solid ${color}`;
33
+ const defaultLoading = props => {
34
+ return /* @__PURE__ */(0, _jsxRuntime.jsx)(_Skeleton.default, {
35
+ variant: "rectangular",
36
+ width: "100%",
37
+ ...props
38
+ });
39
+ };
40
+ function PdfComponent({
41
+ url,
42
+ backgroundColor = "#fbfbfb",
43
+ loading = defaultLoading,
44
+ maxHeight = "60vh",
45
+ ...rest
46
+ }) {
47
+ const pdfPageWrapperRef = (0, _react.useRef)(null);
48
+ const thumbnailWrapperRef = (0, _react.useRef)(null);
49
+ const preventScrollChangeThumbnailRef = (0, _react.useRef)(false);
50
+ const state = (0, _ahooks.useReactive)({
51
+ currentPage: 1,
52
+ totalPage: 1,
53
+ scale: 1
54
+ });
55
+ const wrapperSize = (0, _ahooks.useSize)(pdfPageWrapperRef);
56
+ const theme = (0, _useTheme.default)();
57
+ const isMobile = (0, _useMediaQuery.default)(theme.breakpoints.down("sm"));
58
+ const pdfUrl = url;
59
+ const getPdfItemHeight = () => pdfPageWrapperRef.current?.children[0]?.offsetHeight;
60
+ const onDocumentLoadSuccess = pdf => {
61
+ state.totalPage = pdf.numPages;
62
+ };
63
+ const onPageChange = page => {
64
+ state.currentPage = page;
65
+ preventScrollChangeThumbnailRef.current = true;
66
+ const top = getPdfItemHeight() * (page - 1);
67
+ pdfPageWrapperRef?.current?.scrollTo({
68
+ top,
69
+ behavior: "smooth"
70
+ });
71
+ if (preventScrollChangeThumbnailTimerMap[pdfUrl]) clearTimeout(preventScrollChangeThumbnailTimerMap[pdfUrl]);
72
+ preventScrollChangeThumbnailTimerMap[pdfUrl] = setTimeout(() => {
73
+ preventScrollChangeThumbnailRef.current = false;
74
+ preventScrollChangeThumbnailTimerMap[pdfUrl] = null;
75
+ }, 1e3);
76
+ };
77
+ const scrollEvent = value => {
78
+ if (preventScrollChangeThumbnailRef.current) {
79
+ return false;
80
+ }
81
+ const scrollPage = Math.floor(value.top / getPdfItemHeight()) + 1;
82
+ if (scrollPage > 0 && scrollPage !== state.currentPage) {
83
+ state.currentPage = scrollPage;
84
+ thumbnailWrapperRef.current?.scrollTo({
85
+ // @ts-ignore
86
+ top: document.getElementById(`thumbnail-${scrollPage}`).offsetTop,
87
+ behavior: "smooth"
88
+ });
89
+ return true;
90
+ }
91
+ };
92
+ const {
93
+ run: runScrollEvent
94
+ } = (0, _ahooks.useDebounceFn)(scrollEvent, {
95
+ wait: 200
96
+ });
97
+ (0, _ahooks.useScroll)(pdfPageWrapperRef, runScrollEvent);
98
+ const commonPdfProps = {
99
+ canvasBackground: backgroundColor
100
+ };
101
+ const [, {
102
+ enterFullscreen
103
+ }] = (0, _ahooks.useFullscreen)(() => document.querySelector(".pdf-wrapper"));
104
+ return /* @__PURE__ */(0, _jsxRuntime.jsx)(Root, {
105
+ children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_reactPdf.Document, {
106
+ loading: () => loading({
107
+ height: maxHeight
108
+ }),
109
+ file: pdfUrl,
110
+ onLoadSuccess: onDocumentLoadSuccess,
111
+ options: documentOptions,
112
+ children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_Box.default, {
113
+ className: "pdf-wrapper",
114
+ sx: {
115
+ // default max-height: 60vh
116
+ maxHeight
117
+ },
118
+ ...rest,
119
+ children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_Box.default, {
120
+ className: "pdf-page",
121
+ ref: pdfPageWrapperRef,
122
+ sx: {
123
+ background: backgroundColor,
124
+ position: "relative"
125
+ },
126
+ children: [new Array(state.totalPage || 0).fill(0).map((_, index) => {
127
+ const currentPage = index + 1;
128
+ return /* @__PURE__ */(0, _jsxRuntime.jsx)(_reactPdf.Page, {
129
+ pageNumber: currentPage,
130
+ renderTextLayer: false,
131
+ width: wrapperSize?.width,
132
+ scale: state.scale,
133
+ ...commonPdfProps,
134
+ loading: () => loading({
135
+ height: maxHeight
136
+ })
137
+ }, `${pdfUrl}-${currentPage}`);
138
+ }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_Box.default, {
139
+ className: "pdf-page-toolbar",
140
+ children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_IconButton.default, {
141
+ onClick: () => {
142
+ if (state.scale > 0.1) {
143
+ state.scale -= 0.1;
144
+ }
145
+ },
146
+ children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_ZoomOut.default, {})
147
+ }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_IconButton.default, {
148
+ onClick: () => {
149
+ state.scale += 0.1;
150
+ },
151
+ children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_ZoomIn.default, {})
152
+ }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_IconButton.default, {
153
+ onClick: enterFullscreen,
154
+ children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_Fullscreen.default, {})
155
+ }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_IconButton.default, {
156
+ onClick: () => {
157
+ const link = document.createElement("a");
158
+ link.href = pdfUrl;
159
+ link.download = pdfUrl.split("/").pop() || "download.pdf";
160
+ link.click();
161
+ },
162
+ children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_Download.default, {})
163
+ }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_IconButton.default, {
164
+ onClick: () => {
165
+ window.open(pdfUrl, "_blank");
166
+ },
167
+ children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_ArrowOutwardOutlined.default, {})
168
+ })]
169
+ })]
170
+ }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_Box.default, {
171
+ className: "pdf-thumbnail",
172
+ ref: thumbnailWrapperRef,
173
+ sx: {
174
+ ".active": {
175
+ border: getBorder(theme?.palette?.primary?.main),
176
+ ".pdf-thumbnail-index": {
177
+ background: theme?.palette?.primary?.main
178
+ }
179
+ },
180
+ ".no-active": {
181
+ border: getBorder("transparent")
182
+ },
183
+ "*": {
184
+ transition: "all 0.2s",
185
+ cursor: "pointer"
186
+ }
187
+ },
188
+ children: new Array(state.totalPage || 0).fill(0).map((_, index) => {
189
+ const currentPage = index + 1;
190
+ const key = `thumbnail-${currentPage}`;
191
+ const width = isMobile ? 90 : 120;
192
+ return /* @__PURE__ */(0, _jsxRuntime.jsx)(_Box.default, {
193
+ id: key,
194
+ className: `${state.currentPage === currentPage ? "active" : "no-active"}`,
195
+ component: "a",
196
+ sx: {
197
+ width: width + 4
198
+ // add border width
199
+ },
200
+
201
+ children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_reactPdf.Thumbnail, {
202
+ pageIndex: currentPage,
203
+ pageNumber: currentPage,
204
+ width,
205
+ ...commonPdfProps,
206
+ onClick: e => {
207
+ e.stopPropagation();
208
+ e.preventDefault();
209
+ onPageChange(currentPage);
210
+ },
211
+ loading: loading({
212
+ height: `calc(${maxHeight} / ${isMobile ? 5 : 4})`,
213
+ sx: {
214
+ border: getBorder("transparent")
215
+ }
216
+ }),
217
+ children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_Box.default, {
218
+ className: "pdf-thumbnail-index",
219
+ component: "span",
220
+ sx: {
221
+ position: "absolute",
222
+ textAlign: "center",
223
+ bottom: 0,
224
+ left: 0,
225
+ right: 0,
226
+ color: "#fff",
227
+ fontSize: 13,
228
+ p: 0.5,
229
+ background: "rgba(0,0,0,0.25)"
230
+ },
231
+ children: ["# ", currentPage]
232
+ }, `index-${currentPage}`)
233
+ })
234
+ }, key);
235
+ })
236
+ })]
237
+ })
238
+ })
239
+ });
240
+ }
241
+ const Root = (0, _material.styled)(_Box.default)`
242
+ .pdf-wrapper {
243
+ display: flex;
244
+ justify-content: center;
245
+ align-items: stretch;
246
+ }
247
+
248
+ .pdf-page {
249
+ flex: 1;
250
+ display: flex;
251
+ flex-direction: column;
252
+ justify-content: flex-start;
253
+ align-items: center;
254
+ overflow-y: auto;
255
+ }
256
+
257
+ .pdf-page-toolbar {
258
+ position: sticky;
259
+ margin-top: 16px;
260
+ bottom: 16px;
261
+ right: 0;
262
+ left: 0;
263
+ background: rgba(0, 0, 0, 0.5);
264
+ border-radius: 4px;
265
+ display: flex;
266
+ align-items: center;
267
+ padding: 2px 8px;
268
+ gap: 4px;
269
+ * {
270
+ color: white;
271
+ }
272
+ }
273
+
274
+ .pdf-thumbnail {
275
+ margin-left: 16px;
276
+ display: flex;
277
+ justify-content: flex-start;
278
+ align-items: center;
279
+ flex-direction: column;
280
+ gap: 16px;
281
+ overflow-y: auto;
282
+ }
283
+
284
+ .react-pdf__Page__annotations {
285
+ display: none !important;
286
+ height: 0px !important;
287
+ width: 0px !important;
288
+ }
289
+ `;
290
+ module.exports = PdfComponent;
package/cjs/types.d.ts ADDED
@@ -0,0 +1,7 @@
1
+ import { BoxProps } from '@mui/system';
2
+ export interface PdfProps extends BoxProps {
3
+ url: string;
4
+ backgroundColor?: string;
5
+ loading?: any;
6
+ maxHeight?: number | string;
7
+ }
package/cjs/types.js ADDED
@@ -0,0 +1 @@
1
+ "use strict";
package/es/index.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ export * from './types';
2
+ export * from './pdf';
package/es/index.js ADDED
@@ -0,0 +1,2 @@
1
+ export * from "./types.js";
2
+ export * from "./pdf.js";
package/es/pdf.d.ts ADDED
@@ -0,0 +1,5 @@
1
+ import { PdfProps } from './types';
2
+ import 'react-pdf/dist/Page/AnnotationLayer.css';
3
+ import 'react-pdf/dist/Page/TextLayer.css';
4
+ export declare function PdfComponent({ url, backgroundColor, loading, maxHeight, ...rest }: PdfProps): import("react").JSX.Element;
5
+ export default PdfComponent;
package/es/pdf.js ADDED
@@ -0,0 +1,318 @@
1
+ import { jsx, jsxs } from "react/jsx-runtime";
2
+ import { useRef } from "react";
3
+ import { Document, Page, pdfjs, Thumbnail } from "react-pdf";
4
+ import { useReactive, useSize, useScroll, useFullscreen, useDebounceFn } from "ahooks";
5
+ import useTheme from "@mui/material/styles/useTheme";
6
+ import useMediaQuery from "@mui/material/useMediaQuery";
7
+ import Box from "@mui/material/Box";
8
+ import Skeleton from "@mui/material/Skeleton";
9
+ import IconButton from "@mui/material/IconButton";
10
+ import FullscreenIcon from "@mui/icons-material/Fullscreen";
11
+ import ZoomOutIcon from "@mui/icons-material/ZoomOut";
12
+ import ZoomInIcon from "@mui/icons-material/ZoomIn";
13
+ import DownloadIcon from "@mui/icons-material/Download";
14
+ import ArrowOutwardOutlinedIcon from "@mui/icons-material/ArrowOutwardOutlined";
15
+ import { styled } from "@mui/material";
16
+ import "react-pdf/dist/Page/AnnotationLayer.css";
17
+ import "react-pdf/dist/Page/TextLayer.css";
18
+ const workerSrc = `//unpkg.com/pdfjs-dist@${pdfjs.version}/legacy/build/pdf.worker.min.mjs`;
19
+ pdfjs.GlobalWorkerOptions.workerSrc = workerSrc;
20
+ const preventScrollChangeThumbnailTimerMap = {};
21
+ const documentOptions = { isEvalSupported: false };
22
+ const getBorder = (color) => `2px solid ${color}`;
23
+ const defaultLoading = (props) => {
24
+ return /* @__PURE__ */ jsx(Skeleton, { variant: "rectangular", width: "100%", ...props });
25
+ };
26
+ export function PdfComponent({
27
+ url,
28
+ backgroundColor = "#fbfbfb",
29
+ loading = defaultLoading,
30
+ maxHeight = "60vh",
31
+ ...rest
32
+ }) {
33
+ const pdfPageWrapperRef = useRef(null);
34
+ const thumbnailWrapperRef = useRef(null);
35
+ const preventScrollChangeThumbnailRef = useRef(false);
36
+ const state = useReactive({
37
+ currentPage: 1,
38
+ totalPage: 1,
39
+ scale: 1
40
+ });
41
+ const wrapperSize = useSize(pdfPageWrapperRef);
42
+ const theme = useTheme();
43
+ const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
44
+ const pdfUrl = url;
45
+ const getPdfItemHeight = () => pdfPageWrapperRef.current?.children[0]?.offsetHeight;
46
+ const onDocumentLoadSuccess = (pdf) => {
47
+ state.totalPage = pdf.numPages;
48
+ };
49
+ const onPageChange = (page) => {
50
+ state.currentPage = page;
51
+ preventScrollChangeThumbnailRef.current = true;
52
+ const top = getPdfItemHeight() * (page - 1);
53
+ pdfPageWrapperRef?.current?.scrollTo({
54
+ top,
55
+ behavior: "smooth"
56
+ });
57
+ if (preventScrollChangeThumbnailTimerMap[pdfUrl])
58
+ clearTimeout(preventScrollChangeThumbnailTimerMap[pdfUrl]);
59
+ preventScrollChangeThumbnailTimerMap[pdfUrl] = setTimeout(() => {
60
+ preventScrollChangeThumbnailRef.current = false;
61
+ preventScrollChangeThumbnailTimerMap[pdfUrl] = null;
62
+ }, 1e3);
63
+ };
64
+ const scrollEvent = (value) => {
65
+ if (preventScrollChangeThumbnailRef.current) {
66
+ return false;
67
+ }
68
+ const scrollPage = Math.floor(value.top / getPdfItemHeight()) + 1;
69
+ if (scrollPage > 0 && scrollPage !== state.currentPage) {
70
+ state.currentPage = scrollPage;
71
+ thumbnailWrapperRef.current?.scrollTo({
72
+ // @ts-ignore
73
+ top: document.getElementById(`thumbnail-${scrollPage}`).offsetTop,
74
+ behavior: "smooth"
75
+ });
76
+ return true;
77
+ }
78
+ };
79
+ const { run: runScrollEvent } = useDebounceFn(scrollEvent, {
80
+ wait: 200
81
+ });
82
+ useScroll(pdfPageWrapperRef, runScrollEvent);
83
+ const commonPdfProps = {
84
+ canvasBackground: backgroundColor
85
+ };
86
+ const [, { enterFullscreen }] = useFullscreen(() => document.querySelector(".pdf-wrapper"));
87
+ return /* @__PURE__ */ jsx(Root, { children: /* @__PURE__ */ jsx(
88
+ Document,
89
+ {
90
+ loading: () => loading({
91
+ height: maxHeight
92
+ }),
93
+ file: pdfUrl,
94
+ onLoadSuccess: onDocumentLoadSuccess,
95
+ options: documentOptions,
96
+ children: /* @__PURE__ */ jsxs(
97
+ Box,
98
+ {
99
+ className: "pdf-wrapper",
100
+ sx: {
101
+ // default max-height: 60vh
102
+ maxHeight
103
+ },
104
+ ...rest,
105
+ children: [
106
+ /* @__PURE__ */ jsxs(
107
+ Box,
108
+ {
109
+ className: "pdf-page",
110
+ ref: pdfPageWrapperRef,
111
+ sx: {
112
+ background: backgroundColor,
113
+ position: "relative"
114
+ },
115
+ children: [
116
+ new Array(state.totalPage || 0).fill(0).map((_, index) => {
117
+ const currentPage = index + 1;
118
+ return /* @__PURE__ */ jsx(
119
+ Page,
120
+ {
121
+ pageNumber: currentPage,
122
+ renderTextLayer: false,
123
+ width: wrapperSize?.width,
124
+ scale: state.scale,
125
+ ...commonPdfProps,
126
+ loading: () => loading({
127
+ height: maxHeight
128
+ })
129
+ },
130
+ `${pdfUrl}-${currentPage}`
131
+ );
132
+ }),
133
+ /* @__PURE__ */ jsxs(Box, { className: "pdf-page-toolbar", children: [
134
+ /* @__PURE__ */ jsx(
135
+ IconButton,
136
+ {
137
+ onClick: () => {
138
+ if (state.scale > 0.1) {
139
+ state.scale -= 0.1;
140
+ }
141
+ },
142
+ children: /* @__PURE__ */ jsx(ZoomOutIcon, {})
143
+ }
144
+ ),
145
+ /* @__PURE__ */ jsx(
146
+ IconButton,
147
+ {
148
+ onClick: () => {
149
+ state.scale += 0.1;
150
+ },
151
+ children: /* @__PURE__ */ jsx(ZoomInIcon, {})
152
+ }
153
+ ),
154
+ /* @__PURE__ */ jsx(IconButton, { onClick: enterFullscreen, children: /* @__PURE__ */ jsx(FullscreenIcon, {}) }),
155
+ /* @__PURE__ */ jsx(
156
+ IconButton,
157
+ {
158
+ onClick: () => {
159
+ const link = document.createElement("a");
160
+ link.href = pdfUrl;
161
+ link.download = pdfUrl.split("/").pop() || "download.pdf";
162
+ link.click();
163
+ },
164
+ children: /* @__PURE__ */ jsx(DownloadIcon, {})
165
+ }
166
+ ),
167
+ /* @__PURE__ */ jsx(
168
+ IconButton,
169
+ {
170
+ onClick: () => {
171
+ window.open(pdfUrl, "_blank");
172
+ },
173
+ children: /* @__PURE__ */ jsx(ArrowOutwardOutlinedIcon, {})
174
+ }
175
+ )
176
+ ] })
177
+ ]
178
+ }
179
+ ),
180
+ /* @__PURE__ */ jsx(
181
+ Box,
182
+ {
183
+ className: "pdf-thumbnail",
184
+ ref: thumbnailWrapperRef,
185
+ sx: {
186
+ ".active": {
187
+ border: getBorder(theme?.palette?.primary?.main),
188
+ ".pdf-thumbnail-index": {
189
+ background: theme?.palette?.primary?.main
190
+ }
191
+ },
192
+ ".no-active": {
193
+ border: getBorder("transparent")
194
+ },
195
+ "*": {
196
+ transition: "all 0.2s",
197
+ cursor: "pointer"
198
+ }
199
+ },
200
+ children: new Array(state.totalPage || 0).fill(0).map((_, index) => {
201
+ const currentPage = index + 1;
202
+ const key = `thumbnail-${currentPage}`;
203
+ const width = isMobile ? 90 : 120;
204
+ return /* @__PURE__ */ jsx(
205
+ Box,
206
+ {
207
+ id: key,
208
+ className: `${state.currentPage === currentPage ? "active" : "no-active"}`,
209
+ component: "a",
210
+ sx: {
211
+ width: width + 4
212
+ // add border width
213
+ },
214
+ children: /* @__PURE__ */ jsx(
215
+ Thumbnail,
216
+ {
217
+ pageIndex: currentPage,
218
+ pageNumber: currentPage,
219
+ width,
220
+ ...commonPdfProps,
221
+ onClick: (e) => {
222
+ e.stopPropagation();
223
+ e.preventDefault();
224
+ onPageChange(currentPage);
225
+ },
226
+ loading: loading({
227
+ height: `calc(${maxHeight} / ${isMobile ? 5 : 4})`,
228
+ sx: {
229
+ border: getBorder("transparent")
230
+ }
231
+ }),
232
+ children: /* @__PURE__ */ jsxs(
233
+ Box,
234
+ {
235
+ className: "pdf-thumbnail-index",
236
+ component: "span",
237
+ sx: {
238
+ position: "absolute",
239
+ textAlign: "center",
240
+ bottom: 0,
241
+ left: 0,
242
+ right: 0,
243
+ color: "#fff",
244
+ fontSize: 13,
245
+ p: 0.5,
246
+ background: "rgba(0,0,0,0.25)"
247
+ },
248
+ children: [
249
+ "# ",
250
+ currentPage
251
+ ]
252
+ },
253
+ `index-${currentPage}`
254
+ )
255
+ }
256
+ )
257
+ },
258
+ key
259
+ );
260
+ })
261
+ }
262
+ )
263
+ ]
264
+ }
265
+ )
266
+ }
267
+ ) });
268
+ }
269
+ const Root = styled(Box)`
270
+ .pdf-wrapper {
271
+ display: flex;
272
+ justify-content: center;
273
+ align-items: stretch;
274
+ }
275
+
276
+ .pdf-page {
277
+ flex: 1;
278
+ display: flex;
279
+ flex-direction: column;
280
+ justify-content: flex-start;
281
+ align-items: center;
282
+ overflow-y: auto;
283
+ }
284
+
285
+ .pdf-page-toolbar {
286
+ position: sticky;
287
+ margin-top: 16px;
288
+ bottom: 16px;
289
+ right: 0;
290
+ left: 0;
291
+ background: rgba(0, 0, 0, 0.5);
292
+ border-radius: 4px;
293
+ display: flex;
294
+ align-items: center;
295
+ padding: 2px 8px;
296
+ gap: 4px;
297
+ * {
298
+ color: white;
299
+ }
300
+ }
301
+
302
+ .pdf-thumbnail {
303
+ margin-left: 16px;
304
+ display: flex;
305
+ justify-content: flex-start;
306
+ align-items: center;
307
+ flex-direction: column;
308
+ gap: 16px;
309
+ overflow-y: auto;
310
+ }
311
+
312
+ .react-pdf__Page__annotations {
313
+ display: none !important;
314
+ height: 0px !important;
315
+ width: 0px !important;
316
+ }
317
+ `;
318
+ export default PdfComponent;
package/es/types.d.ts ADDED
@@ -0,0 +1,7 @@
1
+ import { BoxProps } from '@mui/system';
2
+ export interface PdfProps extends BoxProps {
3
+ url: string;
4
+ backgroundColor?: string;
5
+ loading?: any;
6
+ maxHeight?: number | string;
7
+ }
package/es/types.js ADDED
File without changes
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@blocklet/pdf",
3
- "version": "2.0.137",
3
+ "version": "2.0.139",
4
4
  "description": "blocklet pdf component",
5
5
  "publishConfig": {
6
6
  "access": "public"
@@ -23,6 +23,8 @@
23
23
  "types": "./es/index.d.ts",
24
24
  "files": [
25
25
  "lib",
26
+ "es",
27
+ "cjs",
26
28
  "*.d.ts"
27
29
  ],
28
30
  "scripts": {
@@ -63,5 +65,5 @@
63
65
  "vitest": "^1.4.0",
64
66
  "vitest-fetch-mock": "^0.2.2"
65
67
  },
66
- "gitHead": "997e075b0524c68ee6f4a69ee0732a612c2ca641"
68
+ "gitHead": "8cba3d2b029052dece25fd9124d3aa91959b8700"
67
69
  }