dlt-for-react 1.0.2 → 1.0.3

package/lib/components/KyPreview/index.js

@@ -0,0 +1,209 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _spin = require('antd/lib/spin');
+
+var _spin2 = _interopRequireDefault(_spin);
+
+var _pagination = require('antd/lib/pagination');
+
+var _pagination2 = _interopRequireDefault(_pagination);
+
+var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
+
+var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
+
+var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
+
+var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
+
+var _createClass2 = require('babel-runtime/helpers/createClass');
+
+var _createClass3 = _interopRequireDefault(_createClass2);
+
+var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
+
+var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
+
+var _inherits2 = require('babel-runtime/helpers/inherits');
+
+var _inherits3 = _interopRequireDefault(_inherits2);
+
+require('antd/lib/spin/style');
+
+require('antd/lib/pagination/style');
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
+var _reactFileViewer = require('react-file-viewer');
+
+var _reactFileViewer2 = _interopRequireDefault(_reactFileViewer);
+
+var _reactPdfJs = require('react-pdf-js');
+
+var _reactPdfJs2 = _interopRequireDefault(_reactPdfJs);
+
+var _reactViewer = require('react-viewer');
+
+var _reactViewer2 = _interopRequireDefault(_reactViewer);
+
+require('../../../assets/components/KyPreview/index.less');
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/**
+ * 科研附件预览组件
+ */
+
+//react预览image文件插件
+
+/**
+ * react-file-viewer:文件预览支持
+ * Images: png, jpeg, gif, bmp, including 360-degree images
+ * pdf
+ * csv
+ * xslx
+ * docx
+ * Video: mp4, webm
+ * Audio: mp3
+ */
+var KyPreview = function (_React$Component) {
+  (0, _inherits3.default)(KyPreview, _React$Component);
+
+  function KyPreview(props) {
+    (0, _classCallCheck3.default)(this, KyPreview);
+
+    var _this = (0, _possibleConstructorReturn3.default)(this, (KyPreview.__proto__ || (0, _getPrototypeOf2.default)(KyPreview)).call(this, props));
+
+    _this.closeFile = function () {
+      _this.props.onCancel && _this.props.onCancel();
+    };
+
+    _this.onDocumentComplete = function (pages) {
+      _this.setState({ page: 1, pages: pages });
+    };
+
+    _this.handleChange = function (page) {
+      _this.setState({ page: page });
+    };
+
+    _this.getComponent = function (fileType) {
+      var _this$props = _this.props,
+          height = _this$props.height,
+          visible = _this$props.visible,
+          previewFile = _this$props.previewFile,
+          fileUid = _this$props.fileUid;
+      var _this$state = _this.state,
+          page = _this$state.page,
+          pages = _this$state.pages;
+
+      var component = null;
+      var fileViewerList = ['csv', 'docx', 'xlsx']; ///Office文档
+      var imageList = ['png', 'jpeg', 'jpg', 'gif', 'bmp']; //图片格式
+      if (!previewFile) return '请传入预览文件源';
+      if (fileType === 'pdf') {
+        component = _react2.default.createElement(
+          _spin2.default,
+          { spinning: Boolean(!pages), tip: '\u52A0\u8F7D\u4E2D...' },
+          _react2.default.createElement(
+            'div',
+            { className: 'filePdf', style: { minHeight: 300 + 'px' } },
+            _react2.default.createElement(_reactPdfJs2.default, { file: previewFile, onDocumentComplete: _this.onDocumentComplete, page: page })
+          ),
+          _react2.default.createElement(
+            'div',
+            { className: 'filePdfFooter' },
+            _react2.default.createElement(_pagination2.default, { current: page, onChange: _this.handleChange, total: pages * 10 })
+          )
+        );
+      } else if (imageList.includes(fileType)) {
+        component = _react2.default.createElement(_reactViewer2.default, {
+          visible: visible,
+          loop: false,
+          onClose: _this.closeFile,
+          images: [{ src: previewFile, alt: '' }],
+          changeable: false
+        });
+      } else if (fileViewerList.includes(fileType)) {
+        component = _react2.default.createElement(
+          'div',
+          { className: 'fileContent', style: { height: height + 'px' } },
+          _react2.default.createElement(_reactFileViewer2.default, {
+            fileType: fileType //文件类型
+            , filePath: previewFile //文件地址
+          })
+        );
+      } else {
+        component = fileType + '\u6587\u4EF6\u683C\u5F0F\u6682\u4E0D\u652F\u6301\u9884\u89C8';
+      }
+      return component;
+    };
+
+    _this.state = {
+      page: 1,
+      pages: null
+    };
+    return _this;
+  }
+  //获取所有页
+
+
+  (0, _createClass3.default)(KyPreview, [{
+    key: 'render',
+    value: function render() {
+      var _props = this.props,
+          fileType = _props.fileType,
+          visible = _props.visible,
+          height = _props.height;
+
+      return _react2.default.createElement(
+        _react2.default.Fragment,
+        null,
+        _react2.default.createElement(
+          'div',
+          { style: { display: visible ? 'block' : 'none' }, className: 'KyPreview' },
+          this.getComponent(fileType)
+        ),
+        _react2.default.createElement(
+          'style',
+          { jsx: 'true' },
+          '\n            .react-grid-Grid {\n              min-height: ' + height * 0.9 + 'px !important;\n            }\n          '
+        )
+      );
+    }
+  }]);
+  return KyPreview;
+}(_react2.default.Component);
+
+/**
+ * 默认属性
+ */
+
+//react预览pdf文件插件
+
+
+exports.default = KyPreview;
+KyPreview.defaultProps = {
+  previewFile: null, //文件源[文件url/文件对象/base64]
+  fileType: 'xlsx', //预览类型
+  fileUid: '', //附件id
+  visible: false, //默认展示
+  height: 500,
+  onCancel: function onCancel() {}
+};
+
+/**
+ * 属性检查
+ */
+KyPreview.propTypes = {
+  onCancel: _propTypes2.default.func //返回事件回调方法
+};