deer-ui
Version:
React.js UI components for PC Web
246 lines (204 loc) • 10.4 kB
JavaScript
;
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;