deer-ui/lib/table/index.js

React.js UI components for PC Web

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

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

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));

var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));

var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));

var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));

var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));

var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

var _react = _interopRequireWildcard(require("react"));

var _classnames = _interopRequireDefault(require("classnames"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _spin = _interopRequireDefault(require("../spin"));

var _empty = _interopRequireDefault(require("../empty"));

var _checkbox = _interopRequireDefault(require("../checkbox"));

function _createSuper(Derived) { return function () { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (_isNativeReflectConstruct()) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }

function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }

var Table = /*#__PURE__*/function (_PureComponent) {
  (0, _inherits2.default)(Table, _PureComponent);

  var _super = _createSuper(Table);

  function Table() {
    var _this;

    (0, _classCallCheck2.default)(this, Table);

    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    _this = _super.call.apply(_super, [this].concat(args));
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
      selectedRows: [],
      //选中行数组
      baseSelectedRows: [],
      //默认选中
      isSelectAll: false //是否全选

    });
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onRowCheckboxChange", function (selectedRow) {
      return function (e) {
        var checked = e.target.checked;
        var selectedRows = (0, _toConsumableArray2.default)(_this.state.baseSelectedRows);

        if (checked) {
          selectedRows.push(selectedRow);
        } else {
          selectedRows = selectedRows.filter(function (row) {
            return JSON.stringify(selectedRow) !== JSON.stringify(row);
          });
        }

        var selectedRowKeys = selectedRows.map(function (_ref) {
          var key = _ref.key;
          return key;
        });

        _this.setState({
          selectedRows: selectedRows,
          baseSelectedRows: selectedRows
        });

        if (selectedRows.length < 1) {
          _this.setState({
            isSelectAll: false
          });
        }

        if (_this.props.rowSelection && _this.props.rowSelection.onChange) {
          _this.props.rowSelection.onChange(selectedRowKeys, selectedRows);
        }
      };
    });
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "selectedAllChange", function (e) {
      var isSelectAll = e.target.checked;
      var selectedRows = (0, _toConsumableArray2.default)(_this.dataSource).filter(function (item, index) {
        return !_this.rows[index];
      });
      var baseSelectedRows = (0, _toConsumableArray2.default)(_this.state.baseSelectedRows);

      if (isSelectAll) {
        var _selectedRows;

        (_selectedRows = selectedRows).unshift.apply(_selectedRows, (0, _toConsumableArray2.default)(baseSelectedRows));
      } else {
        selectedRows = [];
      }

      var selectedRowKeys = selectedRows.map(function (_ref2) {
        var key = _ref2.key;
        return key;
      });

      _this.setState({
        isSelectAll: isSelectAll,
        selectedRows: selectedRows,
        baseSelectedRows: selectedRows
      });

      if (_this.props.rowSelection && _this.props.rowSelection.onChange) {
        _this.props.rowSelection.onChange(selectedRowKeys, selectedRows);
      }
    });
    return _this;
  }

  (0, _createClass2.default)(Table, [{
    key: "renderLoading",
    value: function renderLoading() {
      var loading = this.props.loading;
      return loading ? /*#__PURE__*/_react.default.createElement(_spin.default, null) : null;
    }
  }, {
    key: "render",
    value: function render() {
      var _cls,
          _this2 = this;

      var _this$props = this.props,
          prefixCls = _this$props.prefixCls,
          columns = _this$props.columns,
          loading = _this$props.loading,
          loadingTip = _this$props.loadingTip,
          bordered = _this$props.bordered,
          showHeader = _this$props.showHeader,
          hover = _this$props.hover,
          rowSelection = _this$props.rowSelection,
          rowKey = _this$props.rowKey;
      var _this$state = this.state,
          isSelectAll = _this$state.isSelectAll,
          selectedRows = _this$state.selectedRows;
      this.rows = {};
      return /*#__PURE__*/_react.default.createElement("div", {
        className: "".concat(prefixCls)
      }, /*#__PURE__*/_react.default.createElement(_spin.default, {
        spinning: loading,
        tip: loadingTip
      }, /*#__PURE__*/_react.default.createElement("div", {
        className: (0, _classnames.default)("".concat(prefixCls, "-header"), (_cls = {}, (0, _defineProperty2.default)(_cls, "".concat(prefixCls, "-header-hideHeader"), !showHeader), (0, _defineProperty2.default)(_cls, "".concat(prefixCls, "-header-noBottomLine"), this.dataSource.length === 0), _cls))
      }, rowSelection && /*#__PURE__*/_react.default.createElement("div", {
        className: (0, _classnames.default)("".concat(prefixCls, "-header-td"), (0, _defineProperty2.default)({}, "".concat(prefixCls, "-header-td-bordered"), bordered))
      }, /*#__PURE__*/_react.default.createElement(_checkbox.default, {
        onChange: this.selectedAllChange,
        checked: isSelectAll
      })), columns.map(function (item, index) {
        return /*#__PURE__*/_react.default.createElement("div", {
          className: (0, _classnames.default)("".concat(prefixCls, "-header-td"), (0, _defineProperty2.default)({}, "".concat(prefixCls, "-header-td-bordered"), bordered)),
          key: index
        }, item.title);
      })), /*#__PURE__*/_react.default.createElement("div", {
        className: "".concat(prefixCls, "-content")
      }, this.dataSource.length > 0 ? this.dataSource.map(function (item, index) {
        var _cls4;

        var checkboxProps = rowSelection && rowSelection.getCheckboxProps && rowSelection.getCheckboxProps(item) || {};
        _this2.rows[index] = checkboxProps.disabled || false;
        var isChecked = selectedRows && !!selectedRows.find(function (row) {
          return row[rowKey] === item[rowKey];
        });
        return /*#__PURE__*/_react.default.createElement("div", {
          className: (0, _classnames.default)("".concat(prefixCls, "-content-tr"), (_cls4 = {}, (0, _defineProperty2.default)(_cls4, "".concat(prefixCls, "-content-tr-bordered"), bordered), (0, _defineProperty2.default)(_cls4, "".concat(prefixCls, "-content-tr-hover"), hover), _cls4)),
          key: item[rowKey]
        }, rowSelection && /*#__PURE__*/_react.default.createElement("div", {
          className: (0, _classnames.default)("".concat(prefixCls, "-content-td"), (0, _defineProperty2.default)({}, "".concat(prefixCls, "-content-td-bordered"), bordered))
        }, /*#__PURE__*/_react.default.createElement(_checkbox.default, (0, _extends2.default)({
          checked: !checkboxProps.disabled && isChecked,
          onChange: _this2.onRowCheckboxChange(item)
        }, checkboxProps))), columns.map(function (value) {
          var dataIndex = value.dataIndex,
              render = value.render;
          return /*#__PURE__*/_react.default.createElement("div", {
            className: (0, _classnames.default)("".concat(prefixCls, "-content-td"), (0, _defineProperty2.default)({}, "".concat(prefixCls, "-content-td-bordered"), bordered)),
            key: value.key
          }, render && render(item[dataIndex], item, index) || item[dataIndex]);
        }));
      }) : /*#__PURE__*/_react.default.createElement(_empty.default, null))));
    }
  }, {
    key: "dataSource",
    get: function get() {
      var dataSource = this.props.dataSource;
      return dataSource;
    } //全选

  }]);
  return Table;
}(_react.PureComponent);

(0, _defineProperty2.default)(Table, "defaultProps", {
  prefixCls: 'deer-ui-table',
  dataSource: [],
  columns: [],
  loading: false,
  loadingTip: "",
  bordered: false,
  showHeader: true,
  hover: false,
  rowSelection: false,
  rowKey: 'key'
});
(0, _defineProperty2.default)(Table, "propTypes", {
  prefixCls: _propTypes.default.string.isRequired,
  dataSource: _propTypes.default.array,
  columns: _propTypes.default.array,
  loading: _propTypes.default.bool,
  loadingTip: _propTypes.default.string,
  bordered: _propTypes.default.bool,
  showHeader: _propTypes.default.bool,
  hover: _propTypes.default.bool,
  rowKey: _propTypes.default.string,
  rowSelection: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.shape({
    getCheckboxProps: _propTypes.default.func,
    onChange: _propTypes.default.func
  })])
});
var _default = Table;
exports.default = _default;