@progress/kendo-react-pdf-viewer 6.1.1 → 7.0.0-develop.2
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/LICENSE.md +1 -1
- package/{dist/npm/PDFViewer.d.ts → PDFViewer.d.ts} +5 -2
- package/dist/cdn/js/kendo-react-pdf-viewer.js +5 -2
- package/{dist/es/main.d.ts → index.d.ts} +5 -1
- package/index.js +5 -0
- package/index.mjs +514 -0
- package/{dist/es/messages.d.ts → messages.d.ts} +4 -0
- package/package-metadata.d.ts +9 -0
- package/package.json +36 -65
- package/about.md +0 -3
- package/dist/cdn/js/kendo-react-pdf-viewer.js.LICENSE.txt +0 -21
- package/dist/es/PDFViewer.d.ts +0 -208
- package/dist/es/PDFViewer.js +0 -493
- package/dist/es/main.js +0 -30
- package/dist/es/messages.js +0 -85
- package/dist/es/package-metadata.d.ts +0 -5
- package/dist/es/package-metadata.js +0 -11
- package/dist/npm/PDFViewer.js +0 -496
- package/dist/npm/main.d.ts +0 -29
- package/dist/npm/main.js +0 -35
- package/dist/npm/messages.d.ts +0 -85
- package/dist/npm/messages.js +0 -88
- package/dist/npm/package-metadata.d.ts +0 -5
- package/dist/npm/package-metadata.js +0 -14
- package/dist/systemjs/kendo-react-pdf-viewer.js +0 -10
- package/dist/systemjs/kendo-react-pdf-viewer.txt +0 -0
- package/e2e-legacy/snapshots/pdf-viewer.png +0 -0
- package/e2e-next/basic.tests.ts +0 -23
package/dist/es/PDFViewer.js
DELETED
|
@@ -1,493 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
import * as PropTypes from 'prop-types';
|
|
3
|
-
import { Button, ButtonGroup, Toolbar, ToolbarSpacer } from '@progress/kendo-react-buttons';
|
|
4
|
-
import { TextBox, InputSuffix } from '@progress/kendo-react-inputs';
|
|
5
|
-
import { Pager } from '@progress/kendo-react-data-tools';
|
|
6
|
-
import { Upload } from '@progress/kendo-react-upload';
|
|
7
|
-
import { ComboBox } from '@progress/kendo-react-dropdowns';
|
|
8
|
-
import { Loader } from '@progress/kendo-react-indicators';
|
|
9
|
-
import { classNames, validatePackage, shouldShowValidationUI, WatermarkOverlay } from '@progress/kendo-react-common';
|
|
10
|
-
import { useLocalization } from '@progress/kendo-react-intl';
|
|
11
|
-
import { zoomOutIcon, zoomInIcon, pointerIcon, handIcon, searchIcon, folderOpenIcon, downloadIcon, printIcon, convertLowercaseIcon, arrowUpIcon, arrowDownIcon, xIcon } from '@progress/kendo-svg-icons';
|
|
12
|
-
import 'pdfjs-dist/build/pdf.worker.entry';
|
|
13
|
-
import { packageMetadata } from './package-metadata';
|
|
14
|
-
import { Scroller, SearchService, DEFAULT_ZOOM_LEVEL, loadPDF, print, download, goToNextSearchMatch, goToPreviousSearchMatch, reloadDocument, calculateZoomLevel, removeChildren, scrollToPage, currentPage } from '@progress/kendo-pdfviewer-common';
|
|
15
|
-
import { messages, close, download as downloadM, enablePanning, enableSelection, matchCase as matchCaseM, nextMatch, open, prevMatch, print as printM, search, zoomIn, zoomOut, popupBlocked, actualWidth, fitToWidth, fitToPage } from './messages';
|
|
16
|
-
const toolNames = [
|
|
17
|
-
'pager', 'spacer', 'zoomInOut', 'zoom', 'selection', 'spacer', 'search', 'open', 'download', 'print'
|
|
18
|
-
];
|
|
19
|
-
// Correct declaration but typedoc does not recognize it.
|
|
20
|
-
// export type PDFViewerTool = typeof toolNames[number];
|
|
21
|
-
const defaultProps = {
|
|
22
|
-
minZoom: 0.5,
|
|
23
|
-
maxZoom: 4,
|
|
24
|
-
tools: [...toolNames],
|
|
25
|
-
zoomRate: 0.25,
|
|
26
|
-
zoomLevels: [
|
|
27
|
-
{ id: 1, priority: 1, value: 1, text: 'Actual width', type: 'ActualWidth', locationString: actualWidth },
|
|
28
|
-
{ id: 2, priority: 2, value: 1, text: 'Fit to width', type: 'FitToWidth', locationString: fitToWidth },
|
|
29
|
-
{ id: 3, priority: 3, value: 1, text: 'Fit to page', type: 'FitToPage', locationString: fitToPage },
|
|
30
|
-
{ id: 4, priority: 4, value: 0.5, text: '50%', type: '' },
|
|
31
|
-
{ id: 5, priority: 5, value: 0.75, text: '75%', type: '' },
|
|
32
|
-
{ id: 6, priority: 100, value: 1, text: '100%', type: '' },
|
|
33
|
-
{ id: 7, priority: 7, value: 1.25, text: '125%', type: '' },
|
|
34
|
-
{ id: 8, priority: 8, value: 1.5, text: '150%', type: '' },
|
|
35
|
-
{ id: 9, priority: 9, value: 2, text: '200%', type: '' },
|
|
36
|
-
{ id: 10, priority: 10, value: 3, text: '300%', type: '' },
|
|
37
|
-
{ id: 11, priority: 11, value: 4, text: '400%', type: '' }
|
|
38
|
-
],
|
|
39
|
-
defaultZoom: DEFAULT_ZOOM_LEVEL
|
|
40
|
-
};
|
|
41
|
-
const navigation = [
|
|
42
|
-
'.k-toolbar > button',
|
|
43
|
-
'.k-toolbar .k-combobox > input',
|
|
44
|
-
'.k-toolbar .k-button-group > button',
|
|
45
|
-
'.k-toolbar .k-pager > a',
|
|
46
|
-
'.k-toolbar .k-pager input'
|
|
47
|
-
];
|
|
48
|
-
const sortByPriority = (a, b) => {
|
|
49
|
-
if (a.priority > b.priority) {
|
|
50
|
-
return -1;
|
|
51
|
-
}
|
|
52
|
-
else if (a.priority < b.priority) {
|
|
53
|
-
return 1;
|
|
54
|
-
}
|
|
55
|
-
return 0;
|
|
56
|
-
};
|
|
57
|
-
/**
|
|
58
|
-
* Represents the [KendoReact PDFViewer component]({% slug api_pdf-viewer_pdfviewerprops %}).
|
|
59
|
-
*
|
|
60
|
-
* @example
|
|
61
|
-
* ```jsx
|
|
62
|
-
* function App() {
|
|
63
|
-
* return <PDFViewer url="sample.pdf" />;
|
|
64
|
-
* }
|
|
65
|
-
* ReactDOM.render(<App />, document.querySelector('my-app'));
|
|
66
|
-
* ```
|
|
67
|
-
*/
|
|
68
|
-
export const PDFViewer = React.forwardRef((props, ref) => {
|
|
69
|
-
validatePackage(packageMetadata);
|
|
70
|
-
const showLicenseWatermark = shouldShowValidationUI(packageMetadata);
|
|
71
|
-
const { zoom, zoomLevels = defaultProps.zoomLevels, defaultZoom = defaultProps.defaultZoom, minZoom = defaultProps.minZoom, maxZoom = defaultProps.maxZoom, zoomRate = defaultProps.zoomRate } = props;
|
|
72
|
-
const loc = useLocalization();
|
|
73
|
-
const pagesRef = React.useRef(null);
|
|
74
|
-
const [stateZoom, setStateZoom] = React.useState(defaultZoom);
|
|
75
|
-
const currentZoom = zoom !== undefined ? zoom : stateZoom;
|
|
76
|
-
const currentZoomLevel = zoomLevels.slice().sort(sortByPriority).find(z => z.value === currentZoom) ||
|
|
77
|
-
{ text: (currentZoom * 100) + '%', value: currentZoom, id: currentZoom, locationString: '' };
|
|
78
|
-
if (currentZoomLevel.locationString) {
|
|
79
|
-
currentZoomLevel.text = loc.toLanguageString(currentZoomLevel.locationString, messages[currentZoomLevel.locationString]);
|
|
80
|
-
}
|
|
81
|
-
const [hasDocument, setHasDocument] = React.useState(false);
|
|
82
|
-
const [loading, setLoading] = React.useState(true);
|
|
83
|
-
const [skip, setSkip] = React.useState(0);
|
|
84
|
-
const [enabledSelection, setEnabledSelection] = React.useState(false);
|
|
85
|
-
const [showSearch, setShowSearch] = React.useState(false);
|
|
86
|
-
const [matches, setMatches] = React.useState(0);
|
|
87
|
-
const [currentMatch, setCurrentMatch] = React.useState(0);
|
|
88
|
-
const [matchCase, setMatchCase] = React.useState(false);
|
|
89
|
-
const [searchText, setSearchText] = React.useState('');
|
|
90
|
-
const refObj = React.useMemo(() => ({}), []);
|
|
91
|
-
refObj.currentZoom = currentZoom;
|
|
92
|
-
refObj.props = props;
|
|
93
|
-
const setScaleFactor = React.useCallback((scaleFactor) => {
|
|
94
|
-
if (pagesRef.current) {
|
|
95
|
-
pagesRef.current.style.setProperty('--scale-factor', String(scaleFactor));
|
|
96
|
-
}
|
|
97
|
-
}, []);
|
|
98
|
-
const target = React.useRef(null);
|
|
99
|
-
const pdfViewerRef = React.useRef(null);
|
|
100
|
-
React.useImperativeHandle(target, () => ({
|
|
101
|
-
get element() { return pdfViewerRef.current; },
|
|
102
|
-
props,
|
|
103
|
-
get pages() { return refObj.pages; },
|
|
104
|
-
get document() { return refObj.document; }
|
|
105
|
-
}), []);
|
|
106
|
-
React.useImperativeHandle(ref, () => target.current);
|
|
107
|
-
const triggerOnLoad = React.useCallback(() => {
|
|
108
|
-
if (refObj.props.onLoad) {
|
|
109
|
-
const loadEvent = { target: target.current };
|
|
110
|
-
refObj.props.onLoad.call(undefined, loadEvent);
|
|
111
|
-
}
|
|
112
|
-
}, []);
|
|
113
|
-
const triggerOnDownload = React.useCallback((blob, fileName, saveOptions) => {
|
|
114
|
-
if (props.onDownload) {
|
|
115
|
-
const downloadEvent = {
|
|
116
|
-
target: target.current,
|
|
117
|
-
blob,
|
|
118
|
-
fileName,
|
|
119
|
-
saveOptions
|
|
120
|
-
};
|
|
121
|
-
const result = props.onDownload.call(undefined, downloadEvent);
|
|
122
|
-
return result === false ? true : false;
|
|
123
|
-
}
|
|
124
|
-
return false;
|
|
125
|
-
}, [props.onDownload]);
|
|
126
|
-
const initScroller = React.useCallback(() => {
|
|
127
|
-
var _a;
|
|
128
|
-
if (refObj.scroller) {
|
|
129
|
-
refObj.scroller.destroy();
|
|
130
|
-
}
|
|
131
|
-
refObj.scroller = new Scroller((_a = pagesRef.current) === null || _a === void 0 ? void 0 : _a.parentNode, {
|
|
132
|
-
filter: '.k-page',
|
|
133
|
-
events: {}
|
|
134
|
-
});
|
|
135
|
-
refObj.scroller.enablePanEventsTracking();
|
|
136
|
-
}, []);
|
|
137
|
-
const initSearch = React.useCallback((wrapper) => {
|
|
138
|
-
const pagesTextLayers = Array.from(wrapper.querySelectorAll('.k-text-layer'));
|
|
139
|
-
refObj.search = new SearchService({
|
|
140
|
-
textContainers: pagesTextLayers || [],
|
|
141
|
-
highlightClass: 'k-search-highlight',
|
|
142
|
-
highlightMarkClass: 'k-search-highlight-mark',
|
|
143
|
-
charClass: 'k-text-char'
|
|
144
|
-
});
|
|
145
|
-
}, []);
|
|
146
|
-
refObj.done = React.useCallback(({ pdfPages, pdfDoc, zoom: documentZoom }) => {
|
|
147
|
-
refObj.document = pdfDoc;
|
|
148
|
-
refObj.pages = pdfPages;
|
|
149
|
-
refObj.zoom = documentZoom;
|
|
150
|
-
initScroller();
|
|
151
|
-
setLoading(false);
|
|
152
|
-
setHasDocument(true);
|
|
153
|
-
triggerOnLoad();
|
|
154
|
-
if (pagesRef.current) {
|
|
155
|
-
scrollToPage(pagesRef.current, 0);
|
|
156
|
-
}
|
|
157
|
-
}, []);
|
|
158
|
-
refObj.error = React.useCallback((reason) => {
|
|
159
|
-
refObj.document = null;
|
|
160
|
-
refObj.pages = [];
|
|
161
|
-
setLoading(false);
|
|
162
|
-
setHasDocument(false);
|
|
163
|
-
if (props.onError) {
|
|
164
|
-
const errorEvent = {
|
|
165
|
-
error: typeof reason === 'string' ? { message: reason } : reason,
|
|
166
|
-
target: target.current
|
|
167
|
-
};
|
|
168
|
-
props.onError.call(undefined, errorEvent);
|
|
169
|
-
}
|
|
170
|
-
}, [props.onError]);
|
|
171
|
-
React.useEffect(() => {
|
|
172
|
-
if (pagesRef.current) {
|
|
173
|
-
if (props.url || props.data || props.arrayBuffer) {
|
|
174
|
-
setLoading(true);
|
|
175
|
-
removeChildren(pagesRef.current);
|
|
176
|
-
loadPDF({
|
|
177
|
-
url: props.url,
|
|
178
|
-
data: props.data,
|
|
179
|
-
arrayBuffer: props.arrayBuffer,
|
|
180
|
-
dom: pagesRef.current,
|
|
181
|
-
zoom: refObj.currentZoom,
|
|
182
|
-
done: refObj.done,
|
|
183
|
-
error: refObj.error
|
|
184
|
-
});
|
|
185
|
-
setScaleFactor(refObj.currentZoom);
|
|
186
|
-
}
|
|
187
|
-
else {
|
|
188
|
-
refObj.document = null;
|
|
189
|
-
refObj.pages = [];
|
|
190
|
-
setHasDocument(false);
|
|
191
|
-
setLoading(false);
|
|
192
|
-
removeChildren(pagesRef.current);
|
|
193
|
-
}
|
|
194
|
-
}
|
|
195
|
-
}, [props.url, props.data, props.arrayBuffer]);
|
|
196
|
-
const reload = React.useCallback((pdfDoc, zoomLev) => {
|
|
197
|
-
if (pagesRef.current) {
|
|
198
|
-
setLoading(true);
|
|
199
|
-
removeChildren(pagesRef.current);
|
|
200
|
-
reloadDocument({
|
|
201
|
-
pdfDoc,
|
|
202
|
-
zoom: zoomLev,
|
|
203
|
-
dom: pagesRef.current,
|
|
204
|
-
done: (pdfPages) => {
|
|
205
|
-
refObj.pages = pdfPages;
|
|
206
|
-
refObj.zoom = zoomLev;
|
|
207
|
-
setLoading(false);
|
|
208
|
-
},
|
|
209
|
-
error: refObj.error
|
|
210
|
-
});
|
|
211
|
-
}
|
|
212
|
-
}, []);
|
|
213
|
-
React.useEffect(() => {
|
|
214
|
-
setScaleFactor(currentZoom);
|
|
215
|
-
if (pagesRef.current && refObj.document && currentZoom !== refObj.zoom) {
|
|
216
|
-
reload(refObj.document, currentZoom);
|
|
217
|
-
}
|
|
218
|
-
}, [currentZoom, reload]);
|
|
219
|
-
React.useEffect(() => {
|
|
220
|
-
return () => {
|
|
221
|
-
if (refObj.scroller) {
|
|
222
|
-
refObj.scroller.destroy();
|
|
223
|
-
}
|
|
224
|
-
if (refObj.search) {
|
|
225
|
-
refObj.search.destroy();
|
|
226
|
-
}
|
|
227
|
-
refObj.document = null;
|
|
228
|
-
refObj.pages = [];
|
|
229
|
-
};
|
|
230
|
-
}, []);
|
|
231
|
-
const onSearch = React.useCallback(() => {
|
|
232
|
-
setShowSearch(true);
|
|
233
|
-
initSearch(pagesRef.current);
|
|
234
|
-
}, []);
|
|
235
|
-
const onSearchTextChange = React.useCallback((e) => {
|
|
236
|
-
const text = e.value;
|
|
237
|
-
const currentMatches = refObj.search.search({ text, matchCase });
|
|
238
|
-
setCurrentMatch(currentMatches.length ? 1 : 0);
|
|
239
|
-
setMatches(currentMatches.length);
|
|
240
|
-
setSearchText(text);
|
|
241
|
-
}, [matchCase]);
|
|
242
|
-
const onMatchCaseClick = React.useCallback(() => {
|
|
243
|
-
const currentMatches = refObj.search.search({ text: searchText, matchCase: !matchCase });
|
|
244
|
-
setCurrentMatch(currentMatches.length ? 1 : 0);
|
|
245
|
-
setMatches(currentMatches.length);
|
|
246
|
-
setMatchCase(!matchCase);
|
|
247
|
-
}, [matchCase, searchText]);
|
|
248
|
-
const onNextMatch = React.useCallback(() => {
|
|
249
|
-
goToNextSearchMatch(refObj);
|
|
250
|
-
setCurrentMatch((currentMatch + 1) > matches ? 1 : (currentMatch + 1));
|
|
251
|
-
}, [currentMatch, matches]);
|
|
252
|
-
const onPrevMatch = React.useCallback(() => {
|
|
253
|
-
goToPreviousSearchMatch(refObj);
|
|
254
|
-
setCurrentMatch((currentMatch - 1) < 1 ? matches : (currentMatch - 1));
|
|
255
|
-
}, [currentMatch, matches]);
|
|
256
|
-
const onClose = React.useCallback(() => {
|
|
257
|
-
refObj.search.destroy();
|
|
258
|
-
setCurrentMatch(0);
|
|
259
|
-
setMatches(0);
|
|
260
|
-
setMatchCase(false);
|
|
261
|
-
setSearchText('');
|
|
262
|
-
setShowSearch(false);
|
|
263
|
-
}, []);
|
|
264
|
-
const onTextBoxKeyDown = React.useCallback((e) => {
|
|
265
|
-
if (e.key === 'Enter') {
|
|
266
|
-
e.preventDefault();
|
|
267
|
-
goToNextSearchMatch(refObj);
|
|
268
|
-
setCurrentMatch((currentMatch + 1) > matches ? 1 : (currentMatch + 1));
|
|
269
|
-
}
|
|
270
|
-
else if (e.key === 'Escape') {
|
|
271
|
-
onClose();
|
|
272
|
-
}
|
|
273
|
-
}, [currentMatch, matches]);
|
|
274
|
-
const onPageChange = React.useCallback((e) => {
|
|
275
|
-
if (pagesRef.current) {
|
|
276
|
-
const nextPage = e.skip;
|
|
277
|
-
scrollToPage(pagesRef.current, nextPage);
|
|
278
|
-
const pageEvent = {
|
|
279
|
-
page: nextPage + 1,
|
|
280
|
-
target: target.current,
|
|
281
|
-
syntheticEvent: e.syntheticEvent
|
|
282
|
-
};
|
|
283
|
-
if (props.onPageChange) {
|
|
284
|
-
props.onPageChange.call(undefined, pageEvent);
|
|
285
|
-
}
|
|
286
|
-
}
|
|
287
|
-
setSkip(e.skip);
|
|
288
|
-
}, [skip, props.onPageChange]);
|
|
289
|
-
const onScroll = React.useCallback((e) => {
|
|
290
|
-
if (pdfViewerRef.current) {
|
|
291
|
-
const nextPage = currentPage(pdfViewerRef.current);
|
|
292
|
-
if (nextPage !== skip) {
|
|
293
|
-
setSkip(nextPage);
|
|
294
|
-
const pageEvent = {
|
|
295
|
-
page: nextPage + 1,
|
|
296
|
-
target: target.current,
|
|
297
|
-
syntheticEvent: e
|
|
298
|
-
};
|
|
299
|
-
if (props.onPageChange) {
|
|
300
|
-
props.onPageChange.call(undefined, pageEvent);
|
|
301
|
-
}
|
|
302
|
-
}
|
|
303
|
-
}
|
|
304
|
-
}, [skip, props.onPageChange]);
|
|
305
|
-
const onZoomIn = React.useCallback((e) => {
|
|
306
|
-
const newZoom = Math.min(refObj.currentZoom + zoomRate, maxZoom);
|
|
307
|
-
if (newZoom !== refObj.currentZoom && refObj.document) {
|
|
308
|
-
setStateZoom(newZoom);
|
|
309
|
-
if (props.onZoom) {
|
|
310
|
-
const zoomEvent = {
|
|
311
|
-
zoom: newZoom,
|
|
312
|
-
target: target.current,
|
|
313
|
-
syntheticEvent: e
|
|
314
|
-
};
|
|
315
|
-
props.onZoom.call(undefined, zoomEvent);
|
|
316
|
-
}
|
|
317
|
-
}
|
|
318
|
-
}, [zoomRate, maxZoom, props.onZoom]);
|
|
319
|
-
const onZoomOut = React.useCallback((e) => {
|
|
320
|
-
const newZoom = Math.max(refObj.currentZoom - zoomRate, minZoom);
|
|
321
|
-
if (newZoom !== refObj.currentZoom && refObj.document) {
|
|
322
|
-
setStateZoom(newZoom);
|
|
323
|
-
if (props.onZoom) {
|
|
324
|
-
const zoomEvent = {
|
|
325
|
-
zoom: newZoom,
|
|
326
|
-
target: target.current,
|
|
327
|
-
syntheticEvent: e
|
|
328
|
-
};
|
|
329
|
-
props.onZoom.call(undefined, zoomEvent);
|
|
330
|
-
}
|
|
331
|
-
}
|
|
332
|
-
}, [zoomRate, minZoom, props.onZoom]);
|
|
333
|
-
const onZoomLevelChange = React.useCallback((e) => {
|
|
334
|
-
const item = e.value === null ? { text: '100%', value: 1, id: 100 } : Object.assign({}, e.value);
|
|
335
|
-
if (item.value === undefined) {
|
|
336
|
-
const parsedText = parseFloat(item.text);
|
|
337
|
-
if (typeof parsedText === 'number' && !Number.isNaN(parsedText)) {
|
|
338
|
-
item.value = parsedText / 100;
|
|
339
|
-
}
|
|
340
|
-
else {
|
|
341
|
-
item.value = 1;
|
|
342
|
-
}
|
|
343
|
-
}
|
|
344
|
-
let newZoom = item ? calculateZoomLevel(item.value, item.type, refObj.currentZoom, pagesRef.current) : 1;
|
|
345
|
-
newZoom = Math.round(newZoom * 100) / 100;
|
|
346
|
-
if (refObj.currentZoom !== newZoom && refObj.document) {
|
|
347
|
-
setStateZoom(newZoom);
|
|
348
|
-
if (props.onZoom) {
|
|
349
|
-
const zoomEvent = {
|
|
350
|
-
zoom: newZoom,
|
|
351
|
-
target: target.current,
|
|
352
|
-
syntheticEvent: e.syntheticEvent
|
|
353
|
-
};
|
|
354
|
-
props.onZoom.call(undefined, zoomEvent);
|
|
355
|
-
}
|
|
356
|
-
}
|
|
357
|
-
}, [props.onZoom]);
|
|
358
|
-
const onTextSelection = React.useCallback(() => {
|
|
359
|
-
refObj.scroller.disablePanEventsTracking();
|
|
360
|
-
setEnabledSelection(true);
|
|
361
|
-
}, []);
|
|
362
|
-
const onPinning = React.useCallback(() => {
|
|
363
|
-
refObj.scroller.enablePanEventsTracking();
|
|
364
|
-
setEnabledSelection(false);
|
|
365
|
-
}, []);
|
|
366
|
-
const onDownload = React.useCallback(() => {
|
|
367
|
-
download({
|
|
368
|
-
pdf: refObj.document,
|
|
369
|
-
error: refObj.error
|
|
370
|
-
}, props.saveFileName, props.saveOptions, triggerOnDownload);
|
|
371
|
-
}, [props.url, props.data, props.arrayBuffer, props.saveFileName, props.saveOptions, triggerOnDownload]);
|
|
372
|
-
const onPrint = React.useCallback(() => {
|
|
373
|
-
setLoading(true);
|
|
374
|
-
const onError = (e) => {
|
|
375
|
-
refObj.error(typeof (e ? e.message || e : null) === 'string' ? e.message || e : loc.toLanguageString(popupBlocked, messages[popupBlocked]));
|
|
376
|
-
};
|
|
377
|
-
const onDone = () => {
|
|
378
|
-
setLoading(false);
|
|
379
|
-
};
|
|
380
|
-
print(refObj.pages, onDone, onError);
|
|
381
|
-
}, []);
|
|
382
|
-
const onAdd = React.useCallback((e) => {
|
|
383
|
-
const st = e.newState;
|
|
384
|
-
if (st[0] && st[0].getRawFile) {
|
|
385
|
-
const file = st[0].getRawFile();
|
|
386
|
-
file.arrayBuffer().then((arrayBuffer) => {
|
|
387
|
-
if (pagesRef.current) {
|
|
388
|
-
setLoading(true);
|
|
389
|
-
removeChildren(pagesRef.current);
|
|
390
|
-
const currentZoomValue = refObj.props.zoom === undefined ? defaultZoom : refObj.props.zoom;
|
|
391
|
-
loadPDF({
|
|
392
|
-
arrayBuffer,
|
|
393
|
-
dom: pagesRef.current,
|
|
394
|
-
zoom: currentZoomValue,
|
|
395
|
-
done: refObj.done,
|
|
396
|
-
error: refObj.error
|
|
397
|
-
});
|
|
398
|
-
setStateZoom(currentZoomValue);
|
|
399
|
-
}
|
|
400
|
-
});
|
|
401
|
-
}
|
|
402
|
-
}, [defaultZoom]);
|
|
403
|
-
const onFileOpen = React.useCallback((e) => {
|
|
404
|
-
const targetEl = e.target;
|
|
405
|
-
if (targetEl instanceof Element && targetEl.parentNode) {
|
|
406
|
-
const toolbarEl = targetEl.closest('.k-toolbar');
|
|
407
|
-
const input = toolbarEl && toolbarEl.querySelector('.k-upload input');
|
|
408
|
-
if (input) {
|
|
409
|
-
input.click();
|
|
410
|
-
}
|
|
411
|
-
}
|
|
412
|
-
}, []);
|
|
413
|
-
const loader = (loading && React.createElement("div", { className: "k-loader-container k-loader-container-md k-loader-top" },
|
|
414
|
-
React.createElement("div", { className: "k-loader-container-overlay k-overlay-light" }),
|
|
415
|
-
React.createElement("div", { className: "k-loader-container-inner " },
|
|
416
|
-
React.createElement(Loader, { size: 'large' }))));
|
|
417
|
-
const zoomInOut = (React.createElement(ButtonGroup, null,
|
|
418
|
-
React.createElement(Button, { className: 'k-toolbar-button', title: loc.toLanguageString(zoomOut, messages[zoomOut]), disabled: currentZoom <= minZoom || !hasDocument, onClick: onZoomOut, icon: 'zoom-out', svgIcon: zoomOutIcon }),
|
|
419
|
-
React.createElement(Button, { className: 'k-toolbar-button', title: loc.toLanguageString(zoomIn, messages[zoomIn]), disabled: currentZoom >= maxZoom || !hasDocument, onClick: onZoomIn, icon: 'zoom-in', svgIcon: zoomInIcon })));
|
|
420
|
-
const zoomComboBoxTool = (React.createElement(ComboBox, { disabled: !hasDocument, data: (zoomLevels).map(level => (Object.assign(Object.assign({}, level), { text: level.locationString
|
|
421
|
-
? loc.toLanguageString(level.locationString, messages[level.locationString])
|
|
422
|
-
: level.text }))), dataItemKey: 'id', textField: 'text', value: hasDocument ? currentZoomLevel : null, allowCustom: true, onChange: onZoomLevelChange }));
|
|
423
|
-
const pagerTool = (React.createElement(Pager, { previousNext: true, type: 'input', skip: skip, take: 1, total: refObj.pages ? refObj.pages.length : 0, info: false, onPageChange: onPageChange }));
|
|
424
|
-
const spacer = React.createElement(ToolbarSpacer, null);
|
|
425
|
-
const selectionTool = (React.createElement(ButtonGroup, null,
|
|
426
|
-
React.createElement(Button, { className: 'k-toolbar-button', title: loc.toLanguageString(enableSelection, messages[enableSelection]), icon: 'pointer', svgIcon: pointerIcon, disabled: !hasDocument, togglable: true, selected: enabledSelection && hasDocument, onClick: onTextSelection }),
|
|
427
|
-
React.createElement(Button, { className: 'k-toolbar-button', title: loc.toLanguageString(enablePanning, messages[enablePanning]), icon: 'hand', svgIcon: handIcon, disabled: !hasDocument, togglable: true, selected: !enabledSelection && hasDocument, onClick: onPinning })));
|
|
428
|
-
const searchTool = (React.createElement(Button, { className: 'k-toolbar-button', title: loc.toLanguageString(search, messages[search]), icon: 'search', svgIcon: searchIcon, disabled: !hasDocument, onClick: onSearch }));
|
|
429
|
-
const openTool = (React.createElement(React.Fragment, null,
|
|
430
|
-
React.createElement(Button, { className: 'k-toolbar-button', title: loc.toLanguageString(open, messages[open]), icon: 'folder-open', svgIcon: folderOpenIcon, onClick: onFileOpen }),
|
|
431
|
-
React.createElement("div", { style: { display: 'none' } },
|
|
432
|
-
React.createElement(Upload, { restrictions: { allowedExtensions: ['.pdf'] }, onAdd: onAdd, autoUpload: false, defaultFiles: [], multiple: false, accept: ".pdf,.PDF", withCredentials: false }))));
|
|
433
|
-
const downloadTool = (React.createElement(Button, { className: 'k-toolbar-button', title: loc.toLanguageString(downloadM, messages[downloadM]), icon: 'download', svgIcon: downloadIcon, disabled: !hasDocument, onClick: onDownload }));
|
|
434
|
-
const printTool = (React.createElement(Button, { className: 'k-toolbar-button', title: loc.toLanguageString(printM, messages[printM]), icon: 'print', svgIcon: printIcon, disabled: !hasDocument, onClick: onPrint }));
|
|
435
|
-
const tools = {
|
|
436
|
-
pager: pagerTool,
|
|
437
|
-
spacer,
|
|
438
|
-
zoomInOut,
|
|
439
|
-
zoom: zoomComboBoxTool,
|
|
440
|
-
selection: selectionTool,
|
|
441
|
-
search: searchTool,
|
|
442
|
-
open: openTool,
|
|
443
|
-
download: downloadTool,
|
|
444
|
-
print: printTool
|
|
445
|
-
};
|
|
446
|
-
const buttons = (props.tools || defaultProps.tools).map((tool) => tools[tool]);
|
|
447
|
-
const toolbar = (React.createElement(Toolbar, { buttons: navigation }, ...buttons));
|
|
448
|
-
const content = (React.createElement("div", { className: classNames('k-canvas k-pdf-viewer-canvas k-pos-relative k-overflow-auto', {
|
|
449
|
-
'k-enable-text-select': enabledSelection,
|
|
450
|
-
'k-enable-panning': !enabledSelection
|
|
451
|
-
}), onScroll: onScroll },
|
|
452
|
-
showSearch && (React.createElement("div", { className: 'k-search-panel k-pos-sticky k-top-center' },
|
|
453
|
-
React.createElement(TextBox, { value: searchText, onChange: onSearchTextChange, placeholder: loc.toLanguageString(search, messages[search]), autoFocus: true, onKeyDown: onTextBoxKeyDown, suffix: () => (React.createElement(InputSuffix, null,
|
|
454
|
-
React.createElement(Button, { icon: "convert-lowercase", svgIcon: convertLowercaseIcon, title: loc.toLanguageString(matchCaseM, messages[matchCaseM]), fillMode: "flat", togglable: true, selected: matchCase, onClick: onMatchCaseClick }))) }),
|
|
455
|
-
React.createElement("span", { className: "k-search-matches" },
|
|
456
|
-
React.createElement("span", null, currentMatch),
|
|
457
|
-
" of ",
|
|
458
|
-
React.createElement("span", null, matches)),
|
|
459
|
-
React.createElement(Button, { title: loc.toLanguageString(prevMatch, messages[prevMatch]), fillMode: 'flat', icon: 'arrow-up', svgIcon: arrowUpIcon, disabled: matches === 0, onClick: onPrevMatch }),
|
|
460
|
-
React.createElement(Button, { title: loc.toLanguageString(nextMatch, messages[nextMatch]), fillMode: 'flat', icon: 'arrow-down', svgIcon: arrowDownIcon, disabled: matches === 0, onClick: onNextMatch }),
|
|
461
|
-
React.createElement(Button, { title: loc.toLanguageString(close, messages[close]), fillMode: 'flat', icon: 'x', svgIcon: xIcon, onClick: onClose }))),
|
|
462
|
-
React.createElement("div", { ref: pagesRef, className: 'k-pdf-viewer-pages' })));
|
|
463
|
-
return (React.createElement("div", { className: 'k-pdf-viewer', style: props.style, ref: pdfViewerRef },
|
|
464
|
-
props.onRenderLoader ? props.onRenderLoader.call(undefined, loader || null) : loader,
|
|
465
|
-
props.onRenderToolbar ? props.onRenderToolbar.call(undefined, toolbar) : toolbar,
|
|
466
|
-
props.onRenderContent ? props.onRenderContent.call(undefined, content) : content,
|
|
467
|
-
showLicenseWatermark && React.createElement(WatermarkOverlay, null)));
|
|
468
|
-
});
|
|
469
|
-
PDFViewer.displayName = 'KendoReactPDFViewer';
|
|
470
|
-
PDFViewer.propTypes = {
|
|
471
|
-
url: PropTypes.string,
|
|
472
|
-
data: PropTypes.string,
|
|
473
|
-
arrayBuffer: PropTypes.any,
|
|
474
|
-
typedArray: PropTypes.any,
|
|
475
|
-
style: PropTypes.object,
|
|
476
|
-
saveFileName: PropTypes.string,
|
|
477
|
-
saveOptions: PropTypes.object,
|
|
478
|
-
tools: PropTypes.arrayOf(PropTypes.oneOf(toolNames).isRequired),
|
|
479
|
-
zoomLevels: PropTypes.arrayOf(PropTypes.any),
|
|
480
|
-
zoom: PropTypes.number,
|
|
481
|
-
defaultZoom: PropTypes.number,
|
|
482
|
-
minZoom: PropTypes.number,
|
|
483
|
-
maxZoom: PropTypes.number,
|
|
484
|
-
zoomRate: PropTypes.number,
|
|
485
|
-
onError: PropTypes.func,
|
|
486
|
-
onLoad: PropTypes.func,
|
|
487
|
-
onDownload: PropTypes.func,
|
|
488
|
-
onRenderToolbar: PropTypes.func,
|
|
489
|
-
onRenderContent: PropTypes.func,
|
|
490
|
-
onRenderLoader: PropTypes.func,
|
|
491
|
-
onZoom: PropTypes.func
|
|
492
|
-
};
|
|
493
|
-
PDFViewer.defaultProps = defaultProps;
|
package/dist/es/main.js
DELETED
|
@@ -1,30 +0,0 @@
|
|
|
1
|
-
export { PDFViewer } from './PDFViewer';
|
|
2
|
-
export { currentPage } from '@progress/kendo-pdfviewer-common';
|
|
3
|
-
import { scrollToPage as scrollToPageCommon } from '@progress/kendo-pdfviewer-common';
|
|
4
|
-
/**
|
|
5
|
-
* Scrolls the PDFViewer document to the passed page number.
|
|
6
|
-
*
|
|
7
|
-
* @param rootElement The root HTML element of the PDFViewer component.
|
|
8
|
-
* @param pageNumber The page number.
|
|
9
|
-
*
|
|
10
|
-
* @example
|
|
11
|
-
* ```jsx
|
|
12
|
-
* function App() {
|
|
13
|
-
* const pdfRef = React.useRef(null);
|
|
14
|
-
* const handleClick = () => {
|
|
15
|
-
* scrollToPage(pdfRef.current.element, 3);
|
|
16
|
-
* };
|
|
17
|
-
* return (
|
|
18
|
-
* <div>
|
|
19
|
-
* <Button onClick={handleClick} >
|
|
20
|
-
* Scroll to Page 3
|
|
21
|
-
* </Button>
|
|
22
|
-
* <PDFViewer
|
|
23
|
-
* ref={pdfRef}
|
|
24
|
-
* />
|
|
25
|
-
* </div>
|
|
26
|
-
* )
|
|
27
|
-
* }
|
|
28
|
-
* ```
|
|
29
|
-
*/
|
|
30
|
-
export const scrollToPage = scrollToPageCommon;
|
package/dist/es/messages.js
DELETED
|
@@ -1,85 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @hidden
|
|
3
|
-
*/
|
|
4
|
-
export const zoomIn = 'pdfviewer.zoomIn';
|
|
5
|
-
/**
|
|
6
|
-
* @hidden
|
|
7
|
-
*/
|
|
8
|
-
export const zoomOut = 'pdfviewer.zoomOut';
|
|
9
|
-
/**
|
|
10
|
-
* @hidden
|
|
11
|
-
*/
|
|
12
|
-
export const enableSelection = 'pdfviewer.enableSelection';
|
|
13
|
-
/**
|
|
14
|
-
* @hidden
|
|
15
|
-
*/
|
|
16
|
-
export const enablePanning = 'pdfviewer.enablePanning';
|
|
17
|
-
/**
|
|
18
|
-
* @hidden
|
|
19
|
-
*/
|
|
20
|
-
export const search = 'pdfviewer.search';
|
|
21
|
-
/**
|
|
22
|
-
* @hidden
|
|
23
|
-
*/
|
|
24
|
-
export const open = 'pdfviewer.open';
|
|
25
|
-
/**
|
|
26
|
-
* @hidden
|
|
27
|
-
*/
|
|
28
|
-
export const download = 'pdfviewer.download';
|
|
29
|
-
/**
|
|
30
|
-
* @hidden
|
|
31
|
-
*/
|
|
32
|
-
export const print = 'pdfviewer.print';
|
|
33
|
-
/**
|
|
34
|
-
* @hidden
|
|
35
|
-
*/
|
|
36
|
-
export const close = 'pdfviewer.close';
|
|
37
|
-
/**
|
|
38
|
-
* @hidden
|
|
39
|
-
*/
|
|
40
|
-
export const matchCase = 'pdfviewer.matchCase';
|
|
41
|
-
/**
|
|
42
|
-
* @hidden
|
|
43
|
-
*/
|
|
44
|
-
export const prevMatch = 'pdfviewer.prevMatch';
|
|
45
|
-
/**
|
|
46
|
-
* @hidden
|
|
47
|
-
*/
|
|
48
|
-
export const nextMatch = 'pdfviewer.nextMatch';
|
|
49
|
-
/**
|
|
50
|
-
* @hidden
|
|
51
|
-
*/
|
|
52
|
-
export const actualWidth = 'pdfviewer.actualWidth';
|
|
53
|
-
/**
|
|
54
|
-
* @hidden
|
|
55
|
-
*/
|
|
56
|
-
export const fitToWidth = 'pdfviewer.fitToWidth';
|
|
57
|
-
/**
|
|
58
|
-
* @hidden
|
|
59
|
-
*/
|
|
60
|
-
export const fitToPage = 'pdfviewer.fitToPage';
|
|
61
|
-
/**
|
|
62
|
-
* @hidden
|
|
63
|
-
*/
|
|
64
|
-
export const popupBlocked = 'pdfviewer.popupBlocked';
|
|
65
|
-
/**
|
|
66
|
-
* @hidden
|
|
67
|
-
*/
|
|
68
|
-
export const messages = {
|
|
69
|
-
[zoomIn]: 'Zoom in',
|
|
70
|
-
[zoomOut]: 'Zoom out',
|
|
71
|
-
[enableSelection]: 'Enable selection',
|
|
72
|
-
[enablePanning]: 'Enable panning',
|
|
73
|
-
[search]: 'Search',
|
|
74
|
-
[open]: 'Open',
|
|
75
|
-
[download]: 'Download',
|
|
76
|
-
[print]: 'Print',
|
|
77
|
-
[close]: 'Close',
|
|
78
|
-
[matchCase]: 'Match case',
|
|
79
|
-
[prevMatch]: 'Previous match',
|
|
80
|
-
[nextMatch]: 'Next match',
|
|
81
|
-
[actualWidth]: 'Actual width',
|
|
82
|
-
[fitToWidth]: 'Fit to width',
|
|
83
|
-
[fitToPage]: 'Fit to page',
|
|
84
|
-
[popupBlocked]: 'Popup is blocked.'
|
|
85
|
-
};
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @hidden
|
|
3
|
-
*/
|
|
4
|
-
export const packageMetadata = {
|
|
5
|
-
name: '@progress/kendo-react-pdf-viewer',
|
|
6
|
-
productName: 'KendoReact',
|
|
7
|
-
productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
|
|
8
|
-
publishDate: 1700065590,
|
|
9
|
-
version: '',
|
|
10
|
-
licensingDocsUrl: 'https://www.telerik.com/kendo-react-ui/my-license/?utm_medium=product&utm_source=kendoreact&utm_campaign=kendo-ui-react-purchase-license-keys-warning'
|
|
11
|
-
};
|