jc-biz-components/lib/jc-sortable-upload/index.js

jc component library based on Antd

'use strict';

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

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

var _extends3 = _interopRequireDefault(_extends2);

var _upload = require('antd/lib/upload');

var _upload2 = _interopRequireDefault(_upload);

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

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

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _reactDom = require('react-dom');

var _reactDom2 = _interopRequireDefault(_reactDom);

var _utils = require('../jc-upload/utils');

var _modal = require('../jc-modal');

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

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

  function SortableUpload() {
    var _ref;

    var _temp, _this, _ret;

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

    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 = SortableUpload.__proto__ || Object.getPrototypeOf(SortableUpload)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
      mouseInAction: false
    }, _this.onChange = function (info) {
      _this.fileList = info.fileList;
      var onChange = _this.props.onChange;

      if (onChange && info.file && info.file.originFileObj || !info.file) {
        onChange(info);
      }
    }, _temp), (0, _possibleConstructorReturn3['default'])(_this, _ret);
  }

  (0, _createClass3['default'])(SortableUpload, [{
    key: 'handleOrderChange',
    value: function handleOrderChange(i, index) {
      if (this.fileList) {
        var modifyFileList = (0, _utils.changeIndex)(this.fileList[i], this.fileList, index);
        this.Upload.onChange({
          fileList: modifyFileList
        });
      }
    }
  }, {
    key: 'componentDidUpdate',
    value: function componentDidUpdate() {
      var _this2 = this;

      if (this.props.needOrder) {
        (_reactDom2['default'].findDOMNode(this).querySelectorAll('.ant-upload-list-item') || []).forEach(function (element, i) {
          var node = element.querySelector('.' + _this2.props.prefixCls + '-order');
          if (!node) {
            var newDiv = document.createElement('span');
            newDiv.className = _this2.props.prefixCls + '-order';
            element.appendChild(newDiv);
            node = newDiv;
          }
          _reactDom2['default'].render(_react2['default'].createElement(
            'span',
            {
              onMouseOver: function onMouseOver() {
                _this2.setState({
                  mouseInAction: true
                });
              },
              onMouseOut: function onMouseOut() {
                _this2.setState({
                  mouseInAction: false
                });
              }
            },
            _react2['default'].createElement(_icon2['default'], {
              style: { paddingRight: 8 },
              type: 'left',
              onClick: _this2.handleOrderChange.bind(_this2, i, 0)
            }),
            _react2['default'].createElement(_icon2['default'], {
              style: { paddingLeft: 8 },
              type: 'right',
              onClick: _this2.handleOrderChange.bind(_this2, i, 1)
            })
          ), node);
        });
      }
    }
  }, {
    key: 'render',
    value: function render() {
      var _this3 = this;

      var uploadButton = _react2['default'].createElement(
        'div',
        null,
        _react2['default'].createElement(_icon2['default'], { type: 'plus' }),
        _react2['default'].createElement(
          'div',
          { className: 'ant-upload-text' },
          '\u56FE\u7247\u4E0A\u4F20'
        )
      );
      return _react2['default'].createElement(
        _upload2['default'],
        (0, _extends3['default'])({
          ref: function ref(Upload) {
            _this3.Upload = _upload2['default'];
          },
          className: this.props.prefixCls + ' ' + (this.state.mouseInAction ? this.props.prefixCls + '-hover' : ''),
          onPreview: function onPreview(file) {
            var html = _react2['default'].createElement('img', { alt: 'preview', style: { width: '100%' }, src: file.url });
            (0, _modal.showModalWrapper)(html);
          }
        }, this.props, {
          prefixCls: undefined,
          onChange: this.onChange.bind(this)
        }),
        (this.fileList || []).length >= this.props.max ? null : this.props.children || uploadButton
      );
    }
  }]);
  return SortableUpload;
}(_react.Component);

SortableUpload.propTypes = {
  needOrder: _propTypes2['default'].bool,
  max: _propTypes2['default'].number
};
SortableUpload.defaultProps = {
  needOrder: false,
  max: 999999,
  prefixCls: 'jc-sortable-upload',
  beforeUpload: _utils.beforeUpload
};
exports['default'] = SortableUpload;
module.exports = exports['default'];