zent/lib/upload/Upload.js

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

'use strict';

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

var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');

var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);

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 _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);

var _dialog = require('../dialog');

var _dialog2 = _interopRequireDefault(_dialog);

var _identity = require('lodash/identity');

var _identity2 = _interopRequireDefault(_identity);

var _UploadPopup = require('./components/UploadPopup');

var _UploadPopup2 = _interopRequireDefault(_UploadPopup);

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

var _FileInput2 = _interopRequireDefault(_FileInput);

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

/**
 * 上传图片组件
 * @author huangshiyu <huangshiyu@youzan.com>
 */

var promiseNoop = function promiseNoop() {
  return new Promise(function (resolve) {
    resolve([]);
  });
};

var _ref = _react2['default'].createElement(
  'span',
  null,
  '+'
);

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

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

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

    _this.showUpload = function () {
      var visible = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
      var _this$props = _this.props,
          localOnly = _this$props.localOnly,
          maxAmount = _this$props.maxAmount;


      if (!localOnly || maxAmount !== 1) {
        // 直接打开本地文件
        _this.setState({
          visible: visible
        });
      }
    };

    _this.state = {
      visible: false,
      activeId: 'materials'
    };
    _this.showUpload = _this.showUpload.bind(_this);
    _this.closePopup = _this.closePopup.bind(_this);
    return _this;
  }

  (0, _createClass3['default'])(Upload, [{
    key: 'componentDidMount',
    value: function componentDidMount() {
      if (this.props.auto) {
        this.showUpload();
      }
    }
  }, {
    key: 'componentWillUnmount',
    value: function componentWillUnmount() {
      this.isUnmount = true;
    }
  }, {
    key: 'closePopup',
    value: function closePopup() {
      this.setState({
        visible: false
      });
    }
  }, {
    key: 'render',
    value: function render() {
      var _props = this.props,
          trigger = _props.trigger,
          prefix = _props.prefix,
          className = _props.className,
          triggerClassName = _props.triggerClassName,
          tips = _props.tips,
          children = _props.children,
          triggerInline = _props.triggerInline,
          materials = _props.materials,
          withoutPopup = _props.withoutPopup,
          uploadOptions = (0, _objectWithoutProperties3['default'])(_props, ['trigger', 'prefix', 'className', 'triggerClassName', 'tips', 'children', 'triggerInline', 'materials', 'withoutPopup']);
      var visible = this.state.visible;


      var Node = trigger;

      // 防止类名重复
      if (className === prefix + '-upload') {
        className = '';
      }

      var dialogClassName = (0, _classnames2['default'])([prefix + '-upload', className]);

      className = (0, _classnames2['default'])([dialogClassName, {
        inline: triggerInline
      }]);

      return withoutPopup ? this.renderUploadPopup(uploadOptions) : _react2['default'].createElement(
        'div',
        { className: className },
        _react2['default'].createElement(
          'div',
          {
            className: triggerClassName,
            onClick: this.showUpload.bind(this, true)
          },
          children || Node && _react2['default'].createElement(Node, null) || _ref,
          uploadOptions.localOnly && uploadOptions.maxAmount === 1 ? _react2['default'].createElement(_FileInput2['default'], uploadOptions) : ''
        ),
        _react2['default'].createElement(
          'p',
          { className: prefix + '-upload-tips' },
          tips
        ),
        _react2['default'].createElement(
          _dialog2['default'],
          {
            title: '\u56FE\u7247\u9009\u62E9',
            visible: visible,
            className: dialogClassName,
            onClose: this.closePopup
          },
          this.renderUploadPopup(uploadOptions)
        )
      );
    }

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

  }, {
    key: 'renderUploadPopup',
    value: function renderUploadPopup(options) {
      var _props2 = this.props,
          prefix = _props2.prefix,
          accept = _props2.accept,
          className = _props2.className;

      return _react2['default'].createElement(_UploadPopup2['default'], {
        prefix: prefix + '-upload',
        options: options,
        accept: accept,
        className: className,
        showUploadPopup: this.showUpload
      });
    }

    /**
     * 设置弹框是否显示
     * @param [boolean] visible 是否显示弹框
     */

  }]);
  return Upload;
}(_react.Component);

Upload.defaultProps = {
  prefix: 'zent',
  className: 'zent-upload',
  triggerClassName: 'zent-upload-trigger',
  maxSize: 1 * 1024 * 1024,
  maxAmount: 0,
  accept: 'image/gif, image/jpeg, image/png',
  tips: '',
  localOnly: false,
  auto: false,
  fetchUrl: '',
  tokenUrl: '',
  uploadUrl: '//upload.qbox.me',
  filterFiles: _identity2['default'],
  onFetch: promiseNoop,
  onUpload: promiseNoop,
  triggerInline: false,
  silent: false,
  withoutPopup: false
};

exports['default'] = Upload;