@gooddata/react-components
Version:
GoodData.UI - A powerful JavaScript library for building analytical applications
153 lines • 7.51 kB
JavaScript
"use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
Object.defineProperty(exports, "__esModule", { value: true });
// (C) 2007-2019 GoodData Corporation
var React = require("react");
var noop = require("lodash/noop");
var omit = require("lodash/omit");
var Table_1 = require("./Table");
var TableControls_1 = require("./TableControls");
var layout_1 = require("./constants/layout");
var HEIGHT_PADDING = 20;
var BOTTOM_BUTTONS_HEIGHT = 31;
var isTouchDevice = "ontouchstart" in document.documentElement;
var ResponsiveTable = /** @class */ (function (_super) {
__extends(ResponsiveTable, _super);
function ResponsiveTable(props) {
var _this = _super.call(this, props) || this;
_this.state = {
page: props.page || 1,
pageOffset: props.pageOffset || 0,
};
_this.onMore = _this.onMore.bind(_this);
_this.onLess = _this.onLess.bind(_this);
_this.setTableRef = _this.setTableRef.bind(_this);
return _this;
}
ResponsiveTable.prototype.componentWillReceiveProps = function (nextProps) {
if (this.props.containerHeight !== nextProps.containerHeight ||
this.props.totalsWithData.length !== nextProps.totalsWithData.length ||
this.props.rows.length !== nextProps.rows.length ||
this.props.page !== nextProps.page ||
this.props.pageOffset !== nextProps.pageOffset) {
var rows = this.getRowCount(nextProps.page, nextProps.rows.length, nextProps.totalsWithData.length, nextProps.containerHeight, nextProps.rowsPerPage);
var page = this.getBasePage(rows);
this.setState({
page: page,
});
}
};
ResponsiveTable.prototype.render = function () {
var props = this.props;
var tableProps = __assign({}, omit(props, "pageOffset"), { rows: props.rows.slice(0, this.getRowCount(this.getPage())), containerHeight: this.getContainerHeight(), containerMaxHeight: this.getContainerMaxHeight(), hasHiddenRows: this.hasHiddenRows(), sortInTooltip: isTouchDevice });
return (React.createElement("div", { className: "gdc-indigo-responsive-table", ref: this.setTableRef },
React.createElement(Table_1.Table, __assign({}, tableProps)),
React.createElement(TableControls_1.TableControls, { onMore: this.onMore, onLess: this.onLess, isMoreButtonDisabled: this.isMoreButtonDisabled(), isMoreButtonVisible: this.isMoreButtonVisible(), isLessButtonVisible: this.isLessButtonVisible() })));
};
ResponsiveTable.prototype.onMore = function () {
var _this = this;
var pageOffset = this.state.pageOffset + 1;
this.setState({ pageOffset: pageOffset }, function () {
var rows = _this.getRowCount(_this.getPage());
_this.props.onMore({ page: _this.state.page, pageOffset: pageOffset, rows: rows });
});
};
ResponsiveTable.prototype.onLess = function () {
var _this = this;
var pageOffset = 0;
this.setState({ pageOffset: pageOffset }, function () {
var rows = _this.getRowCount(_this.getPage());
_this.props.onLess({ rows: rows });
});
var header = this.table.getBoundingClientRect();
window.scrollTo(window.pageXOffset, window.pageYOffset + header.top);
};
ResponsiveTable.prototype.getBasePage = function (rowsCount) {
return Math.ceil(rowsCount / this.props.rowsPerPage);
};
ResponsiveTable.prototype.getPage = function () {
return this.state.page + this.state.pageOffset;
};
ResponsiveTable.prototype.getRowCount = function (page, rowsLength, totalsWithDataLength, containerHeight, rowsPerPage) {
if (rowsLength === void 0) { rowsLength = this.props.rows.length; }
if (totalsWithDataLength === void 0) { totalsWithDataLength = this.props.totalsWithData.length; }
if (containerHeight === void 0) { containerHeight = this.props.containerHeight; }
if (rowsPerPage === void 0) { rowsPerPage = this.props.rowsPerPage; }
var renderedHeight = rowsPerPage * page * layout_1.DEFAULT_ROW_HEIGHT +
totalsWithDataLength * layout_1.DEFAULT_FOOTER_ROW_HEIGHT +
layout_1.DEFAULT_HEADER_HEIGHT +
HEIGHT_PADDING;
if (renderedHeight < containerHeight) {
var heightDiffInWholeRows = Math.floor((containerHeight - renderedHeight) / layout_1.DEFAULT_ROW_HEIGHT);
return Math.min(rowsLength, rowsPerPage * page + heightDiffInWholeRows);
}
return Math.min(rowsLength, rowsPerPage * page);
};
ResponsiveTable.prototype.getContainerHeight = function () {
var _a = this.props, rows = _a.rows, totalsWithData = _a.totalsWithData;
return (rows.length * layout_1.DEFAULT_ROW_HEIGHT +
totalsWithData.length * layout_1.DEFAULT_FOOTER_ROW_HEIGHT +
layout_1.DEFAULT_HEADER_HEIGHT +
HEIGHT_PADDING);
};
ResponsiveTable.prototype.getContainerMaxHeight = function () {
var _a = this.props, rows = _a.rows, totalsWithData = _a.totalsWithData, containerHeight = _a.containerHeight;
var allDataHeight = rows.length * layout_1.DEFAULT_ROW_HEIGHT +
totalsWithData.length * layout_1.DEFAULT_FOOTER_ROW_HEIGHT +
layout_1.DEFAULT_HEADER_HEIGHT +
HEIGHT_PADDING;
if (containerHeight) {
var buttonsHeight = this.isMoreButtonVisible() ? BOTTOM_BUTTONS_HEIGHT + HEIGHT_PADDING : 0;
return Math.min(containerHeight - buttonsHeight, allDataHeight);
}
return allDataHeight;
};
ResponsiveTable.prototype.setTableRef = function (table) {
this.table = table;
};
ResponsiveTable.prototype.isMoreButtonVisible = function () {
return this.props.rows.length > this.props.rowsPerPage;
};
ResponsiveTable.prototype.isMoreButtonDisabled = function () {
return this.props.rows.length <= this.props.rowsPerPage * this.getPage();
};
ResponsiveTable.prototype.isLessButtonVisible = function () {
return this.state.pageOffset > 0;
};
ResponsiveTable.prototype.hasHiddenRows = function () {
return !this.isMoreButtonDisabled() && !this.props.containerHeight;
};
ResponsiveTable.defaultProps = {
totalsWithData: [],
page: 1,
pageOffset: 0,
onMore: noop,
onLess: noop,
};
return ResponsiveTable;
}(React.Component));
exports.ResponsiveTable = ResponsiveTable;
//# sourceMappingURL=ResponsiveTable.js.map