knk
Version:
react components based on react
102 lines • 3.46 kB
JavaScript
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
/**
* 文件预览组件
*/
import React, { useState } from 'react';
import { Modal } from 'antd';
import { Document, Page } from 'react-pdf/build/entry.noworker';
import { log } from '../../../common/tool';
import PropTypes from 'prop-types';
var FilePreview = function FilePreview(props) {
var _useState = useState(false),
_useState2 = _slicedToArray(_useState, 2),
modal = _useState2[0],
setModal = _useState2[1];
var _useState3 = useState(null),
_useState4 = _slicedToArray(_useState3, 2),
numPages = _useState4[0],
setnumPages = _useState4[1];
var handleDocumentLoad = function handleDocumentLoad(_ref) {
var pages = _ref.pages;
setnumPages(pages);
};
var handleCloseModal = function handleCloseModal() {
setModal(false);
};
var path = props.path,
children = props.children;
var match = path.match(/\.(pdf|jpg|jpeg|png|gif)/i);
var suffix = match ? match[1] : '';
switch (suffix) {
case 'pdf':
return /*#__PURE__*/React.createElement("div", {
className: "app-file-preview"
}, /*#__PURE__*/React.createElement("div", {
onClick: function onClick(e) {
e.preventDefault();
setModal(true);
}
}, children), /*#__PURE__*/React.createElement(Modal, {
title: "PDF\u9884\u89C8",
style: {
top: 10
},
width: 800,
visible: modal,
footer: null,
onCancel: handleCloseModal
}, /*#__PURE__*/React.createElement("div", {
className: "app-pdf"
}, /*#__PURE__*/React.createElement("div", {
className: "app-pdf-container"
}, /*#__PURE__*/React.createElement("div", {
className: "app-pdf-container-document"
}, /*#__PURE__*/React.createElement(Document, {
error: "\u8F7D\u5165PDF\u6587\u4EF6\u9519\u8BEF",
loading: "\u8F7D\u5165PDF\u6587\u4EF6\u4E2D,\u8BF7\u7A0D\u540E",
file: "/file/?path=".concat(encodeURIComponent(path)),
onLoadSuccess: handleDocumentLoad,
onLoadError: log.info
}, Array.from(new Array(numPages), function (el, index) {
return /*#__PURE__*/React.createElement(Page, {
key: "page_".concat(index + 1),
pageNumber: index + 1,
width: Math.min(600, document.body.clientWidth - 52)
});
})))))));
case 'jpg':
case 'jpeg':
case 'png':
case 'gift':
return /*#__PURE__*/React.createElement("div", {
className: "app-file-preview"
}, /*#__PURE__*/React.createElement("div", {
onClick: function onClick(e) {
e.preventDefault();
setModal(true);
}
}, children), /*#__PURE__*/React.createElement(Modal, {
title: "\u56FE\u7247\u9884\u89C8",
visible: modal,
footer: null,
onCancel: handleCloseModal
}, /*#__PURE__*/React.createElement("div", {
className: "app-file-preview-image"
}, /*#__PURE__*/React.createElement("a", {
href: path,
target: "_blank",
rel: "noopener noreferrer"
}, /*#__PURE__*/React.createElement("img", {
src: path
})))));
default:
return /*#__PURE__*/React.createElement("div", {
className: "app-file-preview"
}, children);
}
};
FilePreview.propTypes = {
path: PropTypes.string,
children: PropTypes.any
};
export default FilePreview;