kara-module-file-view/src/viewfile.js

kara module file view

import React from 'react';
import PropTypes from 'prop-types';
import style from './preview.scss';
import PDFViewer from './pdfViewer';
import './iconfont/iconfont.css'

// eslint-disable-next-line
class ViewFile extends React.Component {
  render() {
    const { file, channelId } = this.props;
    const cId = (file && file.channel) ? file.fileSourceChannel || file.channel : channelId;
    let size = file.size / 1024;
    size = size > 1024 ? `${(size / 1024).toFixed(2)}M` : `${size.toFixed(2)}K`;
    return (
      <div className={style['view-img']}>
        <div className={style['img-header']}>
          <span className={style['img-name']}>{file.name}</span>
          <span className={style['img-size']}>{size}</span>
          <span
            onClick={(e) => {
              e.preventDefault();
              this.props.downloadBlobFile(this.props.isCollect ? file.fileId : file.id, cId);
            }
            }
          >
            <i className={`i-f i-download ${style['img-download']}`} />
          </span>
          <span className={style['img-middle']} />
          <i
            className={`i-f i-close ${style['file-close']}`}
            onClick={() => { this.props.modalHidden(); }}
          />
        </div>
        <div className={style['file-content']}>
          {
            file.preview ? <PDFViewer file={file} /> :
            <span className={style.unPreview}>该文件类型无法预览</span>
          }

        </div>
      </div>
    );
  }
}

ViewFile.defaultProps = {
  isCollect: false,
};


ViewFile.propTypes = {
  file: PropTypes.shape({
    name: PropTypes.string,
    id: PropTypes.string,
    size: PropTypes.oneOfType([
      PropTypes.string,
      PropTypes.number,
    ]),
  }).isRequired,
  modalHidden: PropTypes.func.isRequired,
  channelId: PropTypes.string.isRequired,
  downloadBlobFile: PropTypes.func.isRequired,
  isCollect: PropTypes.bool,
};

export default ViewFile;