|
@ -65,7 +65,11 @@ function DocxViewer({ |
|
|
useEffect(() => { |
|
|
useEffect(() => { |
|
|
if (previewContainerRef && previewContainerRef.current) { |
|
|
if (previewContainerRef && previewContainerRef.current) { |
|
|
setLoadingPreview(true); |
|
|
setLoadingPreview(true); |
|
|
jsPreviewDocx.init(previewContainerRef.current) |
|
|
|
|
|
|
|
|
jsPreviewDocx.init(previewContainerRef.current, { |
|
|
|
|
|
breakPages: true, |
|
|
|
|
|
inWrapper: true, |
|
|
|
|
|
ignoreHeight: true |
|
|
|
|
|
}) |
|
|
.preview(url) |
|
|
.preview(url) |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
@ -79,6 +83,7 @@ function DocxViewer({ |
|
|
return ( |
|
|
return ( |
|
|
<Box ref={previewContainerRef} sx={{ |
|
|
<Box ref={previewContainerRef} sx={{ |
|
|
width: '100%', |
|
|
width: '100%', |
|
|
|
|
|
height: '100%' |
|
|
}} /> |
|
|
}} /> |
|
|
) |
|
|
) |
|
|
} |
|
|
} |
|
@ -116,8 +121,19 @@ function ImageViewer({ |
|
|
url |
|
|
url |
|
|
}: ViewerProps) { |
|
|
}: ViewerProps) { |
|
|
return ( |
|
|
return ( |
|
|
<Box> |
|
|
|
|
|
<img alt='image-preview' src={url} /> |
|
|
|
|
|
|
|
|
<Box sx={{ |
|
|
|
|
|
display: 'flex', |
|
|
|
|
|
alignItems: 'center', |
|
|
|
|
|
justifyContent: 'center', |
|
|
|
|
|
objectFit: 'contain', |
|
|
|
|
|
width: '100%', |
|
|
|
|
|
height: '100%' |
|
|
|
|
|
}}> |
|
|
|
|
|
<img alt='image-preview' src={url} style={{ |
|
|
|
|
|
display: 'flex', |
|
|
|
|
|
maxWidth: '100%', |
|
|
|
|
|
maxHeight: '100%' |
|
|
|
|
|
}} /> |
|
|
</Box> |
|
|
</Box> |
|
|
) |
|
|
) |
|
|
} |
|
|
} |
|
@ -235,23 +251,25 @@ export default function FileViewer({ |
|
|
fileType?.startsWith('image/') ? |
|
|
fileType?.startsWith('image/') ? |
|
|
<ImageViewer url={window.URL.createObjectURL(file)} /> |
|
|
<ImageViewer url={window.URL.createObjectURL(file)} /> |
|
|
: |
|
|
: |
|
|
<Box sx={{ display: 'flex', gap: '16px', flexDirection: 'column', p: '16px' }}> |
|
|
|
|
|
<Box sx={{ display: 'flex', gap: '16px', alignItems: 'center' }}> |
|
|
|
|
|
<Warning /> |
|
|
|
|
|
<Typography> |
|
|
|
|
|
Предпросмотр данного файла невозможен. |
|
|
|
|
|
</Typography> |
|
|
|
|
|
|
|
|
fileType && file ? |
|
|
|
|
|
<Box sx={{ display: 'flex', gap: '16px', flexDirection: 'column', p: '16px' }}> |
|
|
|
|
|
<Box sx={{ display: 'flex', gap: '16px', alignItems: 'center' }}> |
|
|
|
|
|
<Warning /> |
|
|
|
|
|
<Typography> |
|
|
|
|
|
Предпросмотр данного файла невозможен. |
|
|
|
|
|
</Typography> |
|
|
|
|
|
</Box> |
|
|
|
|
|
|
|
|
|
|
|
<Box> |
|
|
|
|
|
<Button variant='contained' onClick={() => { |
|
|
|
|
|
handleSave() |
|
|
|
|
|
}}> |
|
|
|
|
|
Сохранить |
|
|
|
|
|
</Button> |
|
|
|
|
|
</Box> |
|
|
</Box> |
|
|
</Box> |
|
|
|
|
|
|
|
|
<Box> |
|
|
|
|
|
<Button variant='contained' onClick={() => { |
|
|
|
|
|
handleSave() |
|
|
|
|
|
}}> |
|
|
|
|
|
Сохранить |
|
|
|
|
|
</Button> |
|
|
|
|
|
</Box> |
|
|
|
|
|
|
|
|
|
|
|
</Box> |
|
|
|
|
|
|
|
|
: |
|
|
|
|
|
null |
|
|
} |
|
|
} |
|
|
</Box> |
|
|
</Box> |
|
|
</Dialog> |
|
|
</Dialog> |
|
|