@ucloud-pccl/react-components
Version:
UCloud pccl react components
1,108 lines (1,107 loc) • 57.1 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.placeholderKey = exports.deprecatedLogForOnRowSelect = exports.default = exports.TableContext = void 0;
Object.defineProperty(exports, "prefixCls", {
enumerable: true,
get: function get() {
return _style.prefixCls;
}
});
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
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 _newArrowCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/newArrowCheck"));
var _extend2 = _interopRequireDefault(require("lodash/extend"));
var _findLastIndex2 = _interopRequireDefault(require("lodash/findLastIndex"));
var _forEach2 = _interopRequireDefault(require("lodash/forEach"));
var _isEmpty2 = _interopRequireDefault(require("lodash/isEmpty"));
var _filter2 = _interopRequireDefault(require("lodash/filter"));
var _isString2 = _interopRequireDefault(require("lodash/isString"));
var _isNumber2 = _interopRequireDefault(require("lodash/isNumber"));
var _clone2 = _interopRequireDefault(require("lodash/clone"));
var _pick2 = _interopRequireDefault(require("lodash/pick"));
var _find2 = _interopRequireDefault(require("lodash/find"));
var _map2 = _interopRequireDefault(require("lodash/map"));
var _each2 = _interopRequireDefault(require("lodash/each"));
var _isObject2 = _interopRequireDefault(require("lodash/isObject"));
var _once2 = _interopRequireDefault(require("lodash/once"));
var _react = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _createReactContext = _interopRequireDefault(require("create-react-context"));
var _rcTable = _interopRequireDefault(require("../../libs/rc-table"));
var _deprecatedLog = _interopRequireDefault(require("../../utils/deprecatedLog"));
var _Pagination = _interopRequireDefault(require("../../components/Pagination"));
var _Notice = _interopRequireDefault(require("../../components/Notice"));
var _Checkbox = _interopRequireDefault(require("../../components/Checkbox"));
var _Radio = _interopRequireDefault(require("../../components/Radio"));
var _Select = _interopRequireDefault(require("../../components/Select"));
var _Tooltip = _interopRequireDefault(require("../../components/Tooltip"));
var _localeConsumerDecorator = _interopRequireDefault(require("../../components/LocaleProvider/localeConsumerDecorator"));
var _ContainerContext = require("../../components/Popover/ContainerContext");
var _style = require("./style");
var _zh_CN = _interopRequireDefault(require("./locale/zh_CN"));
var _TableRow = _interopRequireDefault(require("./TableRow"));
var _excluded = ["options", "multiple", "onChange"],
_excluded2 = ["pagination", "dataSource", "columns", "rowSelection", "onRowSelect", "contextMenu", "emptyContent", "errorContent", "className", "style", "expandedRowRender", "expandIconAsCell", "expandIconColumnIndex", "defaultExpandAllRows", "title", "footer", "locale", "hideExpandIcon", "onRow", "components", "onExpand", "zebraCrossing", "columnPlaceholder", "tableLayout", "scroll", "customStyle", "size"];
var _this = void 0,
_dec,
_class,
_Table;
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
var noop = function noop() {
(0, _newArrowCheck2.default)(this, _this);
}.bind(void 0);
var deprecatedLogForOnRowSelect = exports.deprecatedLogForOnRowSelect = (0, _once2.default)(function () {
(0, _newArrowCheck2.default)(this, _this);
return (0, _deprecatedLog.default)('Table onRowSelect', 'rowSelection.onChange');
}.bind(void 0));
var placeholderKey = exports.placeholderKey = 'table_column_width_placeholder';
var TableContext = exports.TableContext = (0, _createReactContext.default)();
var missingColumnKeyWarn = function missingColumnKeyWarn() {
(0, _newArrowCheck2.default)(this, _this);
return console.error('Warning: Table column need a unique key');
}.bind(void 0);
var Table = (_dec = (0, _localeConsumerDecorator.default)({
defaultLocale: _zh_CN.default,
localeName: 'Table'
}), _dec(_class = (_Table = /*#__PURE__*/function (_Component) {
function Table(_props) {
var _this3 = this;
var _this2;
(0, _classCallCheck2.default)(this, Table);
_this2 = _callSuper(this, Table, [_props]);
_this2.check = function (props) {
var _this4 = this;
(0, _newArrowCheck2.default)(this, _this3);
var columns = props.columns;
(0, _each2.default)(columns, function (column) {
(0, _newArrowCheck2.default)(this, _this4);
if (column.key === undefined) missingColumnKeyWarn();
}.bind(this));
}.bind(this);
// eslint-disable-next-line react/no-deprecated
_this2.componentWillReceiveProps = function (nextProps) {
var _this5 = this;
(0, _newArrowCheck2.default)(this, _this3);
var rowSelection = nextProps.rowSelection;
if ((0, _isObject2.default)(rowSelection) && 'selectedRowKeys' in rowSelection) {
var selectedRowKeyMap = {};
(0, _each2.default)(rowSelection.selectedRowKeys, function (key) {
(0, _newArrowCheck2.default)(this, _this5);
return selectedRowKeyMap[key] = true;
}.bind(this));
_this2.setState({
selectedRowKeyMap: selectedRowKeyMap
});
}
// pick controlled filter value
_this2.setState({
filtersFromProps: _this2.calFiltersFromProps(nextProps)
});
if ('order' in nextProps) {
var order = _this2.getOrder(nextProps.order, nextProps.columns);
_this2.setState({
order: order
});
}
}.bind(this);
_this2.getOrder = function (order, columns) {
var _this6 = this;
(0, _newArrowCheck2.default)(this, _this3);
if (!order || !columns) return null;
var key = order.key,
state = order.state;
if (!key || !state) return null;
var column = (0, _find2.default)(columns, function (column) {
(0, _newArrowCheck2.default)(this, _this6);
return column.key === key;
}.bind(this));
if (!column) return null;
var columnOrder = column.order,
dataIndex = column.dataIndex;
if (!columnOrder) return null;
var handleOrder = columnOrder.handleOrder;
return {
key: key,
state: state,
dataIndex: dataIndex,
handleOrder: handleOrder
};
}.bind(this);
_this2.calFiltersFromProps = function (_ref2) {
var _this7 = this;
(0, _newArrowCheck2.default)(this, _this3);
var _ref2$columns = _ref2.columns,
columns = _ref2$columns === void 0 ? [] : _ref2$columns;
var filters = {};
// pick filter controlled value
columns.forEach(function (column, i) {
(0, _newArrowCheck2.default)(this, _this7);
var filter = column.filter;
var columnKey = _this2.getColumnKey(column, i);
if (!filter) return;
var filterValue;
if ('value' in filter) {
filterValue = filter.value;
filters[columnKey] = {
value: filterValue
};
}
}.bind(this));
return filters;
}.bind(this);
_this2.calDefaultFilters = function (_ref3) {
var _this8 = this;
(0, _newArrowCheck2.default)(this, _this3);
var _ref3$columns = _ref3.columns,
columns = _ref3$columns === void 0 ? [] : _ref3$columns;
var filters = {};
// pick filter controlled value
columns.forEach(function (column, i) {
(0, _newArrowCheck2.default)(this, _this8);
var filter = column.filter;
if (!filter) return;
var columnKey = _this2.getColumnKey(column, i);
var filterValue;
// pick default value
if ('defaultValue' in filter) {
filterValue = filter.defaultValue;
filters[columnKey] = {
value: filterValue
};
}
}.bind(this));
return filters;
}.bind(this);
_this2.mergeFilters = function (stateFilters, propsFilters, columns) {
var _this9 = this;
(0, _newArrowCheck2.default)(this, _this3);
var filters = _objectSpread(_objectSpread({}, stateFilters), propsFilters);
(0, _each2.default)(filters, function (filter, key) {
var _this10 = this;
(0, _newArrowCheck2.default)(this, _this9);
var column = (0, _find2.default)(columns, function (column, i) {
(0, _newArrowCheck2.default)(this, _this10);
return _this2.getColumnKey(column, i) === key;
}.bind(this));
if (!column || filter.value == null || column.filter.multiple && !filter.value.length) {
delete filters[key];
} else {
filter.column = column;
}
}.bind(this));
return filters;
}.bind(this);
_this2.getExpandedRowKeys = function (dataSource, changedUnExpandedRowKeys) {
var _this11 = this;
(0, _newArrowCheck2.default)(this, _this3);
var flatDataSource = _this2.flatDataSource(dataSource);
var expandedRowKeys = [];
(0, _each2.default)(flatDataSource, function (item) {
(0, _newArrowCheck2.default)(this, _this11);
var key = item.key;
if (!changedUnExpandedRowKeys[key]) {
expandedRowKeys.push(key);
}
}.bind(this));
return expandedRowKeys;
}.bind(this);
/**
* @deprecated
*/
_this2.deprecatedOnRowSelect = function (selectedRowKeys) {
(0, _newArrowCheck2.default)(this, _this3);
if ('onRowSelect' in _this2.props) {
deprecatedLogForOnRowSelect();
_this2.props.onRowSelect(selectedRowKeys);
}
}.bind(this);
_this2.onSelectedRowKeysChange = function (selectedRowKeyMap) {
var _this12 = this;
(0, _newArrowCheck2.default)(this, _this3);
var rowSelection = _this2.props.rowSelection;
if (!rowSelection) return;
var selectedRowKeys = [];
(0, _each2.default)(selectedRowKeyMap, function (selected, key) {
(0, _newArrowCheck2.default)(this, _this12);
selected && selectedRowKeys.push(key);
}.bind(this));
if ((0, _isObject2.default)(rowSelection)) {
if (rowSelection.onChange) {
rowSelection.onChange(selectedRowKeys);
}
if (!('selectedRowKeys' in rowSelection)) {
_this2.setState({
selectedRowKeyMap: selectedRowKeyMap
});
}
} else {
_this2.setState({
selectedRowKeyMap: selectedRowKeyMap
});
}
_this2.deprecatedOnRowSelect(selectedRowKeys);
}.bind(this);
_this2.onColumnConfigChange = function (config) {
(0, _newArrowCheck2.default)(this, _this3);
var onColumnConfigChange = _this2.props.onColumnConfigChange;
_this2.setState({
columnConfig: config
});
onColumnConfigChange(config);
}.bind(this);
_this2.handleSearch = function (v) {
(0, _newArrowCheck2.default)(this, _this3);
if (v !== _this2.state.searchValue) {
_this2.setState({
pagination: _objectSpread(_objectSpread({}, _this2.state.pagination), {}, {
current: 1
})
});
_this2.handleConditionChange({
searchValue: v
});
}
}.bind(this);
_this2.handleConditionChange = function (stateCondition) {
var _this13 = this;
var callbackCondition = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
stateCondition = _objectSpread(_objectSpread({}, (0, _pick2.default)(_this2.state, ['order', 'filters', 'searchValue'])), stateCondition);
_this2.setState(_objectSpread({}, stateCondition));
var onConditionChange = _this2.props.onConditionChange;
var order = callbackCondition.order,
filters = callbackCondition.filters,
searchValue = callbackCondition.searchValue;
if (!('order' in callbackCondition)) {
order = stateCondition.order;
}
if (!('filters' in callbackCondition)) {
filters = stateCondition.filters;
}
if (!('searchValue' in callbackCondition)) {
searchValue = stateCondition.searchValue;
}
onConditionChange && onConditionChange({
order: order ? (0, _pick2.default)(order, ['key', 'state']) : null,
filters: (0, _map2.default)(filters, function (filter, key) {
(0, _newArrowCheck2.default)(this, _this13);
return {
key: key,
value: filter.value
};
}.bind(this)),
searchValue: searchValue
});
};
_this2.renderFilter = function (column) {
var _this14 = this;
var filterInfo = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
var index = arguments.length > 2 ? arguments[2] : undefined;
var filter = column.filter;
if (!filter) {
return null;
}
var columnKey = _this2.getColumnKey(column, index);
var options = filter.options,
multiple = filter.multiple,
_filter$onChange = filter.onChange,
onChange = _filter$onChange === void 0 ? function () {
(0, _newArrowCheck2.default)(this, _this14);
}.bind(this) : _filter$onChange,
rest = (0, _objectWithoutProperties2.default)(filter, _excluded);
var newOptions = (0, _map2.default)(options, function (option) {
(0, _newArrowCheck2.default)(this, _this14);
return (0, _isObject2.default)(option) ? option : {
value: option
};
}.bind(this));
var value = filterInfo.value;
var finalValue = value == null || multiple && !value.length ? null : value;
return /*#__PURE__*/_react.default.createElement(_Select.default, (0, _extends2.default)({
options: newOptions,
value: finalValue,
onChange: function (value) {
(0, _newArrowCheck2.default)(this, _this14);
_this2.handleFilter(columnKey, value == null || multiple && !value.length ? null : value);
onChange(value);
}.bind(this),
className: "".concat(_style.prefixCls, "-filter"),
renderSelector: function (content, active) {
(0, _newArrowCheck2.default)(this, _this14);
return /*#__PURE__*/_react.default.createElement(_style.FilterIcon, {
key: "icon",
type: "filter",
active: active
});
}.bind(this),
multiple: multiple
}, rest));
};
_this2.handleFilter = function (key, value) {
(0, _newArrowCheck2.default)(this, _this3);
var finalFilters = _this2.mergeFilters(_this2.state.filters, _objectSpread(_objectSpread({}, _this2.state.filtersFromProps), {}, (0, _defineProperty2.default)({}, key, {
value: value
})), _this2.props.columns);
_this2.setState({
pagination: _objectSpread(_objectSpread({}, _this2.state.pagination), {}, {
current: 1
})
});
_this2.handleConditionChange({
filters: finalFilters
});
}.bind(this);
_this2.clearFilter = function () {
(0, _newArrowCheck2.default)(this, _this3);
_this2.handleConditionChange({
filters: {},
searchValue: ''
}, {
filters: {}
});
}.bind(this);
_this2.renderOrder = function (order, key, dataIndex) {
var _this15 = this;
var state = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'none';
if (!order) {
return null;
}
var handleOrder = order.handleOrder;
return /*#__PURE__*/_react.default.createElement(_style.SortIcon, {
type: {
none: 'sort',
desc: 'line-arrow-down',
asc: 'line-arrow-up'
}[state],
onClick: function () {
(0, _newArrowCheck2.default)(this, _this15);
_this2.handleOrder(key, {
dataIndex: dataIndex,
handleOrder: handleOrder,
state: state
});
}.bind(this)
});
};
_this2.handleOrder = function (key, _ref4) {
(0, _newArrowCheck2.default)(this, _this3);
var dataIndex = _ref4.dataIndex,
handleOrder = _ref4.handleOrder,
state = _ref4.state;
var order = state === 'asc' ? null : {
key: key,
dataIndex: dataIndex,
handleOrder: handleOrder,
state: {
none: 'desc',
desc: 'asc'
}[state]
};
// controlled
if ('order' in _this2.props) {
_this2.handleConditionChange({}, {
order: order
});
} else {
_this2.handleConditionChange({
order: order
});
}
}.bind(this);
_this2.flatDataSource = function () {
var _this16 = this;
var dataSource = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
var childrenName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'children';
var result = [];
var push = function push(record) {
(0, _newArrowCheck2.default)(this, _this16);
var index = result.length;
result.push({
record: record,
index: index,
key: _this2.getRowKey(record, index)
});
}.bind(this);
var _loop = function loop(array) {
var _this17 = this;
(0, _newArrowCheck2.default)(this, _this16);
array.forEach(function (record) {
(0, _newArrowCheck2.default)(this, _this17);
if (record[childrenName]) {
var newRecord = _objectSpread({}, record);
delete newRecord[childrenName];
push(newRecord);
if (record[childrenName].length > 0) {
_loop(record[childrenName]);
}
} else {
push(record);
}
}.bind(this));
}.bind(this);
_loop(dataSource);
return result;
};
_this2.getDataSource = function (filters) {
var _this18 = this;
(0, _newArrowCheck2.default)(this, _this3);
var _this2$props = _this2.props,
dataSource = _this2$props.dataSource,
handleSearch = _this2$props.handleSearch,
doNotHandleCondition = _this2$props.doNotHandleCondition;
var _this2$state = _this2.state,
order = _this2$state.order,
searchValue = _this2$state.searchValue;
var data = (0, _clone2.default)(dataSource);
var doFilter = function doFilter(dataSource, filter) {
var _this19 = this;
(0, _newArrowCheck2.default)(this, _this18);
var value = filter.value,
columnInfo = filter.column;
var dataIndex = columnInfo.dataIndex,
_columnInfo$filter = columnInfo.filter,
multiple = _columnInfo$filter.multiple,
_columnInfo$filter$ha = _columnInfo$filter.handleFilter,
handleFilter = _columnInfo$filter$ha === void 0 ? function (value, record, filterValue, multiple) {
(0, _newArrowCheck2.default)(this, _this19);
if (value == null) {
return false;
}
if ((0, _isNumber2.default)(value)) {
value = '' + value;
} else if (!(0, _isString2.default)(value)) {
return false;
}
if (!multiple) {
return value.indexOf(filterValue) >= 0;
} else {
for (var i = 0; i < filterValue.length; i++) {
var v = filterValue[i];
if (value.indexOf(v) >= 0) {
return true;
}
}
}
}.bind(this) : _columnInfo$filter$ha;
return (0, _filter2.default)(dataSource, function (record) {
(0, _newArrowCheck2.default)(this, _this19);
return handleFilter(record[dataIndex], record, value, multiple);
}.bind(this));
}.bind(this);
if (!doNotHandleCondition && !(0, _isEmpty2.default)(filters)) {
(0, _forEach2.default)(filters, function (filter, key) {
(0, _newArrowCheck2.default)(this, _this18);
return data = doFilter(data, filter, key);
}.bind(this));
}
var doSearch = function doSearch(dataSource, searchValue) {
var _this20 = this;
(0, _newArrowCheck2.default)(this, _this18);
return dataSource.filter(function (record) {
(0, _newArrowCheck2.default)(this, _this20);
return handleSearch(record, searchValue);
}.bind(this));
}.bind(this);
if (!doNotHandleCondition && searchValue && searchValue.trim()) {
data = doSearch(data, searchValue.trim());
}
var doOrder = function doOrder(dataSource, order) {
var _this21 = this;
(0, _newArrowCheck2.default)(this, _this18);
var dataIndex = order.dataIndex,
handleOrder = order.handleOrder,
state = order.state;
return dataSource.sort(handleOrder ? function () {
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
return handleOrder.apply(void 0, [state].concat(args));
} : {
desc: function desc(a, b) {
(0, _newArrowCheck2.default)(this, _this21);
return a[dataIndex] > b[dataIndex] ? -1 : a[dataIndex] < b[dataIndex] ? 1 : 0;
}.bind(this),
asc: function asc(a, b) {
(0, _newArrowCheck2.default)(this, _this21);
return a[dataIndex] < b[dataIndex] ? -1 : a[dataIndex] > b[dataIndex] ? 1 : 0;
}.bind(this)
}[state]);
}.bind(this);
if (!doNotHandleCondition && order) {
data = doOrder(data, order);
}
var total = data.length;
var pagination = _this2.getPagination();
if (!doNotHandleCondition && pagination !== null) {
var current = pagination.current,
pageSize = pagination.pageSize;
var from = (current - 1) * pageSize;
var to = from + pageSize;
data = data.slice(from, to);
}
return {
dataSource: data,
total: total
};
}.bind(this);
_this2.handleToggleCurrentPage = function (enableKeysOfCurrentPage, checked) {
var _this22 = this;
(0, _newArrowCheck2.default)(this, _this3);
var selectedRowKeyMap = _this2.state.selectedRowKeyMap;
var extendSelectedRowKeyMap = {};
(0, _each2.default)(enableKeysOfCurrentPage, function (key) {
(0, _newArrowCheck2.default)(this, _this22);
extendSelectedRowKeyMap[key] = checked;
}.bind(this));
_this2.onSelectedRowKeysChange(_objectSpread(_objectSpread({}, selectedRowKeyMap), extendSelectedRowKeyMap));
}.bind(this);
_this2.handleSelectRecord = function (key, checked) {
(0, _newArrowCheck2.default)(this, _this3);
var rowSelection = _this2.props.rowSelection;
var selectedRowKeyMap = _this2.state.selectedRowKeyMap;
if (rowSelection.multiple === false) {
_this2.onSelectedRowKeysChange((0, _defineProperty2.default)({}, key, true));
} else {
_this2.onSelectedRowKeysChange(_objectSpread(_objectSpread({}, selectedRowKeyMap), {}, (0, _defineProperty2.default)({}, key, checked)));
}
}.bind(this);
_this2.getRowKey = function (record, index) {
(0, _newArrowCheck2.default)(this, _this3);
var rowKey = _this2.props.rowKey;
var key = typeof rowKey === 'function' ? rowKey(record, index) : record[rowKey];
return key === undefined ? index : key;
}.bind(this);
_this2.getColumnKey = function () {
var column = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
var index = arguments.length > 1 ? arguments[1] : undefined;
var key = column.key;
return (key === undefined ? index : key) + '';
};
_this2.getColumns = function (dataSourceOfCurrentPage, filters) {
var _this23 = this;
(0, _newArrowCheck2.default)(this, _this3);
var _this2$props2 = _this2.props,
columns = _this2$props2.columns,
rowSelection = _this2$props2.rowSelection,
columnPlaceholder = _this2$props2.columnPlaceholder,
locale = _this2$props2.locale,
dataSource = _this2$props2.dataSource;
var _this2$state2 = _this2.state,
_this2$state2$order = _this2$state2.order,
currentOrder = _this2$state2$order === void 0 ? {} : _this2$state2$order,
selectedRowKeyMap = _this2$state2.selectedRowKeyMap,
columnConfig = _this2$state2.columnConfig;
var cloneColumns = columns.map(function (column, index) {
(0, _newArrowCheck2.default)(this, _this23);
return _objectSpread(_objectSpread({}, column), {}, {
index: index
});
}.bind(this));
var newColumns = cloneColumns.filter(function (column) {
(0, _newArrowCheck2.default)(this, _this23);
var key = column.key;
return !columnConfig[key] || !columnConfig[key].hidden;
}.bind(this));
var _generateColumnTitle = function generateColumnTitle(column) {
(0, _newArrowCheck2.default)(this, _this23);
var dataIndex = column.dataIndex,
title = column.title,
renderTitle = column.renderTitle,
order = column.order,
children = column.children,
index = column.index;
var columnKey = _this2.getColumnKey(column, index);
if (children) {
return _objectSpread(_objectSpread({}, column), {}, {
children: children.map(_generateColumnTitle)
});
} else {
return _objectSpread(_objectSpread({}, column), {}, {
title: /*#__PURE__*/_react.default.createElement("div", null, renderTitle ? renderTitle(title) : title, _this2.renderFilter(column, filters[columnKey], index), _this2.renderOrder(order, columnKey, dataIndex, currentOrder && currentOrder.key === columnKey ? currentOrder.state : 'none'))
});
}
}.bind(this);
newColumns = newColumns.map(_generateColumnTitle);
if (rowSelection) {
var flatDataSourceOfCurrentPage = _this2.flatDataSource(dataSourceOfCurrentPage);
var enableDataSourceOfCurrentPage = flatDataSourceOfCurrentPage;
var flatDataSource = _this2.flatDataSource(dataSource);
var enableDataSource = flatDataSource;
var selectionDisabled = rowSelection.disabled;
if (rowSelection.getDisabledOfRow) {
enableDataSourceOfCurrentPage = (0, _filter2.default)(flatDataSourceOfCurrentPage, function (item) {
(0, _newArrowCheck2.default)(this, _this23);
return !rowSelection.getDisabledOfRow(item.record);
}.bind(this));
enableDataSource = (0, _filter2.default)(flatDataSource, function (item) {
(0, _newArrowCheck2.default)(this, _this23);
return !rowSelection.getDisabledOfRow(item.record);
}.bind(this));
}
var selectedEnableDataSourceOfCurrentPage = (0, _filter2.default)(enableDataSourceOfCurrentPage, function (item) {
(0, _newArrowCheck2.default)(this, _this23);
return selectedRowKeyMap[item.key];
}.bind(this));
var selectedEnableDataSource = (0, _filter2.default)(enableDataSource, function (item) {
(0, _newArrowCheck2.default)(this, _this23);
return selectedRowKeyMap[item.key];
}.bind(this));
var selectedEnableDataSourceOfCurrentPageCount = selectedEnableDataSourceOfCurrentPage.length;
var isAllSelected = selectedEnableDataSourceOfCurrentPageCount === enableDataSourceOfCurrentPage.length && selectedEnableDataSourceOfCurrentPageCount > 0;
var selectedCount = (0, _filter2.default)(selectedRowKeyMap, function (v) {
(0, _newArrowCheck2.default)(this, _this23);
return v;
}.bind(this)).length;
var renderSelectedAllCheckbox = function renderSelectedAllCheckbox() {
var _this24 = this;
(0, _newArrowCheck2.default)(this, _this23);
return /*#__PURE__*/_react.default.createElement(_Checkbox.default, {
disabled: selectionDisabled,
onChange: function () {
var _this25 = this;
(0, _newArrowCheck2.default)(this, _this24);
var enableKeysOfCurrentPage = enableDataSourceOfCurrentPage.map(function (item) {
(0, _newArrowCheck2.default)(this, _this25);
return item.key;
}.bind(this));
_this2.handleToggleCurrentPage(enableKeysOfCurrentPage, !isAllSelected);
}.bind(this),
checked: isAllSelected,
indeterminate: !isAllSelected && selectedEnableDataSourceOfCurrentPageCount > 0,
size: "sm"
});
}.bind(this);
newColumns.unshift({
title: rowSelection.multiple === false ? null : rowSelection.selectedTip === false ? renderSelectedAllCheckbox() : /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
visible: selectedCount > 0,
getPopupContainer: _this2.getPopupContainer,
popup: /*#__PURE__*/_react.default.createElement("span", null, locale.selected, " ", selectedCount, ' ', /*#__PURE__*/_react.default.createElement(_style.CancelSelect, {
onClick: function () {
var _this26 = this;
(0, _newArrowCheck2.default)(this, _this23);
var enableKeys = selectedEnableDataSource.map(function (item) {
(0, _newArrowCheck2.default)(this, _this26);
return item.key;
}.bind(this));
_this2.handleToggleCurrentPage(enableKeys, false);
}.bind(this)
}, locale.cancelSelect)),
placement: rowSelection.selectedTip === 'bottom' ? 'bottomLeft' : 'topLeft',
align: {
offset: [-8, 0]
}
}, renderSelectedAllCheckbox()),
key: 'table_row_selection',
width: 32,
fixed: rowSelection.fixed,
onHeaderCell: function onHeaderCell() {
(0, _newArrowCheck2.default)(this, _this23);
return {
className: _style.selectIconHeaderCls
};
}.bind(this),
onCell: function onCell() {
(0, _newArrowCheck2.default)(this, _this23);
return {
className: _style.selectIconCellCls
};
}.bind(this),
render: function render(value, record, index) {
var _this27 = this;
(0, _newArrowCheck2.default)(this, _this23);
var rowKey = _this2.getRowKey(record, index);
var disabled = false;
if (selectionDisabled) {
disabled = true;
} else if (rowSelection.getDisabledOfRow) {
disabled = rowSelection.getDisabledOfRow(record);
}
return rowSelection.multiple === false ? /*#__PURE__*/_react.default.createElement(_Radio.default, {
disabled: disabled,
onChange: function () {
(0, _newArrowCheck2.default)(this, _this27);
return _this2.handleSelectRecord(rowKey);
}.bind(this),
checked: !!selectedRowKeyMap[rowKey]
}) : /*#__PURE__*/_react.default.createElement(_Checkbox.default, {
disabled: disabled,
onChange: function () {
(0, _newArrowCheck2.default)(this, _this27);
return _this2.handleSelectRecord(rowKey, !selectedRowKeyMap[rowKey]);
}.bind(this),
checked: !!selectedRowKeyMap[rowKey],
size: "sm"
});
}.bind(this)
});
}
if (columnPlaceholder) {
var lastUnFixedIndex = (0, _findLastIndex2.default)(newColumns, function (columnConfig) {
(0, _newArrowCheck2.default)(this, _this23);
return !columnConfig.fixed;
}.bind(this));
newColumns.splice(lastUnFixedIndex + 1, 0, {
title: '',
key: placeholderKey,
onHeaderCell: function onHeaderCell() {
(0, _newArrowCheck2.default)(this, _this23);
return {
className: _style.placeholderHeaderCls
};
}.bind(this),
onCell: function onCell() {
(0, _newArrowCheck2.default)(this, _this23);
return {
className: _style.placeholderCellCls
};
}.bind(this),
render: function render() {
(0, _newArrowCheck2.default)(this, _this23);
return null;
}.bind(this)
});
}
return newColumns;
}.bind(this);
_this2.getPagination = function () {
(0, _newArrowCheck2.default)(this, _this3);
var paginationS = _this2.state.pagination,
paginationP = _this2.props.pagination;
return paginationP === null ? null : _objectSpread(_objectSpread({}, paginationS), paginationP);
}.bind(this);
_this2.renderSearchInfo = function (option) {
var _this28 = this;
(0, _newArrowCheck2.default)(this, _this3);
var filters = option.filters,
searchValue = option.searchValue,
total = option.total,
locale = option.locale;
var first = true;
var renderLabel = function renderLabel(_ref5) {
var _this29 = this;
(0, _newArrowCheck2.default)(this, _this28);
var value = _ref5.value,
_ref5$column$filter = _ref5.column.filter,
multiple = _ref5$column$filter.multiple,
options = _ref5$column$filter.options;
options = options.map(function (option) {
(0, _newArrowCheck2.default)(this, _this29);
return !(0, _isObject2.default)(option) ? {
value: option,
label: option
} : option;
}.bind(this));
if (multiple) {
var label = (0, _map2.default)(value, function (v) {
var _this30 = this;
(0, _newArrowCheck2.default)(this, _this29);
var option = (0, _find2.default)(options, function (option) {
(0, _newArrowCheck2.default)(this, _this30);
return v === option.value;
}.bind(this));
return option && option.label;
}.bind(this));
var _first = true;
return (0, _map2.default)(label, function (_label) {
(0, _newArrowCheck2.default)(this, _this29);
return _first ? [_first = false, _label] : [' | ', _label];
}.bind(this));
} else {
var _option = (0, _find2.default)(options, function (option) {
(0, _newArrowCheck2.default)(this, _this29);
return value === option.value;
}.bind(this));
return _option && _option.label;
}
}.bind(this);
return !(0, _isEmpty2.default)(filters) || searchValue ? /*#__PURE__*/_react.default.createElement("div", {
key: "search-info",
className: "".concat(_style.prefixCls, "-search-tip-wrap")
}, /*#__PURE__*/_react.default.createElement(_Notice.default, {
icon: null,
closable: false,
className: "".concat(_style.prefixCls, "-filter-notice")
}, searchValue && /*#__PURE__*/_react.default.createElement("span", null, locale.search, locale.colon, searchValue, locale.semicolon), !(0, _isEmpty2.default)(filters) && /*#__PURE__*/_react.default.createElement("span", null, locale.filter, locale.colon, (0, _map2.default)(filters, function (filterInfo) {
(0, _newArrowCheck2.default)(this, _this28);
return first ? [first = false, renderLabel(filterInfo)] : [', ', renderLabel(filterInfo)];
}.bind(this)), locale.semicolon), /*#__PURE__*/_react.default.createElement("span", null, locale.searchResult, locale.colon, total, locale.items, locale.semicolon), /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement("a", {
className: "".concat(_style.prefixCls, "-reset-link"),
onClick: _this2.clearFilter
}, locale.reset)))) : null;
}.bind(this);
_this2.renderEmptyAndErrorInfo = function (option) {
(0, _newArrowCheck2.default)(this, _this3);
var dataSource = option.dataSource,
emptyContent = option.emptyContent,
errorContent = option.errorContent;
if (errorContent) {
return /*#__PURE__*/_react.default.createElement("div", {
key: "tip-info",
className: "".concat(_style.prefixCls, "-tip-wrap")
}, /*#__PURE__*/_react.default.createElement("div", {
className: "".concat(_style.prefixCls, "-error-content-wrap")
}, errorContent));
}
if ((!dataSource || !dataSource.length) && emptyContent) {
return /*#__PURE__*/_react.default.createElement("div", {
key: "tip-info",
className: "".concat(_style.prefixCls, "-tip-wrap")
}, /*#__PURE__*/_react.default.createElement("div", {
className: "".concat(_style.prefixCls, "-empty-content-wrap")
}, emptyContent));
}
}.bind(this);
_this2.renderTitle = function (option) {
(0, _newArrowCheck2.default)(this, _this3);
var title = _this2.props.title;
return [title && /*#__PURE__*/_react.default.createElement("div", {
className: "".concat(_style.prefixCls, "-custom-title"),
key: "custom"
}, title()), _this2.renderSearchInfo(option)];
}.bind(this);
_this2.renderFooter = function (option) {
(0, _newArrowCheck2.default)(this, _this3);
return /*#__PURE__*/_react.default.createElement("div", null, _this2.renderEmptyAndErrorInfo(option));
}.bind(this);
_this2.onExpandHandler = function (expanded, record) {
(0, _newArrowCheck2.default)(this, _this3);
var _this2$state$changedU = _this2.state.changedUnExpandedRowKeys,
changedUnExpandedRowKeys = _this2$state$changedU === void 0 ? {} : _this2$state$changedU;
var onExpand = _this2.props.onExpand;
var rowKey = _this2.getRowKey(record);
if (expanded) {
delete changedUnExpandedRowKeys[rowKey];
} else {
changedUnExpandedRowKeys[rowKey] = true;
}
_this2.setState({
changedUnExpandedRowKeys: changedUnExpandedRowKeys
});
if (onExpand) {
onExpand(expanded, record);
}
}.bind(this);
_this2.onRow = function (record, index) {
(0, _newArrowCheck2.default)(this, _this3);
var _this2$props3 = _this2.props,
_this2$props3$onRow = _this2$props3.onRow,
onRow = _this2$props3$onRow === void 0 ? noop : _this2$props3$onRow,
contextMenu = _this2$props3.contextMenu;
return _objectSpread(_objectSpread({}, onRow(record, index)), {}, {
record: record,
contextMenu: contextMenu
});
}.bind(this);
_this2.savePopupContainer = function (_ref) {
(0, _newArrowCheck2.default)(this, _this3);
_this2.popupContainer = _ref;
}.bind(this);
_this2.getPopupContainer = function () {
(0, _newArrowCheck2.default)(this, _this3);
return _this2.popupContainer;
}.bind(this);
_this2.state = {
filters: _this2.calDefaultFilters(_props),
filtersFromProps: _this2.calFiltersFromProps(_props),
order: null,
selectedRowKeyMap: {},
columnConfig: _props.defaultColumnConfig,
searchValue: ''
};
// init pagination
var _pagination = _props.pagination;
if ((0, _isObject2.default)(_pagination)) {
_this2.state.pagination = {
current: 'defaultCurrent' in _pagination ? _pagination.defaultCurrent : 1,
pageSize: 'defaultPageSize' in _pagination ? _pagination.defaultPageSize : 10
};
} else {
_this2.state.pagination = {
current: 1,
pageSize: 10
};
}
// init selectedRowKeyMap from rowSelection
var _rowSelection = _props.rowSelection;
var _selectedRowKeyMap = _this2.state.selectedRowKeyMap;
if ((0, _isObject2.default)(_rowSelection)) {
if ('selectedRowKeys' in _rowSelection) {
(0, _each2.default)(_rowSelection.selectedRowKeys, function (key) {
(0, _newArrowCheck2.default)(this, _this3);
return _selectedRowKeyMap[key] = true;
}.bind(this));
} else if ('defaultSelectedRowKeys' in _rowSelection) {
(0, _each2.default)(_rowSelection.defaultSelectedRowKeys, function (key) {
(0, _newArrowCheck2.default)(this, _this3);
return _selectedRowKeyMap[key] = true;
}.bind(this));
}
}
// init order
if ('order' in _props) {
var order = _this2.getOrder(_props.order, _props.columns);
_this2.state.order = order;
} else if ('defaultOrder' in _props) {
var _order = _this2.getOrder(_props.defaultOrder, _props.columns);
_this2.state.order = _order;
}
_this2.check(_props);
return _this2;
}
(0, _inherits2.default)(Table, _Component);
return (0, _createClass2.default)(Table, [{
key: "render",
value: function render() {
var _this31 = this;
/* eslint-disable no-unused-vars */
var _this$props = this.props,
_p = _this$props.pagination,
_d = _this$props.dataSource,
_c = _this$props.columns,
rowSelection = _this$props.rowSelection,
onRowSelect = _this$props.onRowSelect,
contextMenu = _this$props.contextMenu,
emptyContent = _this$props.emptyContent,
errorContent = _this$props.errorContent,
className = _this$props.className,
style = _this$props.style,
expandedRowRender = _this$props.expandedRowRender,
expandIconAsCell = _this$props.expandIconAsCell,
expandIconColumnIndex = _this$props.expandIconColumnIndex,
defaultExpandAllRows = _this$props.defaultExpandAllRows,
_this$props$title = _this$props.title,
title = _this$props$title === void 0 ? noop : _this$props$title,
_this$props$footer = _this$props.footer,
footer = _this$props$footer === void 0 ? noop : _this$props$footer,
locale = _this$props.locale,
hideExpandIcon = _this$props.hideExpandIcon,
_this$props$onRow = _this$props.onRow,
onRow = _this$props$onRow === void 0 ? noop : _this$props$onRow,
components = _this$props.components,
onExpand = _this$props.onExpand,
zebraCrossing = _this$props.zebraCrossing,
columnPlaceholder = _this$props.columnPlaceholder,
tableLayout = _this$props.tableLayout,
scroll = _this$props.scroll,
customStyle = _this$props.customStyle,
_this$props$size = _this$props.size,
size = _this$props$size === void 0 ? 'md' : _this$props$size,
rest = (0, _objectWithoutProperties2.default)(_this$props, _excluded2);
if (emptyContent === undefined) {
emptyContent = /*#__PURE__*/_react.default.createElement(_Notice.default, {
closable: false
}, locale.emptyTip);
}
/* eslint-enable no-unused-vars */
var pagination = this.getPagination();
var _this$state = this.state,
filters = _this$state.filters,
filtersFromProps = _this$state.filtersFromProps,
searchValue = _this$state.searchValue,
columnConfig = _this$state.columnConfig;
var finalFilters = this.mergeFilters(filters, filtersFromProps, _c);
var _this$getDataSource = this.getDataSource(finalFilters),
dataSource = _this$getDataSource.dataSource,
total = _this$getDataSource.total;
if (pagination && 'total' in pagination) {
total = pagination.total;
}
var columns = this.getColumns(dataSource, finalFilters);
var defaultExpandAllRowsProps = !defaultExpandAllRows ? null : function () {
(0, _newArrowCheck2.default)(this, _this31);
var _this$state$changedUn = this.state.changedUnExpandedRowKeys,
changedUnExpandedRowKeys = _this$state$changedUn === void 0 ? {} : _this$state$changedUn;
var expandedRowKeys = this.getExpandedRowKeys(dataSource, changedUnExpandedRowKeys);
return {
expandedRowKeys: expandedRowKeys
};
}.bind(this)();
return /*#__PURE__*/_react.default.createElement(_ContainerContext.InheritProvider, {
value: {
getPopupContainer: this.getPopupContainer
}
}, /*#__PURE__*/_react.default.createElement(TableContext.Provider, {
value: {
columns: _c,
columnConfig: columnConfig,
onColumnConfigChange: this.onColumnConfigChange,
handleSearch: this.handleSearch,
locale: locale
}
}, /*#__PURE__*/_react.default.createElement(_style.TableWrap, {
className: className,
style: style,
hideExpandIcon: hideExpandIcon,
expandIconAsCell: expandIconAsCell,
zebraCrossing: zebraCrossing,
customStyle: customStyle,
size: size
}, /*#__PURE__*/_react.default.createElement(_style.PopupContainer, {
ref: this.savePopupContainer
}), /*#__PURE__*/_react.default.createElement(_rcTable.default, (0, _extends2.default)({}, defaultExpandAllRowsProps, {
onExpand: this.onExpandHandler
}, rest, {
scroll: scroll,
tableLayout: tableLayout ? tableLayout : scroll && scroll.x ? 'fixed' : undefined,
prefixCls: _style.prefixCls,
data: dataSource,
columns: columns,
onRow: this.onRow,
components: (0, _extend2.default)({}, components, {
body: {
row: _TableRow.default
}
}),
emptyText: null,
expandIconAsCell: !!expandedRowRender || expandIconAsCell,
expandedRowRender: expandedRowRender,
expandIconColumnIndex: expandIconColumnIndex === undefined ? columns[0] && columns[0].key === 'table_row_selection' ? 1 : 0 : expandIconColumnIndex,
title: function () {
(0, _newArrowCheck2.default)(this, _this31);
return this.renderTitle({
filters: finalFilters,
searchValue: searchValue,
total: total,
locale: locale
});
}.bind(this),
footer: function () {
(0, _newArrowCheck2.default)(this, _this31);
return this.renderFooter({
dataSource: _d,
emptyContent: emptyContent,
errorContent: errorContent
});
}.bind(this)
})), footer(), pagination === null ? null : /*#__PURE__*/_react.default.createElement(_Pagination.default, (0, _extends2.default)({
size: "sm",
total: total,
hideOnSinglePage: false,
showQuickJumper: true,
showSizeChanger: true
}, pagination, {
className: "".concat(_style.prefixCls, "-pagination"),
onChange: function (current, pageSize) {
(0, _newArrowCheck2.default)(this, _this31);
this.setState({
pagination: {
current: current,
pageSize: pageSize
}
});
pagination.onChange && pagination.onChange(current, pageSize);
}.bind(this)