You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
47 lines
1.1 KiB
TypeScript
47 lines
1.1 KiB
TypeScript
'use client';
|
|
|
|
import DocViewer from '@cyntler/react-doc-viewer';
|
|
import { css, cx } from 'antd-style';
|
|
import { CSSProperties, memo } from 'react';
|
|
|
|
import { FileListItem } from '@/types/files';
|
|
|
|
import NotSupport from './NotSupport';
|
|
import { FileViewRenderers } from './Renderer';
|
|
import PDFRenderer from './Renderer/PDF';
|
|
|
|
const container = css`
|
|
background: transparent !important;
|
|
|
|
#proxy-renderer {
|
|
height: 100%;
|
|
}
|
|
`;
|
|
|
|
interface FileViewerProps extends FileListItem {
|
|
className?: string;
|
|
style?: CSSProperties;
|
|
}
|
|
|
|
const FileViewer = memo<FileViewerProps>(({ id, style, fileType, url, name }) => {
|
|
if (fileType?.toLowerCase() === 'pdf' || name?.toLowerCase().endsWith('.pdf')) {
|
|
return <PDFRenderer fileId={id} url={url} />;
|
|
}
|
|
console.log(url,fileType,'72727277--------11111')
|
|
|
|
return (
|
|
<DocViewer
|
|
className={cx(container)}
|
|
config={{
|
|
header: { disableHeader: true },
|
|
noRenderer: { overrideComponent: NotSupport },
|
|
}}
|
|
documents={[{ fileName: name, fileType, uri: url }]}
|
|
pluginRenderers={FileViewRenderers}
|
|
style={style}
|
|
/>
|
|
);
|
|
});
|
|
|
|
export default FileViewer;
|