ming-demo3/lib/components/file-upload/fileList.js

mdf metaui web

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));

var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));

var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));

var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));

var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

var _react = _interopRequireDefault(require("react"));

var _baseui = require("@mdf/baseui");

var _col = _interopRequireDefault(require("../basic/col"));

var _row = _interopRequireDefault(require("../basic/row"));

var fileList = function (_React$Component) {
  (0, _inherits2["default"])(fileList, _React$Component);

  function fileList(props) {
    var _this;

    (0, _classCallCheck2["default"])(this, fileList);
    _this = (0, _possibleConstructorReturn2["default"])(this, (0, _getPrototypeOf2["default"])(fileList).call(this, props));
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_getSizeString", function (size) {
      var kb = 1024;
      var mb = kb * 1024;
      var gb = mb * 1024;
      var sizeString;

      if (size < kb) {
        sizeString = Math.round(size * Math.pow(10, 1)) / Math.pow(10, 1) + 'B';
      } else if (size >= kb && size <= mb) {
        sizeString = Math.round(size / kb * Math.pow(10, 1)) / Math.pow(10, 1) + 'KB';
      } else if (size >= mb && size <= gb) {
        sizeString = Math.round(size / mb * Math.pow(10, 1)) / Math.pow(10, 1) + 'MB';
      } else {
        sizeString = Math.round(size / gb * Math.pow(10, 1)) / Math.pow(10, 1) + 'GB';
      }

      return sizeString;
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_DeleteFile", function (e, index) {
      if (_this.props.DelFile) _this.props.DelFile(index);
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_arrowImg", function (e, arrow, index) {
      if (_this.props.arrowImg) _this.props.arrowImg(arrow, index);
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_DownloadFile", function (e, address) {
      if (_this.props.isDownLoadable == false) {
        cb.utils.alert('当前文件不允许下载！');
      } else {
        window.open(address);
      }
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_onSort", function (e, index, type) {
      var fileList = _this.state.fileList;
      var sortField = _this.props.sortField;
      var pre = cb.utils.extend(true, {}, fileList[index - 1]);
      var next = cb.utils.extend(true, {}, fileList[index + 1]);
      var now = cb.utils.extend(true, {}, fileList[index]);
      var preSort = pre[sortField];
      var nextSort = next[sortField];
      var nowSort = now[sortField];
      var newData = [];

      if (type == 'left') {
        if (index == 0) return;
        newData = [{
          "index": index,
          "cellName": sortField,
          "cellValue": preSort
        }, {
          "index": index - 1,
          "cellName": sortField,
          "cellValue": nowSort
        }];
      } else {
        if (index == fileList.length - 1) return;
        newData = [{
          "index": index,
          "cellName": sortField,
          "cellValue": nextSort
        }, {
          "index": index + 1,
          "cellName": sortField,
          "cellValue": nowSort
        }];
      }

      _this.props.model.setCellValues(newData);
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onMouseEnter", function () {
      _this.setState({
        showCover: false
      });
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onMouseLeave", function () {
      _this.setState({
        showCover: true
      });
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_getFileControl", function () {
      var self = (0, _assertThisInitialized2["default"])(_this);
      var fileList = _this.state.fileList;
      var isDownLoadable = _this.props.isDownLoadable;
      var control = [],
          file,
          fileBtn,
          mode = _this.props.mode;
      var colPrecent = 100 / _this.state.colCount;
      colPrecent = colPrecent.toString() + '%';

      if (fileList.length > 0) {
        fileList.map(function (files, index) {
          var percent = Math.round(files.percent);

          if (percent != 100 && !isNaN(percent)) {
            file = _react["default"].createElement("div", {
              className: "pull-left"
            }, _react["default"].createElement("div", {
              className: "fileImg"
            }, _react["default"].createElement(_baseui.Icon, {
              type: "pdf"
            })), _react["default"].createElement(_row["default"], {
              style: {
                'marginBottom': '5px'
              }
            }, files.name), _react["default"].createElement("div", {
              style: {}
            }, _react["default"].createElement(_baseui.Progress, {
              percent: percent,
              strokeWidth: 5,
              status: "active"
            })));
          } else {
            var size = self._getSizeString(files.size);

            var address = files.address;
            var _control = null;
            var icon = '#icon-';

            switch (files.type) {
              case 'application/pdf':
                icon += 'PDF';
                _control = _react["default"].createElement("svg", {
                  className: "icon",
                  "aria-hidden": "true"
                }, _react["default"].createElement("use", {
                  href: icon
                }));
                break;

              case 'text/plain':
                icon += 'Txt';
                _control = _react["default"].createElement("svg", {
                  className: "icon",
                  "aria-hidden": "true"
                }, _react["default"].createElement("use", {
                  href: icon
                }));
                break;

              case 'application/msword':
              case 'application/vnd.openxmlformats-officedocument.wordprocessingml.document':
                icon += 'Word';
                _control = _react["default"].createElement("svg", {
                  className: "icon",
                  "aria-hidden": "true"
                }, _react["default"].createElement("use", {
                  href: icon
                }));
                break;

              case 'application/vnd.ms-excel':
              case 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet':
                icon += 'Excel';
                _control = _react["default"].createElement("svg", {
                  className: "icon",
                  "aria-hidden": "true"
                }, _react["default"].createElement("use", {
                  href: icon
                }));
                break;

              case 'application/x-pkcs12':
                if (files.address && files.address.split('.pfx').length == 2) icon += 'PFX';else icon += 'P12';
                _control = _react["default"].createElement("svg", {
                  className: "icon",
                  "aria-hidden": "true"
                }, _react["default"].createElement("use", {
                  href: icon
                }));
                break;

              case 'application/x-zip-compressed':
              case '':
                var name = files.name,
                    isZip = false;
                name = name ? name.trim().toLocaleLowerCase() : '';

                if (name.indexOf('.rar') != -1 || name.indexOf('.zip') != -1) {
                  icon += 'ZIP';
                  _control = _react["default"].createElement("svg", {
                    className: "icon",
                    "aria-hidden": "true"
                  }, _react["default"].createElement("use", {
                    href: icon
                  }));
                } else {
                  _control = _react["default"].createElement("img", {
                    src: files.address
                  });
                }

                break;

              default:
                _control = _react["default"].createElement("img", {
                  src: files.address
                });
                break;
            }

            if (mode == 'browse' || self.props.readOnly) {
              fileBtn = _react["default"].createElement("div", {
                className: "fileBtn"
              }, _react["default"].createElement("a", {
                style: {
                  width: '100%'
                },
                onClick: function onClick(e) {
                  return self._DownloadFile(e, address);
                },
                className: 'download'
              }, _react["default"].createElement(_baseui.Icon, {
                type: "download"
              })));
            } else {
              if (self.props.sortField) {
                if (index == 0 && self.state.showCover) {
                  fileBtn = _react["default"].createElement("div", {
                    className: "fileBtn fileBtn-sort showCover",
                    onMouseEnter: self.onMouseEnter
                  }, _react["default"].createElement("a", {
                    className: 'cover'
                  }, '封面'));
                } else {
                  fileBtn = _react["default"].createElement("div", {
                    className: "fileBtn fileBtn-sort",
                    onMouseLeave: self.onMouseLeave
                  }, _react["default"].createElement("a", {
                    onClick: function onClick(e) {
                      return self._onSort(e, index, 'left');
                    },
                    className: 'sort-left'
                  }, _react["default"].createElement(_baseui.Icon, {
                    type: "arrow-left"
                  })), _react["default"].createElement("a", {
                    onClick: function onClick(e) {
                      return self._onSort(e, index, 'right');
                    },
                    className: 'sort-right'
                  }, _react["default"].createElement(_baseui.Icon, {
                    type: "arrow-right"
                  })), _react["default"].createElement("a", {
                    className: 'close',
                    onClick: function onClick(e) {
                      return self._DeleteFile(e, index);
                    }
                  }, _react["default"].createElement(_baseui.Icon, {
                    type: "delete"
                  })));
                }
              } else {
                fileBtn = isDownLoadable ? _react["default"].createElement("div", {
                  className: "fileBtn"
                }, _react["default"].createElement("a", {
                  onClick: function onClick(e) {
                    return self._DownloadFile(e, address);
                  },
                  className: 'download'
                }, _react["default"].createElement(_baseui.Icon, {
                  type: "download"
                })), _react["default"].createElement("a", {
                  className: 'close',
                  onClick: function onClick(e) {
                    return self._DeleteFile(e, index);
                  }
                }, _react["default"].createElement(_baseui.Icon, {
                  type: "delete"
                }))) : _react["default"].createElement("div", {
                  className: "fileBtn"
                }, _react["default"].createElement("a", {
                  className: 'onlyClose',
                  onClick: function onClick(e) {
                    return self._DeleteFile(e, index);
                  }
                }, _react["default"].createElement(_baseui.Icon, {
                  type: "delete"
                })));
              }
            }

            file = _react["default"].createElement("div", {
              key: index,
              className: "pull-left"
            }, _react["default"].createElement("div", {
              className: 'fileList'
            }, _react["default"].createElement("div", {
              className: "fileImg"
            }, _control, fileBtn), _react["default"].createElement("div", {
              title: files.name,
              className: 'fileName'
            }, files.name), _react["default"].createElement("span", {
              className: 'fileSize'
            }, size)));
          }

          control.push(file);
        });
      }

      return control;
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_getImgControl", function () {
      var self = (0, _assertThisInitialized2["default"])(_this);
      var fileList = _this.state.fileList;
      var control = [];
      var file;
      var colPrecent = 100 / _this.state.colCount;
      colPrecent = colPrecent.toString() + '%';

      if (fileList.length > 0) {
        fileList.map(function (files, index) {
          var percent = Math.round(files.percent);

          if (percent != 100 && !isNaN(percent)) {
            file = _react["default"].createElement(_col["default"], {
              key: index,
              span: colPrecent
            }, _react["default"].createElement("div", {
              className: "Progress"
            }, _react["default"].createElement(_baseui.Progress, {
              percent: percent,
              strokeWidth: 5,
              type: "circle"
            })));
          } else {
            file = _react["default"].createElement(_col["default"], {
              key: index,
              span: colPrecent
            }, _react["default"].createElement("div", {
              className: "imageList"
            }, _react["default"].createElement("img", {
              title: files.name,
              className: 'imageName',
              src: files.address
            }), _react["default"].createElement("div", {
              className: 'imageDiv'
            }, _react["default"].createElement("div", {
              className: 'arrowleft iconBefore',
              onClick: function onClick(e) {
                return self._arrowImg(e, 'left', index);
              }
            }), _react["default"].createElement("div", {
              className: 'arrowright iconBefore',
              onClick: function onClick(e) {
                return self._arrowImg(e, 'right', index);
              }
            }), _react["default"].createElement("div", {
              className: 'delete iconBefore',
              onClick: function onClick(e) {
                return self._DeleteFile(e, index);
              }
            }))));
          }

          control.push(file);
        });
      }

      return control;
    });
    _this.state = {
      colCount: props.colCount || 4,
      fileType: props.fileType || 'image',
      fileList: props.fileList || [],
      showCover: true
    };
    return _this;
  }

  (0, _createClass2["default"])(fileList, [{
    key: "componentWillReceiveProps",
    value: function componentWillReceiveProps(nextProps) {
      this.setState({
        fileList: nextProps.fileList
      });
    }
  }, {
    key: "render",
    value: function render() {
      var fileList;

      if (this.state.fileType == 'file') {
        fileList = this._getFileControl();
      } else if (this.state.fileType == 'image') {
        fileList = this._getFileControl();
      } else {
        return null;
      }

      return _react["default"].createElement(_row["default"], {
        gutter: 10
      }, fileList);
    }
  }]);
  return fileList;
}(_react["default"].Component);

exports["default"] = fileList;
;
//# sourceMappingURL=fileList.js.map