react-infinite-table
Version:
React table with infinite rows and much more!
1,036 lines (865 loc) • 37.7 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
import _typeof from "@babel/runtime/helpers/typeof";
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
import _inherits from "@babel/runtime/helpers/inherits";
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
function _createSuper(Derived) { return function () { var Super = _getPrototypeOf(Derived), result; if (_isNativeReflectConstruct()) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import * as infiniteHelpers from './utils/infiniteHelpers';
import checkProps from './utils/checkProps';
import Cell from './Cell';
import { offsetXYFromParent, addEvent, removeEvent } from './utils/domUtils';
var _nextTableId = 1;
var _nextTableRowKey = 1;
function generateRowKey() {
return _nextTableRowKey++;
}
var Table = /*#__PURE__*/function (_React$Component) {
_inherits(Table, _React$Component);
var _super = _createSuper(Table);
function Table(_props) {
var _this;
_classCallCheck(this, Table);
_this = _super.call(this, _props);
_defineProperty(_assertThisInitialized(_this), "shouldAttachToBottom", false);
_defineProperty(_assertThisInitialized(_this), "preservedScrollState", 0);
_defineProperty(_assertThisInitialized(_this), "loadingSpinnerHeight", 0);
_defineProperty(_assertThisInitialized(_this), "lastSelectedRowIndex", -1);
_defineProperty(_assertThisInitialized(_this), "scrollable", null);
_defineProperty(_assertThisInitialized(_this), "topSpacer", null);
_defineProperty(_assertThisInitialized(_this), "bottomSpacer", null);
_defineProperty(_assertThisInitialized(_this), "smoothScrollingWrapper", null);
_defineProperty(_assertThisInitialized(_this), "loadingSpinner", null);
_defineProperty(_assertThisInitialized(_this), "getLoadingSpinnerHeight", function () {
var loadingSpinnerHeight = 0;
if (_this.loadingSpinner) {
loadingSpinnerHeight = _this.loadingSpinner.offsetHeight || 0;
}
return loadingSpinnerHeight;
});
_defineProperty(_assertThisInitialized(_this), "getScrollTop", function () {
return _this.scrollable ? _this.scrollable.scrollTop : 0;
});
_defineProperty(_assertThisInitialized(_this), "setScrollTop", function (top) {
if (_this.scrollable) {
_this.scrollable.scrollTop = top;
}
});
_defineProperty(_assertThisInitialized(_this), "scrollShouldBeIgnored", function (event) {
return event.target !== _this.scrollable;
});
_defineProperty(_assertThisInitialized(_this), "buildScrollableStyle", function () {
return {
height: _this.props.height
};
});
_defineProperty(_assertThisInitialized(_this), "recomputeInternalStateFromProps", function (props) {
checkProps(props); // TODO: don't recreate if not needed!
var infiniteComputer = infiniteHelpers.createInfiniteComputer(props.rows.length, props.rowHeight);
var newState = _objectSpread({
infiniteComputer: infiniteComputer
}, infiniteHelpers.recomputeApertureStateFromOptionsAndScrollTop(props.overscanSize, infiniteComputer, _this.getScrollTop(), props.height));
return newState;
});
_defineProperty(_assertThisInitialized(_this), "getLowestPossibleScrollTop", function () {
return _this.state.infiniteComputer.getTotalScrollableHeight() - _this.props.height;
});
_defineProperty(_assertThisInitialized(_this), "hasAllVisibleItems", function () {
return !(_this.props.infiniteLoadBeginEdgeOffset === 'number' && _this.state.infiniteComputer.getTotalScrollableHeight() < _this.props.height);
});
_defineProperty(_assertThisInitialized(_this), "passedEdgeForInfiniteScroll", function (scrollTop) {
var edgeOffset = _this.props.infiniteLoadBeginEdgeOffset;
if (typeof edgeOffset !== 'number') {
return false;
}
if (_this.props.displayBottomUpwards) {
return !_this.shouldAttachToBottom && scrollTop < edgeOffset;
} else {
return scrollTop > _this.state.infiniteComputer.getTotalScrollableHeight() - _this.props.height - edgeOffset;
}
});
_defineProperty(_assertThisInitialized(_this), "onInfiniteLoad", function () {
_this.props.onInfiniteLoad();
});
_defineProperty(_assertThisInitialized(_this), "handleScroll", function (e) {
if (_this.scrollShouldBeIgnored(e)) {
return;
}
var scrollTop = _this.getScrollTop();
_this.shouldAttachToBottom = _this.props.displayBottomUpwards && scrollTop >= _this.getLowestPossibleScrollTop();
var newApertureState = infiniteHelpers.recomputeApertureStateFromOptionsAndScrollTop(_this.props.overscanSize, _this.state.infiniteComputer, scrollTop, _this.props.height);
_this.updateNewApertureStateIfNeeded(newApertureState);
if (_this.passedEdgeForInfiniteScroll(scrollTop) && !_this.props.isInfiniteLoading) {
_this.onInfiniteLoad();
}
});
_defineProperty(_assertThisInitialized(_this), "_onHeaderMouseDown", function (event) {
if (typeof event.button === 'number' && event.button !== 0) {
return;
}
console.log(event.target);
var _this$_findHeaderTh = _this._findHeaderTh(event),
th = _this$_findHeaderTh.th,
columnIndex = _this$_findHeaderTh.columnIndex,
data = _this$_findHeaderTh.data,
canResizeColumns = _this$_findHeaderTh.canResizeColumns,
canChangeColumnsOrder = _this$_findHeaderTh.canChangeColumnsOrder;
console.log({
th: th,
columnIndex: columnIndex,
x: data && data.x,
y: data && data.y,
canResizeColumns: canResizeColumns,
canChangeColumnsOrder: canChangeColumnsOrder
});
if (!th) {
return;
}
_this._headerDraggingColumnIndex = columnIndex;
_this._headerDraggingLastMouseEvent = {
clientX: event.clientX,
clientY: event.clientY
};
_this._onStartDragging(columnIndex, event, data, th, canResizeColumns, canChangeColumnsOrder);
addEvent(document, 'mousemove', _this._onHeaderMouseMove);
addEvent(document, 'mouseup', _this._onHeaderMouseUp);
addEvent(_this.scrollable, 'scroll', _this._onHeaderMouseScroll);
});
_defineProperty(_assertThisInitialized(_this), "_onHeaderMouseMove", function (event) {
var columnIndex = _this._headerDraggingColumnIndex;
var data = offsetXYFromParent(event, _this.scrollable);
_this._headerDraggingLastMouseEvent = {
clientX: event.clientX,
clientY: event.clientY
};
_this._onDragging(columnIndex, event, data);
});
_defineProperty(_assertThisInitialized(_this), "_onHeaderMouseScroll", function (event) {
var columnIndex = _this._headerDraggingColumnIndex;
var data = offsetXYFromParent(_this._headerDraggingLastMouseEvent, _this.scrollable);
_this._onDragging(columnIndex, null, data);
});
_defineProperty(_assertThisInitialized(_this), "_onHeaderMouseUp", function (event) {
var columnIndex = _this._headerDraggingColumnIndex;
var data = offsetXYFromParent(event, _this.scrollable);
delete _this._headerDraggingColumnIndex;
delete _this._headerDraggingLastMouseEvent;
removeEvent(document, 'mousemove', _this._onHeaderMouseMove);
removeEvent(document, 'mouseup', _this._onHeaderMouseUp);
removeEvent(_this.scrollable, 'scroll', _this._onHeaderMouseScroll);
_this._onStopDragging(columnIndex, event, data);
});
_defineProperty(_assertThisInitialized(_this), "_onStartDragging", function (columnIndex, event, data, cellEl, canResizeColumns, canChangeColumnsOrder) {
_this._draggingCell = cellEl;
_this._initialDataX = data.x;
cellEl.classList.add('react-infinite-column-dragging');
var isResizing = canResizeColumns && event.nativeEvent.offsetX >= cellEl.offsetWidth - 4;
var isOrdering = !isResizing && canChangeColumnsOrder;
var columnWidth = _this.getColumnWidth(columnIndex);
if (isResizing) {
cellEl.classList.add('react-infinite-column-resizing');
_this._isDraggingResizer = true;
event.stopPropagation();
_this._initialColumnWidth = columnWidth;
} else if (isOrdering) {
cellEl.classList.add('react-infinite-column-reordering');
_this._isDraggingReorder = true;
_this._columnOrdering = {
fromIndex: columnIndex,
toIndex: columnIndex,
width: columnWidth,
deltaX: 0
};
}
});
_defineProperty(_assertThisInitialized(_this), "_onDragging", function (columnIndex, eventOrNull, data) {
var cellEl = _this._draggingCell;
if (_this._isDraggingResizer) {
eventOrNull && eventOrNull.stopPropagation();
var width = _this._initialColumnWidth;
var minColumnWidth = 40;
_this.resizeColumn(columnIndex, Math.max(width + data.x - _this._initialDataX, minColumnWidth), true);
}
if (_this._isDraggingReorder) {
var x = data.x - _this._initialDataX;
if (!_this._isDraggingReorderStarted) {
if (x < 3 && x > -3) {
// ignoring dragging
return;
}
_this._isDraggingReorderStarted = true;
cellEl.classList.add('react-infinite-column-reordering-started');
}
_this.reorderColumn(x, true);
}
});
_defineProperty(_assertThisInitialized(_this), "_onStopDragging", function (columnIndex, event, data) {
var cellEl = _this._draggingCell;
cellEl.classList.remove('react-infinite-column-dragging');
cellEl.classList.remove('react-infinite-column-resizing');
cellEl.classList.remove('react-infinite-column-reordering');
cellEl.classList.remove('react-infinite-column-reordering-started');
if (_this._isDraggingResizer) {
event.stopPropagation();
var width = _this._initialColumnWidth;
var minColumnWidth = 40;
_this.resizeColumn(columnIndex, Math.max(width + data.x - _this._initialDataX, minColumnWidth), false);
}
if (_this._isDraggingReorder) {
if (_this._isDraggingReorderStarted) {
var x = data.x - _this._initialDataX;
_this.reorderColumn(x, false);
}
}
delete _this._draggingCell;
delete _this._initialDataX;
delete _this._isDraggingResizer;
delete _this._isDraggingReorder;
delete _this._columnDrag;
delete _this._columnOrdering;
delete _this._isDraggingReorderStarted;
});
_this._id = 'react-infinite-table-' + _nextTableId++;
_this.shouldAttachToBottom = _props.displayBottomUpwards;
_this.state = _this.recomputeInternalStateFromProps(_props);
return _this;
}
_createClass(Table, [{
key: "UNSAFE_componentWillReceiveProps",
// eslint-disable-next-line camelcase
value: function UNSAFE_componentWillReceiveProps(nextProps) {
var newState = this.recomputeInternalStateFromProps(nextProps);
if (this.props.displayBottomUpwards !== nextProps.displayBottomUpwards) {
this.shouldAttachToBottom = nextProps.displayBottomUpwards;
}
this.setState(newState);
} // eslint-disable-next-line camelcase
}, {
key: "UNSAFE_componentWillUpdate",
value: function UNSAFE_componentWillUpdate() {
if (this.props.displayBottomUpwards) {
this.preservedScrollState = this.getScrollTop() - this.loadingSpinnerHeight;
}
}
}, {
key: "componentDidUpdate",
value: function componentDidUpdate(prevProps, prevState) {
this.loadingSpinnerHeight = this.getLoadingSpinnerHeight();
if (this.props.displayBottomUpwards) {
var lowestScrollTop = this.getLowestPossibleScrollTop();
if (this.shouldAttachToBottom && this.getScrollTop() < lowestScrollTop) {
this.setScrollTop(lowestScrollTop);
} else if (prevProps.isInfiniteLoading && !this.props.isInfiniteLoading) {
this.setScrollTop(this.state.infiniteComputer.getTotalScrollableHeight() - prevState.infiniteComputer.getTotalScrollableHeight() + this.preservedScrollState);
}
}
var rowsChanged = this.props.rows !== prevProps.rows;
if (rowsChanged) {
this.lastSelectedRowIndex = -1;
}
var isMissingVisibleRows = rowsChanged && !this.hasAllVisibleItems() && !this.props.isInfiniteLoading;
if (isMissingVisibleRows) {
this.onInfiniteLoad();
}
}
}, {
key: "componentDidMount",
value: function componentDidMount() {
if (!this.hasAllVisibleItems()) {
this.onInfiniteLoad();
}
if (this.props.displayBottomUpwards) {
var lowestScrollTop = this.getLowestPossibleScrollTop();
if (this.shouldAttachToBottom && this.getScrollTop() < lowestScrollTop) {
this.setScrollTop(lowestScrollTop);
}
}
}
}, {
key: "componentWillUnmount",
value: function componentWillUnmount() {
removeEvent(document, 'mousemove', this._onHeaderMouseMove);
removeEvent(document, 'mouseup', this._onHeaderMouseUp);
}
}, {
key: "updateNewApertureStateIfNeeded",
value: function updateNewApertureStateIfNeeded(newApertureState) {
if (newApertureState.displayIndexStart !== this.state.displayIndexStart || newApertureState.displayIndexEnd !== this.state.displayIndexEnd) {
this.setState(newApertureState);
}
}
}, {
key: "resizeColumn",
value: function resizeColumn(columnIndex, width, isDragging) {
if (isDragging) {
this._columnDrag = {
columnIndex: columnIndex,
width: width
};
this._style.innerHTML = this.getStyles();
} else {
delete this._columnDrag;
this.props.onColumnWidthChange(columnIndex, width);
this._style.innerHTML = this.getStyles();
}
}
}, {
key: "reorderColumn",
value: function reorderColumn(x, isDragging) {
var _this2 = this;
var columnOffset = 0;
var positions = this.props.columns.map(function (column, columnIndex) {
var columnWidth = _this2.getColumnWidth(columnIndex);
var left = columnOffset;
columnOffset += columnWidth;
return {
left: left,
center: left + columnWidth / 2,
right: left + columnWidth
};
});
var fromLeft = positions[this._columnOrdering.fromIndex].left + x;
var fromRight = positions[this._columnOrdering.fromIndex].right + x;
this._columnOrdering.toIndex = this._columnOrdering.fromIndex;
for (var columnIndex = 0; columnIndex < this.props.columns.length; columnIndex++) {
var pos = positions[columnIndex];
if (columnIndex < this._columnOrdering.fromIndex) {
if (pos.center > fromLeft) {
this._columnOrdering.toIndex = columnIndex;
break;
}
} else if (columnIndex > this._columnOrdering.fromIndex) {
if (pos.center < fromRight) {
this._columnOrdering.toIndex = columnIndex;
}
}
}
var lastRight = positions[positions.length - 1].right;
if (fromLeft < 0) {
x -= fromLeft;
} else if (fromRight > lastRight) {
x -= fromRight - lastRight;
}
this._columnOrdering.deltaX = x;
if (isDragging) {
this._style.innerHTML = this.getStyles();
} else {
var _this$_columnOrdering = this._columnOrdering,
fromIndex = _this$_columnOrdering.fromIndex,
toIndex = _this$_columnOrdering.toIndex;
delete this._columnOrdering;
this.props.onColumnOrderChange(fromIndex, toIndex);
this._style.innerHTML = this.getStyles();
}
}
}, {
key: "setSelection",
value: function setSelection(rowIndex, modifier, shift) {
if (!this.props.onSelectionChange) {
return;
}
var row = this.props.rows[rowIndex];
var rowId = row[this.props.rowIdKey];
if (typeof rowId !== 'undefined') {
var selectedRows = this._getNewSelectedRows(rowIndex, rowId, modifier, shift);
this.lastSelectedRowIndex = rowIndex;
this.props.onSelectionChange(selectedRows);
} else {
this.lastSelectedRowIndex = -1;
}
}
}, {
key: "resetSelection",
value: function resetSelection() {
if (!this.props.onSelectionChange) {
return;
}
this.lastSelectedRowIndex = -1;
this.props.onSelectionChange({});
}
}, {
key: "_getNewSelectedRows",
value: function _getNewSelectedRows(index, key, toggle, shift) {
var currentSelected = this.props.selectedRows || {};
var single = !this.props.canSelectMultipleRows;
var lastSelectedIndex = this.lastSelectedRowIndex;
if (lastSelectedIndex === -1) {
shift = false;
}
if (single) {
if (currentSelected[key]) {
return {};
} else {
return _defineProperty({}, key, true);
}
} else if (toggle) {
var newSelected = _objectSpread({}, currentSelected);
if (newSelected[key]) {
delete newSelected[key];
} else {
newSelected[key] = true;
}
return newSelected;
} else if (shift) {
var from, to;
if (index < lastSelectedIndex) {
from = index;
to = lastSelectedIndex;
} else {
from = lastSelectedIndex;
to = index;
}
var _newSelected = _objectSpread({}, currentSelected);
for (var i = from; i <= to; i++) {
var row = this.props.rows[i];
var rowId = row[this.props.rowIdKey];
if (typeof rowId === 'undefined') {
continue;
}
var _key = rowId;
_newSelected[_key] = true;
}
return _newSelected;
} else {
return _defineProperty({}, key, true);
}
}
}, {
key: "getColumnWidth",
value: function getColumnWidth(columnIndex) {
var column = this.props.columns[columnIndex];
return this._columnDrag && this._columnDrag.columnIndex === columnIndex ? this._columnDrag.width : column.width;
}
}, {
key: "getStyles",
value: function getStyles() {
var _this3 = this;
var columnOffset = 0;
var lefts = this.props.columns.map(function (column, columnIndex) {
var columnWidth = _this3.getColumnWidth(columnIndex);
var left = columnOffset;
columnOffset += columnWidth;
return left;
});
if (this._columnOrdering) {
lefts[this._columnOrdering.fromIndex] = lefts[this._columnOrdering.fromIndex] + this._columnOrdering.deltaX;
}
var styles = this.props.columns.map(function (column, columnIndex) {
var columnWidth = _this3.getColumnWidth(columnIndex);
var left = lefts[columnIndex];
var others = '';
var otherStyle = '';
if (_this3._columnOrdering) {
if (columnIndex === _this3._columnOrdering.fromIndex) {
others += 'z-index: 6;';
others += "transform: translateX(".concat(_this3._columnOrdering.deltaX, "px);");
otherStyle = "\n #".concat(_this3._id, " tbody .react-infinite-table-col-").concat(columnIndex, " {\n position: sticky;\n z-index: 5;\n }\n ");
} else if (columnIndex >= _this3._columnOrdering.toIndex && columnIndex < _this3._columnOrdering.fromIndex) {
others += "transform: translateX(".concat(_this3._columnOrdering.width, "px);");
} else if (columnIndex <= _this3._columnOrdering.toIndex && columnIndex > _this3._columnOrdering.fromIndex) {
others += "transform: translateX(".concat(-_this3._columnOrdering.width, "px);");
}
}
if (_this3.props.fixedColumnsCount && columnIndex < _this3.props.fixedColumnsCount) {
others += "left: ".concat(left, "px;");
}
return "\n #".concat(_this3._id, " .react-infinite-table-col-").concat(columnIndex, " {\n width: ").concat(columnWidth, "px;\n min-width: ").concat(columnWidth, "px;\n max-width: ").concat(columnWidth, "px;\n ").concat(others, "\n }\n ").concat(otherStyle, "\n ");
});
return styles.join('\n');
}
}, {
key: "_findHeaderTh",
value: function _findHeaderTh(event) {
var th = event.target;
if (!th || th === this._thead) {
return {};
} // find th as thead > tr > *
while (th && th.parentElement && th.parentElement.parentElement !== this._thead) {
th = th.parentElement;
}
if (!th) {
return {};
}
var columnIndex = Array.prototype.indexOf.call(th.parentElement.children, th);
var data = offsetXYFromParent(event, this.scrollable);
var canChangeColumnsOrder = typeof this.props.onColumnOrderChange === 'function';
var canResizeColumns = typeof this.props.onColumnWidthChange === 'function';
return {
th: th,
columnIndex: columnIndex,
data: data,
canChangeColumnsOrder: canChangeColumnsOrder,
canResizeColumns: canResizeColumns
};
}
}, {
key: "_onRowMouseDown",
value: function _onRowMouseDown(event, rowIndex) {
var _this4 = this;
var target = event.target;
var startX = event.clientX;
var startY = event.clientY;
var _onRowMouseUp = function _onRowMouseUp(e) {
_cleanup(); // clear text selection
if (window.getSelection) {
if (window.getSelection().empty) {
// Chrome
window.getSelection().empty();
} else if (window.getSelection().removeAllRanges) {
// Firefox
window.getSelection().removeAllRanges();
}
} else if (document.selection) {
// IE?
document.selection.empty();
}
var modifier = e.ctrlKey || e.metaKey;
var shift = e.shiftKey;
_this4.setSelection(rowIndex, modifier, shift);
};
var _onRowMouseMove = function _onRowMouseMove(e) {
var endX = e.clientX;
var endY = e.clientY;
if (Math.pow(endX - startX, 2) + Math.pow(endY - startY, 2) < 4) {
return;
}
_cleanup();
};
function _cleanup() {
removeEvent(target, 'mouseup', _onRowMouseUp);
removeEvent(target, 'mousemove', _onRowMouseMove);
}
addEvent(target, 'mouseup', _onRowMouseUp);
addEvent(target, 'mousemove', _onRowMouseMove);
}
}, {
key: "renderRows",
value: function renderRows(displayIndexStart, displayIndexEnd) {
var _this5 = this;
var rows = [];
var rowsData = this.props.rows;
var selectedRows = this.props.selectedRows || {};
var rowIdKey = this.props.rowIdKey;
var oldRenderedRowKeys = this._renderedRowKeys || {};
this._renderedRowKeys = {}; // obtain the row's key:
// - if the row was render before, use the same key
// - otherwise, try to reuse an existing row that was removed from the visible window
var availableKeys = {};
var rowKeyByIndex = {};
var exactRowKeyByIndex = {};
for (var k in oldRenderedRowKeys) {
var key = oldRenderedRowKeys[k];
availableKeys[key] = true;
}
for (var rowIndex = displayIndexStart; rowIndex <= displayIndexEnd; rowIndex++) {
var rowData = rowsData[rowIndex];
var rowId = rowIdKey && rowData[rowIdKey];
var exactRowKey = '' + _typeof(rowId) !== 'undefined' ? rowId : 'rowIndex-' + rowIndex;
exactRowKeyByIndex[rowIndex] = exactRowKey;
var rowKey = oldRenderedRowKeys[exactRowKey];
if (rowKey) {
rowKeyByIndex[rowIndex] = rowKey;
delete availableKeys[rowKey];
this._renderedRowKeys[exactRowKey] = rowKey;
}
}
availableKeys = Object.keys(availableKeys);
var nextIndex = 0;
for (var _rowIndex = displayIndexStart; _rowIndex <= displayIndexEnd; _rowIndex++) {
if (!rowKeyByIndex[_rowIndex]) {
var _rowKey = void 0;
if (nextIndex < availableKeys.length) {
_rowKey = availableKeys[nextIndex++];
} else {
_rowKey = generateRowKey();
}
var _exactRowKey = exactRowKeyByIndex[_rowIndex];
rowKeyByIndex[_rowIndex] = _rowKey;
this._renderedRowKeys[_exactRowKey] = _rowKey;
}
} // render the rows
var _loop = function _loop(_rowIndex2) {
var rowHeight = _this5.props.rowHeight;
var rowData = rowsData[_rowIndex2];
var rowId = rowIdKey && rowData[rowIdKey];
var isSelected = typeof rowId !== 'undefined' && selectedRows[rowId];
var rowKey = rowKeyByIndex[_rowIndex2];
var row = /*#__PURE__*/React.createElement("tr", {
key: rowKey,
className: classNames(_rowIndex2 % 2 === 0 ? 'tr-odd' : 'tr-even', isSelected && 'tr-selected'),
style: {
height: Math.ceil(rowHeight),
minHeight: Math.ceil(rowHeight),
maxHeight: Math.ceil(rowHeight)
},
onMouseDown: function onMouseDown(e) {
return _this5._onRowMouseDown(e, _rowIndex2);
}
}, _this5.props.columns.map(function (column, columnIndex) {
var classes = ['react-infinite-table-col-' + columnIndex];
if (_this5.props.fixedColumnsCount && columnIndex < _this5.props.fixedColumnsCount) {
classes.push('is-fixed-left');
}
return /*#__PURE__*/React.createElement(Cell, {
renderer: column.cellRenderer,
key: columnIndex,
columnIndex: columnIndex,
column: column,
rowData: rowData,
rowIndex: _rowIndex2,
className: classNames(classes)
});
}));
rows.push(row);
};
for (var _rowIndex2 = displayIndexStart; _rowIndex2 <= displayIndexEnd; _rowIndex2++) {
_loop(_rowIndex2);
}
return rows;
}
}, {
key: "renderHeaderRows",
value: function renderHeaderRows() {
var _this6 = this;
var rows = [];
var rowOffset = 0;
var _loop2 = function _loop2(rowIndex) {
var row = /*#__PURE__*/React.createElement("tr", {
key: rowIndex,
style: {
width: '100%',
top: rowOffset
}
}, _this6.props.columns.map(function (column, columnIndex) {
var classes = ['react-infinite-table-col-' + columnIndex];
if (_this6.props.fixedColumnsCount && columnIndex < _this6.props.fixedColumnsCount) {
classes.push('is-fixed-left');
}
var canChangeColumnsOrder = typeof _this6.props.onColumnOrderChange === 'function';
var canResizeColumns = typeof _this6.props.onColumnWidthChange === 'function';
classes.push(canChangeColumnsOrder && 'react-infinite-column-reorder', canResizeColumns && 'react-infinite-column-resize');
return /*#__PURE__*/React.createElement(Cell, {
renderer: column.headerRenderer,
key: columnIndex,
columnIndex: columnIndex,
column: column,
rowIndex: rowIndex,
className: classNames(classes)
});
}));
rows.push(row);
};
for (var rowIndex = 0; rowIndex < this.props.headerCount; rowIndex++) {
_loop2(rowIndex);
}
return rows;
}
}, {
key: "renderFooterRows",
value: function renderFooterRows() {
var _this7 = this;
var rows = [];
var _loop3 = function _loop3(rowIndex) {
var row = /*#__PURE__*/React.createElement("tr", {
key: rowIndex,
style: {
width: '100%'
}
}, _this7.props.columns.map(function (column, columnIndex) {
var classes = ['react-infinite-table-col-' + columnIndex];
if (_this7.props.fixedColumnsCount && columnIndex < _this7.props.fixedColumnsCount) {
classes.push('is-fixed-left');
}
return /*#__PURE__*/React.createElement(Cell, {
renderer: column.footerRenderer,
key: columnIndex,
columnIndex: columnIndex,
column: column,
rowIndex: rowIndex,
className: classNames(classes)
});
}));
rows.push(row);
};
for (var rowIndex = 0; rowIndex < this.props.footerCount; rowIndex++) {
_loop3(rowIndex);
}
return rows;
}
}, {
key: "render",
value: function render() {
var _this8 = this;
var _this$props = this.props,
rows = _this$props.rows,
columns = _this$props.columns,
height = _this$props.height,
noRowsRenderer = _this$props.noRowsRenderer,
displayBottomUpwards = _this$props.displayBottomUpwards,
infiniteLoadBeginEdgeOffset = _this$props.infiniteLoadBeginEdgeOffset,
isInfiniteLoading = _this$props.isInfiniteLoading,
getLoadingSpinner = _this$props.getLoadingSpinner,
onColumnOrderChange = _this$props.onColumnOrderChange,
onColumnWidthChange = _this$props.onColumnWidthChange,
headerCount = _this$props.headerCount,
footerCount = _this$props.footerCount,
fillTableWidth = _this$props.fillTableWidth,
fixBorders = _this$props.fixBorders,
className = _this$props.className,
tableClassName = _this$props.tableClassName,
style = _this$props.style;
var _this$state = this.state,
infiniteComputer = _this$state.infiniteComputer,
displayIndexStart = _this$state.displayIndexStart,
displayIndexEnd = _this$state.displayIndexEnd;
var displayables;
if (rows.length > 1) {
displayables = this.renderRows(displayIndexStart, displayIndexEnd);
} else {
displayables = noRowsRenderer ? /*#__PURE__*/React.createElement("tr", {
className: "react-infinite-table-loading-no-rows"
}, /*#__PURE__*/React.createElement("td", {
colSpan: columns.length
}, /*#__PURE__*/React.createElement("div", null, noRowsRenderer()))) : [];
}
var infiniteScrollStyles = {};
var topSpacerHeight = infiniteComputer.getTopSpacerHeight(displayIndexStart);
var bottomSpacerHeight = infiniteComputer.getBottomSpacerHeight(displayIndexEnd); // This asymmetry is due to a reluctance to use CSS to control
// the bottom alignment
if (displayBottomUpwards) {
var heightDifference = height - infiniteComputer.getTotalScrollableHeight();
if (heightDifference > 0) {
topSpacerHeight = heightDifference - this.loadingSpinnerHeight;
}
}
var loadingSpinner = infiniteLoadBeginEdgeOffset !== undefined && isInfiniteLoading ? /*#__PURE__*/React.createElement("tr", {
ref: function ref(c) {
_this8.loadingSpinner = c;
},
className: "react-infinite-table-loading-row"
}, /*#__PURE__*/React.createElement("td", {
colSpan: columns.length
}, getLoadingSpinner())) : null;
var otherTHeadProps = {};
var canChangeColumnsOrder = typeof onColumnOrderChange === 'function';
var canResizeColumns = typeof onColumnWidthChange === 'function';
if (headerCount > 0 && (canChangeColumnsOrder || canResizeColumns)) {
otherTHeadProps.onMouseDown = this._onHeaderMouseDown;
}
return /*#__PURE__*/React.createElement("div", {
id: this._id,
className: classNames('react-infinite-table', fillTableWidth && 'react-infinite-table-fill', fixBorders && 'react-infinite-table-fix-borders', className),
style: style
}, /*#__PURE__*/React.createElement("style", {
ref: function ref(el) {
_this8._style = el;
},
dangerouslySetInnerHTML: {
__html: this.getStyles()
}
}), /*#__PURE__*/React.createElement("div", {
className: "react-infinite-table-wrapper",
ref: function ref(c) {
_this8.scrollable = c;
},
style: this.buildScrollableStyle(),
onScroll: this.handleScroll
}, /*#__PURE__*/React.createElement("div", {
className: "react-infinite-table-scroll-smoother"
}), /*#__PURE__*/React.createElement("table", {
className: tableClassName
}, headerCount > 0 && /*#__PURE__*/React.createElement("thead", _extends({
ref: function ref(el) {
_this8._thead = el;
}
}, otherTHeadProps), this.renderHeaderRows()), /*#__PURE__*/React.createElement("tbody", {
ref: function ref(c) {
_this8.smoothScrollingWrapper = c;
},
style: infiniteScrollStyles
}, /*#__PURE__*/React.createElement("tr", {
className: "react-infinite-table-spacer",
ref: function ref(c) {
_this8.topSpacer = c;
},
style: {
height: Math.ceil(topSpacerHeight)
}
}), /*#__PURE__*/React.createElement("tr", {
className: "react-infinite-table-spacer",
style: {
height: 0
}
/* to fix odd-even numbers */
}), displayBottomUpwards && loadingSpinner, displayables, !displayBottomUpwards && loadingSpinner, /*#__PURE__*/React.createElement("tr", {
className: "react-infinite-table-spacer",
ref: function ref(c) {
_this8.bottomSpacer = c;
}
}, /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement("div", {
style: {
minHeight: Math.ceil(bottomSpacerHeight)
}
})))), footerCount > 0 && /*#__PURE__*/React.createElement("tfoot", null, this.renderFooterRows()))), /*#__PURE__*/React.createElement("div", {
className: "react-infinite-prevent-table-fill"
}));
}
}]);
return Table;
}(React.Component);
_defineProperty(Table, "propTypes", {
height: PropTypes.number.isRequired,
rowHeight: PropTypes.oneOfType([PropTypes.number, PropTypes.func]).isRequired,
overscanSize: PropTypes.number,
rows: PropTypes.array.isRequired,
columns: PropTypes.arrayOf(PropTypes.shape({
width: PropTypes.number.isRequired,
cellRenderer: PropTypes.func.isRequired,
headerRenderer: PropTypes.func,
footerRenderer: PropTypes.func
})).isRequired,
headerCount: PropTypes.number,
footerCount: PropTypes.number,
fixedColumnsCount: PropTypes.number,
fillTableWidth: PropTypes.bool.isRequired,
noRowsRenderer: PropTypes.func,
rowIdKey: PropTypes.string,
selectedRows: PropTypes.object,
canSelectMultipleRows: PropTypes.bool,
onSelectionChange: PropTypes.func,
infiniteLoadBeginEdgeOffset: PropTypes.number,
isInfiniteLoading: PropTypes.bool,
onInfiniteLoad: PropTypes.func,
getLoadingSpinner: PropTypes.func,
displayBottomUpwards: PropTypes.bool.isRequired,
className: PropTypes.string,
tableClassName: PropTypes.string,
style: PropTypes.object,
fixBorders: PropTypes.bool,
onColumnWidthChange: PropTypes.func,
onColumnOrderChange: PropTypes.func
});
_defineProperty(Table, "defaultProps", {
overscanSize: 500,
headerCount: 1,
footerCount: 0,
fixedColumnsCount: 0,
fillTableWidth: false,
canSelectMultipleRows: false,
infiniteLoadBeginEdgeOffset: undefined,
onInfiniteLoad: function onInfiniteLoad() {},
getLoadingSpinner: function getLoadingSpinner() {
return /*#__PURE__*/React.createElement("div", null);
},
displayBottomUpwards: false
});
export { Table as default };