@ttk/component/es/attachment/index.js

ttk组件库

import { _ as _extends } from '../extends-b1af4ff7.js';
import { _ as _defineProperty } from '../defineProperty-847730aa.js';
import { _ as _slicedToArray } from '../slicedToArray-da0a5f5c.js';
import { _ as _inherits, a as _getPrototypeOf, b as _possibleConstructorReturn, c as _classCallCheck, d as _createClass } from '../getPrototypeOf-b95655c5.js';
import React__default, { Component } from 'react';
import isequal from 'lodash.isequal';
import Popover from '../popover';
import Icon from '../icon';
import DataGrid from '../dataGrid';
import Upload from '../upload';
import NoData from '../noData';
import Spin from '../spin';
import Viewer from 'react-viewer';
import classNames from 'classnames';
import '../_commonjsHelpers-471920d6.js';
import '../unsupportedIterableToArray-01f9082a.js';

function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }

function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
var Column = DataGrid.Column;
var Cell = DataGrid.Cell;

var attachmentComponent = /*#__PURE__*/function (_Component) {
  _inherits(attachmentComponent, _Component);

  var _super = _createSuper(attachmentComponent);

  function attachmentComponent(props) {
    var _this;

    _classCallCheck(this, attachmentComponent);

    _this = _super.call(this, props);

    _this.assitShouldComponent = function (target) {
      var obj = {};

      for (var _i = 0, _Object$entries = Object.entries(target); _i < _Object$entries.length; _i++) {
        var _Object$entries$_i = _slicedToArray(_Object$entries[_i], 2),
            key = _Object$entries$_i[0],
            value = _Object$entries$_i[1];

        if (typeof value != 'function') {
          obj[key] = value;
        }
      }

      return obj;
    };

    _this.contentVisibleChange = function (visible) {
      if (_this.state.isOpen) return;

      _this.setState({
        contentIsVisible: visible
      });
    };

    _this.ComponentWillUpdate = function () {};

    _this.download = function (index) {
      return function () {
        _this.props.onDownload && _this.props.onDownload(_this.props.data[index]);
      };
    };

    _this.del = function (index) {
      return function () {
        // this.setState({ contentIsVisible: true })
        _this.props.onDel && _this.props.onDel(_this.props.data[index]);
      };
    };

    _this.getContent = function () {
      var className = classNames(_defineProperty({
        'mk-attachment-content': true
      }, _this.props.contentClassName, !!_this.props.contentClassName));
      var data = _this.props.data || [];
      _this.props.status;

      if (data && data.length == 0) {
        return /*#__PURE__*/React__default.createElement("div", {
          className: className + ' upload-content'
        }, /*#__PURE__*/React__default.createElement(Spin, {
          spinning: _this.props.loading != undefined ? _this.props.loading : false,
          tip: "\u52A0\u8F7D\u4E2D..."
        }, /*#__PURE__*/React__default.createElement(NoData, {
          type: "noDocoments",
          small: true
        }, _this.props.status != 1 && /*#__PURE__*/React__default.createElement("span", null, "\u4EB2\uFF0C\u8FD8\u6CA1\u6709\u6587\u4EF6\uFF0C\u8D76\u5FEB\u4E0A\u4F20\u5466"), _this.props.status == 1 && /*#__PURE__*/React__default.createElement("span", null, "\u6682\u65E0\u6570\u636E"))));
      }

      var columns = [/*#__PURE__*/React__default.createElement(Column, {
        columnKey: "link",
        flexGrow: 1,
        cell: function cell(ps) {
          var iconComponent;

          switch (data[ps.rowIndex].type || data[ps.rowIndex].file && data[ps.rowIndex].file.type) {
            case 1000010001:
              iconComponent = /*#__PURE__*/React__default.createElement(Icon, {
                type: "tupian",
                className: "picture",
                fontFamily: "edficon",
                style: {
                  color: '#8080F3'
                }
              });
              break;

            case 1000010002:
              iconComponent = /*#__PURE__*/React__default.createElement(Icon, {
                type: "word",
                className: "picture",
                fontFamily: "edficon",
                style: {
                  color: '#52C4FF'
                }
              });
              break;

            case 1000010003:
              iconComponent = /*#__PURE__*/React__default.createElement(Icon, {
                type: "Excel",
                className: "picture",
                fontFamily: "edficon",
                style: {
                  color: '#FF7739'
                }
              });
              break;

            case 1000010004:
              iconComponent = /*#__PURE__*/React__default.createElement(Icon, {
                type: "ppt",
                className: "picture",
                fontFamily: "edficon",
                style: {
                  color: '#4591FF'
                }
              });
              break;

            case 1000010005:
              iconComponent = /*#__PURE__*/React__default.createElement(Icon, {
                type: "pdf",
                className: "picture",
                fontFamily: "edficon",
                style: {
                  color: '#36CEAB'
                }
              });
              break;

            case 1000010006:
              iconComponent = /*#__PURE__*/React__default.createElement(Icon, {
                type: "yasuobao",
                className: "picture",
                fontFamily: "edficon",
                style: {
                  color: '#F9A022'
                }
              });
              break;
          } // console.log(data[ps.rowIndex], 'data[ps.rowIndex]')


          return (data[ps.rowIndex].type || data[ps.rowIndex].file && data[ps.rowIndex].file.type) == 1000010001 ? /*#__PURE__*/React__default.createElement(Popover, {
            content: _this.getThumbnail(data[ps.rowIndex]),
            arrowPointAtCenter: true,
            placement: "leftTop"
          }, /*#__PURE__*/React__default.createElement(Cell, {
            className: "mk-attachment-content-link-cell"
          }, /*#__PURE__*/React__default.createElement("a", null, iconComponent), data[ps.rowIndex].type == 1000010001 || data[ps.rowIndex].file && data[ps.rowIndex].file.type == 1000010001 ? /*#__PURE__*/React__default.createElement("a", {
            className: "attachmentName",
            onClick: function onClick(e) {
              return _this.openViewer(ps.rowIndex, e);
            },
            title: data[ps.rowIndex].name || data[ps.rowIndex].alt || data[ps.rowIndex].file.originalName
          }, data[ps.rowIndex].name || data[ps.rowIndex].alt || data[ps.rowIndex].file.originalName) : /*#__PURE__*/React__default.createElement("span", {
            title: data[ps.rowIndex].name || data[ps.rowIndex].alt || data[ps.rowIndex].file.originalName
          }, data[ps.rowIndex].name || data[ps.rowIndex].alt || data[ps.rowIndex].file.originalName))) : /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(Cell, {
            className: "mk-attachment-content-link-cell"
          }, /*#__PURE__*/React__default.createElement("a", null, iconComponent), data[ps.rowIndex].type == 1000010001 || data[ps.rowIndex].file && data[ps.rowIndex].file.type == 1000010001 ? /*#__PURE__*/React__default.createElement("a", {
            className: "attachmentName",
            onClick: function onClick(e) {
              return _this.openViewer(ps.rowIndex, e);
            },
            title: data[ps.rowIndex].name || data[ps.rowIndex].alt || data[ps.rowIndex].file && data[ps.rowIndex].file.originalName
          }, data[ps.rowIndex].name || data[ps.rowIndex].alt || data[ps.rowIndex].file && data[ps.rowIndex].file.originalName) : /*#__PURE__*/React__default.createElement("span", {
            title: data[ps.rowIndex].name || data[ps.rowIndex].alt || data[ps.rowIndex].file && data[ps.rowIndex].file.originalName
          }, data[ps.rowIndex].name || data[ps.rowIndex].alt || data[ps.rowIndex].file && data[ps.rowIndex].file.originalName)));
        },
        width: 180
      }), /*#__PURE__*/React__default.createElement(Column, {
        columnKey: "option",
        cell: function cell(ps) {
          return /*#__PURE__*/React__default.createElement(Cell, null, /*#__PURE__*/React__default.createElement("a", {
            href: ps.accessUrl,
            download: ps.name,
            onClick: _this.download(ps.rowIndex),
            type: "download"
          }, /*#__PURE__*/React__default.createElement(Icon, {
            className: "download",
            fontFamily: "edficon",
            title: "\u4E0B\u8F7D",
            type: "xiazai"
          })), _this.props.status != 1 ? /*#__PURE__*/React__default.createElement("a", null, /*#__PURE__*/React__default.createElement(Icon, {
            onClick: _this.del(ps.rowIndex),
            fontFamily: "edficon",
            type: "shanchu",
            title: "\u5220\u9664",
            className: "del"
          })) : null);
        },
        width: 70
      })];
      var loading = {
        spinning: _this.props.loading != undefined ? _this.props.loading : false,
        tip: '加载中...',
        size: 'default'
      };
      return /*#__PURE__*/React__default.createElement("div", {
        className: className
      }, /*#__PURE__*/React__default.createElement(DataGrid, {
        rowsCount: data ? data.length : 0,
        rowHeight: 36,
        columns: columns,
        isFix: true,
        height: 210,
        loading: loading,
        width: 250
      }));
    };

    _this.getTitle = function () {
      return /*#__PURE__*/React__default.createElement("div", {
        className: "attachment-title"
      }, /*#__PURE__*/React__default.createElement("span", null, "\u9644\u4EF6\u5217\u8868"), _this.props.status != 1 ? /*#__PURE__*/React__default.createElement(Upload, _extends({
        showUploadList: false
      }, _this.props.uploadProps), /*#__PURE__*/React__default.createElement("span", {
        className: "upload"
      }, /*#__PURE__*/React__default.createElement(Icon, {
        className: "upload-icon",
        fontFamily: "edficon",
        type: "xinzengkemu",
        style: {
          fontSize: '25px',
          verticalAlign: 'bottom'
        }
      }), "\u6DFB\u52A0")) : null);
    };

    _this.getThumbnail = function (detail) {
      if (detail.type != 1000010001) return /*#__PURE__*/React__default.createElement("div", null);
      return /*#__PURE__*/React__default.createElement("div", {
        style: {
          width: 300,
          height: 300
        }
      }, /*#__PURE__*/React__default.createElement("img", {
        height: 300,
        width: 300,
        src: detail.accessUrl
      }));
    };

    _this.openViewer = function (index, event) {
      _this.setState({
        isOpen: true,
        activeIndex: index
      });
    };

    _this.closeViewer = function () {
      _this.setState({
        isOpen: false
      });
    };

    _this.state = {
      isOpen: false,
      activeIndex: 0,
      contentIsVisible: props.visible,
      fileList: [],
      isFromDocList: props.isFromDocList || ''
    };
    return _this;
  }

  _createClass(attachmentComponent, [{
    key: "shouldComponentUpdate",
    value: function shouldComponentUpdate(nextProps, nextState) {
      // console.log((isequal(this.props, nextProps) && isequal(this.state, nextState)))
      return !(isequal(this.assitShouldComponent(this.props), this.assitShouldComponent(nextProps)) && isequal(this.state, nextState));
    }
  }, {
    key: "render",
    value: // getPopupContainer = () => {
    //     if(this.props.isFromDocList){
    //         return
    //     }
    // }
    function render() {
      var className = classNames(_defineProperty({
        'mk-attachment': true
      }, this.props.className, !!this.props.className));
      var popupContainerModal = this.props.popupContainerModal;
      return this.props.isFromDocList ? /*#__PURE__*/React__default.createElement(Popover, {
        overlayClassName: "mk-attachment-popover attachment isFromDocList",
        content: this.getContent(),
        getPopupContainer: function getPopupContainer() {
          return document.querySelector(popupContainerModal);
        } // placement="bottomRight"
        ,
        onVisibleChange: this.contentVisibleChange // visible={this.state.contentIsVisible || this.props.visible}
        ,
        title: this.getTitle(),
        trigger: "click"
      }, /*#__PURE__*/React__default.createElement("span", _extends({}, this.props, {
        className: className
      }), /*#__PURE__*/React__default.createElement(Icon, {
        style: {
          fontSize: '22px',
          verticalAlign: 'middle'
        },
        fontFamily: "edficon",
        type: "fujian"
      }), /*#__PURE__*/React__default.createElement("span", {
        style: {
          display: 'inline-block',
          height: '24px',
          lineHeight: '24px',
          verticalAlign: 'middle'
        }
      }, "\u9644\u4EF6")), this.renderViewer(this.props.data)) : /*#__PURE__*/React__default.createElement(Popover, {
        overlayClassName: "mk-attachment-popover attachment",
        content: this.getContent() // placement="bottomRight"
        ,
        onVisibleChange: this.contentVisibleChange // visible={this.state.contentIsVisible || this.props.visible}
        ,
        title: this.getTitle(),
        trigger: "click"
      }, /*#__PURE__*/React__default.createElement("span", _extends({}, this.props, {
        className: className
      }), /*#__PURE__*/React__default.createElement(Icon, {
        style: {
          fontSize: '22px',
          verticalAlign: 'middle'
        },
        fontFamily: "edficon",
        type: "fujian"
      }), /*#__PURE__*/React__default.createElement("span", {
        style: {
          display: 'inline-block',
          height: '24px',
          lineHeight: '24px',
          verticalAlign: 'middle'
        }
      }, "\u9644\u4EF6")), this.renderViewer(this.props.data));
    }
  }, {
    key: "renderViewer",
    value: function renderViewer(data) {
      var _this2 = this;

      if (!data) return null;
      if (data.length == 0) return null;
      var newData = [];

      if (data instanceof Array) {
        data.forEach(function (item) {
          if (item.type == 1000010001) {
            newData.push({
              src: item.accessUrl,
              alt: item.alt
            });
          }
        });
      }

      var activeIndex = newData.findIndex(function (item) {
        return item.src == data[_this2.state.activeIndex].accessUrl;
      });
      return /*#__PURE__*/React__default.createElement(Viewer, {
        images: newData,
        visible: this.state.isOpen,
        activeIndex: activeIndex,
        container: null,
        onClose: this.closeViewer
      });
    }
  }]);

  return attachmentComponent;
}(Component);

export { attachmentComponent as default };