@topconsultnpm/sdkui-react 6.20.0-dev1.11 → 6.20.0-dev1.13
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.
|
@@ -15,6 +15,9 @@ import { TMSaveFormButtonPrevious, TMSaveFormButtonNext } from '../../forms/TMSa
|
|
|
15
15
|
import { StyledAnimatedComponentOpacity } from '../../base/Styled';
|
|
16
16
|
import TMPanel from '../../base/TMPanel';
|
|
17
17
|
import TMTooltip from '../../base/TMTooltip';
|
|
18
|
+
import { Document, Page, pdfjs } from 'react-pdf';
|
|
19
|
+
// Configure PDF.js worker
|
|
20
|
+
pdfjs.GlobalWorkerOptions.workerSrc = `https://unpkg.com/pdfjs-dist@${pdfjs.version}/build/pdf.worker.min.mjs`;
|
|
18
21
|
const ErrorContent = ({ error, isAbortError, onRetry }) => {
|
|
19
22
|
if (isAbortError) {
|
|
20
23
|
return (_jsx(StyledAnimatedComponentOpacity, { style: { width: '100%', height: '100%' }, children: _jsxs(StyledPanelStatusContainer, { children: [_jsx(IconCloseOutline, { fontSize: 92, color: TMColors.error }), _jsxs(StyledPreviewNotAvailable, { children: [_jsx("div", { children: error }), _jsx("div", { children: SDKUI_Localizator.PreviewNotAvailable })] }), _jsx(TMButton, { caption: SDKUI_Localizator.TryAgain, onClick: onRetry, showTooltip: false })] }) }));
|
|
@@ -137,6 +140,7 @@ export const TMFileViewer = ({ fileBlob, isResizingActive }) => {
|
|
|
137
140
|
const [fileType, setFileType] = useState(undefined);
|
|
138
141
|
const [formattedXml, setFormattedXml] = useState(undefined);
|
|
139
142
|
const [isMobile, setIsMobile] = useState(false);
|
|
143
|
+
const [numPages, setNumPages] = useState(0);
|
|
140
144
|
useEffect(() => {
|
|
141
145
|
const checkIsMobile = () => {
|
|
142
146
|
const userAgent = navigator.userAgent || navigator.vendor || window.opera;
|
|
@@ -290,7 +294,21 @@ export const TMFileViewer = ({ fileBlob, isResizingActive }) => {
|
|
|
290
294
|
// );
|
|
291
295
|
// }
|
|
292
296
|
if (fileType === 'application/pdf' && isMobile) {
|
|
293
|
-
return (_jsx(
|
|
297
|
+
return (_jsx(PDFViewerContainer, { children: _jsx(Document, { file: blobUrl, onLoadSuccess: ({ numPages }) => setNumPages(numPages), loading: _jsxs("div", { style: {
|
|
298
|
+
display: 'flex',
|
|
299
|
+
justifyContent: 'center',
|
|
300
|
+
alignItems: 'center',
|
|
301
|
+
height: '100%',
|
|
302
|
+
flexDirection: 'column',
|
|
303
|
+
gap: '10px'
|
|
304
|
+
}, children: [_jsx(IconPreview, { fontSize: 64 }), _jsxs("div", { children: [SDKUI_Localizator.Loading, "..."] })] }), error: _jsxs("div", { style: {
|
|
305
|
+
display: 'flex',
|
|
306
|
+
justifyContent: 'center',
|
|
307
|
+
alignItems: 'center',
|
|
308
|
+
height: '100%',
|
|
309
|
+
flexDirection: 'column',
|
|
310
|
+
gap: '10px'
|
|
311
|
+
}, children: [_jsx(IconCloseOutline, { fontSize: 64, color: TMColors.error }), _jsx("div", { children: "Errore nel caricamento del PDF" })] }), children: Array.from(new Array(numPages), (el, index) => (_jsx(Page, { pageNumber: index + 1, renderTextLayer: false, renderAnnotationLayer: false, width: window.innerWidth }, `page_${index + 1}`))) }) }));
|
|
294
312
|
}
|
|
295
313
|
return (_jsx("iframe", { srcDoc: formattedXml ? `<html><body>${formattedXml}</body></html>` : undefined, src: !formattedXml
|
|
296
314
|
? (fileType === 'application/pdf' ? `${blobUrl}#view=FitH&scrollbar=1` : blobUrl)
|
|
@@ -513,3 +531,28 @@ const StyledImage = styled.img.attrs(props => ({
|
|
|
513
531
|
pointer-events: none;
|
|
514
532
|
position: absolute;
|
|
515
533
|
`;
|
|
534
|
+
const PDFViewerContainer = styled.div `
|
|
535
|
+
width: 100%;
|
|
536
|
+
height: 100%;
|
|
537
|
+
overflow-y: auto;
|
|
538
|
+
overflow-x: hidden;
|
|
539
|
+
background-color: #f5f5f5;
|
|
540
|
+
|
|
541
|
+
.react-pdf__Document {
|
|
542
|
+
display: flex;
|
|
543
|
+
flex-direction: column;
|
|
544
|
+
align-items: center;
|
|
545
|
+
gap: 10px;
|
|
546
|
+
padding: 10px 0;
|
|
547
|
+
}
|
|
548
|
+
|
|
549
|
+
.react-pdf__Page {
|
|
550
|
+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
551
|
+
margin: 0 auto;
|
|
552
|
+
}
|
|
553
|
+
|
|
554
|
+
.react-pdf__Page__canvas {
|
|
555
|
+
max-width: 100%;
|
|
556
|
+
height: auto !important;
|
|
557
|
+
}
|
|
558
|
+
`;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@topconsultnpm/sdkui-react",
|
|
3
|
-
"version": "6.20.0-dev1.
|
|
3
|
+
"version": "6.20.0-dev1.13",
|
|
4
4
|
"description": "",
|
|
5
5
|
"scripts": {
|
|
6
6
|
"test": "echo \"Error: no test specified\" && exit 1",
|
|
@@ -45,6 +45,8 @@
|
|
|
45
45
|
"devextreme-react": "25.1.7",
|
|
46
46
|
"exceljs": "^4.4.0",
|
|
47
47
|
"htmlparser2": "^10.0.0",
|
|
48
|
+
"pdfjs-dist": "^5.4.530",
|
|
49
|
+
"react-pdf": "^10.3.0",
|
|
48
50
|
"react-router-dom": "^6.15.0",
|
|
49
51
|
"styled-components": "^6.1.1"
|
|
50
52
|
},
|