@uncinc/uncinc-react-kitchen-sink 2.7.17 → 2.8.0
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/dist/components/NavigationScroll/index.js +3 -1
- package/dist/components/PDFReader/ControlPanel/index.d.ts +1 -0
- package/dist/components/PDFReader/ControlPanel/index.js +56 -13
- package/dist/components/PDFReader/index.d.ts +3 -19
- package/dist/components/PDFReader/index.js +5 -89
- package/dist/components/PDFReader/index.lazy.d.ts +20 -0
- package/dist/components/PDFReader/index.lazy.js +104 -0
- package/dist/config/i18next/locales/nl.json +3 -2
- package/dist/hooks/useWindowDimensions.d.ts +1 -1
- package/dist/hooks/useWindowDimensions.js +13 -1
- package/package.json +11 -3
|
@@ -15,6 +15,7 @@ import classNames from 'classnames';
|
|
|
15
15
|
import PropTypes from 'prop-types';
|
|
16
16
|
import './style.scss';
|
|
17
17
|
var NavigationScroll = function NavigationScroll(props) {
|
|
18
|
+
var _document$querySelect;
|
|
18
19
|
var node = useRef(null);
|
|
19
20
|
var _useState = useState({
|
|
20
21
|
pos: 0,
|
|
@@ -68,6 +69,7 @@ var NavigationScroll = function NavigationScroll(props) {
|
|
|
68
69
|
window.removeEventListener('scroll', handleScroll);
|
|
69
70
|
};
|
|
70
71
|
});
|
|
72
|
+
var drupalAdminToolbarOffset = ((_document$querySelect = document.querySelector('div[data-block-plugin-id="react_app"]')) === null || _document$querySelect === void 0 ? void 0 : _document$querySelect.offsetTop) || 0;
|
|
71
73
|
var reachedTop = state.reachedTop,
|
|
72
74
|
reachedBottom = state.reachedBottom,
|
|
73
75
|
pos = state.pos,
|
|
@@ -84,7 +86,7 @@ var NavigationScroll = function NavigationScroll(props) {
|
|
|
84
86
|
ref: node,
|
|
85
87
|
className: classes,
|
|
86
88
|
style: {
|
|
87
|
-
top: pos
|
|
89
|
+
top: pos + drupalAdminToolbarOffset
|
|
88
90
|
}
|
|
89
91
|
}, children);
|
|
90
92
|
};
|
|
@@ -15,6 +15,7 @@ declare interface ControlPanelProps {
|
|
|
15
15
|
printButton?: React.ReactNode;
|
|
16
16
|
zoomInButton?: React.ReactNode;
|
|
17
17
|
zoomOutButton?: React.ReactNode;
|
|
18
|
+
dualPage?: boolean;
|
|
18
19
|
}
|
|
19
20
|
declare const ControlPanel: React.FC<ControlPanelProps>;
|
|
20
21
|
export default ControlPanel;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React from 'react';
|
|
1
|
+
import React, { useEffect } from 'react';
|
|
2
2
|
import { useTranslation } from 'react-i18next';
|
|
3
3
|
import Icon from '../../Icon';
|
|
4
4
|
import './style.scss';
|
|
@@ -63,27 +63,62 @@ var ControlPanel = function ControlPanel(props) {
|
|
|
63
63
|
_props$downloadButton = props.downloadButton,
|
|
64
64
|
downloadButton = _props$downloadButton === void 0 ? defaultButtons.download : _props$downloadButton,
|
|
65
65
|
_props$printButton = props.printButton,
|
|
66
|
-
printButton = _props$printButton === void 0 ? defaultButtons.print : _props$printButton
|
|
66
|
+
printButton = _props$printButton === void 0 ? defaultButtons.print : _props$printButton,
|
|
67
|
+
dualPage = props.dualPage;
|
|
67
68
|
var isFirstPage = pageNumber === 1;
|
|
68
69
|
var isLastPage = pageNumber === numPages;
|
|
69
70
|
var firstPageClass = isFirstPage ? 'disabled' : 'clickable';
|
|
70
71
|
var lastPageClass = isLastPage ? 'disabled' : 'clickable';
|
|
72
|
+
var pageOffset = dualPage ? 2 : 1;
|
|
71
73
|
var goToFirstPage = function goToFirstPage() {
|
|
72
74
|
if (!isFirstPage) setPageNumber(1);
|
|
73
75
|
};
|
|
74
76
|
var goToPreviousPage = function goToPreviousPage() {
|
|
75
|
-
if (!isFirstPage) setPageNumber(pageNumber -
|
|
77
|
+
if (!isFirstPage) setPageNumber(pageNumber - pageOffset);
|
|
76
78
|
};
|
|
77
79
|
var goToNextPage = function goToNextPage() {
|
|
78
|
-
if (!isLastPage) setPageNumber(pageNumber +
|
|
80
|
+
if (!isLastPage) setPageNumber(pageNumber + pageOffset);
|
|
79
81
|
};
|
|
80
82
|
var goToLastPage = function goToLastPage() {
|
|
81
83
|
if (!isLastPage) setPageNumber(numPages);
|
|
82
84
|
};
|
|
83
85
|
var onPageChange = function onPageChange(e) {
|
|
84
86
|
var value = e.target.value;
|
|
87
|
+
if (Number(value) <= 0 || Number(value) > numPages) return;
|
|
85
88
|
setPageNumber(Number(value));
|
|
86
89
|
};
|
|
90
|
+
useEffect(function () {
|
|
91
|
+
var handleKeyDown = function handleKeyDown(event) {
|
|
92
|
+
switch (event.key) {
|
|
93
|
+
case 'ArrowRight':
|
|
94
|
+
case 'n':
|
|
95
|
+
if (pageNumber < numPages) setPageNumber(pageNumber + pageOffset);
|
|
96
|
+
break;
|
|
97
|
+
case 'ArrowLeft':
|
|
98
|
+
case 'p':
|
|
99
|
+
if (pageNumber > 1) setPageNumber(pageNumber - pageOffset);
|
|
100
|
+
break;
|
|
101
|
+
case '+':
|
|
102
|
+
case '=':
|
|
103
|
+
setScale(scale + 0.1);
|
|
104
|
+
break;
|
|
105
|
+
case '-':
|
|
106
|
+
case '_':
|
|
107
|
+
if (scale > 0.1) setScale(scale - 0.1);
|
|
108
|
+
break;
|
|
109
|
+
case '0':
|
|
110
|
+
case ')':
|
|
111
|
+
setScale(1);
|
|
112
|
+
break;
|
|
113
|
+
default:
|
|
114
|
+
break;
|
|
115
|
+
}
|
|
116
|
+
};
|
|
117
|
+
window.addEventListener('keydown', handleKeyDown);
|
|
118
|
+
return function () {
|
|
119
|
+
window.removeEventListener('keydown', handleKeyDown);
|
|
120
|
+
};
|
|
121
|
+
}, [pageNumber, numPages, scale, setScale, setPageNumber, pageOffset]);
|
|
87
122
|
var isMinZoom = scale < MIN_ZOOM;
|
|
88
123
|
var isMaxZoom = scale >= MAX_ZOOM;
|
|
89
124
|
var zoomOutClass = isMinZoom ? 'disabled' : 'clickable';
|
|
@@ -111,11 +146,13 @@ var ControlPanel = function ControlPanel(props) {
|
|
|
111
146
|
}, /*#__PURE__*/React.createElement("button", {
|
|
112
147
|
className: firstPageClass,
|
|
113
148
|
onClick: goToFirstPage,
|
|
114
|
-
type: "button"
|
|
149
|
+
type: "button",
|
|
150
|
+
id: "PDFReader__firstPageButton"
|
|
115
151
|
}, goToFirstPageButton), /*#__PURE__*/React.createElement("button", {
|
|
116
152
|
className: firstPageClass,
|
|
117
153
|
onClick: goToPreviousPage,
|
|
118
|
-
type: "button"
|
|
154
|
+
type: "button",
|
|
155
|
+
id: "PDFReader__previousPageButton"
|
|
119
156
|
}, goToPreviousPageButton), /*#__PURE__*/React.createElement("span", {
|
|
120
157
|
className: "ControlPanel__pageControl__pageIndicator"
|
|
121
158
|
}, /*#__PURE__*/React.createElement("span", {
|
|
@@ -124,6 +161,7 @@ var ControlPanel = function ControlPanel(props) {
|
|
|
124
161
|
name: "pageNumber",
|
|
125
162
|
type: "number",
|
|
126
163
|
min: 1,
|
|
164
|
+
step: dualPage ? 2 : 1,
|
|
127
165
|
max: numPages || 1,
|
|
128
166
|
value: pageNumber,
|
|
129
167
|
onChange: onPageChange
|
|
@@ -132,35 +170,40 @@ var ControlPanel = function ControlPanel(props) {
|
|
|
132
170
|
}, t('components.pdfreader.of'), " ", numPages)), /*#__PURE__*/React.createElement("button", {
|
|
133
171
|
className: lastPageClass,
|
|
134
172
|
onClick: goToNextPage,
|
|
135
|
-
type: "button"
|
|
173
|
+
type: "button",
|
|
174
|
+
id: "PDFReader__nextPageButton"
|
|
136
175
|
}, goToNextPageButton), /*#__PURE__*/React.createElement("button", {
|
|
137
176
|
className: lastPageClass,
|
|
138
177
|
onClick: goToLastPage,
|
|
139
|
-
type: "button"
|
|
178
|
+
type: "button",
|
|
179
|
+
id: "PDFReader__lastPageButton"
|
|
140
180
|
}, goToLastPageButton)), /*#__PURE__*/React.createElement("div", {
|
|
141
181
|
className: "ControlPanel__pageControl"
|
|
142
182
|
}, /*#__PURE__*/React.createElement("button", {
|
|
143
183
|
className: zoomOutClass,
|
|
144
184
|
onClick: zoomOut,
|
|
145
|
-
type: "button"
|
|
185
|
+
type: "button",
|
|
186
|
+
id: "PDFReader__zoomOutButton"
|
|
146
187
|
}, zoomOutButton), /*#__PURE__*/React.createElement("span", {
|
|
147
188
|
className: "ControlPanel__pageControl__zoomLevel"
|
|
148
189
|
}, (scale * 100).toFixed(), "%"), /*#__PURE__*/React.createElement("button", {
|
|
149
190
|
className: zoomInClass,
|
|
150
191
|
onClick: zoomIn,
|
|
151
|
-
type: "button"
|
|
192
|
+
type: "button",
|
|
193
|
+
id: "PDFReader__zoomInButton"
|
|
152
194
|
}, zoomInButton)), /*#__PURE__*/React.createElement("div", {
|
|
153
195
|
className: "ControlPanel__pageControl"
|
|
154
196
|
}, /*#__PURE__*/React.createElement("a", {
|
|
155
197
|
href: file,
|
|
156
198
|
download: "download"
|
|
157
199
|
}, /*#__PURE__*/React.createElement("button", {
|
|
158
|
-
|
|
159
|
-
|
|
200
|
+
type: "button",
|
|
201
|
+
id: "PDFReader__downloadButton"
|
|
160
202
|
}, downloadButton)), /*#__PURE__*/React.createElement("button", {
|
|
161
203
|
className: "clickable",
|
|
162
204
|
onClick: print,
|
|
163
|
-
type: "button"
|
|
205
|
+
type: "button",
|
|
206
|
+
id: "PDFReader__printButton"
|
|
164
207
|
}, printButton)));
|
|
165
208
|
};
|
|
166
209
|
export default ControlPanel;
|
|
@@ -1,19 +1,3 @@
|
|
|
1
|
-
import React
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
export declare interface PDFReaderProps {
|
|
5
|
-
url: string;
|
|
6
|
-
goToFirstPageButton?: React.ReactNode;
|
|
7
|
-
goToNextPageButton?: React.ReactNode;
|
|
8
|
-
goToPreviousPageButton?: React.ReactNode;
|
|
9
|
-
goToLastPageButton?: React.ReactNode;
|
|
10
|
-
zoomInButton?: React.ReactNode;
|
|
11
|
-
zoomOutButton?: React.ReactNode;
|
|
12
|
-
downloadButton?: React.ReactNode;
|
|
13
|
-
printButton?: React.ReactNode;
|
|
14
|
-
loader?: React.ReactElement<any, string | JSXElementConstructor<any>>;
|
|
15
|
-
width?: number;
|
|
16
|
-
height?: number;
|
|
17
|
-
}
|
|
18
|
-
declare const PDFReader: React.FC<PDFReaderProps>;
|
|
19
|
-
export default PDFReader;
|
|
1
|
+
import React from 'react';
|
|
2
|
+
declare const PDFReaderLazy: React.LazyExoticComponent<React.FC<import("./index.lazy").PDFReaderProps>>;
|
|
3
|
+
export default PDFReaderLazy;
|
|
@@ -1,89 +1,5 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
7
|
-
import React, { useState } from 'react';
|
|
8
|
-
import { Document, Page, pdfjs } from 'react-pdf';
|
|
9
|
-
// @ts-ignore
|
|
10
|
-
import pdfjsWorker from 'pdfjs-dist/build/pdf.worker.entry';
|
|
11
|
-
import ControlPanel from './ControlPanel';
|
|
12
|
-
import 'react-pdf/dist/esm/Page/TextLayer.css';
|
|
13
|
-
import 'react-pdf/dist/esm/Page/AnnotationLayer.css';
|
|
14
|
-
pdfjs.GlobalWorkerOptions.workerSrc = pdfjsWorker;
|
|
15
|
-
var PDFReader = function PDFReader(_ref) {
|
|
16
|
-
var url = _ref.url,
|
|
17
|
-
goToFirstPageButton = _ref.goToFirstPageButton,
|
|
18
|
-
goToNextPageButton = _ref.goToNextPageButton,
|
|
19
|
-
goToPreviousPageButton = _ref.goToPreviousPageButton,
|
|
20
|
-
goToLastPageButton = _ref.goToLastPageButton,
|
|
21
|
-
zoomInButton = _ref.zoomInButton,
|
|
22
|
-
zoomOutButton = _ref.zoomOutButton,
|
|
23
|
-
downloadButton = _ref.downloadButton,
|
|
24
|
-
printButton = _ref.printButton,
|
|
25
|
-
loader = _ref.loader,
|
|
26
|
-
width = _ref.width,
|
|
27
|
-
height = _ref.height;
|
|
28
|
-
var _useState = useState(1.0),
|
|
29
|
-
_useState2 = _slicedToArray(_useState, 2),
|
|
30
|
-
scale = _useState2[0],
|
|
31
|
-
setScale = _useState2[1];
|
|
32
|
-
var _useState3 = useState(0),
|
|
33
|
-
_useState4 = _slicedToArray(_useState3, 2),
|
|
34
|
-
numPages = _useState4[0],
|
|
35
|
-
setNumPages = _useState4[1];
|
|
36
|
-
var _useState5 = useState(1),
|
|
37
|
-
_useState6 = _slicedToArray(_useState5, 2),
|
|
38
|
-
pageNumber = _useState6[0],
|
|
39
|
-
setPageNumber = _useState6[1];
|
|
40
|
-
var _useState7 = useState(1),
|
|
41
|
-
_useState8 = _slicedToArray(_useState7, 2),
|
|
42
|
-
renderedPageNumber = _useState8[0],
|
|
43
|
-
setRenderedPageNumber = _useState8[1];
|
|
44
|
-
var isLoading = renderedPageNumber !== pageNumber;
|
|
45
|
-
function onDocumentLoadSuccess(_ref2) {
|
|
46
|
-
var numPagesTemp = _ref2.numPages;
|
|
47
|
-
setNumPages(numPagesTemp);
|
|
48
|
-
}
|
|
49
|
-
return /*#__PURE__*/React.createElement("div", {
|
|
50
|
-
className: "PDFReader"
|
|
51
|
-
}, /*#__PURE__*/React.createElement(ControlPanel, {
|
|
52
|
-
scale: scale,
|
|
53
|
-
setScale: setScale,
|
|
54
|
-
numPages: numPages,
|
|
55
|
-
pageNumber: pageNumber,
|
|
56
|
-
setPageNumber: setPageNumber,
|
|
57
|
-
file: url,
|
|
58
|
-
goToFirstPageButton: goToFirstPageButton,
|
|
59
|
-
goToPreviousPageButton: goToPreviousPageButton,
|
|
60
|
-
goToNextPageButton: goToNextPageButton,
|
|
61
|
-
goToLastPageButton: goToLastPageButton,
|
|
62
|
-
zoomInButton: zoomInButton,
|
|
63
|
-
zoomOutButton: zoomOutButton,
|
|
64
|
-
downloadButton: downloadButton,
|
|
65
|
-
printButton: printButton
|
|
66
|
-
}), /*#__PURE__*/React.createElement(Document, {
|
|
67
|
-
file: url,
|
|
68
|
-
onLoadSuccess: onDocumentLoadSuccess,
|
|
69
|
-
onLoadError: console.error,
|
|
70
|
-
loading: loader
|
|
71
|
-
}, isLoading && renderedPageNumber ? /*#__PURE__*/React.createElement(Page, {
|
|
72
|
-
key: renderedPageNumber,
|
|
73
|
-
pageNumber: renderedPageNumber,
|
|
74
|
-
scale: scale,
|
|
75
|
-
width: width,
|
|
76
|
-
height: height
|
|
77
|
-
}) : null, /*#__PURE__*/React.createElement(Page, {
|
|
78
|
-
className: "".concat(isLoading ? 'loadingPage' : ''),
|
|
79
|
-
key: pageNumber,
|
|
80
|
-
pageNumber: pageNumber,
|
|
81
|
-
scale: scale,
|
|
82
|
-
width: width,
|
|
83
|
-
height: height,
|
|
84
|
-
onRenderSuccess: function onRenderSuccess() {
|
|
85
|
-
return setRenderedPageNumber(pageNumber);
|
|
86
|
-
}
|
|
87
|
-
})));
|
|
88
|
-
};
|
|
89
|
-
export default PDFReader;
|
|
1
|
+
import React from 'react';
|
|
2
|
+
var PDFReaderLazy = /*#__PURE__*/React.lazy(function () {
|
|
3
|
+
return import('./index.lazy');
|
|
4
|
+
});
|
|
5
|
+
export default PDFReaderLazy;
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import React, { JSXElementConstructor } from 'react';
|
|
2
|
+
import 'react-pdf/dist/esm/Page/TextLayer.css';
|
|
3
|
+
import 'react-pdf/dist/esm/Page/AnnotationLayer.css';
|
|
4
|
+
export declare interface PDFReaderProps {
|
|
5
|
+
url: string;
|
|
6
|
+
goToFirstPageButton?: React.ReactNode;
|
|
7
|
+
goToNextPageButton?: React.ReactNode;
|
|
8
|
+
goToPreviousPageButton?: React.ReactNode;
|
|
9
|
+
goToLastPageButton?: React.ReactNode;
|
|
10
|
+
zoomInButton?: React.ReactNode;
|
|
11
|
+
zoomOutButton?: React.ReactNode;
|
|
12
|
+
downloadButton?: React.ReactNode;
|
|
13
|
+
printButton?: React.ReactNode;
|
|
14
|
+
loader?: React.ReactElement<any, string | JSXElementConstructor<any>>;
|
|
15
|
+
width?: number;
|
|
16
|
+
height?: number;
|
|
17
|
+
dualPageWidthThreshold?: number;
|
|
18
|
+
}
|
|
19
|
+
declare const PDFReader: React.FC<PDFReaderProps>;
|
|
20
|
+
export default PDFReader;
|
|
@@ -0,0 +1,104 @@
|
|
|
1
|
+
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
2
|
+
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
3
|
+
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
4
|
+
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
|
|
5
|
+
function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
|
|
6
|
+
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
7
|
+
import React, { Suspense, useState } from 'react';
|
|
8
|
+
import { Document, Page, pdfjs } from 'react-pdf';
|
|
9
|
+
// @ts-ignore
|
|
10
|
+
import pdfjsWorker from 'pdfjs-dist/build/pdf.worker.entry';
|
|
11
|
+
import ControlPanel from './ControlPanel';
|
|
12
|
+
import 'react-pdf/dist/esm/Page/TextLayer.css';
|
|
13
|
+
import 'react-pdf/dist/esm/Page/AnnotationLayer.css';
|
|
14
|
+
import useWindowDimensions from '../../hooks/useWindowDimensions';
|
|
15
|
+
|
|
16
|
+
// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
|
|
17
|
+
pdfjs.GlobalWorkerOptions.workerSrc = pdfjsWorker;
|
|
18
|
+
var PDFReader = function PDFReader(_ref) {
|
|
19
|
+
var url = _ref.url,
|
|
20
|
+
goToFirstPageButton = _ref.goToFirstPageButton,
|
|
21
|
+
goToNextPageButton = _ref.goToNextPageButton,
|
|
22
|
+
goToPreviousPageButton = _ref.goToPreviousPageButton,
|
|
23
|
+
goToLastPageButton = _ref.goToLastPageButton,
|
|
24
|
+
zoomInButton = _ref.zoomInButton,
|
|
25
|
+
zoomOutButton = _ref.zoomOutButton,
|
|
26
|
+
downloadButton = _ref.downloadButton,
|
|
27
|
+
printButton = _ref.printButton,
|
|
28
|
+
loader = _ref.loader,
|
|
29
|
+
width = _ref.width,
|
|
30
|
+
height = _ref.height,
|
|
31
|
+
dualPageWidthThreshold = _ref.dualPageWidthThreshold;
|
|
32
|
+
var _useState = useState(1.0),
|
|
33
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
34
|
+
scale = _useState2[0],
|
|
35
|
+
setScale = _useState2[1];
|
|
36
|
+
var _useState3 = useState(0),
|
|
37
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
38
|
+
numPages = _useState4[0],
|
|
39
|
+
setNumPages = _useState4[1];
|
|
40
|
+
var _useState5 = useState(1),
|
|
41
|
+
_useState6 = _slicedToArray(_useState5, 2),
|
|
42
|
+
pageNumber = _useState6[0],
|
|
43
|
+
setPageNumber = _useState6[1];
|
|
44
|
+
var _useState7 = useState(1),
|
|
45
|
+
_useState8 = _slicedToArray(_useState7, 2),
|
|
46
|
+
renderedPageNumber = _useState8[0],
|
|
47
|
+
setRenderedPageNumber = _useState8[1];
|
|
48
|
+
var _useWindowDimensions = useWindowDimensions(),
|
|
49
|
+
windowWidth = _useWindowDimensions.width;
|
|
50
|
+
var isLoading = renderedPageNumber !== pageNumber;
|
|
51
|
+
var onDocumentLoadSuccess = function onDocumentLoadSuccess(_ref2) {
|
|
52
|
+
var numPagesTemp = _ref2.numPages;
|
|
53
|
+
setNumPages(numPagesTemp);
|
|
54
|
+
};
|
|
55
|
+
var showDualPage = dualPageWidthThreshold ? windowWidth > dualPageWidthThreshold : false;
|
|
56
|
+
var renderPage = function renderPage(pageNumberToRender, isPageLoading, renderedPageNum) {
|
|
57
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null, isPageLoading && renderedPageNum ? /*#__PURE__*/React.createElement(Page, {
|
|
58
|
+
key: renderedPageNum,
|
|
59
|
+
pageNumber: renderedPageNum,
|
|
60
|
+
scale: scale,
|
|
61
|
+
width: width,
|
|
62
|
+
height: height
|
|
63
|
+
}) : null, /*#__PURE__*/React.createElement(Page, {
|
|
64
|
+
className: "".concat(isPageLoading ? 'loadingPage' : ''),
|
|
65
|
+
key: pageNumberToRender,
|
|
66
|
+
pageNumber: pageNumberToRender,
|
|
67
|
+
scale: scale,
|
|
68
|
+
width: width,
|
|
69
|
+
height: height,
|
|
70
|
+
onRenderSuccess: function onRenderSuccess() {
|
|
71
|
+
return setRenderedPageNumber(pageNumberToRender);
|
|
72
|
+
}
|
|
73
|
+
}));
|
|
74
|
+
};
|
|
75
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
76
|
+
className: "PDFReader"
|
|
77
|
+
}, /*#__PURE__*/React.createElement(Suspense, {
|
|
78
|
+
fallback: loader
|
|
79
|
+
}, /*#__PURE__*/React.createElement(ControlPanel, {
|
|
80
|
+
scale: scale,
|
|
81
|
+
setScale: setScale,
|
|
82
|
+
numPages: numPages,
|
|
83
|
+
pageNumber: pageNumber,
|
|
84
|
+
setPageNumber: setPageNumber,
|
|
85
|
+
file: url,
|
|
86
|
+
goToFirstPageButton: goToFirstPageButton,
|
|
87
|
+
goToPreviousPageButton: goToPreviousPageButton,
|
|
88
|
+
goToNextPageButton: goToNextPageButton,
|
|
89
|
+
goToLastPageButton: goToLastPageButton,
|
|
90
|
+
zoomInButton: zoomInButton,
|
|
91
|
+
zoomOutButton: zoomOutButton,
|
|
92
|
+
downloadButton: downloadButton,
|
|
93
|
+
printButton: printButton,
|
|
94
|
+
dualPage: showDualPage
|
|
95
|
+
}), /*#__PURE__*/React.createElement(Document, {
|
|
96
|
+
file: url,
|
|
97
|
+
onLoadSuccess: onDocumentLoadSuccess,
|
|
98
|
+
onLoadError: console.error,
|
|
99
|
+
loading: loader
|
|
100
|
+
}, showDualPage ? /*#__PURE__*/React.createElement("div", {
|
|
101
|
+
className: "PDFReader__dualPage"
|
|
102
|
+
}, renderPage(pageNumber, isLoading, renderedPageNumber), pageNumber < numPages && renderPage(pageNumber + 1, isLoading, renderedPageNumber + 1)) : renderPage(pageNumber, isLoading, renderedPageNumber))));
|
|
103
|
+
};
|
|
104
|
+
export default PDFReader;
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
"open": "Openen",
|
|
4
4
|
"close": "Sluiten"
|
|
5
5
|
},
|
|
6
|
-
"dateselect"
|
|
6
|
+
"dateselect": {
|
|
7
7
|
"months": {
|
|
8
8
|
"jan": "Januari",
|
|
9
9
|
"feb": "Februari",
|
|
@@ -42,7 +42,8 @@
|
|
|
42
42
|
},
|
|
43
43
|
"components": {
|
|
44
44
|
"pdfreader": {
|
|
45
|
+
"page": "Pagina",
|
|
45
46
|
"of": "van"
|
|
46
47
|
}
|
|
47
48
|
}
|
|
48
|
-
}
|
|
49
|
+
}
|
|
@@ -15,14 +15,26 @@ function getWindowDimensions() {
|
|
|
15
15
|
};
|
|
16
16
|
}
|
|
17
17
|
export default function useWindowDimensions() {
|
|
18
|
+
var debounce = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
|
|
18
19
|
var _useState = useState(getWindowDimensions()),
|
|
19
20
|
_useState2 = _slicedToArray(_useState, 2),
|
|
20
21
|
windowDimensions = _useState2[0],
|
|
21
22
|
setWindowDimensions = _useState2[1];
|
|
22
23
|
useEffect(function () {
|
|
23
|
-
|
|
24
|
+
var resizeDebouncer = null;
|
|
25
|
+
function setResizeDimensions() {
|
|
24
26
|
setWindowDimensions(getWindowDimensions());
|
|
25
27
|
}
|
|
28
|
+
function handleResize() {
|
|
29
|
+
if (debounce && resizeDebouncer) {
|
|
30
|
+
clearTimeout(resizeDebouncer);
|
|
31
|
+
}
|
|
32
|
+
if (debounce) {
|
|
33
|
+
resizeDebouncer = setTimeout(setResizeDimensions, 200);
|
|
34
|
+
return;
|
|
35
|
+
}
|
|
36
|
+
setResizeDimensions();
|
|
37
|
+
}
|
|
26
38
|
window.addEventListener('resize', handleResize);
|
|
27
39
|
return function () {
|
|
28
40
|
return window.removeEventListener('resize', handleResize);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@uncinc/uncinc-react-kitchen-sink",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.8.0",
|
|
4
4
|
"description": "Default React components that are easily extended.",
|
|
5
5
|
"author": "uncinc",
|
|
6
6
|
"license": "MIT",
|
|
@@ -135,7 +135,7 @@
|
|
|
135
135
|
"@testing-library/jest-dom": "^5.11.2",
|
|
136
136
|
"@testing-library/react": "^14.0.0",
|
|
137
137
|
"@testing-library/user-event": "^7.1.2",
|
|
138
|
-
"@uncinc/eslint-config": "^1.
|
|
138
|
+
"@uncinc/eslint-config": "^1.1.2",
|
|
139
139
|
"@uncinc/stylelint-config": "^1.0.2",
|
|
140
140
|
"babel-jest": "^29.4.3",
|
|
141
141
|
"babel-plugin-named-exports-order": "^0.0.2",
|
|
@@ -144,6 +144,7 @@
|
|
|
144
144
|
"husky": "^8.0.3",
|
|
145
145
|
"jest-environment-jsdom": "^29.5.0",
|
|
146
146
|
"jest-junit": "^16.0.0",
|
|
147
|
+
"nodemon": "^3.0.3",
|
|
147
148
|
"prop-types": "^15.8.1",
|
|
148
149
|
"react-scripts": "^5.0.1",
|
|
149
150
|
"react-test-renderer": "^18.2.0",
|
|
@@ -152,7 +153,8 @@
|
|
|
152
153
|
"storybook": "^7.0.18",
|
|
153
154
|
"storybook-addon-export-stories": "^1.0.0",
|
|
154
155
|
"storybook-react-i18next": "^1.1.3",
|
|
155
|
-
"webpack": "^5.85.1"
|
|
156
|
+
"webpack": "^5.85.1",
|
|
157
|
+
"yarn-audit-fix": "^10.0.7"
|
|
156
158
|
},
|
|
157
159
|
"peerDependencies": {
|
|
158
160
|
"@material-design-icons/svg": "^0.14.11"
|
|
@@ -171,5 +173,11 @@
|
|
|
171
173
|
"last 1 firefox version",
|
|
172
174
|
"last 1 safari version"
|
|
173
175
|
]
|
|
176
|
+
},
|
|
177
|
+
"resolutions": {
|
|
178
|
+
"semver": ">=5.7.2",
|
|
179
|
+
"@babel/traverse": ">=7.23.2",
|
|
180
|
+
"postcss": ">=8.4.31",
|
|
181
|
+
"nth-check": ">=2.0.1"
|
|
174
182
|
}
|
|
175
183
|
}
|