jc-biz-components/lib/jc-upload/UploadList.js

jc component library based on Antd

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _tooltip = require('antd/lib/tooltip');

var _tooltip2 = _interopRequireDefault(_tooltip);

var _defineProperty2 = require('babel-runtime/helpers/defineProperty');

var _defineProperty3 = _interopRequireDefault(_defineProperty2);

var _progress = require('antd/lib/progress');

var _progress2 = _interopRequireDefault(_progress);

var _extends2 = require('babel-runtime/helpers/extends');

var _extends3 = _interopRequireDefault(_extends2);

var _icon = require('antd/lib/icon');

var _icon2 = _interopRequireDefault(_icon);

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/tooltip/style');

require('antd/lib/progress/style');

require('antd/lib/icon/style');

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _rcAnimate = require('rc-animate');

var _rcAnimate2 = _interopRequireDefault(_rcAnimate);

var _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }

// import styles from './index.less'

// https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL
var previewFile = function previewFile(file, callback) {
  var reader = new FileReader();
  reader.onloadend = function () {
    return callback(reader.result);
  };
  reader.readAsDataURL(file);
};

var UploadList = function (_React$Component) {
  (0, _inherits3['default'])(UploadList, _React$Component);

  function UploadList() {
    var _ref;

    var _temp, _this, _ret;

    (0, _classCallCheck3['default'])(this, UploadList);

    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    return _ret = (_temp = (_this = (0, _possibleConstructorReturn3['default'])(this, (_ref = UploadList.__proto__ || Object.getPrototypeOf(UploadList)).call.apply(_ref, [this].concat(args))), _this), _this.handleClose = function (file) {
      var onRemove = _this.props.onRemove;

      if (onRemove) {
        onRemove(file);
      }
    }, _this.handlePreview = function (file, e) {
      var onPreview = _this.props.onPreview;

      if (!onPreview) {
        return;
      }
      e.preventDefault();
      return onPreview(file);
    }, _temp), (0, _possibleConstructorReturn3['default'])(_this, _ret);
  }

  (0, _createClass3['default'])(UploadList, [{
    key: 'componentDidUpdate',
    value: function componentDidUpdate() {
      var _this2 = this;

      if (this.props.listType !== 'picture' && this.props.listType !== 'picture-card') {
        return;
      }
      (this.props.items || []).forEach(function (file) {
        if (typeof document === 'undefined' || typeof window === 'undefined' || !window.FileReader || !window.File || !(file.originFileObj instanceof File) || file.thumbUrl !== undefined) {
          return;
        }
        /*eslint-disable */
        file.thumbUrl = '';
        /*eslint-enable */
        previewFile(file.originFileObj, function (previewDataUrl) {
          /*eslint-disable */
          file.thumbUrl = previewDataUrl;
          /*eslint-enable */
          _this2.forceUpdate();
        });
      });
    }
  }, {
    key: 'render',
    value: function render() {
      var _this3 = this,
          _classNames2;

      var _props = this.props,
          prefixCls = _props.prefixCls,
          prefixCls2 = _props.prefixCls2,
          _props$items = _props.items,
          items = _props$items === undefined ? [] : _props$items,
          listType = _props.listType,
          showPreviewIcon = _props.showPreviewIcon,
          showRemoveIcon = _props.showRemoveIcon,
          locale = _props.locale,
          needOrder = _props.needOrder,
          reUploadRender = _props.reUploadRender;

      var list = items.map(function (file, index) {
        var _classNames;

        var progress = null;
        var icon = _react2['default'].createElement(_icon2['default'], { type: file.status === 'uploading' ? 'loading' : 'paper-clip' });

        if (listType === 'picture' || listType === 'picture-card') {
          if (file.status === 'uploading' || !file.thumbUrl && !file.url) {
            if (listType === 'picture-card') {
              icon = _react2['default'].createElement(
                'div',
                { className: prefixCls + '-list-item-uploading-text' },
                locale.uploading
              );
            } else {
              icon = _react2['default'].createElement(_icon2['default'], {
                className: prefixCls + '-list-item-thumbnail',
                type: 'picture'
              });
            }
          } else {
            icon = _react2['default'].createElement(
              'a',
              {
                className: prefixCls + '-list-item-thumbnail',
                onClick: function onClick(e) {
                  return _this3.handlePreview(file, e);
                },
                href: file.url || file.thumbUrl,
                target: '_blank',
                rel: 'noopener noreferrer'
              },
              _react2['default'].createElement('img', {
                src: file.thumbUrl || file.url,
                alt: file.name
              })
            );
          }
        }

        if (file.status === 'uploading') {
          // show loading icon if upload progress listener is disabled
          var loadingProgress = 'percent' in file ? _react2['default'].createElement(_progress2['default'], (0, _extends3['default'])({
            type: 'line'
          }, _this3.props.progressAttr, {
            percent: file.percent
          })) : null;

          progress = _react2['default'].createElement(
            'div',
            {
              className: prefixCls + '-list-item-progress',
              key: 'progress'
            },
            loadingProgress
          );
        }
        var infoUploadingClass = (0, _classnames2['default'])((_classNames = {}, (0, _defineProperty3['default'])(_classNames, prefixCls + '-list-item', true), (0, _defineProperty3['default'])(_classNames, prefixCls + '-list-item-' + file.status, true), _classNames));
        var preview = file.url ? _react2['default'].createElement(
          'a',
          {
            href: file.url,
            target: '_blank',
            rel: 'noopener noreferrer',
            className: prefixCls + '-list-item-name',
            onClick: function onClick(e) {
              return _this3.handlePreview(file, e);
            },
            title: file.name
          },
          file.name
        ) : _react2['default'].createElement(
          'span',
          {
            className: prefixCls + '-list-item-name',
            onClick: function onClick(e) {
              return _this3.handlePreview(file, e);
            },
            title: file.name
          },
          file.name
        );
        var style = file.url || file.thumbUrl ? undefined : {
          pointerEvents: 'none',
          opacity: 0.5
        };
        var previewIcon = showPreviewIcon ? _react2['default'].createElement(
          'a',
          {
            href: file.url || file.thumbUrl,
            target: '_blank',
            rel: 'noopener noreferrer',
            style: style,
            onClick: function onClick(e) {
              return _this3.handlePreview(file, e);
            },
            title: locale.previewFile
          },
          _react2['default'].createElement(_icon2['default'], { type: 'eye-o' })
        ) : null;
        var removeIcon = showRemoveIcon ? _react2['default'].createElement(_icon2['default'], {
          type: 'delete',
          title: locale.removeFile,
          onClick: function onClick() {
            return _this3.handleClose(file);
          }
        }) : null;
        var removeIconCross = showRemoveIcon ? _react2['default'].createElement(_icon2['default'], {
          type: 'cross',
          title: locale.removeFile,
          onClick: function onClick() {
            return _this3.handleClose(file);
          }
        }) : null;
        var actions = listType === 'picture-card' && file.status !== 'uploading' ? _react2['default'].createElement(
          'span',
          { className: prefixCls + '-list-item-actions' },
          previewIcon,
          reUploadRender(index),
          removeIcon
        ) : removeIconCross;
        var message = null;
        if (file.response && typeof file.response === 'string') {
          message = file.response;
        } else {
          message = file.error && file.error.statusText || locale.uploadError;
        }
        var iconAndPreview = file.status === 'error' ? _react2['default'].createElement(
          _tooltip2['default'],
          { title: message },
          icon,
          preview
        ) : _react2['default'].createElement(
          'span',
          null,
          icon,
          preview
        );
        // const isNeedOrder = needOrder && file.status === 'done'
        var isNeedOrder = needOrder;
        return _react2['default'].createElement(
          'div',
          {
            key: file.uid,
            style: { float: 'left' }
          },
          _react2['default'].createElement(
            'div',
            { className: infoUploadingClass },
            _react2['default'].createElement(
              'div',
              { className: prefixCls + '-list-item-info' },
              iconAndPreview
            ),
            actions,
            _react2['default'].createElement(
              _rcAnimate2['default'],
              {
                transitionName: 'fade',
                component: ''
              },
              progress
            )
          ),
          isNeedOrder && _react2['default'].createElement(
            'span',
            { className: prefixCls2 + '-iconContainer' },
            _react2['default'].createElement(_icon2['default'], {
              className: prefixCls2 + '-icon',
              style: { paddingRight: 8 },
              type: 'left',
              onClick: function onClick() {
                return _this3.props.orderChange(file, 0);
              }
            }),
            _react2['default'].createElement(_icon2['default'], {
              className: prefixCls2 + '-icon',
              style: { paddingLeft: 8 },
              type: 'right',
              onClick: function onClick() {
                return _this3.props.orderChange(file, 1);
              }
            })
          )
        );
      });

      //   <Input size='small' onChange={e => {
      //   this.props.orderChange(file, e.target.value)
      // }} />

      var listClassNames = (0, _classnames2['default'])((_classNames2 = {}, (0, _defineProperty3['default'])(_classNames2, prefixCls + '-list', true), (0, _defineProperty3['default'])(_classNames2, prefixCls + '-list-' + listType, true), _classNames2));
      var animationDirection = listType === 'picture-card' ? 'animate-inline' : 'animate';
      return _react2['default'].createElement(
        _rcAnimate2['default'],
        {
          transitionName: prefixCls + '-' + animationDirection,
          component: 'div',
          className: listClassNames
        },
        list
      );
    }
  }]);
  return UploadList;
}(_react2['default'].Component);

UploadList.defaultProps = {
  listType: 'text', // or picture
  progressAttr: {
    strokeWidth: 2,
    showInfo: false
  },
  prefixCls: 'ant-upload',
  showRemoveIcon: true,
  showPreviewIcon: true,
  prefixCls2: 'jc-upload'
};
exports['default'] = UploadList;
module.exports = exports['default'];