1 | 'use strict';
|
2 |
|
3 | Object.defineProperty(exports, "__esModule", {
|
4 | value: true
|
5 | });
|
6 |
|
7 | var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
|
8 |
|
9 | var _react = require('react');
|
10 |
|
11 | var _react2 = _interopRequireDefault(_react);
|
12 |
|
13 | var _propTypes = require('prop-types');
|
14 |
|
15 | var _propTypes2 = _interopRequireDefault(_propTypes);
|
16 |
|
17 | var _componentClasses = require('component-classes');
|
18 |
|
19 | var _componentClasses2 = _interopRequireDefault(_componentClasses);
|
20 |
|
21 | var _TableRow = require('./TableRow');
|
22 |
|
23 | var _TableRow2 = _interopRequireDefault(_TableRow);
|
24 |
|
25 | var _TableHeader = require('./TableHeader');
|
26 |
|
27 | var _TableHeader2 = _interopRequireDefault(_TableHeader);
|
28 |
|
29 | var _utils = require('./lib/utils');
|
30 |
|
31 | var _shallowequal = require('shallowequal');
|
32 |
|
33 | var _shallowequal2 = _interopRequireDefault(_shallowequal);
|
34 |
|
35 | var _addEventListener = require('tinper-bee-core/lib/addEventListener');
|
36 |
|
37 | var _addEventListener2 = _interopRequireDefault(_addEventListener);
|
38 |
|
39 | var _ColumnManager = require('./ColumnManager');
|
40 |
|
41 | var _ColumnManager2 = _interopRequireDefault(_ColumnManager);
|
42 |
|
43 | var _createStore = require('./createStore');
|
44 |
|
45 | var _createStore2 = _interopRequireDefault(_createStore);
|
46 |
|
47 | var _beeLoading = require('bee-loading');
|
48 |
|
49 | var _beeLoading2 = _interopRequireDefault(_beeLoading);
|
50 |
|
51 | var _beeIcon = require('bee-icon');
|
52 |
|
53 | var _beeIcon2 = _interopRequireDefault(_beeIcon);
|
54 |
|
55 | var _i18n = require('./lib/i18n');
|
56 |
|
57 | var _i18n2 = _interopRequireDefault(_i18n);
|
58 |
|
59 | var _tool = require('bee-locale/build/tool');
|
60 |
|
61 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
62 |
|
63 | function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return obj; }
|
64 |
|
65 | function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
|
66 |
|
67 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
68 |
|
69 | function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
|
70 |
|
71 | function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : _defaults(subClass, superClass); }
|
72 |
|
73 | var propTypes = {
|
74 | data: _propTypes2["default"].array,
|
75 | expandIconAsCell: _propTypes2["default"].bool,
|
76 | defaultExpandAllRows: _propTypes2["default"].bool,
|
77 | expandedRowKeys: _propTypes2["default"].array,
|
78 | defaultExpandedRowKeys: _propTypes2["default"].array,
|
79 | useFixedHeader: _propTypes2["default"].bool,
|
80 | columns: _propTypes2["default"].array,
|
81 | clsPrefix: _propTypes2["default"].string,
|
82 | bodyStyle: _propTypes2["default"].object,
|
83 | style: _propTypes2["default"].object,
|
84 |
|
85 | rowKey: _propTypes2["default"].oneOfType([_propTypes2["default"].string, _propTypes2["default"].func]),
|
86 | rowClassName: _propTypes2["default"].func,
|
87 |
|
88 | columnKey: _propTypes2["default"].string,
|
89 | expandedRowClassName: _propTypes2["default"].func,
|
90 | childrenColumnName: _propTypes2["default"].string,
|
91 | onExpand: _propTypes2["default"].func,
|
92 | onRowHover: _propTypes2["default"].func,
|
93 | onExpandedRowsChange: _propTypes2["default"].func,
|
94 | indentSize: _propTypes2["default"].number,
|
95 | onRowClick: _propTypes2["default"].func,
|
96 | onRowDoubleClick: _propTypes2["default"].func,
|
97 | expandIconColumnIndex: _propTypes2["default"].number,
|
98 |
|
99 | showHeader: _propTypes2["default"].bool,
|
100 | title: _propTypes2["default"].func,
|
101 | footer: _propTypes2["default"].func,
|
102 | emptyText: _propTypes2["default"].func,
|
103 | scroll: _propTypes2["default"].object,
|
104 | rowRef: _propTypes2["default"].func,
|
105 | getBodyWrapper: _propTypes2["default"].func,
|
106 | children: _propTypes2["default"].node,
|
107 | draggable: _propTypes2["default"].bool,
|
108 | minColumnWidth: _propTypes2["default"].number,
|
109 | filterable: _propTypes2["default"].bool,
|
110 | filterDelay: _propTypes2["default"].number,
|
111 | onFilterChange: _propTypes2["default"].func,
|
112 | onFilterClear: _propTypes2["default"].func,
|
113 | syncHover: _propTypes2["default"].bool,
|
114 | tabIndex: _propTypes2["default"].string,
|
115 | hoverContent: _propTypes2["default"].func,
|
116 | size: _propTypes2["default"].oneOf(['sm', 'md', 'lg']),
|
117 | rowDraggAble: _propTypes2["default"].bool,
|
118 | hideDragHandle: _propTypes2["default"].bool,
|
119 | onDropRow: _propTypes2["default"].func,
|
120 | onDragRowStart: _propTypes2["default"].func,
|
121 | onBodyScroll: _propTypes2["default"].func,
|
122 | bodyDisplayInRow: _propTypes2["default"].bool,
|
123 | headerDisplayInRow: _propTypes2["default"].bool,
|
124 | showRowNum: _propTypes2["default"].oneOfType([_propTypes2["default"].bool, _propTypes2["default"].object]),
|
125 | onPaste: _propTypes2["default"].func,
|
126 | onBodyMouseLeave: _propTypes2["default"].func
|
127 | };
|
128 |
|
129 | var defaultProps = {
|
130 | data: [],
|
131 | useFixedHeader: false,
|
132 | expandIconAsCell: false,
|
133 | defaultExpandAllRows: false,
|
134 | defaultExpandedRowKeys: [],
|
135 | columnKey: 'key',
|
136 | rowKey: 'key',
|
137 | rowClassName: function rowClassName() {
|
138 | return '';
|
139 | },
|
140 | expandedRowClassName: function expandedRowClassName() {
|
141 | return '';
|
142 | },
|
143 | onExpand: function onExpand() {},
|
144 | onExpandedRowsChange: function onExpandedRowsChange() {},
|
145 | onRowClick: function onRowClick() {},
|
146 |
|
147 |
|
148 | clsPrefix: 'u-table',
|
149 | bodyStyle: {},
|
150 | style: {},
|
151 | childrenColumnName: 'children',
|
152 | indentSize: 15,
|
153 | expandIconColumnIndex: 0,
|
154 | showHeader: true,
|
155 | scroll: {},
|
156 | rowRef: function rowRef() {
|
157 | return null;
|
158 | },
|
159 | getBodyWrapper: function getBodyWrapper(body) {
|
160 | return body;
|
161 | },
|
162 |
|
163 | columns: [],
|
164 | minColumnWidth: 80,
|
165 | locale: {},
|
166 | syncHover: true,
|
167 |
|
168 | setRowParentIndex: function setRowParentIndex() {},
|
169 | tabIndex: '0',
|
170 | heightConsistent: false,
|
171 | size: 'md',
|
172 | rowDraggAble: false,
|
173 | hideDragHandle: false,
|
174 | onDropRow: function onDropRow() {},
|
175 | onDragRowStart: function onDragRowStart() {},
|
176 | onBodyScroll: function onBodyScroll() {},
|
177 | bodyDisplayInRow: true,
|
178 | headerDisplayInRow: true,
|
179 | showRowNum: false,
|
180 | onPaste: function onPaste() {}
|
181 | };
|
182 |
|
183 | var expandIconCellWidth = Number(43);
|
184 |
|
185 | var Table = function (_Component) {
|
186 | _inherits(Table, _Component);
|
187 |
|
188 | function Table(props) {
|
189 | _classCallCheck(this, Table);
|
190 |
|
191 | var _this = _possibleConstructorReturn(this, _Component.call(this, props));
|
192 |
|
193 | _this.resize = function () {
|
194 | (0, _utils.debounce)(_this.syncFixedTableRowHeight, 150);
|
195 | _this.computeTableWidth();
|
196 | var renderFlag = _this.state.renderFlag;
|
197 | _this.setState({
|
198 | renderFlag: !renderFlag
|
199 | });
|
200 | };
|
201 |
|
202 | _this.getTableUID = function () {
|
203 | var uid = "_table_uid_" + new Date().getTime();
|
204 | _this.tableUid = uid;
|
205 | var div = document.createElement("div");
|
206 |
|
207 | div.className = "u-table-drag-hidden-cont";
|
208 | div.id = uid;
|
209 | _this.contentTable.appendChild(div);
|
210 | };
|
211 |
|
212 | _this.onDragRowStart = function (currentKey) {
|
213 | var data = _this.state.data,
|
214 | currentIndex = void 0,
|
215 | record = void 0;
|
216 | data.forEach(function (da, i) {
|
217 |
|
218 | var trKey = da.key ? da.key : _this.getRowKey(da, i);
|
219 | if (trKey == currentKey) {
|
220 | currentIndex = i;
|
221 | record = da;
|
222 | }
|
223 | });
|
224 | _this.props.onDragRowStart && _this.props.onDragRowStart(record, currentIndex);
|
225 | };
|
226 |
|
227 | _this.onDragRow = function (currentKey, targetKey) {
|
228 | var data = _this.state.data,
|
229 | currentIndex = void 0,
|
230 | targetIndex = void 0,
|
231 | record = void 0;
|
232 | data.forEach(function (da, i) {
|
233 |
|
234 | var trKey = da.key ? da.key : _this.getRowKey(da, i);
|
235 | if (trKey == currentKey) {
|
236 | currentIndex = i;
|
237 | record = da;
|
238 | }
|
239 | if (trKey == targetKey) {
|
240 | targetIndex = i;
|
241 | }
|
242 | });
|
243 | if (currentIndex > -1) {
|
244 | data = _this.swapArray(data, currentIndex, targetIndex);
|
245 | _this.props.onDropRow && _this.props.onDropRow(data, record, targetIndex);
|
246 | _this.setState({
|
247 | data: data
|
248 | });
|
249 | } else {
|
250 | _this.props.onDropRow && _this.props.onDropRow(data, record, targetIndex);
|
251 | }
|
252 | };
|
253 |
|
254 | _this.swapArray = function (arr, index1, index2) {
|
255 | var value1 = arr[index1];
|
256 | arr.splice(index1, 1);
|
257 | if (index1 < index2) {
|
258 | arr.splice(index2, 0, value1);
|
259 | } else {
|
260 | arr.splice(index2 + 1, 0, value1);
|
261 | }
|
262 |
|
263 | return arr;
|
264 | };
|
265 |
|
266 | _this.renderDragHideTable = function () {
|
267 | var _this$props = _this.props,
|
268 | columns = _this$props.columns,
|
269 | dragborder = _this$props.dragborder,
|
270 | dragborderKey = _this$props.dragborderKey;
|
271 |
|
272 | if (!dragborder) return null;
|
273 | var sum = 0;
|
274 | return _react2["default"].createElement(
|
275 | 'div',
|
276 | { id: 'u-table-drag-hide-table-' + dragborderKey, className: _this.props.clsPrefix + '-hiden-drag' },
|
277 | columns.map(function (da, i) {
|
278 | sum += da.width ? da.width : 0;
|
279 | return _react2["default"].createElement('div', { className: _this.props.clsPrefix + '-hiden-drag-li', key: da + "_hiden_" + i, style: { left: sum + "px" } });
|
280 | })
|
281 | );
|
282 | };
|
283 |
|
284 | _this.getTdPadding = function (td) {
|
285 | var tdPaddingTop = _this.getStyle(td, 'paddingTop'),
|
286 | tdPaddingBottom = _this.getStyle(td, 'paddingBottom'),
|
287 | tdBorderTop = _this.getStyle(td, 'borderTopWidth'),
|
288 | tdBorderBottom = _this.getStyle(td, 'borderBottomWidth');
|
289 | return Number(tdPaddingTop.replace('px', '')) + Number(tdPaddingBottom.replace('px', '')) + Number(tdBorderTop.replace('px', '')) + Number(tdBorderBottom.replace('px', ''));
|
290 | };
|
291 |
|
292 | _this.onRowHoverMouseEnter = function () {
|
293 |
|
294 | _this.store.setState({
|
295 | currentHoverKey: _this.currentHoverKey
|
296 | });
|
297 | _this.hoverDom.style.display = 'block';
|
298 | };
|
299 |
|
300 | _this.onRowHoverMouseLeave = function () {};
|
301 |
|
302 | _this.onFocus = function (e) {
|
303 | _this.props.onKeyTab && _this.props.onKeyTab();
|
304 | };
|
305 |
|
306 | _this.onKeyDown = function (e) {
|
307 | var event = _utils.Event.getEvent(e);
|
308 |
|
309 | if (event.keyCode === 38) {
|
310 |
|
311 | event.preventDefault && event.preventDefault();
|
312 | _this.props.onKeyUp && _this.props.onKeyUp();
|
313 | } else if (event.keyCode === 40) {
|
314 |
|
315 | event.preventDefault && event.preventDefault();
|
316 | _this.props.onKeyDown && _this.props.onKeyDown();
|
317 | }
|
318 | _this.props.onTableKeyDown && _this.props.onTableKeyDown();
|
319 | };
|
320 |
|
321 | var expandedRowKeys = [];
|
322 | var rows = [].concat(_toConsumableArray(props.data));
|
323 | var showDragHandle = !props.hideDragHandle && props.rowDraggAble;
|
324 | _this.columnManager = new _ColumnManager2["default"](props.columns, props.children, props.originWidth, showDragHandle, props.showRowNum);
|
325 | _this.store = (0, _createStore2["default"])({ currentHoverKey: null });
|
326 | _this.firstDid = true;
|
327 | if (props.defaultExpandAllRows) {
|
328 | for (var i = 0; i < rows.length; i++) {
|
329 | var row = rows[i];
|
330 | expandedRowKeys.push(_this.getRowKey(row, i));
|
331 | rows = rows.concat(row[props.childrenColumnName] || []);
|
332 | }
|
333 | } else {
|
334 | expandedRowKeys = props.expandedRowKeys || props.defaultExpandedRowKeys;
|
335 | }
|
336 |
|
337 | _this.state = {
|
338 | expandedRowKeys: expandedRowKeys,
|
339 | data: props.data,
|
340 | currentHoverKey: null,
|
341 | scrollPosition: 'left',
|
342 | fixedColumnsHeadRowsHeight: [],
|
343 | fixedColumnsBodyRowsHeight: [],
|
344 | fixedColumnsExpandedRowsHeight: {}
|
345 | };
|
346 |
|
347 | _this.onExpandedRowsChange = _this.onExpandedRowsChange.bind(_this);
|
348 | _this.onExpanded = _this.onExpanded.bind(_this);
|
349 | _this.onRowDestroy = _this.onRowDestroy.bind(_this);
|
350 | _this.getRowKey = _this.getRowKey.bind(_this);
|
351 | _this.getExpandedRows = _this.getExpandedRows.bind(_this);
|
352 | _this.getHeader = _this.getHeader.bind(_this);
|
353 | _this.getHeaderRows = _this.getHeaderRows.bind(_this);
|
354 | _this.getExpandedRow = _this.getExpandedRow.bind(_this);
|
355 | _this.getRowsByData = _this.getRowsByData.bind(_this);
|
356 | _this.getRows = _this.getRows.bind(_this);
|
357 | _this.getColGroup = _this.getColGroup.bind(_this);
|
358 | _this.getLeftFixedTable = _this.getLeftFixedTable.bind(_this);
|
359 | _this.getRightFixedTable = _this.getRightFixedTable.bind(_this);
|
360 | _this.getTable = _this.getTable.bind(_this);
|
361 | _this.getTitle = _this.getTitle.bind(_this);
|
362 | _this.getFooter = _this.getFooter.bind(_this);
|
363 | _this.getEmptyText = _this.getEmptyText.bind(_this);
|
364 | _this.getHeaderRowStyle = _this.getHeaderRowStyle.bind(_this);
|
365 | _this.syncFixedTableRowHeight = _this.syncFixedTableRowHeight.bind(_this);
|
366 | _this.resetScrollX = _this.resetScrollX.bind(_this);
|
367 | _this.findExpandedRow = _this.findExpandedRow.bind(_this);
|
368 | _this.isRowExpanded = _this.isRowExpanded.bind(_this);
|
369 | _this.detectScrollTarget = _this.detectScrollTarget.bind(_this);
|
370 | _this.handleBodyScroll = _this.handleBodyScroll.bind(_this);
|
371 | _this.handleRowHover = _this.handleRowHover.bind(_this);
|
372 | _this.computeTableWidth = _this.computeTableWidth.bind(_this);
|
373 | _this.onBodyMouseLeave = _this.onBodyMouseLeave.bind(_this);
|
374 | _this.tableUid = null;
|
375 | _this.contentTable = null;
|
376 | _this.leftColumnsLength;
|
377 | _this.centerColumnsLength;
|
378 | _this.columnsChildrenList = [];
|
379 | return _this;
|
380 | }
|
381 |
|
382 | Table.prototype.componentWillMount = function componentWillMount() {
|
383 | this.centerColumnsLength = this.columnManager.centerColumns().length;
|
384 | this.leftColumnsLength = this.columnManager.leftColumns().length;
|
385 | };
|
386 |
|
387 | Table.prototype.componentDidMount = function componentDidMount() {
|
388 | this.getTableUID();
|
389 | _utils.EventUtil.addHandler(this.contentTable, 'keydown', this.onKeyDown);
|
390 | _utils.EventUtil.addHandler(this.contentTable, 'focus', this.onFocus);
|
391 | setTimeout(this.resetScrollX, 300);
|
392 |
|
393 |
|
394 | this.scrollbarWidth = (0, _utils.measureScrollbar)();
|
395 |
|
396 |
|
397 | if (!this.props.originWidth) {
|
398 | this.computeTableWidth();
|
399 | }
|
400 | if (this.columnManager.isAnyColumnsFixed()) {
|
401 | this.syncFixedTableRowHeight();
|
402 | this.resizeEvent = (0, _addEventListener2["default"])(window, 'resize', this.resize);
|
403 | }
|
404 | };
|
405 |
|
406 | Table.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
|
407 | var _props = this.props,
|
408 | hideDragHandle = _props.hideDragHandle,
|
409 | rowDraggAble = _props.rowDraggAble,
|
410 | showRowNum = _props.showRowNum;
|
411 |
|
412 | if ('data' in nextProps) {
|
413 | this.setState({
|
414 | data: nextProps.data
|
415 | });
|
416 | }
|
417 | if ('expandedRowKeys' in nextProps) {
|
418 | this.setState({
|
419 | expandedRowKeys: nextProps.expandedRowKeys
|
420 | });
|
421 | }
|
422 | if (nextProps.columns && nextProps.columns !== this.props.columns) {
|
423 | this.columnManager.reset(nextProps.columns, null, showRowNum, !hideDragHandle && rowDraggAble);
|
424 | if (nextProps.columns.length !== this.props.columns.length && this.refs && this.bodyTable) {
|
425 | this.scrollTop = this.bodyTable.scrollTop;
|
426 | }
|
427 | } else if (nextProps.children !== this.props.children) {
|
428 | this.columnManager.reset(null, nextProps.children, showRowNum, !hideDragHandle && rowDraggAble);
|
429 | }
|
430 |
|
431 | if (nextProps.scrollTop > -1) {
|
432 |
|
433 | this.scrollTop = nextProps.scrollTop;
|
434 | }
|
435 |
|
436 |
|
437 | if (this.scrollbarWidth <= 0 && this.props.scroll.y) {
|
438 | this.scrollbarWidth = (0, _utils.measureScrollbar)();
|
439 | }
|
440 | if (!nextProps.originWidth) {
|
441 | this.computeTableWidth();
|
442 | this.firstDid = true;
|
443 | }
|
444 | if (nextProps.resetScroll) {
|
445 | this.resetScrollX();
|
446 | }
|
447 |
|
448 |
|
449 | };
|
450 |
|
451 | Table.prototype.componentDidUpdate = function componentDidUpdate(prevProps, prevState) {
|
452 |
|
453 |
|
454 | if (this.columnManager.isAnyColumnsFixed()) {
|
455 | this.syncFixedTableRowHeight();
|
456 | }
|
457 |
|
458 |
|
459 | if (typeof this.props.scroll.x !== 'number' && this.contentTable.getBoundingClientRect().width !== this.contentDomWidth && this.firstDid) {
|
460 | this.computeTableWidth();
|
461 | this.firstDid = false;
|
462 | }
|
463 | if (this.scrollTop > -1) {
|
464 | this.refs.fixedColumnsBodyLeft && (this.refs.fixedColumnsBodyLeft.scrollTop = this.scrollTop);
|
465 | this.refs.fixedColumnsBodyRight && (this.refs.fixedColumnsBodyRight.scrollTop = this.scrollTop);
|
466 | this.bodyTable.scrollTop = this.scrollTop;
|
467 | this.scrollTop = -1;
|
468 | }
|
469 |
|
470 |
|
471 |
|
472 |
|
473 |
|
474 |
|
475 | this.isShowScrollY();
|
476 | };
|
477 |
|
478 | Table.prototype.componentWillUnmount = function componentWillUnmount() {
|
479 |
|
480 | this.contentTable = null;
|
481 | _utils.EventUtil.removeHandler(this.contentTable, 'keydown', this.onKeyDown);
|
482 | _utils.EventUtil.removeHandler(this.contentTable, 'focus', this.onFocus);
|
483 | if (this.resizeEvent) {
|
484 | this.resizeEvent.remove();
|
485 | }
|
486 | };
|
487 |
|
488 | Table.prototype.computeTableWidth = function computeTableWidth() {
|
489 | var expandIconAsCell = this.props.expandIconAsCell;
|
490 |
|
491 |
|
492 | var setWidthParam = this.props.scroll.x;
|
493 |
|
494 | if (typeof setWidthParam == 'number') {
|
495 | var numSetWidthParam = parseInt(setWidthParam);
|
496 | this.contentWidth = numSetWidthParam;
|
497 | } else {
|
498 |
|
499 |
|
500 | this.contentDomWidth = this.contentTable.getBoundingClientRect().width;
|
501 |
|
502 | this.contentWidth = this.contentDomWidth;
|
503 | }
|
504 | var computeObj = this.columnManager.getColumnWidth(this.contentWidth);
|
505 | var expandColWidth = expandIconAsCell ? expandIconCellWidth : 0;
|
506 | var lastShowIndex = computeObj.lastShowIndex;
|
507 | this.computeWidth = computeObj.computeWidth + expandColWidth;
|
508 |
|
509 | this.domWidthDiff = this.contentDomWidth - this.computeWidth;
|
510 | if (typeof setWidthParam == 'string' && setWidthParam.indexOf('%')) {
|
511 | this.contentWidth = this.contentWidth * parseInt(setWidthParam) / 100;
|
512 | this.domWidthDiff = this.contentDomWidth - this.contentWidth;
|
513 | }
|
514 |
|
515 | if (this.computeWidth < this.contentWidth) {
|
516 | var contentWidthDiff = this.scrollbarWidth ? this.contentWidth - this.computeWidth - this.scrollbarWidth : this.contentWidth - this.computeWidth;
|
517 |
|
518 | if (this.props.bordered) {
|
519 | contentWidthDiff = contentWidthDiff - 1;
|
520 | }
|
521 | this.setState({ contentWidthDiff: contentWidthDiff, lastShowIndex: lastShowIndex });
|
522 | } else {
|
523 | this.contentWidth = this.computeWidth;
|
524 | this.setState({ contentWidthDiff: 0, lastShowIndex: lastShowIndex });
|
525 | }
|
526 | };
|
527 |
|
528 |
|
529 |
|
530 | Table.prototype.isShowScrollY = function isShowScrollY() {
|
531 | var props = this.props;
|
532 | var y = props.scroll && props.scroll.y;
|
533 | if (y) {
|
534 | var bodyH = this.bodyTable.clientHeight;
|
535 | var bodyContentH = this.bodyTable.querySelector('table').clientHeight;
|
536 | var rightBodyTable = this.refs.fixedColumnsBodyRight;
|
537 |
|
538 | var overflowy = bodyContentH <= bodyH ? 'auto' : 'scroll';
|
539 | this.bodyTable.style.overflowY = overflowy;
|
540 |
|
541 | this.headTable.style.overflowY = overflowy;
|
542 | rightBodyTable && (rightBodyTable.style.overflowY = overflowy);
|
543 |
|
544 |
|
545 |
|
546 |
|
547 |
|
548 |
|
549 |
|
550 | }
|
551 | };
|
552 |
|
553 | Table.prototype.onExpandedRowsChange = function onExpandedRowsChange(expandedRowKeys) {
|
554 | if (!this.props.expandedRowKeys) {
|
555 | this.setState({ expandedRowKeys: expandedRowKeys });
|
556 | }
|
557 | this.props.onExpandedRowsChange(expandedRowKeys);
|
558 | };
|
559 |
|
560 | Table.prototype.onExpanded = function onExpanded(expanded, record, index, e) {
|
561 | if (e) {
|
562 | e.preventDefault();
|
563 | e.stopPropagation();
|
564 | }
|
565 | var info = this.findExpandedRow(record);
|
566 | if (typeof info !== 'undefined' && !expanded) {
|
567 | this.onRowDestroy(record, index, true);
|
568 | } else if (!info && expanded) {
|
569 | var expandedRows = this.getExpandedRows().concat();
|
570 | expandedRows.push(this.getRowKey(record, index));
|
571 | this.onExpandedRowsChange(expandedRows);
|
572 | }
|
573 | this.props.onExpand(expanded, record, index);
|
574 | };
|
575 |
|
576 | Table.prototype.onRowDestroy = function onRowDestroy(record, rowIndex, isExpandOperation) {
|
577 | var expandedRows = this.getExpandedRows().concat();
|
578 | var rowKey = this.getRowKey(record, rowIndex);
|
579 | var index = -1;
|
580 | expandedRows.forEach(function (r, i) {
|
581 | if (r === rowKey) {
|
582 | index = i;
|
583 | }
|
584 | });
|
585 | if (index !== -1) {
|
586 | expandedRows.splice(index, 1);
|
587 | }
|
588 |
|
589 | if (this.currentHoverKey == rowKey && this.hoverDom) {
|
590 | this.hoverDom.style.display = 'none';
|
591 | }
|
592 |
|
593 | if (isExpandOperation) {
|
594 | this.onExpandedRowsChange(expandedRows);
|
595 | } else {
|
596 | var info = this.findExpandedRow(record);
|
597 | if (typeof info === 'undefined') {
|
598 | this.onExpandedRowsChange(expandedRows);
|
599 | }
|
600 | }
|
601 | };
|
602 |
|
603 | Table.prototype.getRowKey = function getRowKey(record, index) {
|
604 | var rowKey = this.props.rowKey;
|
605 | var key = typeof rowKey === 'function' ? rowKey(record, index) : record[rowKey];
|
606 | (0, _utils.warningOnce)(key !== undefined, 'Each record in table should have a unique `key` prop,' + 'or set `rowKey` to an unique primary key.');
|
607 | return key;
|
608 | };
|
609 |
|
610 | Table.prototype.getExpandedRows = function getExpandedRows() {
|
611 | return this.props.expandedRowKeys || this.state.expandedRowKeys;
|
612 | };
|
613 |
|
614 | Table.prototype.getHeader = function getHeader(columns, fixed, leftFixedWidth, rightFixedWidth) {
|
615 | var lastShowIndex = this.state.lastShowIndex;
|
616 | var _props2 = this.props,
|
617 | filterDelay = _props2.filterDelay,
|
618 | onFilterChange = _props2.onFilterChange,
|
619 | onFilterClear = _props2.onFilterClear,
|
620 | filterable = _props2.filterable,
|
621 | showHeader = _props2.showHeader,
|
622 | expandIconAsCell = _props2.expandIconAsCell,
|
623 | clsPrefix = _props2.clsPrefix,
|
624 | onDragStart = _props2.onDragStart,
|
625 | onDragEnter = _props2.onDragEnter,
|
626 | onDragOver = _props2.onDragOver,
|
627 | onDrop = _props2.onDrop,
|
628 | onDragEnd = _props2.onDragEnd,
|
629 | draggable = _props2.draggable,
|
630 | onMouseDown = _props2.onMouseDown,
|
631 | onMouseMove = _props2.onMouseMove,
|
632 | onMouseUp = _props2.onMouseUp,
|
633 | dragborder = _props2.dragborder,
|
634 | onThMouseMove = _props2.onThMouseMove,
|
635 | dragborderKey = _props2.dragborderKey,
|
636 | minColumnWidth = _props2.minColumnWidth,
|
637 | headerHeight = _props2.headerHeight,
|
638 | afterDragColWidth = _props2.afterDragColWidth,
|
639 | headerScroll = _props2.headerScroll,
|
640 | bordered = _props2.bordered,
|
641 | onDropBorder = _props2.onDropBorder,
|
642 | onDraggingBorder = _props2.onDraggingBorder,
|
643 | bodyDisplayInRow = _props2.bodyDisplayInRow,
|
644 | headerEventNoStop = _props2.headerEventNoStop,
|
645 | onCopy = _props2.onCopy;
|
646 |
|
647 | this.columnsChildrenList = [];
|
648 | var rows = this.getHeaderRows(columns);
|
649 | if (expandIconAsCell && fixed !== 'right') {
|
650 | rows[0].unshift({
|
651 | key: 'u-table-expandIconAsCell',
|
652 | className: clsPrefix + '-expand-icon-th',
|
653 | title: '',
|
654 | rowSpan: rows.length,
|
655 | width: expandIconCellWidth
|
656 | });
|
657 | this.columnsChildrenList.unshift({
|
658 | className: "u-table-expand-icon-column",
|
659 | key: "expand-icon"
|
660 | });
|
661 | }
|
662 | var trStyle = headerHeight && !fixed ? { height: headerHeight } : fixed ? this.getHeaderRowStyle(columns, rows) : null;
|
663 | var drop = draggable ? { onDragStart: onDragStart, onDragOver: onDragOver, onDrop: onDrop, onDragEnd: onDragEnd, onDragEnter: onDragEnter, draggable: draggable } : {};
|
664 | var dragBorder = dragborder ? { onMouseDown: onMouseDown, onMouseMove: onMouseMove, onMouseUp: onMouseUp, dragborder: dragborder, onThMouseMove: onThMouseMove, dragborderKey: dragborderKey, onDropBorder: onDropBorder, onDraggingBorder: onDraggingBorder } : {};
|
665 | var contentWidthDiff = 0;
|
666 |
|
667 | if (!fixed) {
|
668 | contentWidthDiff = this.state.contentWidthDiff;
|
669 | }
|
670 | return showHeader ? _react2["default"].createElement(_TableHeader2["default"], _extends({}, drop, dragBorder, {
|
671 | columnsChildrenList: this.columnsChildrenList,
|
672 | locale: this.props.locale,
|
673 | minColumnWidth: minColumnWidth,
|
674 | contentWidthDiff: contentWidthDiff,
|
675 | contentWidth: this.contentWidth,
|
676 | lastShowIndex: expandIconAsCell ? parseInt(lastShowIndex) + 1 : lastShowIndex,
|
677 | clsPrefix: clsPrefix,
|
678 | rows: rows,
|
679 | contentTable: this.contentTable,
|
680 | rowStyle: trStyle,
|
681 | fixed: fixed,
|
682 | filterable: filterable,
|
683 | onFilterChange: onFilterChange,
|
684 | onFilterClear: onFilterClear,
|
685 | filterDelay: filterDelay,
|
686 | afterDragColWidth: afterDragColWidth,
|
687 | contentDomWidth: this.contentDomWidth,
|
688 | scrollbarWidth: this.scrollbarWidth,
|
689 | headerScroll: headerScroll,
|
690 | bordered: bordered,
|
691 | leftFixedWidth: leftFixedWidth,
|
692 | rightFixedWidth: rightFixedWidth,
|
693 | bodyDisplayInRow: bodyDisplayInRow,
|
694 | eventNoStop: headerEventNoStop,
|
695 | onCopy: onCopy
|
696 | })) : null;
|
697 | };
|
698 |
|
699 | Table.prototype.getHeaderRows = function getHeaderRows(columns) {
|
700 | var _this2 = this;
|
701 |
|
702 | var currentRow = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
|
703 | var rows = arguments[2];
|
704 | var columnKey = this.props.columnKey;
|
705 | var _state = this.state,
|
706 | _state$contentWidthDi = _state.contentWidthDiff,
|
707 | contentWidthDiff = _state$contentWidthDi === undefined ? 0 : _state$contentWidthDi,
|
708 | _state$lastShowIndex = _state.lastShowIndex,
|
709 | lastShowIndex = _state$lastShowIndex === undefined ? -1 : _state$lastShowIndex;
|
710 |
|
711 | var filterCol = [];
|
712 | rows = rows || [];
|
713 | rows[currentRow] = rows[currentRow] || [];
|
714 |
|
715 | columns.forEach(function (column, i) {
|
716 | if (!column.key) {
|
717 | column.key = column[columnKey];
|
718 | }
|
719 | if (column.rowSpan && rows.length < column.rowSpan) {
|
720 | while (rows.length < column.rowSpan) {
|
721 | rows.push([]);
|
722 | }
|
723 | }
|
724 | var width = column.width;
|
725 | if (typeof width == 'string' && width.indexOf('%') > -1 && _this2.contentWidth) {
|
726 | width = parseInt(_this2.contentWidth * parseInt(width) / 100);
|
727 | } else if (width) {
|
728 | width = parseInt(width);
|
729 | }
|
730 | if (!column.fixed && lastShowIndex == i && width) {
|
731 | width = width + contentWidthDiff;
|
732 | }
|
733 | var cell = {
|
734 | key: column.key,
|
735 | className: column.className || '',
|
736 | children: column.title,
|
737 | drgHover: column.drgHover,
|
738 | fixed: column.fixed,
|
739 | width: width,
|
740 | dataindex: column.dataIndex,
|
741 | textAlign: column.textAlign,
|
742 | titleAlign: column.titleAlign,
|
743 | required: column.required
|
744 | };
|
745 | if (column.onHeadCellClick) {
|
746 | cell.onClick = column.onHeadCellClick;
|
747 | }
|
748 | if (column.children) {
|
749 | _this2.getHeaderRows(column.children, currentRow + 1, rows);
|
750 | } else {
|
751 | _this2.columnsChildrenList.push(column);
|
752 | }
|
753 | if ('colSpan' in column) {
|
754 | cell.colSpan = column.colSpan;
|
755 | }
|
756 | if ('rowSpan' in column) {
|
757 | cell.rowSpan = column.rowSpan;
|
758 | }
|
759 | if (cell.colSpan !== 0) {
|
760 | rows[currentRow].push(cell);
|
761 | }
|
762 |
|
763 | if (_this2.props.filterable) {
|
764 |
|
765 | filterCol.push({
|
766 | key: column.key,
|
767 | children: "过滤渲染",
|
768 | width: column.width,
|
769 | filtertype: column.filterType,
|
770 | dataindex: column.dataIndex,
|
771 | datasource: _this2.props.data,
|
772 | format: column.format,
|
773 | filterdropdown: column.filterDropdown,
|
774 | filterdropdownauto: column.filterDropdownAuto,
|
775 | filterdropdowndata: column.filterDropdownData,
|
776 | filterdropdownfocus: column.filterDropdownFocus,
|
777 | filterdropdowntype: column.filterDropdownType,
|
778 | filterdropdownincludekeys: column.filterDropdownIncludeKeys,
|
779 | filterinputnumberoptions: column.filterInputNumberOptions
|
780 | });
|
781 | }
|
782 | });
|
783 | if (this.props.filterable) {
|
784 | rows.push(filterCol);
|
785 | }
|
786 | return rows.filter(function (row) {
|
787 | return row.length > 0;
|
788 | });
|
789 | };
|
790 |
|
791 | Table.prototype.getExpandedRow = function getExpandedRow(key, content, visible, className, fixed) {
|
792 | var _props3 = this.props,
|
793 | clsPrefix = _props3.clsPrefix,
|
794 | expandIconAsCell = _props3.expandIconAsCell,
|
795 | onPaste = _props3.onPaste,
|
796 | getCellClassName = _props3.getCellClassName;
|
797 |
|
798 | var colCount = void 0;
|
799 | if (fixed === 'left') {
|
800 | colCount = this.columnManager.leftLeafColumns().length;
|
801 | } else if (fixed === 'right') {
|
802 | colCount = this.columnManager.rightLeafColumns().length;
|
803 | } else {
|
804 | colCount = this.columnManager.centerColumns().length;
|
805 | }
|
806 |
|
807 | var expandedRowHeight = this.state.fixedColumnsExpandedRowsHeight[key] || 'auto';
|
808 | function contentContainer() {
|
809 | if (content && content.props && content.props.style) {
|
810 | return _react2["default"].createElement('div', { style: { height: content.props.style.height } });
|
811 | } else {
|
812 | return ' ';
|
813 | }
|
814 | }
|
815 |
|
816 | var columns = [{
|
817 | key: 'extra-row',
|
818 | render: function render() {
|
819 | return {
|
820 | props: {
|
821 | colSpan: colCount
|
822 | },
|
823 | children: !fixed ? content : contentContainer()
|
824 | };
|
825 | }
|
826 | }];
|
827 | if (expandIconAsCell && fixed !== 'right') {
|
828 | columns.unshift({
|
829 | key: 'expand-icon-placeholder',
|
830 | render: function render() {
|
831 | return null;
|
832 | }
|
833 | });
|
834 | }
|
835 | return _react2["default"].createElement(_TableRow2["default"], {
|
836 | onPaste: onPaste,
|
837 | columns: columns,
|
838 | visible: visible,
|
839 | className: className,
|
840 | key: key + '-extra-row',
|
841 | clsPrefix: clsPrefix + '-expanded-row',
|
842 | indent: 1,
|
843 | expandable: false,
|
844 | store: this.store,
|
845 | dragborderKey: this.props.dragborderKey,
|
846 | rowDraggAble: this.props.rowDraggAble,
|
847 | useDragHandle: this.props.useDragHandle,
|
848 | onDragRow: this.onDragRow,
|
849 | onDragRowStart: this.onDragRowStart,
|
850 | height: expandedRowHeight,
|
851 | getCellClassName: getCellClassName
|
852 | });
|
853 | };
|
854 |
|
855 | |
856 |
|
857 |
|
858 |
|
859 |
|
860 |
|
861 | |
862 |
|
863 |
|
864 |
|
865 |
|
866 |
|
867 | |
868 |
|
869 |
|
870 |
|
871 |
|
872 |
|
873 |
|
874 |
|
875 | |
876 |
|
877 |
|
878 |
|
879 |
|
880 |
|
881 |
|
882 |
|
883 |
|
884 |
|
885 |
|
886 |
|
887 | Table.prototype.getRowsByData = function getRowsByData(data, visible, indent, columns, fixed) {
|
888 | var rootIndex = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : -1;
|
889 |
|
890 | var props = this.props;
|
891 | var childrenColumnName = props.childrenColumnName;
|
892 | var expandedRowRender = props.expandedRowRender;
|
893 | var expandRowByClick = props.expandRowByClick;
|
894 | var onPaste = props.onPaste;
|
895 | var fixedColumnsBodyRowsHeight = this.state.fixedColumnsBodyRowsHeight;
|
896 |
|
897 | var rst = [];
|
898 | var height = void 0;
|
899 | var rowClassName = props.rowClassName;
|
900 | var rowRef = props.rowRef;
|
901 | var expandedRowClassName = props.expandedRowClassName;
|
902 | var needIndentSpaced = props.data.some(function (record) {
|
903 | return record[childrenColumnName];
|
904 | });
|
905 | var onRowClick = props.onRowClick;
|
906 | var onRowDoubleClick = props.onRowDoubleClick;
|
907 |
|
908 | var expandIconAsCell = fixed !== 'right' ? props.expandIconAsCell : false;
|
909 | var expandIconColumnIndex = props.expandIconColumnIndex;
|
910 | if (props.lazyLoad && props.lazyLoad.preHeight && indent == 0) {
|
911 | rst.push(_react2["default"].createElement(_TableRow2["default"], { onPaste: onPaste, height: props.lazyLoad.preHeight, columns: [], className: '', key: 'table_row_first', store: this.store, visible: true }));
|
912 | }
|
913 | var lazyCurrentIndex = props.lazyLoad && props.lazyLoad.startIndex ? props.lazyLoad.startIndex : 0;
|
914 | var lazyParentIndex = props.lazyLoad && props.lazyLoad.startParentIndex ? props.lazyLoad.startParentIndex : 0;
|
915 | var lazyEndIndex = props.lazyLoad && props.lazyLoad.endIndex ? props.lazyLoad.endIndex : -1;
|
916 | for (var i = 0; i < data.length; i++) {
|
917 | var isHiddenExpandIcon = void 0;
|
918 | var record = data[i];
|
919 | var key = this.getRowKey(record, i);
|
920 |
|
921 | record['_isLeaf'] = typeof record['isleaf'] === 'boolean' ? record['isleaf'] : record['_isLeaf'];
|
922 |
|
923 |
|
924 | var _isLeaf = typeof record['_isLeaf'] === 'boolean' ? record['_isLeaf'] : null;
|
925 | var childrenColumn = _isLeaf ? false : record[childrenColumnName];
|
926 | var isRowExpanded = this.isRowExpanded(record, i);
|
927 | var expandedRowContent = void 0;
|
928 | var expandedContentHeight = 0;
|
929 |
|
930 | var fixedIndex = i;
|
931 |
|
932 | if (this.treeType) {
|
933 | fixedIndex = this.treeRowIndex;
|
934 | }
|
935 | if (expandedRowRender && isRowExpanded) {
|
936 | expandedRowContent = expandedRowRender(record, fixedIndex + lazyCurrentIndex, indent);
|
937 | expandedContentHeight = parseInt(expandedRowContent.props && expandedRowContent.props.style && expandedRowContent.props.style.height ? expandedRowContent.props.style.height : 0);
|
938 | }
|
939 |
|
940 | if (expandedRowRender && typeof props.haveExpandIcon == 'function') {
|
941 | isHiddenExpandIcon = props.haveExpandIcon(record, i);
|
942 | }
|
943 |
|
944 | var onHoverProps = {};
|
945 |
|
946 | onHoverProps.onHover = this.handleRowHover;
|
947 |
|
948 | if (props.bodyDisplayInRow && props.height) {
|
949 | height = props.height;
|
950 | } else if (fixed || props.heightConsistent) {
|
951 | height = fixedColumnsBodyRowsHeight[fixedIndex];
|
952 | }
|
953 |
|
954 | var leafColumns = void 0;
|
955 | if (fixed === 'left') {
|
956 | leafColumns = this.columnManager.leftLeafColumns();
|
957 | } else if (fixed === 'right') {
|
958 | leafColumns = this.columnManager.rightLeafColumns();
|
959 | } else {
|
960 | leafColumns = this.columnManager.leafColumns();
|
961 | }
|
962 | var className = rowClassName(record, fixedIndex + lazyCurrentIndex, indent);
|
963 |
|
964 |
|
965 | if (i == data.length - 1 && props.showSum) {
|
966 | className = className + ' sumrow';
|
967 | }
|
968 |
|
969 | var paramRootIndex = rootIndex;
|
970 |
|
971 | if (paramRootIndex < 0) {
|
972 | paramRootIndex = i + lazyParentIndex;
|
973 | }
|
974 | var index = i;
|
975 | if (rootIndex == -1) {
|
976 | index = i + lazyParentIndex;
|
977 | }
|
978 | rst.push(_react2["default"].createElement(_TableRow2["default"], _extends({
|
979 | onPaste: onPaste,
|
980 | indent: indent,
|
981 | indentSize: props.indentSize,
|
982 | needIndentSpaced: needIndentSpaced,
|
983 | className: '' + className,
|
984 | record: record,
|
985 | expandIconAsCell: expandIconAsCell,
|
986 | onDestroy: this.onRowDestroy,
|
987 | index: index,
|
988 | visible: visible,
|
989 | expandRowByClick: expandRowByClick,
|
990 | onExpand: this.onExpanded,
|
991 | expandable: expandedRowRender || (childrenColumn && childrenColumn.length > 0 ? true : _isLeaf === false),
|
992 | expanded: isRowExpanded,
|
993 | clsPrefix: props.clsPrefix + '-row',
|
994 | childrenColumnName: childrenColumnName,
|
995 | columns: leafColumns,
|
996 | expandIconColumnIndex: expandIconColumnIndex,
|
997 | onRowClick: onRowClick,
|
998 | onRowDoubleClick: onRowDoubleClick,
|
999 | height: height,
|
1000 | isHiddenExpandIcon: isHiddenExpandIcon
|
1001 | }, onHoverProps, {
|
1002 | key: "table_row_" + key + "_" + index,
|
1003 | hoverKey: key,
|
1004 | ref: rowRef,
|
1005 | store: this.store,
|
1006 | fixed: fixed,
|
1007 | expandedContentHeight: expandedContentHeight,
|
1008 | setRowHeight: props.setRowHeight,
|
1009 | setRowParentIndex: props.setRowParentIndex,
|
1010 | treeType: childrenColumn || this.treeType ? true : false,
|
1011 | fixedIndex: fixedIndex + lazyCurrentIndex,
|
1012 | rootIndex: rootIndex,
|
1013 | syncHover: props.syncHover,
|
1014 | bodyDisplayInRow: props.bodyDisplayInRow,
|
1015 | rowDraggAble: props.rowDraggAble,
|
1016 | useDragHandle: props.useDragHandle,
|
1017 | onDragRow: this.onDragRow,
|
1018 | onDragRowStart: this.onDragRowStart,
|
1019 | contentTable: this.contentTable,
|
1020 | tableUid: this.tableUid,
|
1021 | expandedIcon: props.expandedIcon,
|
1022 | collapsedIcon: props.collapsedIcon,
|
1023 | lazyStartIndex: lazyCurrentIndex,
|
1024 | lazyEndIndex: lazyEndIndex,
|
1025 | centerColumnsLength: this.centerColumnsLength,
|
1026 | leftColumnsLength: this.leftColumnsLength,
|
1027 | expandIconCellWidth: expandIconCellWidth,
|
1028 | getCellClassName: props.getCellClassName
|
1029 | })));
|
1030 | this.treeRowIndex++;
|
1031 | var subVisible = visible && isRowExpanded;
|
1032 |
|
1033 | if (expandedRowContent && isRowExpanded) {
|
1034 | rst.push(this.getExpandedRow(key, expandedRowContent, subVisible, expandedRowClassName(record, i, indent), fixed));
|
1035 | }
|
1036 | if (childrenColumn) {
|
1037 | this.isTreeType = true;
|
1038 | this.treeType = true;
|
1039 | rst = rst.concat(this.getRowsByData(childrenColumn, subVisible, indent + 1, columns, fixed, paramRootIndex));
|
1040 | }
|
1041 | }
|
1042 |
|
1043 | if (props.lazyLoad && props.lazyLoad.sufHeight && indent == 0) {
|
1044 | rst.push(_react2["default"].createElement(_TableRow2["default"], { onPaste: onPaste, height: props.lazyLoad.sufHeight, key: 'table_row_end', columns: [], className: '', store: this.store, visible: true }));
|
1045 | }
|
1046 | if (!this.isTreeType) {
|
1047 | this.treeType = false;
|
1048 | }
|
1049 | return rst;
|
1050 | };
|
1051 |
|
1052 | Table.prototype.getRows = function getRows(columns, fixed) {
|
1053 |
|
1054 | this.treeRowIndex = 0;
|
1055 |
|
1056 | this.isTreeType = false;
|
1057 | var rs = this.getRowsByData(this.state.data, true, 0, columns, fixed);
|
1058 | return rs;
|
1059 | };
|
1060 |
|
1061 | Table.prototype.getColGroup = function getColGroup(columns, fixed) {
|
1062 | var _this3 = this;
|
1063 |
|
1064 | var cols = [];
|
1065 | var self = this;
|
1066 |
|
1067 | var _state2 = this.state,
|
1068 | _state2$contentWidthD = _state2.contentWidthDiff,
|
1069 | contentWidthDiff = _state2$contentWidthD === undefined ? 0 : _state2$contentWidthD,
|
1070 | _state2$lastShowIndex = _state2.lastShowIndex,
|
1071 | lastShowIndex = _state2$lastShowIndex === undefined ? 0 : _state2$lastShowIndex;
|
1072 |
|
1073 | if (this.props.expandIconAsCell && fixed !== 'right') {
|
1074 | cols.push(_react2["default"].createElement('col', {
|
1075 | className: this.props.clsPrefix + '-expand-icon-col',
|
1076 | key: 'u-table-expand-icon-col'
|
1077 | }));
|
1078 | }
|
1079 | var leafColumns = void 0;
|
1080 | if (fixed === 'left') {
|
1081 | contentWidthDiff = 0;
|
1082 | leafColumns = this.columnManager.leftLeafColumns();
|
1083 | } else if (fixed === 'right') {
|
1084 | contentWidthDiff = 0;
|
1085 | leafColumns = this.columnManager.rightLeafColumns();
|
1086 | } else {
|
1087 | leafColumns = this.columnManager.leafColumns();
|
1088 | }
|
1089 | cols = cols.concat(leafColumns.map(function (c, i, arr) {
|
1090 | var fixedClass = '';
|
1091 | var width = c.width;
|
1092 | if (typeof width == 'string' && width.indexOf('%') > -1 && self.contentWidth) {
|
1093 | width = parseInt(self.contentWidth * parseInt(width) / 100);
|
1094 | } else if (width) {
|
1095 | width = parseInt(width);
|
1096 | }
|
1097 | if (lastShowIndex == i && width) {
|
1098 | width = width + contentWidthDiff;
|
1099 | }
|
1100 | if (!fixed && c.fixed) {
|
1101 | fixedClass = ' ' + _this3.props.clsPrefix + '-row-fixed-columns-in-body';
|
1102 | }
|
1103 | return _react2["default"].createElement('col', { key: c.key, style: { width: width, minWidth: c.width }, className: fixedClass });
|
1104 | }));
|
1105 | return _react2["default"].createElement(
|
1106 | 'colgroup',
|
1107 | { id: 'bee-table-colgroup' },
|
1108 | cols
|
1109 | );
|
1110 | };
|
1111 |
|
1112 | Table.prototype.getLeftFixedTable = function getLeftFixedTable() {
|
1113 | return this.getTable({
|
1114 | columns: this.columnManager.leftColumns(),
|
1115 | fixed: 'left'
|
1116 | });
|
1117 | };
|
1118 |
|
1119 | Table.prototype.getRightFixedTable = function getRightFixedTable() {
|
1120 | return this.getTable({
|
1121 | columns: this.columnManager.rightColumns(),
|
1122 | fixed: 'right'
|
1123 | });
|
1124 | };
|
1125 |
|
1126 | Table.prototype.getTable = function getTable() {
|
1127 | var _this4 = this;
|
1128 |
|
1129 | var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
1130 | var columns = options.columns,
|
1131 | fixed = options.fixed;
|
1132 | var _props4 = this.props,
|
1133 | clsPrefix = _props4.clsPrefix,
|
1134 | _props4$scroll = _props4.scroll,
|
1135 | scroll = _props4$scroll === undefined ? {} : _props4$scroll,
|
1136 | getBodyWrapper = _props4.getBodyWrapper,
|
1137 | footerScroll = _props4.footerScroll,
|
1138 | headerScroll = _props4.headerScroll,
|
1139 | _props4$hideHeaderScr = _props4.hideHeaderScroll,
|
1140 | hideHeaderScroll = _props4$hideHeaderScr === undefined ? false : _props4$hideHeaderScr,
|
1141 | expandIconAsCell = _props4.expandIconAsCell;
|
1142 | var _props5 = this.props,
|
1143 | useFixedHeader = _props5.useFixedHeader,
|
1144 | data = _props5.data;
|
1145 |
|
1146 | var bodyStyle = _extends({}, this.props.bodyStyle);
|
1147 | var headStyle = {};
|
1148 | var innerBodyStyle = {};
|
1149 | var leftFixedWidth = this.columnManager.getLeftColumnsWidth(this.contentWidth);
|
1150 | var rightFixedWidth = this.columnManager.getRightColumnsWidth(this.contentWidth);
|
1151 |
|
1152 | var tableClassName = '';
|
1153 |
|
1154 | if (scroll.x || fixed || this.contentDomWidth < this.contentWidth) {
|
1155 | tableClassName = clsPrefix + '-fixed';
|
1156 |
|
1157 | if (this.props.data.length == 0 && this.props.headerScroll) {
|
1158 | bodyStyle.overflowX = 'hidden';
|
1159 | }
|
1160 | if (!footerScroll) {
|
1161 | bodyStyle.overflowX = bodyStyle.overflowX || 'auto';
|
1162 | }
|
1163 | }
|
1164 |
|
1165 | if (scroll.y) {
|
1166 |
|
1167 |
|
1168 | if (fixed) {
|
1169 |
|
1170 | innerBodyStyle.maxHeight = bodyStyle.maxHeight || scroll.y;
|
1171 | innerBodyStyle.overflowY = bodyStyle.overflowY || 'scroll';
|
1172 | } else {
|
1173 | bodyStyle.maxHeight = bodyStyle.maxHeight || scroll.y;
|
1174 | }
|
1175 | bodyStyle.overflowY = bodyStyle.overflowY || 'scroll';
|
1176 | useFixedHeader = true;
|
1177 |
|
1178 |
|
1179 | var scrollbarWidth = this.scrollbarWidth;
|
1180 | if (scrollbarWidth >= 0) {
|
1181 | (fixed ? bodyStyle : headStyle).paddingBottom = '0px';
|
1182 |
|
1183 | if (headerScroll) {
|
1184 | if (fixed) {
|
1185 |
|
1186 | if (this.domWidthDiff <= 0) {
|
1187 | headStyle.marginBottom = scrollbarWidth + 'px';
|
1188 | bodyStyle.marginBottom = '-' + scrollbarWidth + 'px';
|
1189 | } else {
|
1190 | innerBodyStyle.overflowX = 'auto';
|
1191 | }
|
1192 | } else {
|
1193 |
|
1194 | if (this.domWidthDiff > 0) {
|
1195 | headStyle.overflowX = 'hidden';
|
1196 | }
|
1197 | headStyle.marginBottom = '0px';
|
1198 | }
|
1199 | } else {
|
1200 | if (fixed) {
|
1201 | if (this.domWidthDiff > 0) {
|
1202 | headStyle.overflow = 'hidden';
|
1203 | innerBodyStyle.overflowX = 'auto';
|
1204 | } else {
|
1205 | bodyStyle.marginBottom = '-' + scrollbarWidth + 'px';
|
1206 | }
|
1207 | } else {
|
1208 |
|
1209 | if (data.length == 0 && this.domWidthDiff < 0) {
|
1210 | headStyle.marginBottom = '0px';
|
1211 | } else {
|
1212 | headStyle.marginBottom = '-' + scrollbarWidth + 'px';
|
1213 | }
|
1214 | }
|
1215 | }
|
1216 | }
|
1217 | }
|
1218 |
|
1219 | if (data.length == 0 && hideHeaderScroll) {
|
1220 |
|
1221 | headStyle.marginBottom = '-' + this.scrollbarWidth + 'px';
|
1222 | }
|
1223 |
|
1224 | var renderTable = function renderTable() {
|
1225 | var hasHead = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
|
1226 | var hasBody = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
|
1227 |
|
1228 | var tableStyle = {};
|
1229 | if (!fixed && scroll.x) {
|
1230 |
|
1231 | if (scroll.x === true) {
|
1232 | tableStyle.tableLayout = 'fixed';
|
1233 | } else {
|
1234 | tableStyle.width = _this4.contentWidth - _this4.columnManager.getLeftColumnsWidth(_this4.contentWidth) - _this4.columnManager.getRightColumnsWidth(_this4.contentWidth);
|
1235 | }
|
1236 | }
|
1237 |
|
1238 | if (!fixed && _this4.contentDomWidth < _this4.contentWidth) {
|
1239 | tableStyle.width = _this4.contentWidth - _this4.columnManager.getLeftColumnsWidth(_this4.contentWidth) - _this4.columnManager.getRightColumnsWidth(_this4.contentWidth);
|
1240 | }
|
1241 | var tableBody = hasBody ? getBodyWrapper(_react2["default"].createElement(
|
1242 | 'tbody',
|
1243 | { className: clsPrefix + '-tbody', onMouseLeave: _this4.onBodyMouseLeave },
|
1244 | _this4.getRows(columns, fixed)
|
1245 | )) : null;
|
1246 | var _drag_class = _this4.props.dragborder ? "table-drag-bordered" : "";
|
1247 | return _react2["default"].createElement(
|
1248 | 'table',
|
1249 | { className: ' ' + tableClassName + ' table-bordered ' + _drag_class + ' ', style: tableStyle },
|
1250 | _this4.getColGroup(columns, fixed),
|
1251 | hasHead ? _this4.getHeader(columns, fixed, leftFixedWidth, rightFixedWidth) : null,
|
1252 | tableBody
|
1253 | );
|
1254 | };
|
1255 |
|
1256 | var headTable = void 0;
|
1257 |
|
1258 | if (useFixedHeader) {
|
1259 | headTable = _react2["default"].createElement(
|
1260 | 'div',
|
1261 | {
|
1262 | className: clsPrefix + '-header',
|
1263 | ref: function ref(el) {
|
1264 | fixed ? _this4.fixedHeadTable = el : _this4.headTable = el;
|
1265 | },
|
1266 | style: headStyle,
|
1267 | onMouseOver: this.detectScrollTarget,
|
1268 | onTouchStart: this.detectScrollTarget,
|
1269 | onScroll: this.handleBodyScroll
|
1270 | },
|
1271 | renderTable(true, false)
|
1272 | );
|
1273 | }
|
1274 | var BodyTable = _react2["default"].createElement(
|
1275 | 'div',
|
1276 | {
|
1277 | className: clsPrefix + '-body',
|
1278 | style: bodyStyle,
|
1279 | ref: function ref(el) {
|
1280 | _this4.bodyTable = el;
|
1281 | },
|
1282 | onMouseOver: this.detectScrollTarget,
|
1283 | onTouchStart: this.detectScrollTarget,
|
1284 | onScroll: this.handleBodyScroll,
|
1285 | onMouseLeave: this.onBodyMouseLeave
|
1286 | },
|
1287 | this.renderDragHideTable(),
|
1288 | renderTable(!useFixedHeader)
|
1289 | );
|
1290 |
|
1291 | if (fixed && columns.length) {
|
1292 | var refName = void 0;
|
1293 | if (columns[0].fixed === 'left' || columns[0].fixed === true) {
|
1294 | refName = 'fixedColumnsBodyLeft';
|
1295 | } else if (columns[0].fixed === 'right') {
|
1296 | refName = 'fixedColumnsBodyRight';
|
1297 | }
|
1298 | delete bodyStyle.overflowX;
|
1299 | delete bodyStyle.overflowY;
|
1300 | BodyTable = _react2["default"].createElement(
|
1301 | 'div',
|
1302 | {
|
1303 | className: clsPrefix + '-body-outer',
|
1304 | style: _extends({}, bodyStyle)
|
1305 | },
|
1306 | _react2["default"].createElement(
|
1307 | 'div',
|
1308 | {
|
1309 | style: _extends({}, innerBodyStyle),
|
1310 | className: clsPrefix + '-body-inner',
|
1311 | ref: refName,
|
1312 | onMouseOver: this.detectScrollTarget,
|
1313 | onTouchStart: this.detectScrollTarget,
|
1314 | onScroll: this.handleBodyScroll
|
1315 | },
|
1316 | renderTable(!useFixedHeader)
|
1317 | )
|
1318 | );
|
1319 | }
|
1320 |
|
1321 |
|
1322 | var expandIconWidth = expandIconAsCell ? 32 : 0;
|
1323 | var parStyle = {};
|
1324 | if (!fixed) {
|
1325 | parStyle = { 'marginLeft': leftFixedWidth + expandIconWidth, 'marginRight': rightFixedWidth };
|
1326 | }
|
1327 | return _react2["default"].createElement(
|
1328 | 'div',
|
1329 | { style: parStyle },
|
1330 | headTable,
|
1331 | BodyTable
|
1332 | );
|
1333 | };
|
1334 |
|
1335 | Table.prototype.getTitle = function getTitle() {
|
1336 | var _props6 = this.props,
|
1337 | title = _props6.title,
|
1338 | clsPrefix = _props6.clsPrefix;
|
1339 |
|
1340 | return title ? _react2["default"].createElement(
|
1341 | 'div',
|
1342 | { className: clsPrefix + '-title' },
|
1343 | title(this.state.data)
|
1344 | ) : null;
|
1345 | };
|
1346 |
|
1347 | Table.prototype.getFooter = function getFooter() {
|
1348 | var _props7 = this.props,
|
1349 | footer = _props7.footer,
|
1350 | clsPrefix = _props7.clsPrefix;
|
1351 |
|
1352 | return footer ? _react2["default"].createElement(
|
1353 | 'div',
|
1354 | { className: clsPrefix + '-footer' },
|
1355 | footer(this.state.data)
|
1356 | ) : null;
|
1357 | };
|
1358 |
|
1359 | Table.prototype.getEmptyText = function getEmptyText() {
|
1360 | var _props8 = this.props,
|
1361 | defaultEmptyText = _props8.emptyText,
|
1362 | clsPrefix = _props8.clsPrefix,
|
1363 | data = _props8.data;
|
1364 |
|
1365 | var locale = (0, _tool.getComponentLocale)(this.props, this.context, 'Table', function () {
|
1366 | return _i18n2["default"];
|
1367 | });
|
1368 | var emptyText = defaultEmptyText !== undefined ? defaultEmptyText : function () {
|
1369 | return _react2["default"].createElement(
|
1370 | 'div',
|
1371 | null,
|
1372 | _react2["default"].createElement(_beeIcon2["default"], { type: 'uf-nodata', className: 'table-nodata' }),
|
1373 | _react2["default"].createElement(
|
1374 | 'span',
|
1375 | null,
|
1376 | locale["no_data"]
|
1377 | )
|
1378 | );
|
1379 | };
|
1380 |
|
1381 | return !data.length ? _react2["default"].createElement(
|
1382 | 'div',
|
1383 | { className: clsPrefix + '-placeholder' },
|
1384 | emptyText()
|
1385 | ) : null;
|
1386 | };
|
1387 |
|
1388 | Table.prototype.getHeaderRowStyle = function getHeaderRowStyle(columns, rows) {
|
1389 | var fixedColumnsHeadRowsHeight = this.state.fixedColumnsHeadRowsHeight;
|
1390 |
|
1391 | var headerHeight = fixedColumnsHeadRowsHeight[0];
|
1392 |
|
1393 | if (headerHeight && columns) {
|
1394 | if (headerHeight === 'auto') {
|
1395 | return { height: 'auto' };
|
1396 | }
|
1397 | return { height: headerHeight / rows.length };
|
1398 | }
|
1399 | return null;
|
1400 | };
|
1401 |
|
1402 | Table.prototype.getStyle = function getStyle(obj, attr) {
|
1403 | if (obj.currentStyle) {
|
1404 | return obj.currentStyle[attr];
|
1405 | } else {
|
1406 | return document.defaultView.getComputedStyle(obj, null)[attr];
|
1407 | }
|
1408 | };
|
1409 |
|
1410 | Table.prototype.syncFixedTableRowHeight = function syncFixedTableRowHeight() {
|
1411 | var _this5 = this;
|
1412 |
|
1413 |
|
1414 | var _props9 = this.props,
|
1415 | clsPrefix = _props9.clsPrefix,
|
1416 | height = _props9.height,
|
1417 | headerHeight = _props9.headerHeight,
|
1418 | columns = _props9.columns,
|
1419 | heightConsistent = _props9.heightConsistent,
|
1420 | bodyDisplayInRow = _props9.bodyDisplayInRow;
|
1421 |
|
1422 | var headRows = this.headTable ? this.headTable.querySelectorAll('thead') : this.bodyTable.querySelectorAll('thead');
|
1423 | var expandedRows = this.bodyTable.querySelectorAll('.' + clsPrefix + '-expanded-row') || [];
|
1424 | var bodyRows = this.bodyTable.querySelectorAll('.' + clsPrefix + '-row') || [];
|
1425 | var leftBodyRows = this.refs.fixedColumnsBodyLeft && this.refs.fixedColumnsBodyLeft.querySelectorAll('.' + clsPrefix + '-row') || [];
|
1426 | var rightBodyRows = this.refs.fixedColumnsBodyRight && this.refs.fixedColumnsBodyRight.querySelectorAll('.' + clsPrefix + '-row') || [];
|
1427 | var fixedColumnsHeadRowsHeight = [].map.call(headRows, function (row) {
|
1428 | var height = headerHeight;
|
1429 | if (headerHeight) {
|
1430 | height = ((0, _utils.getMaxColChildrenLength)(columns) + 1) * headerHeight;
|
1431 | }
|
1432 | return headerHeight ? height : row.getBoundingClientRect().height || 'auto';
|
1433 | });
|
1434 | var fixedColumnsBodyRowsHeight = [].map.call(bodyRows, function (row, index) {
|
1435 | var rsHeight = height;
|
1436 | if (bodyDisplayInRow && rsHeight) {
|
1437 | return rsHeight;
|
1438 | } else {
|
1439 |
|
1440 |
|
1441 | if (heightConsistent || !bodyDisplayInRow && rsHeight) {
|
1442 | var leftHeight = void 0,
|
1443 | rightHeight = void 0,
|
1444 | currentHeight = void 0,
|
1445 | maxHeight = void 0;
|
1446 | leftHeight = leftBodyRows[index] ? leftBodyRows[index].getBoundingClientRect().height : 0;
|
1447 | rightHeight = rightBodyRows[index] ? rightBodyRows[index].getBoundingClientRect().height : 0;
|
1448 | currentHeight = row.getBoundingClientRect().height;
|
1449 | maxHeight = Math.max(leftHeight, rightHeight, currentHeight);
|
1450 | return maxHeight || 'auto';
|
1451 | } else {
|
1452 | return row.getBoundingClientRect().height || 'auto';
|
1453 | }
|
1454 | }
|
1455 | });
|
1456 | var fixedColumnsExpandedRowsHeight = {};
|
1457 |
|
1458 | expandedRows.length > 0 && Array.prototype.forEach.call(expandedRows, function (row) {
|
1459 | var parentRowKey = row && row.previousSibling && row.previousSibling.getAttribute("data-row-key"),
|
1460 | height = row && row.getBoundingClientRect().height || 'auto';
|
1461 | try {
|
1462 |
|
1463 | var td = row.querySelector('td');
|
1464 | var tdPadding = _this5.getTdPadding(td);
|
1465 | var trueheight = row.querySelectorAll('.u-table')[0].getBoundingClientRect().height;
|
1466 | height = trueheight + tdPadding;
|
1467 | } catch (error) {}
|
1468 | fixedColumnsExpandedRowsHeight[parentRowKey] = height;
|
1469 | });
|
1470 | if ((0, _shallowequal2["default"])(this.state.fixedColumnsHeadRowsHeight, fixedColumnsHeadRowsHeight) && (0, _shallowequal2["default"])(this.state.fixedColumnsBodyRowsHeight, fixedColumnsBodyRowsHeight) && (0, _shallowequal2["default"])(this.state.fixedColumnsExpandedRowsHeight, fixedColumnsExpandedRowsHeight)) {
|
1471 | return;
|
1472 | }
|
1473 | this.setState({
|
1474 | fixedColumnsHeadRowsHeight: fixedColumnsHeadRowsHeight,
|
1475 | fixedColumnsBodyRowsHeight: fixedColumnsBodyRowsHeight,
|
1476 | fixedColumnsExpandedRowsHeight: fixedColumnsExpandedRowsHeight
|
1477 | });
|
1478 | };
|
1479 |
|
1480 | Table.prototype.resetScrollX = function resetScrollX() {
|
1481 | if (this.headTable) {
|
1482 | this.headTable.scrollLeft = 0;
|
1483 | }
|
1484 | if (this.bodyTable) {
|
1485 | this.bodyTable.scrollLeft = 0;
|
1486 | }
|
1487 | };
|
1488 |
|
1489 | Table.prototype.findExpandedRow = function findExpandedRow(record, index) {
|
1490 | var _this6 = this;
|
1491 |
|
1492 | var rows = this.getExpandedRows().filter(function (i) {
|
1493 | return i === _this6.getRowKey(record, index);
|
1494 | });
|
1495 | return rows[0];
|
1496 | };
|
1497 |
|
1498 | Table.prototype.isRowExpanded = function isRowExpanded(record, index) {
|
1499 | return typeof this.findExpandedRow(record, index) !== 'undefined';
|
1500 | };
|
1501 |
|
1502 | Table.prototype.onBodyMouseLeave = function onBodyMouseLeave(e) {
|
1503 | this.hideHoverDom(e);
|
1504 | var onBodyMouseLeave = this.props.onBodyMouseLeave;
|
1505 |
|
1506 | if (onBodyMouseLeave) {
|
1507 | onBodyMouseLeave();
|
1508 | }
|
1509 | };
|
1510 |
|
1511 | Table.prototype.detectScrollTarget = function detectScrollTarget(e) {
|
1512 | if (this.scrollTarget !== e.currentTarget) {
|
1513 | this.scrollTarget = e.currentTarget;
|
1514 | }
|
1515 | };
|
1516 |
|
1517 | Table.prototype.hideHoverDom = function hideHoverDom(e) {
|
1518 | if (this.hoverDom) {
|
1519 | this.hoverDom.style.display = 'none';
|
1520 | }
|
1521 | };
|
1522 |
|
1523 | Table.prototype.handleBodyScroll = function handleBodyScroll(e) {
|
1524 | var headTable = this.headTable;
|
1525 | var _props10 = this.props,
|
1526 | _props10$scroll = _props10.scroll,
|
1527 | scroll = _props10$scroll === undefined ? {} : _props10$scroll,
|
1528 | clsPrefix = _props10.clsPrefix,
|
1529 | handleScrollY = _props10.handleScrollY,
|
1530 | handleScrollX = _props10.handleScrollX,
|
1531 | onBodyScroll = _props10.onBodyScroll;
|
1532 | var _refs = this.refs,
|
1533 | fixedColumnsBodyLeft = _refs.fixedColumnsBodyLeft,
|
1534 | fixedColumnsBodyRight = _refs.fixedColumnsBodyRight;
|
1535 |
|
1536 |
|
1537 |
|
1538 | if (e.currentTarget !== e.target) {
|
1539 | return;
|
1540 | }
|
1541 | if (e.target.scrollLeft !== this.lastScrollLeft) {
|
1542 | var position = '';
|
1543 | if (e.target === this.bodyTable && headTable) {
|
1544 | headTable.scrollLeft = e.target.scrollLeft;
|
1545 | } else if (e.target === headTable && this.bodyTable) {
|
1546 | this.bodyTable.scrollLeft = e.target.scrollLeft;
|
1547 | }
|
1548 | if (e.target.scrollLeft === 0) {
|
1549 | position = 'left';
|
1550 | } else if (e.target.scrollLeft + 1 >= e.target.children[0].getBoundingClientRect().width - e.target.getBoundingClientRect().width) {
|
1551 | position = 'right';
|
1552 | } else if (this.state.scrollPosition !== 'middle') {
|
1553 | position = 'middle';
|
1554 | }
|
1555 | if (position) {
|
1556 | (0, _componentClasses2["default"])(this.contentTable).remove(new RegExp('^' + clsPrefix + '-scroll-position-.+$')).add(clsPrefix + '-scroll-position-' + position);
|
1557 | }
|
1558 | if (handleScrollX) {
|
1559 | (0, _utils.debounce)(handleScrollX(e.target.scrollLeft, this.treeType), 300);
|
1560 | }
|
1561 | }
|
1562 |
|
1563 | if (scroll.y && this.lastScrollTop != e.target.scrollTop && e.target !== headTable) {
|
1564 | if (fixedColumnsBodyLeft && e.target !== fixedColumnsBodyLeft) {
|
1565 | fixedColumnsBodyLeft.scrollTop = e.target.scrollTop;
|
1566 | }
|
1567 | if (fixedColumnsBodyRight && e.target !== fixedColumnsBodyRight) {
|
1568 | fixedColumnsBodyRight.scrollTop = e.target.scrollTop;
|
1569 | }
|
1570 | if (this.bodyTable && e.target !== this.bodyTable) {
|
1571 | this.bodyTable.scrollTop = e.target.scrollTop;
|
1572 | }
|
1573 | if (this.hoverDom) {
|
1574 | this.hoverDom.style.display = 'none';
|
1575 | }
|
1576 | this.lastScrollTop = e.target.scrollTop;
|
1577 | if (handleScrollY) {
|
1578 | (0, _utils.debounce)(handleScrollY(this.lastScrollTop, this.treeType, onBodyScroll), 300);
|
1579 | } else {
|
1580 |
|
1581 | onBodyScroll(this.lastScrollTop);
|
1582 | }
|
1583 | }
|
1584 |
|
1585 |
|
1586 | this.lastScrollLeft = e.target.scrollLeft;
|
1587 | };
|
1588 |
|
1589 | Table.prototype.handleRowHover = function handleRowHover(isHover, key, event, currentIndex, propsRecord) {
|
1590 |
|
1591 | var _props11 = this.props,
|
1592 | syncHover = _props11.syncHover,
|
1593 | onRowHover = _props11.onRowHover,
|
1594 | data = _props11.data;
|
1595 |
|
1596 |
|
1597 | var isTreeType = this.isTreeType;
|
1598 |
|
1599 | var record = isTreeType ? propsRecord : data[currentIndex];
|
1600 |
|
1601 | if (this.columnManager.isAnyColumnsFixed() && syncHover) {
|
1602 | this.hoverKey = key;
|
1603 | this.store.setState({
|
1604 | currentHoverKey: isHover ? key : null
|
1605 | });
|
1606 | }
|
1607 | if (this.hoverDom) {
|
1608 | if (isHover) {
|
1609 | this.currentHoverKey = key;
|
1610 | var td = (0, _utils.closest)(event.target, 'td');
|
1611 | if (td) {
|
1612 | var scrollTop = this.lastScrollTop ? this.lastScrollTop : 0;
|
1613 | var top = td.offsetTop - scrollTop;
|
1614 | if (this.headTable) {
|
1615 | top = top + this.headTable.clientHeight;
|
1616 | }
|
1617 | this.hoverDom.style.top = top + 'px';
|
1618 | this.hoverDom.style.height = td.offsetHeight + 'px';
|
1619 | this.hoverDom.style.lineHeight = td.offsetHeight + 'px';
|
1620 | this.hoverDom.style.display = 'block';
|
1621 | }
|
1622 | this.setState({
|
1623 | currentHoverIndex: currentIndex,
|
1624 | currentHoverRecord: record
|
1625 | });
|
1626 | }
|
1627 | }
|
1628 |
|
1629 | onRowHover && onRowHover(currentIndex, record);
|
1630 | };
|
1631 |
|
1632 | Table.prototype.render = function render() {
|
1633 | var _this7 = this;
|
1634 |
|
1635 | var _state3 = this.state,
|
1636 | currentHoverRecord = _state3.currentHoverRecord,
|
1637 | currentHoverIndex = _state3.currentHoverIndex;
|
1638 |
|
1639 | var props = this.props;
|
1640 | var clsPrefix = props.clsPrefix;
|
1641 | var hasFixedLeft = this.columnManager.isAnyColumnsLeftFixed();
|
1642 | var className = props.clsPrefix;
|
1643 | if (props.className) {
|
1644 | className += ' ' + props.className;
|
1645 | }
|
1646 | if (props.useFixedHeader || props.scroll && props.scroll.y) {
|
1647 | className += ' ' + clsPrefix + '-fixed-header';
|
1648 | }
|
1649 | if (!props.showHeader) {
|
1650 | className += ' ' + clsPrefix + '-hide-header';
|
1651 | }
|
1652 | if (props.bordered) {
|
1653 | className += ' ' + clsPrefix + '-bordered';
|
1654 | }
|
1655 | if (props.onCopy) {
|
1656 | className += ' copy';
|
1657 | }
|
1658 | className += ' ' + clsPrefix + '-scroll-position-' + this.state.scrollPosition;
|
1659 |
|
1660 |
|
1661 | if (props.bodyDisplayInRow && props.height) {
|
1662 | className += ' fixed-height';
|
1663 | }
|
1664 | if (props.bodyDisplayInRow) {
|
1665 | className += ' body-dispaly-in-row';
|
1666 | }
|
1667 | if (props.headerDisplayInRow) {
|
1668 | className += ' header-dispaly-in-row';
|
1669 | }
|
1670 | var isTableScroll = this.columnManager.isAnyColumnsFixed() || props.scroll.x || props.scroll.y;
|
1671 | var loading = props.loading;
|
1672 | if (typeof loading === 'boolean') {
|
1673 | loading = {
|
1674 | show: loading
|
1675 | };
|
1676 | }
|
1677 | if (props.size) {
|
1678 | className += ' ' + clsPrefix + '-' + props.size;
|
1679 | }
|
1680 | if (hasFixedLeft) {
|
1681 | className += ' has-fixed-left';
|
1682 | }
|
1683 |
|
1684 | return _react2["default"].createElement(
|
1685 | 'div',
|
1686 | { className: className, style: props.style, ref: function ref(el) {
|
1687 | return _this7.contentTable = el;
|
1688 | },
|
1689 | tabIndex: props.focusable && (props.tabIndex ? props.tabIndex : '0') },
|
1690 | this.getTitle(),
|
1691 | _react2["default"].createElement(
|
1692 | 'div',
|
1693 | { className: clsPrefix + '-content' },
|
1694 | _react2["default"].createElement(
|
1695 | 'div',
|
1696 | { className: isTableScroll ? clsPrefix + '-scroll' : '' },
|
1697 | this.getTable({ columns: this.columnManager.groupedColumns() }),
|
1698 | this.getEmptyText(),
|
1699 | this.getFooter()
|
1700 | ),
|
1701 | hasFixedLeft && _react2["default"].createElement(
|
1702 | 'div',
|
1703 | { className: clsPrefix + '-fixed-left' },
|
1704 | this.getLeftFixedTable()
|
1705 | ),
|
1706 | this.columnManager.isAnyColumnsRightFixed() && _react2["default"].createElement(
|
1707 | 'div',
|
1708 | { className: clsPrefix + '-fixed-right' },
|
1709 | this.getRightFixedTable()
|
1710 | )
|
1711 | ),
|
1712 | _react2["default"].createElement(_beeLoading2["default"], _extends({
|
1713 | container: this
|
1714 | }, loading)),
|
1715 | props.hoverContent && _react2["default"].createElement(
|
1716 | 'div',
|
1717 | { className: 'u-row-hover',
|
1718 | onMouseEnter: this.onRowHoverMouseEnter, onMouseLeave: this.onRowHoverMouseLeave, ref: function ref(el) {
|
1719 | return _this7.hoverDom = el;
|
1720 | } },
|
1721 | props.hoverContent(currentHoverRecord, currentHoverIndex)
|
1722 | )
|
1723 | );
|
1724 | };
|
1725 |
|
1726 | return Table;
|
1727 | }(_react.Component);
|
1728 |
|
1729 | ;
|
1730 |
|
1731 | Table.propTypes = propTypes;
|
1732 | Table.defaultProps = defaultProps;
|
1733 | Table.contextTypes = {
|
1734 | beeLocale: _propTypes2["default"].object
|
1735 | };
|
1736 |
|
1737 | exports["default"] = Table;
|
1738 | module.exports = exports['default']; |
\ | No newline at end of file |