zent/lib/upload/components/UploadPopup.js

一套前端设计语言和基于React的实现

'use strict';

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

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

var _extends3 = _interopRequireDefault(_extends2);

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);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _button = require('../../button');

var _button2 = _interopRequireDefault(_button);

var _input = require('../../input');

var _input2 = _interopRequireDefault(_input);

var _notify = require('../../notify');

var _notify2 = _interopRequireDefault(_notify);

var _isPromise = require('../../utils/isPromise');

var _isPromise2 = _interopRequireDefault(_isPromise);

var _FileInput = require('./FileInput');

var _FileInput2 = _interopRequireDefault(_FileInput);

var _UploadLocal = require('./UploadLocal');

var _UploadLocal2 = _interopRequireDefault(_UploadLocal);

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

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

/**
 * 上传图片弹框
 */

var BUTTON_LOADING_TEXT = '提取中...';
var BUTTON_TEXT = '提取';

var ArrayForEach = Array.prototype.forEach;
var arraySlice = Array.prototype.slice;

var UploadPopup = function (_Component) {
  (0, _inherits3['default'])(UploadPopup, _Component);

  function UploadPopup(props) {
    (0, _classCallCheck3['default'])(this, UploadPopup);

    var _this = (0, _possibleConstructorReturn3['default'])(this, (UploadPopup.__proto__ || Object.getPrototypeOf(UploadPopup)).call(this, props));

    _this.state = {
      networkImage: props.networkImage,
      networkUploading: props.networkUploading,
      localUploading: props.localUploading,
      buttonText: props.buttonText,
      localFiles: []
    };
    _this.networkUrl = '';
    _this.confirmNetworkUrl = _this.confirmNetworkUrl.bind(_this);
    _this.networkUrlChanged = _this.networkUrlChanged.bind(_this);
    _this.processFiles = _this.processFiles.bind(_this);
    _this.uploadLocalImages = _this.uploadLocalImages.bind(_this);
    _this.fileProgressHandler = _this.fileProgressHandler.bind(_this);
    return _this;
  }

  /**
   * 网络图片渲染
   */


  (0, _createClass3['default'])(UploadPopup, [{
    key: 'renderNetworkRegion',
    value: function renderNetworkRegion(props) {
      var prefix = props.prefix;
      var _state = this.state,
          networkImage = _state.networkImage,
          networkUploading = _state.networkUploading,
          buttonText = _state.buttonText;

      return _react2['default'].createElement(
        'div',
        { className: prefix + '-network-image-region' },
        _react2['default'].createElement(
          'div',
          { className: prefix + '-title' },
          '\u7F51\u7EDC\u56FE\u7247\uFF1A'
        ),
        _react2['default'].createElement(
          'div',
          { className: prefix + '-content' },
          _react2['default'].createElement(
            'div',
            { className: prefix + '-input-append' },
            _react2['default'].createElement(_input2['default'], {
              type: 'text',
              placeholder: '\u8BF7\u6DFB\u52A0\u7F51\u7EDC\u56FE\u7247\u5730\u5740',
              onChange: this.networkUrlChanged
            })
          ),
          _react2['default'].createElement(
            _button2['default'],
            {
              type: 'primary',
              outline: true,
              loading: networkUploading,
              onClick: this.confirmNetworkUrl
            },
            buttonText
          ),
          _react2['default'].createElement(
            'div',
            { className: prefix + '-image-preview' },
            _react2['default'].createElement('img', { src: networkImage.attachment_url, alt: '', role: 'presentation' })
          )
        )
      );
    }

    /**
     * 本地图片
     */

  }, {
    key: 'renderLocalImageRegion',
    value: function renderLocalImageRegion(props) {
      var _this2 = this;

      var prefix = props.prefix,
          accept = props.accept,
          options = props.options;
      var localFiles = this.state.localFiles;


      return _react2['default'].createElement(
        'div',
        { className: prefix + '-local-image-region' },
        _react2['default'].createElement(
          'div',
          { className: prefix + '-title' },
          '\u672C\u5730\u56FE\u7247\uFF1A'
        ),
        _react2['default'].createElement(
          'div',
          { className: prefix + '-content' },
          _react2['default'].createElement(
            'div',
            null,
            _react2['default'].createElement(
              'ul',
              { className: 'image-list upload-local-image-list ui-sortable' },
              localFiles.map(function (item, index) {
                return _react2['default'].createElement(
                  'li',
                  { key: index, className: 'upload-local-image-item' },
                  _react2['default'].createElement('div', {
                    className: 'image-box',
                    style: {
                      backgroundImage: 'url(' + item.src + ')'
                    }
                  }),
                  _react2['default'].createElement(
                    'span',
                    {
                      className: 'close-modal small',
                      onClick: _this2.removeLocalImage.bind(_this2, item)
                    },
                    '\xD7'
                  ),
                  item.progress ? _react2['default'].createElement(
                    'div',
                    { className: 'image-progress' },
                    item.progress.toFixed(1) + '%'
                  ) : ''
                );
              })
            )
          ),
          !options.maxAmount || localFiles.length < options.maxAmount ? _react2['default'].createElement(
            'div',
            { className: prefix + '-add-local-image-button pull-left' },
            '+',
            _react2['default'].createElement(_FileInput2['default'], (0, _extends3['default'])({}, props.options, { onChange: this.processFiles }))
          ) : '',
          _react2['default'].createElement(
            'div',
            { className: prefix + '-local-tips c-gray' },
            '\u4EC5\u652F\u6301',
            accept.replace(/image\/?/g, '').replace(/, /g, '、'),
            '\u4E09\u79CD\u683C\u5F0F, \u5927\u5C0F\u4E0D\u8D85\u8FC7',
            (0, _utils.formatMaxSize)(options.maxSize)
          )
        )
      );
    }
  }, {
    key: 'renderFooterRegion',
    value: function renderFooterRegion() {
      var _state2 = this.state,
          localUploading = _state2.localUploading,
          localFiles = _state2.localFiles;

      return _react2['default'].createElement(
        'div',
        { className: 'text-center' },
        _react2['default'].createElement(
          _button2['default'],
          {
            type: 'primary',
            size: 'large',
            disabled: localFiles.length === 0,
            loading: localUploading,
            onClick: this.uploadLocalImages
          },
          '\u786E\u5B9A'
        )
      );
    }
  }, {
    key: 'removeLocalImage',
    value: function removeLocalImage(index) {
      var localFiles = this.state.localFiles;

      localFiles.splice(index, 1);
      this.setState({
        localFiles: localFiles
      });
    }
  }, {
    key: 'uploadLocalImages',
    value: function uploadLocalImages() {
      var _this3 = this;

      var _props = this.props,
          options = _props.options,
          showUploadPopup = _props.showUploadPopup;
      var localFiles = this.state.localFiles;

      this.setState({
        localUploading: true
      });
      (0, _UploadLocal2['default'])(options, {
        localFiles: localFiles,
        onProgress: this.fileProgressHandler
      }).then(function () {
        _this3.setState({
          localFiles: [],
          localUploading: false
        });
        showUploadPopup(false);
      })['catch'](function () {
        _this3.setState({
          localUploading: false
        });
      });
    }
  }, {
    key: 'render',
    value: function render() {
      var _props2 = this.props,
          prefix = _props2.prefix,
          options = _props2.options,
          className = _props2.className;


      return _react2['default'].createElement(
        'div',
        { className: className },
        _react2['default'].createElement(
          'div',
          { className: prefix + '-container' },
          !options.localOnly && this.renderNetworkRegion(this.props),
          this.renderLocalImageRegion(this.props)
        ),
        this.renderFooterRegion()
      );
    }
  }, {
    key: 'networkUrlChanged',
    value: function networkUrlChanged(evt) {
      this.networkUrl = evt.target.value;
    }
  }, {
    key: 'iteratorFiles',
    value: function iteratorFiles(files) {
      var _this4 = this;

      var options = this.props.options;
      var maxSize = options.maxSize,
          silent = options.silent,
          maxAmount = options.maxAmount;


      ArrayForEach.call(files, function (file, index) {
        if (maxAmount && index >= maxAmount) {
          !silent && _notify2['default'].error('\u5DF2\u7ECF\u81EA\u52A8\u8FC7\u6EE4\u8D85\u8FC7' + options.maxAmount + '\u5F20\u7684\u56FE\u7247\u6587\u4EF6');
          return false;
        }
        if (!maxSize || file.size <= maxSize) {
          _this4.addFile(file);
        } else {
          !silent && _notify2['default'].error('\u5DF2\u7ECF\u81EA\u52A8\u8FC7\u6EE4\u5927\u4E8E' + (0, _utils.formatMaxSize)(maxSize) + '\u7684\u56FE\u7247\u6587\u4EF6');
        }
      });
    }
  }, {
    key: 'processFiles',
    value: function processFiles(evt) {
      var options = this.props.options;

      var files = arraySlice.call(evt.target.files);
      this.uploadFiles = files;

      var filterResult = options.filterFiles(files);
      if ((0, _isPromise2['default'])(filterResult)) {
        filterResult.then(this.iteratorFiles, options.onError);
      } else {
        files = filterResult;
        this.iteratorFiles(files);
      }
    }
  }, {
    key: 'fileProgressHandler',
    value: function fileProgressHandler(index, progress) {
      var localFiles = this.state.localFiles;

      localFiles[index].progress = progress;
      this.setState(localFiles);
    }
  }, {
    key: 'addFile',
    value: function addFile(file) {
      var _this5 = this;

      var fileReader = new FileReader();
      var localFiles = this.state.localFiles;


      fileReader.onload = function (e) {
        localFiles.push({
          src: e.target.result,
          file: file
        });
        _this5.setState({
          localFiles: localFiles
        });
      };

      fileReader.readAsDataURL(file);
    }

    /**
     * 提取网络图片
     */

  }, {
    key: 'confirmNetworkUrl',
    value: function confirmNetworkUrl() {
      var _this6 = this;

      var _props3 = this.props,
          options = _props3.options,
          showUploadPopup = _props3.showUploadPopup;

      if (!this.networkUrl) return false;
      this.setState({
        networkUploading: true,
        buttonText: BUTTON_LOADING_TEXT
      });
      options.onFetch(this.networkUrl).then(function () {
        _this6.setState({
          networkImage: {},
          networkUploading: false,
          buttonText: BUTTON_TEXT
        });
        showUploadPopup(false);
      }, function () {
        !options.silent && _notify2['default'].error('提取失败，请确认图片地址是否正确');
        _this6.setState({
          networkUploading: false,
          buttonText: BUTTON_TEXT
        });
      });
    }
  }]);
  return UploadPopup;
}(_react.Component);

UploadPopup.defaultProps = {
  networkImage: {},
  networkUploading: false,
  buttonText: BUTTON_TEXT,
  options: {},
  className: ''
};

exports['default'] = UploadPopup;