UNPKG

45.7 kBJavaScriptView Raw
1import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
2import _extends from "@babel/runtime/helpers/extends";
3import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
4import _typeof from "@babel/runtime/helpers/typeof";
5import _defineProperty from "@babel/runtime/helpers/defineProperty";
6import _objectSpread from "@babel/runtime/helpers/objectSpread2";
7import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
8import _createClass from "@babel/runtime/helpers/createClass";
9import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
10import _inherits from "@babel/runtime/helpers/inherits";
11import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
12import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
13
14function _createSuper(Derived) {
15 function isNativeReflectConstruct() {
16 if (typeof Reflect === "undefined" || !Reflect.construct) return false;
17 if (Reflect.construct.sham) return false;
18 if (typeof Proxy === "function") return true;
19
20 try {
21 Date.prototype.toString.call(Reflect.construct(Date, [], function () {}));
22 return true;
23 } catch (e) {
24 return false;
25 }
26 }
27
28 return function () {
29 var Super = _getPrototypeOf(Derived),
30 result;
31
32 if (isNativeReflectConstruct()) {
33 var NewTarget = _getPrototypeOf(this).constructor;
34
35 result = Reflect.construct(Super, arguments, NewTarget);
36 } else {
37 result = Super.apply(this, arguments);
38 }
39
40 return _possibleConstructorReturn(this, result);
41 };
42}
43
44import React, { Component } from 'react';
45import { findDOMNode } from 'react-dom';
46import PropTypes from 'prop-types';
47import classNames from 'classnames';
48import noop from 'lodash/noop';
49import scrollIntoView from 'scroll-into-view-if-needed';
50import smoothScrollIntoView from 'smooth-scroll-into-view-if-needed';
51import Pagination from '../pagination';
52import Icon from '../icon';
53import Spin from '../spin';
54import LocaleReceiver from '../locale-provider/LocaleReceiver';
55import defaultLocale from '../locale-provider/default';
56import warning from '../_util/warning';
57import FilterDropdown from './filterDropdown';
58import createStore from './createStore';
59import SelectionBox from './SelectionBox';
60import SelectionCheckboxAll from './SelectionCheckboxAll';
61import Column from './Column';
62import ColumnGroup from './ColumnGroup';
63import { getConfig, getPrefixCls as _getPrefixCls } from '../configure';
64import createBodyRow from './createBodyRow';
65import { findColumnByFilterValue, flatArray, flatFilter, getColumnKey as _getColumnKey, getLeafColumns, normalizeColumns, removeHiddenColumns, treeMap } from './util';
66import FilterBar from './FilterBar';
67import { VALUE_OR } from './FilterSelect';
68import RcTable from '../rc-components/table';
69import { Size } from '../_util/enum';
70
71function findBodyDom(dom, reg) {
72 if (dom.childElementCount > 0) {
73 for (var i = 0; i < dom.childElementCount; i += 1) {
74 if (reg.test(dom.children[i].className)) {
75 return dom.children[i];
76 }
77
78 if (dom.childElementCount > 0) {
79 var childFound = findBodyDom(dom.children[i], reg);
80
81 if (childFound !== null) {
82 return childFound;
83 }
84 }
85 }
86 }
87
88 return null;
89}
90
91function stopPropagation(e) {
92 e.stopPropagation();
93
94 if (e.nativeEvent.stopImmediatePropagation) {
95 e.nativeEvent.stopImmediatePropagation();
96 }
97}
98
99var defaultPagination = {
100 onChange: noop,
101 onShowSizeChange: noop
102};
103/**
104 * Avoid creating new object, so that parent component's shouldComponentUpdate
105 * can works appropriately。
106 */
107
108var emptyObject = {};
109
110var Table =
111/*#__PURE__*/
112function (_Component) {
113 _inherits(Table, _Component);
114
115 var _super = _createSuper(Table);
116
117 function Table(props) {
118 var _this;
119
120 _classCallCheck(this, Table);
121
122 _this = _super.call(this, props);
123
124 _this.saveRef = function (ref) {
125 _this.refTable = ref;
126 };
127
128 _this.getCheckboxPropsByItem = function (item, index) {
129 var _this$props$rowSelect = _this.props.rowSelection,
130 rowSelection = _this$props$rowSelect === void 0 ? {} : _this$props$rowSelect;
131
132 if (!rowSelection.getCheckboxProps) {
133 return {};
134 }
135
136 var key = _this.getRecordKey(item, index); // Cache checkboxProps
137
138
139 if (!_this.CheckboxPropsCache[key]) {
140 _this.CheckboxPropsCache[key] = rowSelection.getCheckboxProps(item);
141 }
142
143 return _this.CheckboxPropsCache[key];
144 };
145
146 _this.onRow = function (record, index) {
147 var onRow = _this.props.onRow;
148
149 var prefixCls = _this.getPrefixCls();
150
151 var custom = onRow ? onRow(record, index) : {};
152 return _objectSpread({}, custom, {
153 prefixCls: prefixCls,
154 store: _this.store,
155 rowKey: _this.getRecordKey(record, index)
156 });
157 };
158
159 _this.handleFilterSelectClear = function () {
160 var filters = _this.state.filters;
161 Object.keys(filters).map(function (key) {
162 return filters[key] = [];
163 });
164
165 _this.setNewFilterState({
166 barFilters: [],
167 filters: filters
168 });
169 };
170
171 _this.handleFilterSelectChange = function (barFilters) {
172 var onFilterSelectChange = _this.props.onFilterSelectChange;
173
174 if (onFilterSelectChange) {
175 onFilterSelectChange(barFilters);
176 }
177
178 _this.setNewFilterState({
179 barFilters: barFilters
180 });
181 };
182
183 _this.handleColumnFilterChange = function (e) {
184 var onColumnFilterChange = _this.props.onColumnFilterChange;
185
186 if (onColumnFilterChange) {
187 onColumnFilterChange(e);
188 }
189
190 _this.forceUpdate();
191 };
192
193 _this.handleFilter = function (column, nextFilters) {
194 var stateFilters = _this.state.filters;
195
196 var filters = _objectSpread({}, stateFilters, _defineProperty({}, _this.getColumnKey(column), nextFilters)); // Remove filters not in current columns
197
198
199 var currentColumnKeys = [];
200 treeMap(_this.columns, function (c) {
201 if (!c.children) {
202 currentColumnKeys.push(_this.getColumnKey(c));
203 }
204 });
205 Object.keys(filters).forEach(function (columnKey) {
206 if (currentColumnKeys.indexOf(columnKey) < 0) {
207 delete filters[columnKey];
208 }
209 });
210
211 _this.setNewFilterState({
212 filters: filters
213 });
214 };
215
216 _this.handleSelect = function (record, rowIndex, e) {
217 var checked = e.target.checked;
218 var nativeEvent = e.nativeEvent;
219 var defaultSelection = _this.store.getState().selectionDirty ? [] : _this.getDefaultSelection();
220
221 var selectedRowKeys = _this.store.getState().selectedRowKeys.concat(defaultSelection);
222
223 var key = _this.getRecordKey(record, rowIndex);
224
225 if (checked) {
226 selectedRowKeys.push(_this.getRecordKey(record, rowIndex));
227 } else {
228 selectedRowKeys = selectedRowKeys.filter(function (i) {
229 return key !== i;
230 });
231 }
232
233 _this.store.setState({
234 selectionDirty: true
235 });
236
237 _this.setSelectedRowKeys(selectedRowKeys, {
238 selectWay: 'onSelect',
239 record: record,
240 checked: checked,
241 changeRowKeys: undefined,
242 nativeEvent: nativeEvent
243 });
244 };
245
246 _this.handleRadioSelect = function (record, rowIndex, e) {
247 var checked = e.target.checked;
248 var nativeEvent = e.nativeEvent;
249 var defaultSelection = _this.store.getState().selectionDirty ? [] : _this.getDefaultSelection();
250
251 var selectedRowKeys = _this.store.getState().selectedRowKeys.concat(defaultSelection);
252
253 var key = _this.getRecordKey(record, rowIndex);
254
255 selectedRowKeys = [key];
256
257 _this.store.setState({
258 selectionDirty: true
259 });
260
261 _this.setSelectedRowKeys(selectedRowKeys, {
262 selectWay: 'onSelect',
263 record: record,
264 checked: checked,
265 changeRowKeys: undefined,
266 nativeEvent: nativeEvent
267 });
268 };
269
270 _this.handleSelectRow = function (selectionKey, index, onSelectFunc) {
271 var data = _this.getFlatCurrentPageData();
272
273 var defaultSelection = _this.store.getState().selectionDirty ? [] : _this.getDefaultSelection();
274
275 var selectedRowKeys = _this.store.getState().selectedRowKeys.concat(defaultSelection);
276
277 var changeableRowKeys = data.filter(function (item, i) {
278 return !_this.getCheckboxPropsByItem(item, i).disabled;
279 }).map(function (item, i) {
280 return _this.getRecordKey(item, i);
281 });
282 var changeRowKeys = [];
283 var selectWay = '';
284 var checked; // handle default selection
285
286 switch (selectionKey) {
287 case 'all':
288 changeableRowKeys.forEach(function (key) {
289 if (selectedRowKeys.indexOf(key) < 0) {
290 selectedRowKeys.push(key);
291 changeRowKeys.push(key);
292 }
293 });
294 selectWay = 'onSelectAll';
295 checked = true;
296 break;
297
298 case 'removeAll':
299 changeableRowKeys.forEach(function (key) {
300 if (selectedRowKeys.indexOf(key) >= 0) {
301 selectedRowKeys.splice(selectedRowKeys.indexOf(key), 1);
302 changeRowKeys.push(key);
303 }
304 });
305 selectWay = 'onSelectAll';
306 checked = false;
307 break;
308
309 case 'invert':
310 changeableRowKeys.forEach(function (key) {
311 if (selectedRowKeys.indexOf(key) < 0) {
312 selectedRowKeys.push(key);
313 } else {
314 selectedRowKeys.splice(selectedRowKeys.indexOf(key), 1);
315 }
316
317 changeRowKeys.push(key);
318 selectWay = 'onSelectInvert';
319 });
320 break;
321
322 default:
323 break;
324 }
325
326 _this.store.setState({
327 selectionDirty: true
328 }); // when select custom selection, callback selections[n].onSelect
329
330
331 var rowSelection = _this.props.rowSelection;
332 var customSelectionStartIndex = 2;
333
334 if (rowSelection && rowSelection.hideDefaultSelections) {
335 customSelectionStartIndex = 0;
336 }
337
338 if (index >= customSelectionStartIndex && typeof onSelectFunc === 'function') {
339 return onSelectFunc(changeableRowKeys);
340 }
341
342 _this.setSelectedRowKeys(selectedRowKeys, {
343 selectWay: selectWay,
344 checked: checked,
345 changeRowKeys: changeRowKeys
346 });
347 };
348
349 _this.handlePageChange = function (current) {
350 var _this$props = _this.props,
351 onChange = _this$props.onChange,
352 autoScroll = _this$props.autoScroll,
353 propsPagination = _this$props.pagination;
354 var statePagination = _this.state.pagination;
355
356 var pagination = _objectSpread({}, statePagination);
357
358 if (autoScroll) {
359 var scrollIntoViewSmoothly = 'scrollBehavior' in document.documentElement.style ? scrollIntoView : smoothScrollIntoView;
360 setTimeout(function () {
361 if (_this.refTable && _this.refTable.clientHeight > document.body.clientHeight) {
362 scrollIntoViewSmoothly(_this.refTable, {
363 block: 'start',
364 behavior: 'smooth',
365 scrollMode: 'if-needed'
366 });
367 } else if (_this.refTable) {
368 // @ts-ignore
369 if (_this.refTable.scrollIntoViewIfNeeded) {
370 // @ts-ignore
371 _this.refTable.scrollIntoViewIfNeeded({
372 block: 'start'
373 });
374 } else {
375 scrollIntoViewSmoothly(_this.refTable, {
376 block: 'start',
377 behavior: 'smooth',
378 scrollMode: 'if-needed'
379 });
380 }
381 }
382 }, 10);
383
384 if (_this.refTable) {
385 var dom = findBodyDom(_this.refTable, new RegExp("".concat(_this.getPrefixCls(), "-body")));
386
387 if (dom !== null && dom.scroll) {
388 dom.scrollTop = 0;
389 }
390 }
391 }
392
393 if (current) {
394 pagination.current = current;
395 } else {
396 pagination.current = pagination.current || 1;
397 }
398
399 for (var _len = arguments.length, otherArguments = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
400 otherArguments[_key - 1] = arguments[_key];
401 }
402
403 pagination.onChange.apply(pagination, [pagination.current].concat(otherArguments));
404 var newState = {
405 pagination: pagination
406 }; // Controlled current prop will not respond user interaction
407
408 if (propsPagination && _typeof(propsPagination) === 'object' && 'current' in propsPagination) {
409 newState.pagination = _objectSpread({}, pagination, {
410 current: statePagination.current
411 });
412 }
413
414 _this.setState(newState);
415
416 _this.store.setState({
417 selectionDirty: false
418 });
419
420 if (onChange) {
421 onChange.apply(void 0, _toConsumableArray(_this.prepareParamsArguments(_objectSpread({}, _this.state, {
422 selectionDirty: false,
423 pagination: pagination
424 }))));
425 }
426 };
427
428 _this.renderSelectionBox = function (type) {
429 return function (_, record, index) {
430 var rowIndex = _this.getRecordKey(record, index); // 从 1 开始
431
432
433 var props = _this.getCheckboxPropsByItem(record, index);
434
435 var handleChange = function handleChange(e) {
436 if (type === 'radio') {
437 _this.handleRadioSelect(record, rowIndex, e);
438 } else {
439 _this.handleSelect(record, rowIndex, e);
440 }
441 };
442
443 return React.createElement("span", {
444 onClick: stopPropagation
445 }, React.createElement(SelectionBox, _extends({
446 type: type,
447 store: _this.store,
448 rowIndex: rowIndex,
449 onChange: handleChange,
450 defaultSelection: _this.getDefaultSelection()
451 }, props)));
452 };
453 };
454
455 _this.getRecordKey = function (record, index) {
456 var rowKey = _this.props.rowKey;
457 var recordKey = typeof rowKey === 'function' ? rowKey(record, index) : record[rowKey];
458 warning(recordKey !== undefined, 'Each record in dataSource of table should have a unique `key` prop, or set `rowKey` to an unique primary key');
459 return recordKey === undefined ? index : recordKey;
460 };
461
462 _this.getPopupContainer = function () {
463 return findDOMNode(_assertThisInitialized(_this));
464 };
465
466 _this.handleShowSizeChange = function (current, pageSize) {
467 var pagination = _this.state.pagination;
468 pagination.onShowSizeChange(current, pageSize);
469
470 var nextPagination = _objectSpread({}, pagination, {
471 pageSize: pageSize,
472 current: current
473 });
474
475 _this.setState({
476 pagination: nextPagination
477 });
478
479 var onChange = _this.props.onChange;
480
481 if (onChange) {
482 onChange.apply(void 0, _toConsumableArray(_this.prepareParamsArguments(_objectSpread({}, _this.state, {
483 pagination: nextPagination
484 }))));
485 }
486 };
487
488 _this.renderTable = function (contextLocale, loading) {
489 var _classNames;
490
491 var _assertThisInitialize = _assertThisInitialized(_this),
492 props = _assertThisInitialize.props;
493
494 var locale = _objectSpread({}, contextLocale, {}, props.locale);
495
496 var filterBarMultiple = props.filterBarMultiple,
497 filterBarPlaceholder = props.filterBarPlaceholder,
498 showHeader = props.showHeader,
499 filterBar = props.filterBar,
500 dataSource = props.dataSource,
501 filters = props.filters,
502 empty = props.empty,
503 restProps = _objectWithoutProperties(props, ["filterBarMultiple", "filterBarPlaceholder", "showHeader", "filterBar", "dataSource", "filters", "empty"]);
504
505 var columnFilters = _this.state.filters;
506
507 var prefixCls = _this.getPrefixCls();
508
509 var data = _this.getCurrentPageData();
510
511 var expandIconAsCell = props.expandedRowRender && props.expandIconAsCell !== false;
512 var classString = classNames((_classNames = {}, _defineProperty(_classNames, "".concat(prefixCls, "-").concat(props.size), true), _defineProperty(_classNames, "".concat(prefixCls, "-bordered"), props.bordered), _defineProperty(_classNames, "".concat(prefixCls, "-empty"), !data.length), _defineProperty(_classNames, "".concat(prefixCls, "-without-column-header"), !showHeader), _classNames));
513
514 var columns = _this.renderRowSelection(locale);
515
516 columns = _this.renderColumnsDropdown(columns, locale);
517 columns = columns.map(function (column, i) {
518 var newColumn = _objectSpread({}, column);
519
520 newColumn.key = _this.getColumnKey(newColumn, i);
521 return newColumn;
522 });
523 columns = removeHiddenColumns(columns);
524 var expandIconColumnIndex = columns[0] && columns[0].key === 'selection-column' ? 1 : 0;
525
526 if ('expandIconColumnIndex' in restProps) {
527 expandIconColumnIndex = restProps.expandIconColumnIndex;
528 }
529
530 var table = React.createElement(RcTable, _extends({
531 key: "table"
532 }, restProps, {
533 onRow: _this.onRow,
534 components: _this.components,
535 prefixCls: prefixCls,
536 data: data,
537 columns: columns,
538 showHeader: showHeader,
539 className: classString,
540 expandIconColumnIndex: expandIconColumnIndex,
541 expandIconAsCell: expandIconAsCell,
542 emptyText: !loading.spinning && (empty || locale.emptyText)
543 }));
544
545 if (filterBar) {
546 var bar = React.createElement(FilterBar, {
547 key: "filter-bar",
548 prefixCls: prefixCls,
549 placeholder: filterBarPlaceholder,
550 columns: getLeafColumns(_this.columns),
551 onFilterSelectChange: _this.handleFilterSelectChange,
552 onFilterSelectClear: _this.handleFilterSelectClear,
553 onColumnFilterChange: _this.handleColumnFilterChange,
554 onFilter: _this.handleFilter,
555 dataSource: dataSource,
556 filters: filters,
557 columnFilters: columnFilters,
558 multiple: filterBarMultiple,
559 getPopupContainer: _this.getPopupContainer
560 });
561 return [bar, table];
562 }
563
564 return table;
565 };
566
567 warning(!('columnsPageRange' in props || 'columnsPageSize' in props), '`columnsPageRange` and `columnsPageSize` are removed, please use fixed columns instead');
568 _this.columns = props.columns || normalizeColumns(props.children);
569
570 _this.createComponents(props.components);
571
572 _this.state = _objectSpread({}, _this.getDefaultSortOrder(_this.columns), {
573 // 减少状态
574 filters: _this.getFiltersFromColumns(),
575 barFilters: props.filters || [],
576 pagination: _this.getDefaultPagination(props)
577 });
578 _this.CheckboxPropsCache = {};
579 _this.store = createStore({
580 selectedRowKeys: (props.rowSelection || {}).selectedRowKeys || [],
581 selectionDirty: false
582 });
583 return _this;
584 }
585
586 _createClass(Table, [{
587 key: "getPrefixCls",
588 value: function getPrefixCls() {
589 var prefixCls = this.props.prefixCls;
590 return _getPrefixCls('table', prefixCls);
591 }
592 }, {
593 key: "getDefaultSelection",
594 value: function getDefaultSelection() {
595 var _this2 = this;
596
597 var _this$props$rowSelect2 = this.props.rowSelection,
598 rowSelection = _this$props$rowSelect2 === void 0 ? {} : _this$props$rowSelect2;
599
600 if (!rowSelection.getCheckboxProps) {
601 return [];
602 }
603
604 return this.getFlatData().filter(function (item, rowIndex) {
605 return _this2.getCheckboxPropsByItem(item, rowIndex).defaultChecked;
606 }).map(function (record, rowIndex) {
607 return _this2.getRecordKey(record, rowIndex);
608 });
609 }
610 }, {
611 key: "getDefaultPagination",
612 value: function getDefaultPagination(props) {
613 var pagination = props.pagination || {};
614 return this.hasPagination(props) ? _objectSpread({}, defaultPagination, {
615 size: props.size
616 }, pagination, {
617 current: pagination.defaultCurrent || pagination.current || 1,
618 pageSize: pagination.defaultPageSize || pagination.pageSize || 10
619 }) : {};
620 }
621 }, {
622 key: "componentWillReceiveProps",
623 value: function componentWillReceiveProps(nextProps) {
624 this.columns = nextProps.columns || normalizeColumns(nextProps.children);
625
626 if ('pagination' in nextProps || 'pagination' in this.props) {
627 this.setState(function (previousState) {
628 var newPagination = _objectSpread({}, defaultPagination, {
629 size: nextProps.size
630 }, previousState.pagination, {}, nextProps.pagination);
631
632 newPagination.current = newPagination.current || 1;
633 newPagination.pageSize = newPagination.pageSize || 10;
634 return {
635 pagination: nextProps.pagination !== false ? newPagination : emptyObject
636 };
637 });
638 }
639
640 var _this$props2 = this.props,
641 rowSelection = _this$props2.rowSelection,
642 dataSource = _this$props2.dataSource,
643 components = _this$props2.components;
644 var _this$state = this.state,
645 filters = _this$state.filters,
646 sortColumn = _this$state.sortColumn,
647 sortOrder = _this$state.sortOrder;
648
649 if (nextProps.rowSelection && 'selectedRowKeys' in nextProps.rowSelection) {
650 this.store.setState({
651 selectedRowKeys: nextProps.rowSelection.selectedRowKeys || []
652 });
653
654 if (rowSelection && nextProps.rowSelection.getCheckboxProps !== rowSelection.getCheckboxProps) {
655 this.CheckboxPropsCache = {};
656 }
657 }
658
659 if ('dataSource' in nextProps && nextProps.dataSource !== dataSource) {
660 this.store.setState({
661 selectionDirty: false
662 });
663 this.CheckboxPropsCache = {};
664 }
665
666 if (this.getSortOrderColumns(this.columns).length > 0) {
667 var sortState = this.getSortStateFromColumns(this.columns);
668
669 if (sortState.sortColumn !== sortColumn || sortState.sortOrder !== sortOrder) {
670 this.setState(sortState);
671 }
672 }
673
674 var filteredValueColumns = this.getFilteredValueColumns(this.columns);
675
676 if (filteredValueColumns.length > 0) {
677 var filtersFromColumns = this.getFiltersFromColumns(this.columns);
678
679 var newFilters = _objectSpread({}, filters);
680
681 Object.keys(filtersFromColumns).forEach(function (key) {
682 newFilters[key] = filtersFromColumns[key];
683 });
684
685 if (this.isFiltersChanged(newFilters)) {
686 this.setState({
687 filters: newFilters
688 });
689 }
690 }
691
692 if ('filters' in nextProps) {
693 this.setState({
694 barFilters: nextProps.filters || []
695 });
696 }
697
698 this.createComponents(nextProps.components, components);
699 }
700 }, {
701 key: "setSelectedRowKeys",
702 value: function setSelectedRowKeys(selectedRowKeys, _ref) {
703 var _this3 = this;
704
705 var selectWay = _ref.selectWay,
706 record = _ref.record,
707 checked = _ref.checked,
708 changeRowKeys = _ref.changeRowKeys,
709 nativeEvent = _ref.nativeEvent;
710 var _this$props$rowSelect3 = this.props.rowSelection,
711 rowSelection = _this$props$rowSelect3 === void 0 ? {} : _this$props$rowSelect3;
712
713 if (rowSelection && !('selectedRowKeys' in rowSelection)) {
714 this.store.setState({
715 selectedRowKeys: selectedRowKeys
716 });
717 }
718
719 var data = this.getFlatData();
720
721 if (!rowSelection.onChange && !rowSelection[selectWay]) {
722 return;
723 }
724
725 var selectedRows = data.filter(function (row, i) {
726 return selectedRowKeys.indexOf(_this3.getRecordKey(row, i)) >= 0;
727 });
728
729 if (rowSelection.onChange) {
730 rowSelection.onChange(selectedRowKeys, selectedRows);
731 }
732
733 if (selectWay === 'onSelect' && rowSelection.onSelect) {
734 rowSelection.onSelect(record, checked, selectedRows, nativeEvent);
735 } else if (selectWay === 'onSelectAll' && rowSelection.onSelectAll) {
736 var changeRows = data.filter(function (row, i) {
737 return changeRowKeys.indexOf(_this3.getRecordKey(row, i)) >= 0;
738 });
739 rowSelection.onSelectAll(checked, selectedRows, changeRows);
740 } else if (selectWay === 'onSelectInvert' && rowSelection.onSelectInvert) {
741 rowSelection.onSelectInvert(selectedRowKeys);
742 }
743 }
744 }, {
745 key: "hasPagination",
746 value: function hasPagination(props) {
747 return (props || this.props).pagination !== false;
748 }
749 }, {
750 key: "isFiltersChanged",
751 value: function isFiltersChanged(filters) {
752 var filtersChanged = false;
753 var stateFilters = this.state.filters;
754
755 if (Object.keys(filters).length !== Object.keys(stateFilters).length) {
756 filtersChanged = true;
757 } else {
758 Object.keys(filters).forEach(function (columnKey) {
759 if (filters[columnKey] !== stateFilters[columnKey]) {
760 filtersChanged = true;
761 }
762 });
763 }
764
765 return filtersChanged;
766 }
767 }, {
768 key: "getSortOrderColumns",
769 value: function getSortOrderColumns(columns) {
770 return flatFilter(columns || this.columns || [], function (column) {
771 return 'sortOrder' in column;
772 });
773 }
774 }, {
775 key: "getFilteredValueColumns",
776 value: function getFilteredValueColumns(columns) {
777 return flatFilter(columns || this.columns || [], function (column) {
778 return typeof column.filteredValue !== 'undefined';
779 });
780 }
781 }, {
782 key: "getFiltersFromColumns",
783 value: function getFiltersFromColumns(columns) {
784 var _this4 = this;
785
786 var filters = {};
787 this.getFilteredValueColumns(columns).forEach(function (col) {
788 var colKey = _this4.getColumnKey(col);
789
790 filters[colKey] = col.filteredValue;
791 });
792 return filters;
793 }
794 }, {
795 key: "getDefaultSortOrder",
796 value: function getDefaultSortOrder(columns) {
797 var definedSortState = this.getSortStateFromColumns(columns);
798 var defaultSortedColumn = flatFilter(columns || [], function (column) {
799 return column.defaultSortOrder != null;
800 })[0];
801
802 if (defaultSortedColumn && !definedSortState.sortColumn) {
803 return {
804 sortColumn: defaultSortedColumn,
805 sortOrder: defaultSortedColumn.defaultSortOrder
806 };
807 }
808
809 return definedSortState;
810 }
811 }, {
812 key: "getSortStateFromColumns",
813 value: function getSortStateFromColumns(columns) {
814 // return first column which sortOrder is not falsy
815 var sortedColumn = this.getSortOrderColumns(columns).filter(function (col) {
816 return col.sortOrder;
817 })[0];
818
819 if (sortedColumn) {
820 return {
821 sortColumn: sortedColumn,
822 sortOrder: sortedColumn.sortOrder
823 };
824 }
825
826 return {
827 sortColumn: null,
828 sortOrder: null
829 };
830 }
831 }, {
832 key: "getSorterFn",
833 value: function getSorterFn() {
834 var _this$state2 = this.state,
835 sortOrder = _this$state2.sortOrder,
836 sortColumn = _this$state2.sortColumn;
837
838 if (!sortOrder || !sortColumn || typeof sortColumn.sorter !== 'function') {
839 return;
840 }
841
842 return function (a, b) {
843 var result = sortColumn.sorter(a, b);
844
845 if (result !== 0) {
846 return sortOrder === 'descend' ? -result : result;
847 }
848
849 return 0;
850 };
851 }
852 }, {
853 key: "setSortOrder",
854 value: function setSortOrder(order, column) {
855 var newState = {
856 sortOrder: order,
857 sortColumn: column
858 }; // Controlled
859
860 if (this.getSortOrderColumns().length === 0) {
861 this.setState(newState);
862 }
863
864 var onChange = this.props.onChange;
865
866 if (onChange) {
867 onChange.apply(void 0, _toConsumableArray(this.prepareParamsArguments(_objectSpread({}, this.state, {}, newState))));
868 }
869 }
870 }, {
871 key: "toggleSortOrder",
872 value: function toggleSortOrder(order, column) {
873 var _this$state3 = this.state,
874 sortColumn = _this$state3.sortColumn,
875 sortOrder = _this$state3.sortOrder; // 只同时允许一列进行排序,否则会导致排序顺序的逻辑问题
876
877 var isSortColumn = this.isSortColumn(column);
878
879 if (!isSortColumn) {
880 // 当前列未排序
881 sortOrder = order;
882 sortColumn = column;
883 } else if (sortOrder === order) {
884 // 切换为未排序状态
885 sortOrder = '';
886 sortColumn = null;
887 } else {
888 // 切换为排序状态
889 sortOrder = order;
890 }
891
892 var newState = {
893 sortOrder: sortOrder,
894 sortColumn: sortColumn
895 }; // Controlled
896
897 if (this.getSortOrderColumns().length === 0) {
898 this.setState(newState);
899 }
900
901 var onChange = this.props.onChange;
902
903 if (onChange) {
904 onChange.apply(void 0, _toConsumableArray(this.prepareParamsArguments(_objectSpread({}, this.state, {}, newState))));
905 }
906 }
907 }, {
908 key: "setNewFilterState",
909 value: function setNewFilterState(newState) {
910 var _this5 = this;
911
912 var _this$props3 = this.props,
913 propsPagination = _this$props3.pagination,
914 onChange = _this$props3.onChange;
915 var statePagination = this.state.pagination;
916
917 var pagination = _objectSpread({}, statePagination);
918
919 if (propsPagination) {
920 // Reset current prop
921 pagination.current = 1;
922 pagination.onChange(pagination.current);
923 } // Controlled current prop will not respond user interaction
924
925
926 if (propsPagination && _typeof(propsPagination) === 'object' && 'current' in propsPagination) {
927 newState.pagination = _objectSpread({}, pagination, {
928 current: statePagination.current
929 });
930 }
931
932 this.setState(newState, function () {
933 _this5.store.setState({
934 selectionDirty: false
935 });
936
937 if (onChange) {
938 onChange.apply(void 0, _toConsumableArray(_this5.prepareParamsArguments(_objectSpread({}, _this5.state, {
939 selectionDirty: false,
940 pagination: pagination
941 }))));
942 }
943 });
944 }
945 }, {
946 key: "renderRowSelection",
947 value: function renderRowSelection(locale) {
948 var _this6 = this;
949
950 var rowSelection = this.props.rowSelection;
951 var prefixCls = this.getPrefixCls();
952 var columns = this.columns.concat();
953
954 if (rowSelection) {
955 var data = this.getFlatCurrentPageData().filter(function (item, index) {
956 if (rowSelection.getCheckboxProps) {
957 return !_this6.getCheckboxPropsByItem(item, index).disabled;
958 }
959
960 return true;
961 });
962 var selectionColumnClass = classNames("".concat(prefixCls, "-selection-column"), _defineProperty({}, "".concat(prefixCls, "-selection-column-custom"), rowSelection.selections));
963 var selectionColumn = {
964 key: 'selection-column',
965 render: this.renderSelectionBox(rowSelection.type),
966 className: selectionColumnClass,
967 fixed: rowSelection.fixed,
968 width: rowSelection.columnWidth
969 };
970
971 if (rowSelection.type !== 'radio') {
972 var checkboxAllDisabled = data.every(function (item, index) {
973 return _this6.getCheckboxPropsByItem(item, index).disabled;
974 });
975 selectionColumn.title = React.createElement(SelectionCheckboxAll, {
976 store: this.store,
977 locale: locale,
978 data: data,
979 getCheckboxPropsByItem: this.getCheckboxPropsByItem,
980 getRecordKey: this.getRecordKey,
981 disabled: checkboxAllDisabled,
982 prefixCls: prefixCls,
983 onSelect: this.handleSelectRow,
984 selections: rowSelection.selections,
985 hideDefaultSelections: rowSelection.hideDefaultSelections,
986 getPopupContainer: this.getPopupContainer
987 });
988 }
989
990 if ('fixed' in rowSelection) {
991 selectionColumn.fixed = rowSelection.fixed;
992 } else if (columns.some(function (column) {
993 return column.fixed === 'left' || column.fixed === true;
994 })) {
995 selectionColumn.fixed = 'left';
996 }
997
998 if (columns[0] && columns[0].key === 'selection-column') {
999 columns[0] = selectionColumn;
1000 } else {
1001 columns.unshift(selectionColumn);
1002 }
1003 }
1004
1005 return columns;
1006 }
1007 }, {
1008 key: "getColumnKey",
1009 value: function getColumnKey(column, index) {
1010 return _getColumnKey(column, index);
1011 }
1012 }, {
1013 key: "getMaxCurrent",
1014 value: function getMaxCurrent(total) {
1015 var _this$state$paginatio = this.state.pagination,
1016 current = _this$state$paginatio.current,
1017 pageSize = _this$state$paginatio.pageSize;
1018
1019 if ((current - 1) * pageSize >= total) {
1020 return Math.floor((total - 1) / pageSize) + 1;
1021 }
1022
1023 return current;
1024 }
1025 }, {
1026 key: "isSortColumn",
1027 value: function isSortColumn(column) {
1028 var sortColumn = this.state.sortColumn;
1029
1030 if (!column || !sortColumn) {
1031 return false;
1032 }
1033
1034 return this.getColumnKey(sortColumn) === this.getColumnKey(column);
1035 }
1036 }, {
1037 key: "renderColumnsDropdown",
1038 value: function renderColumnsDropdown(columns, locale) {
1039 var _this7 = this;
1040
1041 var _this$props4 = this.props,
1042 customizeDropdownPrefixCls = _this$props4.dropdownPrefixCls,
1043 filterBar = _this$props4.filterBar;
1044 var prefixCls = this.getPrefixCls();
1045
1046 var dropdownPrefixCls = _getPrefixCls('dropdown', customizeDropdownPrefixCls);
1047
1048 var _this$state4 = this.state,
1049 sortOrder = _this$state4.sortOrder,
1050 filters = _this$state4.filters;
1051 return treeMap(columns, function (originColumn, i) {
1052 var column = _objectSpread({}, originColumn);
1053
1054 var key = _this7.getColumnKey(column, i);
1055
1056 var filterDropdown;
1057 var sortButton;
1058
1059 if (!filterBar && column.filters && column.filters.length > 0 || column.filterDropdown) {
1060 var colFilters = filters[key] || [];
1061 filterDropdown = React.createElement(FilterDropdown, {
1062 locale: locale,
1063 column: column,
1064 selectedKeys: colFilters,
1065 confirmFilter: _this7.handleFilter,
1066 prefixCls: "".concat(prefixCls, "-filter"),
1067 dropdownPrefixCls: dropdownPrefixCls,
1068 getPopupContainer: _this7.getPopupContainer
1069 });
1070 }
1071
1072 if (column.sorter) {
1073 var isSortColumn = _this7.isSortColumn(column);
1074
1075 var isAscend = isSortColumn && sortOrder === 'ascend'; // const isDescend = isSortColumn && sortOrder === 'descend';
1076
1077 column.className = classNames(column.className, _defineProperty({}, "".concat(prefixCls, "-sort-").concat(sortOrder), isSortColumn));
1078 var onHeaderCell = column.onHeaderCell;
1079
1080 column.onHeaderCell = function (col) {
1081 var customProps = onHeaderCell && onHeaderCell(col) || {};
1082 var _onClick = customProps.onClick;
1083 return _objectSpread({}, customProps, {
1084 onClick: function onClick(e) {
1085 if (!e.isDefaultPrevented()) {
1086 if (typeof _onClick === 'function') {
1087 _onClick(e);
1088 }
1089
1090 if (!e.isDefaultPrevented()) {
1091 _this7.setSortOrder(isAscend ? 'descend' : 'ascend', column);
1092 }
1093 }
1094 }
1095 });
1096 };
1097
1098 sortButton = React.createElement(Icon, {
1099 type: "arrow_upward",
1100 className: "".concat(prefixCls, "-sort-icon")
1101 });
1102 }
1103
1104 column.title = React.createElement("span", {
1105 key: key
1106 }, column.title, sortButton, filterDropdown);
1107
1108 if (sortButton || filterDropdown) {
1109 column.className = classNames("".concat(prefixCls, "-column-has-filters"), column.className);
1110 }
1111
1112 return column;
1113 });
1114 }
1115 }, {
1116 key: "renderPagination",
1117 value: function renderPagination(paginationPosition) {
1118 // 强制不需要分页
1119 if (!this.hasPagination()) {
1120 return null;
1121 }
1122
1123 var pagination = this.state.pagination;
1124 var size = this.props.size;
1125 var prefixCls = this.getPrefixCls();
1126 var position = pagination.position || 'bottom';
1127 var total = pagination.total || this.getLocalData().length;
1128 var paginationProps = getConfig('pagination');
1129 return total > 0 && (position === paginationPosition || position === 'both') ? React.createElement(Pagination, _extends({}, paginationProps, {
1130 key: "pagination-".concat(paginationPosition)
1131 }, pagination, {
1132 className: classNames(pagination.className, "".concat(prefixCls, "-pagination")),
1133 onChange: this.handlePageChange,
1134 total: total,
1135 size: pagination.size || size,
1136 current: this.getMaxCurrent(total),
1137 onShowSizeChange: this.handleShowSizeChange
1138 })) : null;
1139 } // Get pagination, filters, sorter
1140
1141 }, {
1142 key: "prepareParamsArguments",
1143 value: function prepareParamsArguments(state) {
1144 var pagination = _objectSpread({}, state.pagination); // remove useless handle function in Table.onChange
1145
1146
1147 delete pagination.onChange;
1148 delete pagination.onShowSizeChange;
1149 delete pagination.showTotal;
1150 delete pagination.sizeChangerOptionText;
1151 var filters = state.filters;
1152 var barFilters = state.barFilters;
1153 var sorter = {};
1154
1155 if (state.sortColumn && state.sortOrder) {
1156 sorter.column = state.sortColumn;
1157 sorter.order = state.sortOrder;
1158 sorter.field = state.sortColumn.dataIndex;
1159 sorter.columnKey = this.getColumnKey(state.sortColumn);
1160 }
1161
1162 return [pagination, filters, sorter, barFilters];
1163 }
1164 }, {
1165 key: "findColumn",
1166 value: function findColumn(myKey) {
1167 var _this8 = this;
1168
1169 var column;
1170 treeMap(this.columns, function (c) {
1171 if (_this8.getColumnKey(c) === myKey) {
1172 column = c;
1173 }
1174 });
1175 return column;
1176 }
1177 }, {
1178 key: "getCurrentPageData",
1179 value: function getCurrentPageData() {
1180 var data = this.getLocalData();
1181 var current;
1182 var pageSize;
1183 var state = this.state; // 如果没有分页的话,默认全部展示
1184
1185 if (!this.hasPagination()) {
1186 pageSize = Number.MAX_VALUE;
1187 current = 1;
1188 } else {
1189 pageSize = state.pagination.pageSize;
1190 current = this.getMaxCurrent(state.pagination.total || data.length);
1191 } // 分页
1192 // ---
1193 // 当数据量少于等于每页数量时,直接设置数据
1194 // 否则进行读取分页数据
1195
1196
1197 if (data.length > pageSize || pageSize === Number.MAX_VALUE) {
1198 data = data.filter(function (_, i) {
1199 return i >= (current - 1) * pageSize && i < current * pageSize;
1200 });
1201 }
1202
1203 return data;
1204 }
1205 }, {
1206 key: "getFlatData",
1207 value: function getFlatData() {
1208 var childrenColumnName = this.props.childrenColumnName;
1209 return flatArray(this.getLocalData(), childrenColumnName);
1210 }
1211 }, {
1212 key: "getFlatCurrentPageData",
1213 value: function getFlatCurrentPageData() {
1214 var childrenColumnName = this.props.childrenColumnName;
1215 return flatArray(this.getCurrentPageData(), childrenColumnName);
1216 }
1217 }, {
1218 key: "recursiveSort",
1219 value: function recursiveSort(data, sorterFn) {
1220 var _this9 = this;
1221
1222 var _this$props$childrenC = this.props.childrenColumnName,
1223 childrenColumnName = _this$props$childrenC === void 0 ? 'children' : _this$props$childrenC;
1224 return data.sort(sorterFn).map(function (item) {
1225 return item[childrenColumnName] ? _objectSpread({}, item, _defineProperty({}, childrenColumnName, _this9.recursiveSort(item[childrenColumnName], sorterFn))) : item;
1226 });
1227 }
1228 }, {
1229 key: "getLocalData",
1230 value: function getLocalData() {
1231 var _this10 = this;
1232
1233 var _this$props5 = this.props,
1234 dataSource = _this$props5.dataSource,
1235 noFilter = _this$props5.noFilter;
1236
1237 if (dataSource) {
1238 var state = this.state;
1239 var filters = state.filters,
1240 barFilters = state.barFilters;
1241 var data = dataSource; // 优化本地排序
1242
1243 data = data.slice(0);
1244 var sorterFn = this.getSorterFn();
1245
1246 if (sorterFn) {
1247 data = this.recursiveSort(data, sorterFn);
1248 }
1249
1250 var filteredData = data; // 筛选
1251
1252 if (filters) {
1253 Object.keys(filters).forEach(function (columnKey) {
1254 var col = _this10.findColumn(columnKey);
1255
1256 if (!col) {
1257 return;
1258 }
1259
1260 var values = filters[columnKey] || [];
1261
1262 if (values.length === 0) {
1263 return;
1264 }
1265
1266 var onFilter = col.onFilter,
1267 columnFilters = col.filters;
1268 filteredData = onFilter ? filteredData.filter(function (record) {
1269 return values.some(function (v) {
1270 return onFilter(v, record, columnFilters);
1271 });
1272 }) : filteredData;
1273 });
1274 }
1275
1276 if (barFilters.length) {
1277 var isOr = false;
1278 barFilters.forEach(function (filter) {
1279 if (filter === VALUE_OR) {
1280 isOr = true;
1281 } else {
1282 filteredData = data.filter(function (record) {
1283 return isOr ? filteredData.indexOf(record) !== -1 || _this10.doBarFilter(filter, record) : filteredData.indexOf(record) !== -1 && _this10.doBarFilter(filter, record);
1284 });
1285 isOr = false;
1286 }
1287 });
1288 }
1289
1290 if (noFilter) {
1291 return data;
1292 }
1293
1294 return filteredData;
1295 }
1296
1297 return [];
1298 }
1299 }, {
1300 key: "doBarFilter",
1301 value: function doBarFilter(filter, record) {
1302 if (typeof filter === 'string') {
1303 return !!findColumnByFilterValue(record, getLeafColumns(this.columns), filter);
1304 }
1305
1306 var columnKey = Object.keys(filter)[0];
1307 var col = this.findColumn(columnKey);
1308
1309 if (!col) {
1310 return true;
1311 }
1312
1313 var onFilter = col.onFilter,
1314 filters = col.filters;
1315 return !onFilter || onFilter(filter[columnKey], record, filters);
1316 }
1317 }, {
1318 key: "createComponents",
1319 value: function createComponents() {
1320 var components = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
1321 var prevComponents = arguments.length > 1 ? arguments[1] : undefined;
1322 var bodyRow = components && components.body && components.body.row;
1323 var preBodyRow = prevComponents && prevComponents.body && prevComponents.body.row;
1324
1325 if (!this.components || bodyRow !== preBodyRow) {
1326 this.components = _objectSpread({}, components);
1327 this.components.body = _objectSpread({}, components.body, {
1328 row: createBodyRow(bodyRow)
1329 });
1330 }
1331 }
1332 }, {
1333 key: "render",
1334 value: function render() {
1335 var _this11 = this;
1336
1337 var props = this.props;
1338 var style = props.style,
1339 className = props.className;
1340 var prefixCls = this.getPrefixCls();
1341 var data = this.getCurrentPageData();
1342 var loading = props.loading;
1343
1344 if (typeof loading === 'boolean') {
1345 loading = {
1346 spinning: loading
1347 };
1348 }
1349
1350 var table = React.createElement(LocaleReceiver, {
1351 componentName: "Table",
1352 defaultLocale: defaultLocale.Table
1353 }, function (locale) {
1354 return _this11.renderTable(locale, loading);
1355 }); // if there is no pagination or no data,
1356 // the height of spin should decrease by half of pagination
1357
1358 var paginationPatchClass = this.hasPagination() && data && data.length !== 0 ? "".concat(prefixCls, "-with-pagination") : "".concat(prefixCls, "-without-pagination");
1359 return React.createElement("div", {
1360 className: classNames("".concat(prefixCls, "-wrapper"), className),
1361 style: style,
1362 ref: this.saveRef
1363 }, React.createElement(Spin, _extends({}, loading, {
1364 className: loading.spinning ? "".concat(paginationPatchClass, " ").concat(prefixCls, "-spin-holder") : ''
1365 }), this.renderPagination('top'), table, this.renderPagination('bottom')));
1366 }
1367 }]);
1368
1369 return Table;
1370}(Component);
1371
1372export { Table as default };
1373Table.displayName = 'Table';
1374Table.Column = Column;
1375Table.ColumnGroup = ColumnGroup;
1376Table.propTypes = {
1377 dataSource: PropTypes.array,
1378 empty: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
1379 onColumnFilterChange: PropTypes.func,
1380 columns: PropTypes.array,
1381 prefixCls: PropTypes.string,
1382 useFixedHeader: PropTypes.bool,
1383 rowSelection: PropTypes.object,
1384 className: PropTypes.string,
1385 size: PropTypes.oneOf([Size.large, Size["default"], Size.small]),
1386 loading: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
1387 bordered: PropTypes.bool,
1388 onChange: PropTypes.func,
1389 locale: PropTypes.object,
1390 dropdownPrefixCls: PropTypes.string,
1391 filterBar: PropTypes.bool,
1392 filters: PropTypes.array,
1393 filterBarPlaceholder: PropTypes.string,
1394 onFilterSelectChange: PropTypes.func,
1395 noFilter: PropTypes.bool,
1396 autoScroll: PropTypes.bool,
1397 indentSize: PropTypes.number,
1398 rowKey: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
1399 showHeader: PropTypes.bool
1400};
1401Table.defaultProps = {
1402 dataSource: [],
1403 empty: null,
1404 useFixedHeader: false,
1405 rowSelection: null,
1406 className: '',
1407 size: Size["default"],
1408 loading: false,
1409 bordered: false,
1410 indentSize: 20,
1411 locale: {},
1412 rowKey: 'key',
1413 showHeader: true,
1414 filterBar: true,
1415 noFilter: false,
1416 autoScroll: true
1417};
1418//# sourceMappingURL=Table.js.map