qm-ui/lib/TableUI/index.js

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

'use strict';

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

var _table = require('antd/lib/table');

var _table2 = _interopRequireDefault(_table);

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 Table 基于Ant的实现
                    */


var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _immutable = require('immutable');

var _objectAssign = require('object-assign');

var _objectAssign2 = _interopRequireDefault(_objectAssign);

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 TableUI = (_temp = _class = function (_Component) {
  _inherits(TableUI, _Component);

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

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

    _this.onSorted = function (sorter) {
      if (sorter && sorter['field']) {
        var field = sorter.field,
            order = sorter.order;

        _this.props.onSortChange({ index: field, value: order });
      } else {
        _this.props.onSortChange({});
      }
    };

    _this.onSelect = function (record, selected) {
      var _this$props = _this.props,
          cellKey = _this$props.cellKey,
          cellSelected = _this$props.cellSelected,
          onCellSelect = _this$props.onCellSelect,
          cellSelectType = _this$props.cellSelectType;

      var cellSelect = cellSelected && cellSelected.toJS ? cellSelected.toJS() : cellSelected;
      if (cellSelectType == 'radio') {}
      if (selected) {
        cellSelect[record[cellKey]] = record;
      } else {
        delete cellSelect[record[cellKey]];
      }
      onCellSelect((0, _immutable.fromJS)(cellSelect));
    };

    _this.onSelectAll = function (selected, selectedRows, changeRows) {
      var _this$props2 = _this.props,
          cellKey = _this$props2.cellKey,
          cellSelected = _this$props2.cellSelected,
          onCellSelect = _this$props2.onCellSelect,
          cellSelectType = _this$props2.cellSelectType;

      var cellSelect = cellSelected && cellSelected.toJS ? cellSelected.toJS() : cellSelected;
      if (selected) {
        changeRows.forEach(function (v) {
          cellSelect[v[cellKey]] = v;
        });
      } else {
        changeRows.forEach(function (v) {
          delete cellSelect[v[cellKey]];
        });
      }
      onCellSelect((0, _immutable.fromJS)(cellSelect));
    };

    return _this;
  }

  /**
   * 渲染 ｜ table props参数封装逻辑
   */


  _createClass(TableUI, [{
    key: 'render',
    value: function render() {
      var _this2 = this;

      //props
      var _props = this.props,
          columns = _props.columns,
          cellSelected = _props.cellSelected,
          cellSelectLimit = _props.cellSelectLimit,
          cellKey = _props.cellKey,
          cellSelectType = _props.cellSelectType,
          dataSorted = _props.dataSorted,
          rowSelection = _props.rowSelection;


      if (!!cellKey) {
        rowSelection = (0, _objectAssign2.default)({
          type: cellSelectType,
          selectedRowKeys: Object.keys(cellSelected),
          getCheckboxProps: !!cellSelectLimit ? undefined : function (record) {
            return {
              disabled: cellSelectLimit.includes(record.key)
            };
          },
          onSelect: function onSelect(record, selected, selectedRows) {
            return _this2.onSelect(record, selected, selectedRows);
          },
          onSelectAll: function onSelectAll(selected, selectedRows, changeRows) {
            return _this2.onSelectAll(selected, selectedRows, changeRows);
          }
        }, rowSelection);
      }

      //columns | 这里的show之所以没在service里做是因为？
      columns = columns.filter(function (v) {
        return v.show == undefined || v.show == true || typeof v.show === 'function' && v.show();
      });
      return _react2.default.createElement(_table2.default, _extends({}, this.props, {
        pagination: false,
        columns: columns,
        rowSelection: rowSelection,
        onChange: function onChange(p, f, s) {
          return _this2.onSorted(s);
        }
      }));
    }

    /**
     * ant Table 分页,sort,filter回调
     */


    /**
     * 行勾选回调
     */


    /**
     * 批量勾选||本页全选回调
     */

  }]);

  return TableUI;
}(_react.Component), _class.defaultProps = {
  rowSelection: undefined,
  columns: (0, _immutable.fromJS)([]), //表格列对象
  dataSource: (0, _immutable.fromJS)([]), //数据数组	Array
  dataSorted: (0, _immutable.fromJS)([]), //排序字段集合
  dataFilter: (0, _immutable.fromJS)([]), //数据数组	Array
  cellKey: '', //行操作主键，若为空则不做选择
  cellSelectType: 'checkout', //行旋转方式，checkout:多选；radio:单选
  cellSelected: (0, _immutable.fromJS)({}), //行选择集合
  cellSelectLimit: (0, _immutable.fromJS)([]), //行操作限制选择列 ，若为Function;则做计算过滤。

  onSortChange: noop, //
  onFilterChange: noop, //行条件过滤 ｜ 只支持服务器端条件过滤
  onCellSelect: noop, //行选择
  onRowClick: noop //row clickHandle   [Function(record, index)]
}, _temp);
exports.default = TableUI;