@gooddata/react-components
Version:
GoodData.UI - A powerful JavaScript library for building analytical applications
538 lines • 30.1 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-2020 GoodData Corporation
var React = require("react");
var ReactDOM = require("react-dom");
var classNames = require("classnames");
var react_intl_1 = require("react-intl");
var debounce = require("lodash/debounce");
var isEqual = require("lodash/isEqual");
var noop = require("lodash/noop");
var pick = require("lodash/pick");
var uniqueId = require("lodash/uniqueId");
var fixed_data_table_2_1 = require("fixed-data-table-2");
require("nodelist-foreach-polyfill");
var Bubble_1 = require("@gooddata/goodstrap/lib/Bubble/Bubble");
var BubbleHoverTrigger_1 = require("@gooddata/goodstrap/lib/Bubble/BubbleHoverTrigger");
var headerPredicate_1 = require("../../../helpers/headerPredicate");
var mappingHeader_1 = require("../../../helpers/mappingHeader");
var MappingHeader_1 = require("../../../interfaces/MappingHeader");
var TableSortBubbleContent_1 = require("./TableSortBubbleContent");
var column_1 = require("./utils/column");
var common_1 = require("../utils/common");
var tableCell_1 = require("../../../helpers/tableCell");
var dataTransformation_1 = require("./utils/dataTransformation");
var drilldownEventing_1 = require("../utils/drilldownEventing");
var sort_1 = require("./utils/sort");
var row_1 = require("./utils/row");
var layout_1 = require("./utils/layout");
var RemoveRows_1 = require("./totals/RemoveRows");
var utils_1 = require("./totals/utils");
var TotalCell_1 = require("./totals/TotalCell");
var layout_2 = require("./constants/layout");
var FULLSCREEN_TOOLTIP_VIEWPORT_THRESHOLD = 480;
var MIN_COLUMN_WIDTH = 100;
var VERTICAL_SCROLL_WIDTH = 16; // derived from scroll width in fixed-data-table-2
var DEBOUNCE_SCROLL_STOP = 500;
var TOOLTIP_DISPLAY_DELAY = 1000;
exports.SCROLL_DEBOUNCE = 0;
exports.RESIZE_DEBOUNCE = 60;
var scrollEvents = [
{
name: "scroll",
debounce: exports.SCROLL_DEBOUNCE,
},
{
name: "goodstrap.scrolled",
debounce: exports.SCROLL_DEBOUNCE,
},
{
name: "resize",
debounce: exports.RESIZE_DEBOUNCE,
},
{
name: "goodstrap.drag",
debounce: exports.RESIZE_DEBOUNCE,
},
];
var TableVisualizationClass = /** @class */ (function (_super) {
__extends(TableVisualizationClass, _super);
function TableVisualizationClass(props) {
var _this = _super.call(this, props) || this;
_this.state = {
hintSortBy: null,
sortBubble: {
visible: false,
},
width: 0,
height: 0,
};
_this.setRootRef = _this.setRootRef.bind(_this);
_this.setTableWrapRef = _this.setTableWrapRef.bind(_this);
_this.setTableComponentRef = _this.setTableComponentRef.bind(_this);
_this.closeSortBubble = _this.closeSortBubble.bind(_this);
_this.renderDefaultHeader = _this.renderDefaultHeader.bind(_this);
_this.renderTooltipHeader = _this.renderTooltipHeader.bind(_this);
_this.scroll = _this.scroll.bind(_this);
_this.scrolled = _this.scrolled.bind(_this);
_this.addTotalsRow = _this.addTotalsRow.bind(_this);
_this.setTotalsRemoveComponentRef = _this.setTotalsRemoveComponentRef.bind(_this);
_this.removeTotalsRow = _this.removeTotalsRow.bind(_this);
_this.toggleColumnHighlight = _this.toggleColumnHighlight.bind(_this);
_this.toggleBodyColumnHighlight = _this.toggleBodyColumnHighlight.bind(_this);
_this.toggleFooterColumnHighlight = _this.toggleFooterColumnHighlight.bind(_this);
_this.resetTotalsRowHighlight = _this.resetTotalsRowHighlight.bind(_this);
_this.enableTotalColumn = _this.enableTotalColumn.bind(_this);
_this.disableTotalColumn = _this.disableTotalColumn.bind(_this);
_this.scrollingStopped = debounce(function () { return _this.scroll(true); }, DEBOUNCE_SCROLL_STOP);
_this.addTotalDropdownOpened = false;
return _this;
}
TableVisualizationClass.fullscreenTooltipEnabled = function () {
return document.documentElement.clientWidth <= FULLSCREEN_TOOLTIP_VIEWPORT_THRESHOLD;
};
TableVisualizationClass.isSticky = function (stickyHeaderOffset) {
return stickyHeaderOffset >= 0;
};
TableVisualizationClass.getTableHeight = function (height, maxHeight) {
if (!maxHeight) {
return height;
}
return height < maxHeight ? height : maxHeight;
};
TableVisualizationClass.prototype.componentDidMount = function () {
this.table = ReactDOM.findDOMNode(this.tableComponentRef);
this.tableInnerContainer = this.table.querySelector(".fixedDataTableLayout_rowsContainer");
var tableRows = this.table.querySelectorAll(".fixedDataTableRowLayout_rowWrapper");
this.header = tableRows[0];
this.header.classList.add("table-header");
if (this.hasFooterWithTotals()) {
this.footer = tableRows[tableRows.length - 1];
this.footer.classList.add("table-footer");
}
if (TableVisualizationClass.isSticky(this.props.stickyHeaderOffset)) {
this.setListeners();
this.scrolled();
this.checkTableDimensions();
}
};
TableVisualizationClass.prototype.componentWillReceiveProps = function (nextProps) {
var current = this.props;
var currentIsSticky = TableVisualizationClass.isSticky(current.stickyHeaderOffset);
var nextIsSticky = TableVisualizationClass.isSticky(nextProps.stickyHeaderOffset);
if (currentIsSticky !== nextIsSticky) {
if (currentIsSticky) {
this.unsetListeners();
}
if (nextIsSticky) {
this.setListeners();
}
}
};
TableVisualizationClass.prototype.componentDidUpdate = function (prevProps) {
if (!isEqual(prevProps.totalsWithData, this.props.totalsWithData)) {
var tableRows = this.table.querySelectorAll(".fixedDataTableRowLayout_rowWrapper");
if (this.footer) {
this.footer.classList.remove("table-footer");
}
if (this.hasFooterWithTotals()) {
this.footer = tableRows[tableRows.length - 1];
this.footer.classList.add("table-footer");
}
}
if (TableVisualizationClass.isSticky(this.props.stickyHeaderOffset)) {
this.scroll(true);
this.checkTableDimensions();
}
this.props.afterRender();
};
TableVisualizationClass.prototype.componentWillUnmount = function () {
this.unsetListeners();
};
TableVisualizationClass.prototype.render = function () {
var _a = this.props, totalsWithData = _a.totalsWithData, containerHeight = _a.containerHeight, containerMaxHeight = _a.containerMaxHeight, containerWidth = _a.containerWidth, headers = _a.headers, stickyHeaderOffset = _a.stickyHeaderOffset;
var height = TableVisualizationClass.getTableHeight(containerHeight, containerMaxHeight);
var footerHeight = layout_1.getFooterHeight(totalsWithData, this.isTotalsEditAllowed(), utils_1.shouldShowTotals(headers));
var columnWidth = Math.max((containerWidth - VERTICAL_SCROLL_WIDTH) / headers.length, MIN_COLUMN_WIDTH);
var isSticky = TableVisualizationClass.isSticky(stickyHeaderOffset);
return (React.createElement("div", { ref: this.setRootRef },
React.createElement("div", { className: this.getComponentClasses() },
React.createElement("div", { className: this.getContentClasses(), ref: this.setTableWrapRef },
React.createElement(fixed_data_table_2_1.Table, { ref: this.setTableComponentRef, touchScrollEnabled: true, headerHeight: layout_2.DEFAULT_HEADER_HEIGHT, footerHeight: footerHeight, rowHeight: layout_2.DEFAULT_ROW_HEIGHT, rowsCount: this.props.rows.length, width: containerWidth, maxHeight: height, onScrollStart: this.closeSortBubble }, this.renderColumns(headers, columnWidth))),
isSticky ? this.renderStickyTableBackgroundFiller() : false),
this.renderTotalsRemove()));
};
TableVisualizationClass.prototype.onTotalsEdit = function (totalsWithData) {
var totalsDefinition = utils_1.getTotalsDefinition(totalsWithData);
this.props.onTotalsEdit(totalsDefinition);
};
TableVisualizationClass.prototype.setRootRef = function (ref) {
this.rootRef = ref;
};
TableVisualizationClass.prototype.setTableComponentRef = function (ref) {
this.tableComponentRef = ref;
};
TableVisualizationClass.prototype.setTableWrapRef = function (ref) {
this.tableWrapRef = ref;
};
TableVisualizationClass.prototype.setTotalsRemoveComponentRef = function (ref) {
this.totalsRemoveComponentRef = ref;
};
TableVisualizationClass.prototype.setListeners = function () {
this.subscribers = common_1.subscribeEvents(this.scrolled, scrollEvents);
};
TableVisualizationClass.prototype.getSortFunc = function (header, sort) {
var onSortChange = this.props.onSortChange;
var sortItem = sort_1.createSortItem(header, sort);
return function () { return onSortChange(sortItem); };
};
TableVisualizationClass.prototype.getSortObj = function (header, index) {
var _a = this.props, sortBy = _a.sortBy, sortDir = _a.sortDir;
var hintSortBy = this.state.hintSortBy;
var dir = sortBy === index ? sortDir : null;
var nextDir = sort_1.getNextSortDir(header, dir);
return {
dir: dir,
nextDir: nextDir,
sortDirClass: sort_1.getHeaderSortClassName(hintSortBy === index ? nextDir : dir, dir),
};
};
TableVisualizationClass.prototype.getMouseOverFunc = function (index) {
var _this = this;
return function () {
// workaround glitch with fixed-data-table-2,
// where header styles are overwritten first time user mouses over it
_this.scrolled();
_this.setState({ hintSortBy: index });
};
};
TableVisualizationClass.prototype.getComponentClasses = function () {
var hasHiddenRows = this.props.hasHiddenRows;
return classNames("indigo-table-component", {
"has-hidden-rows": hasHiddenRows,
"has-footer": this.hasFooterWithTotals(),
"has-footer-editable": this.isTotalsEditAllowed(),
});
};
TableVisualizationClass.prototype.getContentClasses = function () {
var stickyHeaderOffset = this.props.stickyHeaderOffset;
return classNames("indigo-table-component-content", {
"has-sticky-header": TableVisualizationClass.isSticky(stickyHeaderOffset),
});
};
TableVisualizationClass.prototype.unsetListeners = function () {
if (this.subscribers && this.subscribers.length > 0) {
this.subscribers.forEach(function (subscriber) {
subscriber.unsubscribe();
});
this.subscribers = null;
}
};
TableVisualizationClass.prototype.toggleBodyColumnHighlight = function (columnIndex, isHighlighted) {
if (this.addTotalDropdownOpened) {
return;
}
utils_1.toggleCellClass(this.table, columnIndex, isHighlighted, "indigo-table-cell-highlight");
};
TableVisualizationClass.prototype.toggleFooterColumnHighlight = function (columnIndex, isHighlighted) {
if (this.addTotalDropdownOpened) {
return;
}
utils_1.toggleCellClass(this.footer, columnIndex, isHighlighted, "indigo-table-footer-cell-highlight");
};
TableVisualizationClass.prototype.toggleColumnHighlight = function (columnIndex, isHighlighted) {
this.toggleBodyColumnHighlight(columnIndex, isHighlighted);
this.toggleFooterColumnHighlight(columnIndex, isHighlighted);
};
TableVisualizationClass.prototype.resetTotalsRowHighlight = function (rowIndex) {
if (!this.isTotalsEditAllowed()) {
return;
}
utils_1.resetRowClass(this.rootRef, "indigo-totals-remove-row-highlight", ".indigo-totals-remove > .indigo-totals-remove-row", rowIndex);
};
TableVisualizationClass.prototype.hasFooterWithTotals = function () {
var _a = this.props, headers = _a.headers, totalsWithData = _a.totalsWithData;
return this.isTotalsEditAllowed() || (totalsWithData.length && utils_1.shouldShowTotals(headers));
};
TableVisualizationClass.prototype.checkTableDimensions = function () {
if (this.table) {
var _a = this.state, width = _a.width, height = _a.height;
var rect = this.table.getBoundingClientRect();
if (width !== rect.width || height !== rect.height) {
this.setState(pick(rect, "width", "height"));
}
}
};
TableVisualizationClass.prototype.scrollHeader = function (isScrollingStopped) {
if (isScrollingStopped === void 0) { isScrollingStopped = false; }
var _a = this.props, stickyHeaderOffset = _a.stickyHeaderOffset, sortInTooltip = _a.sortInTooltip, totalsWithData = _a.totalsWithData, hasHiddenRows = _a.hasHiddenRows, headers = _a.headers;
var tableBoundingRect = this.tableInnerContainer.getBoundingClientRect();
var totalsEditAllowed = this.isTotalsEditAllowed();
var totalsAreVisible = utils_1.shouldShowTotals(headers);
var isOutOfViewport = tableBoundingRect.bottom < 0;
if (isOutOfViewport) {
return;
}
if (!isScrollingStopped && sortInTooltip && this.state.sortBubble.visible) {
this.closeSortBubble();
}
var isDefaultPosition = layout_1.isHeaderAtDefaultPosition(stickyHeaderOffset, tableBoundingRect.top);
var isEdgePosition = layout_1.isHeaderAtEdgePosition(stickyHeaderOffset, hasHiddenRows, totalsWithData, tableBoundingRect.bottom, totalsEditAllowed, totalsAreVisible);
var positions = layout_1.getHeaderPositions(stickyHeaderOffset, hasHiddenRows, totalsWithData, totalsEditAllowed, totalsAreVisible, {
height: tableBoundingRect.height,
top: tableBoundingRect.top,
});
row_1.updatePosition(this.header, positions, isDefaultPosition, isEdgePosition, isScrollingStopped);
};
TableVisualizationClass.prototype.scrollFooter = function (isScrollingStopped) {
if (isScrollingStopped === void 0) { isScrollingStopped = false; }
var _a = this.props, hasHiddenRows = _a.hasHiddenRows, totalsWithData = _a.totalsWithData, headers = _a.headers;
var tableBoundingRect = this.tableInnerContainer.getBoundingClientRect();
var totalsEditAllowed = this.isTotalsEditAllowed();
var totalsAreVisible = utils_1.shouldShowTotals(headers);
var isOutOfViewport = tableBoundingRect.top > window.innerHeight;
if (isOutOfViewport || !this.hasFooterWithTotals()) {
return;
}
var isDefaultPosition = layout_1.isFooterAtDefaultPosition(hasHiddenRows, tableBoundingRect.bottom, window.innerHeight);
var isEdgePosition = layout_1.isFooterAtEdgePosition(hasHiddenRows, totalsWithData, window.innerHeight, totalsEditAllowed, totalsAreVisible, {
height: tableBoundingRect.height,
bottom: tableBoundingRect.bottom,
});
var positions = layout_1.getFooterPositions(hasHiddenRows, totalsWithData, window.innerHeight, totalsEditAllowed, totalsAreVisible, {
height: tableBoundingRect.height,
bottom: tableBoundingRect.bottom,
});
row_1.updatePosition(this.footer, positions, isDefaultPosition, isEdgePosition, isScrollingStopped);
if (this.totalsRemoveComponentRef) {
var wrapperRef = this.totalsRemoveComponentRef.getWrapperRef();
utils_1.updateTotalsRemovePosition(tableBoundingRect, totalsWithData, totalsAreVisible, totalsEditAllowed, wrapperRef);
}
};
TableVisualizationClass.prototype.scroll = function (isScrollingStopped) {
if (isScrollingStopped === void 0) { isScrollingStopped = false; }
this.scrollHeader(isScrollingStopped);
this.scrollFooter(isScrollingStopped);
};
TableVisualizationClass.prototype.scrolled = function () {
this.scroll();
this.scrollingStopped();
};
TableVisualizationClass.prototype.closeSortBubble = function () {
this.setState({
sortBubble: {
visible: false,
},
});
};
TableVisualizationClass.prototype.isBubbleVisible = function (index) {
var sortBubble = this.state.sortBubble;
return sortBubble.visible && sortBubble.index === index;
};
TableVisualizationClass.prototype.isTotalsEditAllowed = function () {
var _a = this.props, headers = _a.headers, totalsEditAllowed = _a.totalsEditAllowed;
return totalsEditAllowed && utils_1.shouldShowTotals(headers);
};
TableVisualizationClass.prototype.addTotalsRow = function (columnIndex, totalType) {
var _a = this.props, totalsWithData = _a.totalsWithData, headers = _a.headers;
var totalsAddedRow = utils_1.addTotalsRow(totalsWithData, totalType);
var totalsEnabledColumn = utils_1.addMeasureIndex(totalsAddedRow, headers, totalType, columnIndex);
if (!isEqual(totalsEnabledColumn, totalsWithData)) {
this.onTotalsEdit(totalsEnabledColumn);
}
};
TableVisualizationClass.prototype.removeTotalsRow = function (totalType) {
var updatedTotals = utils_1.removeTotalsRow(this.props.totalsWithData, totalType);
this.onTotalsEdit(updatedTotals);
};
TableVisualizationClass.prototype.enableTotalColumn = function (columnIndex, totalType) {
var updatedTotals = utils_1.addMeasureIndex(this.props.totalsWithData, this.props.headers, totalType, columnIndex);
this.onTotalsEdit(updatedTotals);
};
TableVisualizationClass.prototype.disableTotalColumn = function (columnIndex, totalType) {
var updatedTotals = utils_1.removeMeasureIndex(this.props.totalsWithData, this.props.headers, totalType, columnIndex);
this.onTotalsEdit(updatedTotals);
};
TableVisualizationClass.prototype.renderTooltipHeader = function (header, columnIndex, columnWidth) {
var _this = this;
var headerClasses = layout_1.getHeaderClassNames(header);
var headerName = mappingHeader_1.getMappingHeaderName(header);
var bubbleClass = uniqueId("table-header-");
var cellClasses = classNames(headerClasses, bubbleClass);
var sort = this.getSortObj(header, columnIndex);
var columnAlign = column_1.getColumnAlign(header);
var sortingModalAlignPoints = layout_1.getTooltipSortAlignPoints(columnAlign);
var getArrowPositions = function () {
return TableVisualizationClass.fullscreenTooltipEnabled()
? layout_1.calculateArrowPosition({
width: columnWidth,
align: columnAlign,
index: columnIndex,
}, _this.tableComponentRef.state.scrollX, _this.tableWrapRef)
: null;
};
var showSortBubble = function () {
// workaround glitch with fixed-data-table-2
// where header styles are overwritten first time user clicks on it
_this.scroll();
_this.setState({
sortBubble: {
visible: true,
index: columnIndex,
},
});
};
return function (props) { return (React.createElement("span", null,
React.createElement(fixed_data_table_2_1.Cell, __assign({}, props, { className: cellClasses, onClick: showSortBubble }),
React.createElement("span", { className: "gd-table-header-title" }, headerName),
React.createElement("span", { className: sort.sortDirClass })),
_this.isBubbleVisible(columnIndex) && (React.createElement(Bubble_1.default, { closeOnOutsideClick: true, alignTo: "." + bubbleClass, className: "gd-table-header-bubble bubble-light", overlayClassName: "gd-table-header-bubble-overlay", alignPoints: sortingModalAlignPoints, arrowDirections: {
"bl tr": "top",
"br tl": "top",
"tl br": "bottom",
"tr bl": "bottom",
}, arrowOffsets: {
"bl tr": [14, 10],
"br tl": [-14, 10],
"tl br": [14, -10],
"tr bl": [-14, -10],
}, arrowStyle: getArrowPositions, onClose: _this.closeSortBubble },
React.createElement(TableSortBubbleContent_1.TableSortBubbleContent, { activeSortDir: sort.dir, title: headerName, onClose: _this.closeSortBubble, onSortChange: _this.getSortFunc(header, sort) }))))); };
};
TableVisualizationClass.prototype.renderDefaultHeader = function (header, columnIndex) {
var headerClasses = layout_1.getHeaderClassNames(header);
var headerName = mappingHeader_1.getMappingHeaderName(header);
var onMouseEnter = this.getMouseOverFunc(columnIndex);
var onMouseLeave = this.getMouseOverFunc(null);
var sort = this.getSortObj(header, columnIndex);
var onClick = this.getSortFunc(header, sort);
var columnAlign = column_1.getColumnAlign(header);
var tooltipAlignPoints = layout_1.getTooltipAlignPoints(columnAlign);
return function (props) { return (React.createElement(fixed_data_table_2_1.Cell, __assign({}, props, { className: headerClasses, onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave }),
React.createElement(BubbleHoverTrigger_1.default, { className: "gd-table-header-title", showDelay: TOOLTIP_DISPLAY_DELAY },
headerName,
React.createElement(Bubble_1.default, { closeOnOutsideClick: true, className: "bubble-light", overlayClassName: "gd-table-header-bubble-overlay", alignPoints: tooltipAlignPoints }, headerName)),
React.createElement("span", { className: sort.sortDirClass }))); };
};
TableVisualizationClass.prototype.renderCell = function (headers, columnIndex) {
var _this = this;
var _a = this.props, executionRequest = _a.executionRequest, executionResponse = _a.executionResponse, drillablePredicates = _a.drillablePredicates, onFiredDrillEvent = _a.onFiredDrillEvent, rows = _a.rows, separators = _a.separators;
var afm = executionRequest.execution.afm;
var header = headers[columnIndex];
var drillable = headerPredicate_1.isSomeHeaderPredicateMatched(drillablePredicates, header, afm, executionResponse);
return function (cellProps) {
var rowIndex = cellProps.rowIndex;
var columnKey = cellProps.columnKey;
var row = rows[rowIndex];
var cellContent = row[columnKey];
var classes = tableCell_1.getCellClassNames(rowIndex, columnKey, drillable);
var drillConfig = { afm: afm, onFiredDrillEvent: onFiredDrillEvent };
var hoverable = MappingHeader_1.isMappingHeaderMeasureItem(header) && _this.isTotalsEditAllowed();
var _a = tableCell_1.getCellStyleAndFormattedValue(header, cellContent, true, separators), style = _a.style, formattedValue = _a.formattedValue;
var cellPropsDrill = drillable
? __assign({}, cellProps, { onClick: function (e) {
drilldownEventing_1.cellClick(drillConfig, {
columnIndex: columnKey,
rowIndex: rowIndex,
row: dataTransformation_1.getBackwardCompatibleRowForDrilling(row),
intersection: [dataTransformation_1.getIntersectionForDrilling(afm, header)],
}, e.target);
} }) : cellProps;
var cellPropsHover = hoverable
? __assign({}, cellPropsDrill, { onMouseOver: function () { return _this.toggleFooterColumnHighlight(columnIndex, true); }, onMouseLeave: function () { return _this.toggleFooterColumnHighlight(columnIndex, false); } }) : cellPropsDrill;
return (React.createElement(fixed_data_table_2_1.Cell, __assign({}, cellPropsHover, { className: classNames("col-" + columnIndex) }),
React.createElement("span", { className: classes, style: style, title: formattedValue }, formattedValue)));
};
};
TableVisualizationClass.prototype.renderFooter = function (header, columnIndex, headersCount) {
var _this = this;
var _a = this.props, headers = _a.headers, totalsWithData = _a.totalsWithData, separators = _a.separators;
if (!utils_1.shouldShowTotals(headers)) {
return null;
}
var onCellMouseOver = function (rowIndex, colIndex) {
_this.resetTotalsRowHighlight(rowIndex);
_this.toggleFooterColumnHighlight(colIndex, true);
};
var onCellMouseLeave = function (rowIndex, colIndex) {
_this.resetTotalsRowHighlight(rowIndex);
_this.toggleFooterColumnHighlight(colIndex, false);
};
var onAddDropdownOpenStateChanged = function (colIndex, isOpened) {
_this.addTotalDropdownOpened = isOpened;
_this.toggleBodyColumnHighlight(colIndex, isOpened);
_this.toggleFooterColumnHighlight(colIndex, isOpened);
};
var onAddWrapperHover = function (colIndex, isHighlighted) {
_this.toggleFooterColumnHighlight(colIndex, isHighlighted);
};
var onAddButtonHover = function (colIndex, isHovered) {
_this.toggleBodyColumnHighlight(colIndex, isHovered);
_this.toggleFooterColumnHighlight(colIndex, isHovered);
};
return (React.createElement(TotalCell_1.TotalCell, { totalsWithData: totalsWithData, columnIndex: columnIndex, header: header, headersCount: headersCount, firstMeasureIndex: utils_1.getFirstMeasureIndex(headers), editAllowed: this.isTotalsEditAllowed(), separators: separators, onCellMouseOver: onCellMouseOver, onCellMouseLeave: onCellMouseLeave, onEnableColumn: this.enableTotalColumn, onDisableColumn: this.disableTotalColumn, onAddDropdownOpenStateChanged: onAddDropdownOpenStateChanged, onAddWrapperHover: onAddWrapperHover, onAddButtonHover: onAddButtonHover, onRowAdd: this.addTotalsRow }));
};
TableVisualizationClass.prototype.renderColumns = function (headers, columnWidth) {
var _this = this;
var renderHeader = this.props.sortInTooltip ? this.renderTooltipHeader : this.renderDefaultHeader;
return headers.map(function (header, columnIndex) { return (React.createElement(fixed_data_table_2_1.Column, { key: columnIndex + "." + mappingHeader_1.getMappingHeaderLocalIdentifier(header), width: MIN_COLUMN_WIDTH, flexGrow: 1, align: column_1.getColumnAlign(header), columnKey: columnIndex, header: renderHeader(header, columnIndex, columnWidth), footer: _this.renderFooter(header, columnIndex, headers.length), cell: _this.renderCell(headers, columnIndex), allowCellsRecycling: true })); });
};
TableVisualizationClass.prototype.renderStickyTableBackgroundFiller = function () {
return (React.createElement("div", { className: "indigo-table-background-filler", style: __assign({}, pick(this.state, "width", "height")) }));
};
TableVisualizationClass.prototype.renderTotalsRemove = function () {
if (!this.isTotalsEditAllowed()) {
return null;
}
var _a = this.props, totalsWithData = _a.totalsWithData, lastAddedTotalType = _a.lastAddedTotalType, onLastAddedTotalRowHighlightPeriodEnd = _a.onLastAddedTotalRowHighlightPeriodEnd;
return (React.createElement(RemoveRows_1.RemoveRows, { lastAddedTotalType: lastAddedTotalType, onLastAddedTotalRowHighlightPeriodEnd: onLastAddedTotalRowHighlightPeriodEnd, totalsWithData: totalsWithData, onRemove: this.removeTotalsRow, ref: this.setTotalsRemoveComponentRef }));
};
TableVisualizationClass.defaultProps = {
afterRender: noop,
containerHeight: null,
containerMaxHeight: null,
drillablePredicates: [],
hasHiddenRows: false,
headers: [],
onFiredDrillEvent: function () { return true; },
onSortChange: noop,
rows: [],
sortBy: null,
sortDir: null,
sortInTooltip: false,
stickyHeaderOffset: -1,
totalsEditAllowed: false,
onTotalsEdit: noop,
totalsWithData: [],
lastAddedTotalType: null,
onLastAddedTotalRowHighlightPeriodEnd: noop,
};
return TableVisualizationClass;
}(React.Component));
exports.TableVisualizationClass = TableVisualizationClass;
exports.TableVisualization = react_intl_1.injectIntl(TableVisualizationClass);
//# sourceMappingURL=TableVisualization.js.map