rsuite/lib/Uploader/UploadFileItem.js

A suite of react components

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

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

exports.__esModule = true;
exports.default = void 0;

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

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

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

var React = _interopRequireWildcard(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _classnames = _interopRequireDefault(require("classnames"));

var _lodash = _interopRequireDefault(require("lodash"));

var _FormattedMessage = _interopRequireDefault(require("../IntlProvider/FormattedMessage"));

var _utils = require("../utils");

var getSize = function getSize(size) {
  if (size === void 0) {
    size = 0;
  }

  var K = 1024;
  var M = 1024 * 1024;
  var G = 1024 * 1024 * 1024;

  if (size > G) {
    return (size / G).toFixed(2) + "GB";
  }

  if (size > M) {
    return (size / M).toFixed(2) + "MB";
  }

  if (size > K) {
    return (size / K).toFixed(2) + "KB";
  }

  return size + "B";
};

var UploadFileItem =
/*#__PURE__*/
function (_React$Component) {
  (0, _inheritsLoose2.default)(UploadFileItem, _React$Component);

  function UploadFileItem(props) {
    var _this;

    _this = _React$Component.call(this, props) || this;

    _this.handleRemove = function (event) {
      var _this$props = _this.props,
          disabled = _this$props.disabled,
          onCancel = _this$props.onCancel,
          file = _this$props.file;

      if (disabled) {
        return;
      }

      onCancel && onCancel(file.fileKey, event);
    };

    _this.handlePreview = function (event) {
      var _this$props2 = _this.props,
          disabled = _this$props2.disabled,
          onPreview = _this$props2.onPreview,
          file = _this$props2.file;

      if (disabled) {
        return;
      }

      onPreview && onPreview(file, event);
    };

    _this.handleReupload = function (event) {
      var _this$props3 = _this.props,
          disabled = _this$props3.disabled,
          onReupload = _this$props3.onReupload,
          file = _this$props3.file;

      if (disabled) {
        return;
      }

      onReupload && onReupload(file, event);
    };

    _this.addPrefix = function (name) {
      return (0, _utils.prefix)(_this.props.classPrefix)(name);
    };

    var _file = props.file;
    _this.state = {
      previewImage: _file.url ? _file.url : null
    };

    if (!_file.url) {
      _this.getThumbnail(function (previewImage) {
        _this.setState({
          previewImage: previewImage
        });
      });
    }

    return _this;
  }

  var _proto = UploadFileItem.prototype;

  _proto.getThumbnail = function getThumbnail(callback) {
    var _this$props4 = this.props,
        file = _this$props4.file,
        listType = _this$props4.listType,
        maxPreviewFileSize = _this$props4.maxPreviewFileSize;

    if (!~['picture-text', 'picture'].indexOf(listType)) {
      return;
    }

    if (!file.blobFile || _lodash.default.get(file, 'blobFile.size') > maxPreviewFileSize) {
      return;
    }

    (0, _utils.previewFile)(file.blobFile, callback);
  };

  _proto.renderProgressBar = function renderProgressBar() {
    var _this$props5 = this.props,
        disabled = _this$props5.disabled,
        file = _this$props5.file;
    var _file$progress = file.progress,
        progress = _file$progress === void 0 ? 0 : _file$progress,
        status = file.status;
    var show = !disabled && status === 'uploading';
    var visibility = show ? 'visible' : 'hidden';
    var wrapStyle = {
      visibility: visibility
    };
    var progressbarStyle = {
      width: progress + "%"
    };
    return React.createElement("div", {
      className: this.addPrefix('progress'),
      style: wrapStyle
    }, React.createElement("div", {
      className: this.addPrefix('progress-bar'),
      style: progressbarStyle
    }));
  };

  _proto.renderPreview = function renderPreview() {
    var previewImage = this.state.previewImage;
    var file = this.props.file;

    if (previewImage) {
      return React.createElement("div", {
        className: this.addPrefix('preview')
      }, React.createElement("img", {
        role: "presentation",
        src: previewImage,
        alt: file.name,
        onClick: this.handlePreview
      }));
    }

    return null;
  };

  _proto.renderLoading = function renderLoading() {
    var _classNames;

    var file = this.props.file;
    var uploading = file.status === 'uploading';
    var classes = (0, _classnames.default)(this.addPrefix('icon-wrapper'), (_classNames = {}, _classNames[this.addPrefix('icon-loading')] = uploading, _classNames));
    return React.createElement("div", {
      className: classes
    }, React.createElement("i", {
      className: this.addPrefix('icon')
    }));
  };

  _proto.renderRemoveButton = function renderRemoveButton() {
    var removable = this.props.removable;

    if (!removable) {
      return null;
    }

    return React.createElement("a", {
      "aria-label": "Remove",
      className: this.addPrefix('btn-remove'),
      onClick: this.handleRemove,
      role: "button",
      tabIndex: -1
    }, React.createElement("span", {
      "aria-hidden": "true"
    }, "\xD7"));
  };

  _proto.renderErrorStatus = function renderErrorStatus() {
    var file = this.props.file;

    if (file.status === 'error') {
      return React.createElement("div", {
        className: this.addPrefix('status')
      }, React.createElement(_FormattedMessage.default, {
        id: "error"
      }), React.createElement("a", {
        role: "button",
        tabIndex: -1,
        onClick: this.handleReupload
      }, React.createElement("i", {
        className: this.addPrefix('icon-reupload')
      })));
    }

    return null;
  };

  _proto.renderFileSize = function renderFileSize() {
    var file = this.props.file;

    if (file.status !== 'error' && file.blobFile) {
      return React.createElement("span", {
        className: this.addPrefix('size')
      }, getSize(_lodash.default.get(file, 'blobFile.size')));
    }

    return null;
  };

  _proto.renderFilePanel = function renderFilePanel() {
    var _this$props6 = this.props,
        file = _this$props6.file,
        renderFileInfo = _this$props6.renderFileInfo;
    var fileElement = React.createElement("a", {
      role: "presentation",
      className: this.addPrefix('title'),
      onClick: this.handlePreview
    }, file.name);
    return React.createElement("div", {
      className: this.addPrefix('panel')
    }, React.createElement("div", {
      className: this.addPrefix('content')
    }, renderFileInfo ? renderFileInfo(file, fileElement) : fileElement, this.renderErrorStatus(), this.renderFileSize()));
  };

  _proto.render = function render() {
    var _classNames2;

    var _this$props7 = this.props,
        disabled = _this$props7.disabled,
        file = _this$props7.file,
        classPrefix = _this$props7.classPrefix,
        listType = _this$props7.listType,
        className = _this$props7.className,
        rest = (0, _objectWithoutPropertiesLoose2.default)(_this$props7, ["disabled", "file", "classPrefix", "listType", "className"]);
    var classes = (0, _classnames.default)(classPrefix, className, this.addPrefix(listType), (_classNames2 = {}, _classNames2[this.addPrefix('has-error')] = file.status === 'error', _classNames2[this.addPrefix('disabled')] = disabled, _classNames2));
    var unhandled = (0, _utils.getUnhandledProps)(UploadFileItem, rest);

    if (listType === 'picture') {
      return React.createElement("div", {
        className: classes
      }, this.renderLoading(), this.renderPreview(), this.renderErrorStatus(), this.renderRemoveButton());
    }

    if (listType === 'picture-text') {
      return React.createElement("div", {
        className: classes
      }, this.renderLoading(), this.renderPreview(), this.renderFilePanel(), this.renderProgressBar(), this.renderRemoveButton());
    }

    return React.createElement("div", (0, _extends2.default)({}, unhandled, {
      className: classes
    }), this.renderLoading(), this.renderFilePanel(), this.renderProgressBar(), this.renderRemoveButton());
  };

  return UploadFileItem;
}(React.Component);

UploadFileItem.propTypes = {
  file: _propTypes.default.object,
  listType: _propTypes.default.oneOf(['text', 'picture-text', 'picture']),
  disabled: _propTypes.default.bool,
  className: _propTypes.default.string,
  maxPreviewFileSize: _propTypes.default.number,
  classPrefix: _propTypes.default.string,
  removable: _propTypes.default.bool,
  renderFileInfo: _propTypes.default.func,
  onCancel: _propTypes.default.func,
  onPreview: _propTypes.default.func,
  onReupload: _propTypes.default.func
};
UploadFileItem.defaultProps = {
  maxPreviewFileSize: 1024 * 1024 * 5,
  // 5MB
  listType: 'text',
  removable: true
};

var _default = (0, _utils.defaultProps)({
  classPrefix: 'uploader-file-item'
})(UploadFileItem);

exports.default = _default;
module.exports = exports.default;