qm-ui/lib/ToolbarUI.js

千米公有云管理端UI基础组件库

'use strict';

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

var _row = require('antd/lib/row');

var _row2 = _interopRequireDefault(_row);

var _col = require('antd/lib/col');

var _col2 = _interopRequireDefault(_col);

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; /**
                    * @author gcy[of1518]
                    * @date 16/10/11
                    *
                    * @description ToolbarUI 基于AntD的实现
                    */


var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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 noop = function noop() {
  return undefined;
};

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

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

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

    var model = _this.props.model;

    var modelObj = {
      small: 8,
      default: 12,
      large: 18
    };
    _this.state = {
      model: modelObj[model] || (!isNaN(model) && model >= 0 && model <= 24 ? model : 8)
    };
    return _this;
  }

  _createClass(ToolbarUI, [{
    key: 'render',
    value: function render() {
      var left = [];
      var right = [];
      var model = this.state.model;

      var props = this.props;
      var dataTotal = props.dataTotal,
          formData = props.formData,
          formSource = props.formSource,
          dataSource = props.dataSource,
          cellSelected = props.cellSelected,
          columns = props.columns,
          onRefresh = props.onRefresh,
          onCurrentRefresh = props.onCurrentRefresh,
          children = props.children;


      var extraProps = {
        dataTotal: dataTotal,
        formData: formData,
        formSource: formSource,
        dataSource: dataSource,
        cellSelected: cellSelected,
        columns: columns,
        onRefresh: onRefresh,
        onCurrentRefresh: onCurrentRefresh
      };

      if (children instanceof Array) {
        children.map(function (c, k) {
          if (typeof c === 'function') {
            left.push(c(extraProps));
          } else if (_react2.default.isValidElement(c)) {
            if (c && c.type && !!c.type.contextTypes) {
              //如果有上下文，直接返回
              c.props.right == undefined ? left.push(c) : right.push(c);
            } else {
              var _onClick = c.props.onClick;
              c.props.right == undefined ? left.push(_react2.default.cloneElement(c, _extends({}, extraProps, {
                onClick: function onClick(e) {
                  return _onClick(e, extraProps);
                }
              }))) : right.push(_react2.default.cloneElement(c, _extends({}, extraProps, {
                onClick: function onClick(e) {
                  return _onClick(e, extraProps);
                }
              })));
            }
          }
        });
      } else if (_react2.default.isValidElement(props.children)) {
        var c = props.children;
        if (c && c.type && !!c.type.contextTypes) {
          //如果有上下文，直接返回
          c.props.right == undefined ? left.push(c) : right.push(c);
        } else {
          var _onClick2 = c.props.onClick;
          c.props.right == undefined ? left.push(_react2.default.cloneElement(c, _extends({}, extraProps, {
            onClick: function onClick(e) {
              return _onClick2(e, extraProps);
            }
          }))) : right.push(_react2.default.cloneElement(c, _extends({}, extraProps, {
            onClick: function onClick(e) {
              return _onClick2(e, extraProps);
            }
          })));
        }
      }

      return _react2.default.createElement(
        _row2.default,
        { className: 'table-toolbar' },
        _react2.default.createElement(
          _col2.default,
          { span: model },
          left.length == 0 ? null : left
        ),
        _react2.default.createElement(
          _col2.default,
          { span: 24 - model, className: 'text-right' },
          right.length == 0 ? null : right
        )
      );
    }
  }]);

  return ToolbarUI;
}(_react.Component), _class.defaultProps = {
  model: 'default', //'simple' || 'default' || 'large'  or num(0<${num}<24)
  dataTotal: 0,
  dataSource: [],
  formSource: {},
  formData: {},
  columns: [],
  cellSelected: {},

  rowSelectClear: noop, //清空所选列集合
  onRefresh: noop, //
  onCurrentRefresh: noop //
}, _temp);
exports.default = ToolbarUI;