|
@@ -1,8 +1,9 @@
|
|
import FileViewer from 'react-file-viewer';
|
|
import FileViewer from 'react-file-viewer';
|
|
import { Modal, Spin } from 'antd';
|
|
import { Modal, Spin } from 'antd';
|
|
-import { memo, useMemo } from 'react';
|
|
|
|
|
|
+import { memo, useEffect, useMemo, useState } from 'react';
|
|
|
|
|
|
const FileViewerModal = ({ data, visible, onCancel, downloadFile }) => {
|
|
const FileViewerModal = ({ data, visible, onCancel, downloadFile }) => {
|
|
|
|
+ const [active, setActive] = useState(false);
|
|
const type = useMemo(() => {
|
|
const type = useMemo(() => {
|
|
if (!data || !data.url) return '';
|
|
if (!data || !data.url) return '';
|
|
let url = data.url || '';
|
|
let url = data.url || '';
|
|
@@ -11,6 +12,12 @@ const FileViewerModal = ({ data, visible, onCancel, downloadFile }) => {
|
|
return arr[arr.length - 1];
|
|
return arr[arr.length - 1];
|
|
}, [data?.url]);
|
|
}, [data?.url]);
|
|
|
|
|
|
|
|
+ useEffect(() => {
|
|
|
|
+ setTimeout(() => {
|
|
|
|
+ setActive(visible);
|
|
|
|
+ }, 300);
|
|
|
|
+ }, [visible]);
|
|
|
|
+
|
|
const renderContent = () => {
|
|
const renderContent = () => {
|
|
if (type == 'xlsx') {
|
|
if (type == 'xlsx') {
|
|
return (
|
|
return (
|
|
@@ -48,9 +55,8 @@ const FileViewerModal = ({ data, visible, onCancel, downloadFile }) => {
|
|
width={1000}
|
|
width={1000}
|
|
footer={null}
|
|
footer={null}
|
|
onCancel={onCancel}
|
|
onCancel={onCancel}
|
|
- bodyStyle={{ height: '680px', overflowY: 'hidden' }}
|
|
|
|
>
|
|
>
|
|
- {renderContent()}
|
|
|
|
|
|
+ <div style={{ height: '680px', overflowY: 'hidden' }}>{active && renderContent()}</div>
|
|
</Modal>
|
|
</Modal>
|
|
);
|
|
);
|
|
};
|
|
};
|