qm-bus/lib/GalleryBox/components/PictureItem.js

千米公有云业务组件库

'use strict';

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

var _QMIcon2 = require('qm-ui/lib/QMIcon');

var _QMIcon3 = _interopRequireDefault(_QMIcon2);

var _QMImg2 = require('qm-ui/lib/QMImg');

var _QMImg3 = _interopRequireDefault(_QMImg2);

var _checkbox = require('antd/lib/checkbox');

var _checkbox2 = _interopRequireDefault(_checkbox);

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _class, _temp, _class2, _temp2;

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _immutable = require('immutable');

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

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var PicItem = (_temp = _class = function (_Component) {
  _inherits(PicItem, _Component);

  function PicItem(props) {
    _classCallCheck(this, PicItem);

    var _this = _possibleConstructorReturn(this, (PicItem.__proto__ || Object.getPrototypeOf(PicItem)).call(this, props));

    _this.onSelect = function (item) {
      var _this$props = _this.props,
          cellSelected = _this$props.cellSelected,
          onCellSelect = _this$props.onCellSelect;

      var _selects = cellSelected;
      if (_selects.has(item.id)) {
        _selects = _selects.delete(item.id);
      } else {
        _selects = _selects.set(item.id, (0, _immutable.fromJS)(item));
      }
      onCellSelect(_selects);
    };

    return _this;
  }

  _createClass(PicItem, [{
    key: 'render',
    value: function render() {
      var _item = this.props.value.toJS();
      var _props = this.props,
          limit = _props.limit,
          _selects = _props.cellSelected;

      var _checked = _selects.has(_item.id);
      var _cateProps = {};
      if (_item.isCate == 1) {
        _cateProps.onClick = this._onCateClick.bind(this, _item);
      } else {
        _cateProps.onClick = _selects.size >= limit && !_checked ? function () {} : this.onSelect.bind(this, _item);
      }
      var disabledProps = {};
      if (_selects.size >= limit && !_checked) {
        disabledProps = { disabled: true };
      }
      return _react2.default.createElement(
        'div',
        _extends({ className: _checked ? 'picture-item checked' : 'picture-item' }, _cateProps),
        _react2.default.createElement(Items, { item: _item }),
        _react2.default.createElement(
          'h6',
          { className: 'img-title', title: _item.name },
          _item.name
        ),
        _item.isCate == 1 ? null : _react2.default.createElement(_checkbox2.default, _extends({ className: 'img-checkbox', checked: _checked }, disabledProps))
      );
    }

    /**
     * 勾选
     */

  }, {
    key: '_onCateClick',


    /**
     *
     * @param {*} _item
     */
    value: function _onCateClick(_item) {
      this.props.onClick(_item.id);
      this.props.onFormReset('simple');
      this.props.elementOnChange({
        index: 'cateId',
        source: { index: 'cateId', value: _item.id, group: 'simple' }
      });
      this.props.onRefresh();
    }
  }]);

  return PicItem;
}(_react.Component), _class.defaultProps = {
  submit: function submit() {
    return undefined;
  }
}, _temp);

/**
 * Image
 */

exports.default = PicItem;
var Items = (_temp2 = _class2 = function (_React$Component) {
  _inherits(Items, _React$Component);

  function Items() {
    _classCallCheck(this, Items);

    return _possibleConstructorReturn(this, (Items.__proto__ || Object.getPrototypeOf(Items)).apply(this, arguments));
  }

  _createClass(Items, [{
    key: 'render',
    value: function render() {
      var _props2 = this.props,
          item = _props2.item,
          click = _props2.click,
          preview = _props2.preview;

      if (item.isCate === '1') {
        // folder
        return _react2.default.createElement(
          'div',
          { className: 'img-shape', 'data-gh-name': '\u8FDB\u5165\u6587\u4EF6\u5939', onClick: function onClick() {
              return click(item);
            } },
          _react2.default.createElement(
            'div',
            { className: 'img-box' },
            _react2.default.createElement('span', { className: 'empty' }),
            _react2.default.createElement('img', { src: '//pic.qianmi.com/qmui/v0.2/img/folder.png' })
          )
        );
      }

      if (item.fileType === 'video') {
        // video
        return _react2.default.createElement(
          'div',
          { className: 'img-shape', onClick: function onClick() {
              return preview(item);
            } },
          _react2.default.createElement(
            'div',
            { className: 'video-box' },
            _react2.default.createElement('video', { src: _QMImg3.default.src({ src: item.path }), preload: 'metadata' })
          ),
          _react2.default.createElement(
            'div',
            { className: 'video-play' },
            _react2.default.createElement(_QMIcon3.default, { type: 'qidong', style: { color: '#fff' } })
          )
        );
      } else {
        // image
        return _react2.default.createElement(
          'div',
          { className: 'img-shape', onClick: function onClick() {
              return preview(item);
            } },
          _react2.default.createElement(
            'div',
            { className: 'img-box' },
            _react2.default.createElement(_QMImg3.default, { src: item.path })
          )
        );
      }
    }
  }]);

  return Items;
}(_react2.default.Component), _class2.defaultProps = {
  item: {},
  preview: function preview() {}
}, _temp2);