@gooddata/react-components
Version:
GoodData.UI - A powerful JavaScript library for building analytical applications
194 lines • 8.65 kB
JavaScript
;
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 __());
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
// (C) 2007-2020 GoodData Corporation
var React = require("react");
var classNames = require("classnames");
var AggregationsMenu_1 = require("./AggregationsMenu");
exports.ALIGN_LEFT = "left";
exports.ALIGN_RIGHT = "right";
var HeaderCell = /** @class */ (function (_super) {
__extends(HeaderCell, _super);
function HeaderCell() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.state = {
isMenuOpen: false,
isMenuButtonVisible: false,
currentSortDirection: null,
};
_this.onMouseEnterHeaderCell = function () {
_this.showMenuButton();
};
_this.onMouseLeaveHeaderCell = function () {
_this.hideMenuButton();
};
_this.onMouseEnterHeaderCellText = function () {
if (_this.props.enableSorting) {
var sortDirection = _this.props.sortDirection;
if (sortDirection === null) {
return _this.setState({
currentSortDirection: _this.props.defaultSortDirection,
});
}
else if (sortDirection === "asc") {
return _this.setState({
currentSortDirection: "desc",
});
}
else if (sortDirection === "desc") {
return _this.setState({
currentSortDirection: "asc",
});
}
else {
return _this.setState({
currentSortDirection: null,
});
}
}
};
_this.onMouseLeaveHeaderCellText = function () {
_this.setState({
currentSortDirection: _this.props.sortDirection,
});
};
_this.onTextClick = function () {
var _a = _this.props, sortDirection = _a.sortDirection, onSortClick = _a.onSortClick, enableSorting = _a.enableSorting, defaultSortDirection = _a.defaultSortDirection;
if (!enableSorting) {
return;
}
if (sortDirection === null) {
var nextSortDirection = defaultSortDirection;
_this.setState({
currentSortDirection: nextSortDirection,
});
onSortClick(nextSortDirection);
return;
}
var nextSort = sortDirection === "asc" ? "desc" : "asc";
_this.setState({
currentSortDirection: nextSort,
});
onSortClick(nextSort);
};
_this.showMenuButton = function () {
if (_this.state.isMenuOpen) {
return;
}
_this.setState({
isMenuButtonVisible: true,
});
};
_this.hideMenuButton = function () {
if (_this.state.isMenuOpen) {
return;
}
_this.setState({
isMenuButtonVisible: false,
});
};
_this.hideAndCloseMenu = function () {
_this.setState({
isMenuButtonVisible: false,
isMenuOpen: false,
});
};
_this.menuItemClick = function (menuAggregationClickConfig) {
_this.hideAndCloseMenu();
if (_this.props.onMenuAggregationClick) {
_this.props.onMenuAggregationClick(menuAggregationClickConfig);
}
};
_this.handleMenuOpenedChange = function (_a) {
var opened = _a.opened, source = _a.source;
_this.setState({
isMenuOpen: opened,
});
// When source is 'TOGGLER_BUTTON_CLICK' we do not want to hide menu
// button visibility. Because user is hovering over this button
// so we do not want to hide it.
if (source === "OUTSIDE_CLICK" || source === "SCROLL") {
_this.setState({
isMenuButtonVisible: false,
});
}
};
return _this;
}
HeaderCell.prototype.componentDidMount = function () {
this.setState({
currentSortDirection: this.props.sortDirection,
});
};
HeaderCell.prototype.componentWillReceiveProps = function (nextProps) {
if (nextProps.sortDirection !== this.props.sortDirection) {
this.setState({
currentSortDirection: this.props.sortDirection,
});
}
};
HeaderCell.prototype.render = function () {
var _a = this.props, menuPosition = _a.menuPosition, className = _a.className;
return (React.createElement("div", { className: classNames("gd-pivot-table-header", {
"gd-pivot-table-header--open": this.state.isMenuButtonVisible,
}, className), onMouseEnter: this.onMouseEnterHeaderCell, onMouseLeave: this.onMouseLeaveHeaderCell },
menuPosition === "left" && this.renderMenu(),
this.renderText(),
menuPosition === "right" && this.renderMenu()));
};
HeaderCell.prototype.renderMenu = function () {
var _a = this.props, intl = _a.intl, colId = _a.colId, menu = _a.menu, getExecutionResponse = _a.getExecutionResponse, getColumnTotals = _a.getColumnTotals, getAfmFilters = _a.getAfmFilters;
var _b = this.state, isMenuOpen = _b.isMenuOpen, isMenuButtonVisible = _b.isMenuButtonVisible;
if (!menu || !menu.aggregations) {
return null;
}
return (React.createElement(AggregationsMenu_1.default, { intl: intl, colId: colId, isMenuOpened: isMenuOpen, isMenuButtonVisible: isMenuButtonVisible, showSubmenu: menu.aggregationsSubMenu, getExecutionResponse: getExecutionResponse, getTotals: getColumnTotals, onMenuOpenedChange: this.handleMenuOpenedChange, onAggregationSelect: this.menuItemClick, getAfmFilters: getAfmFilters }));
};
HeaderCell.prototype.renderText = function () {
var _a = this.props, displayText = _a.displayText, textAlign = _a.textAlign, enableSorting = _a.enableSorting;
var classes = classNames("s-header-cell-label", "gd-pivot-table-header-label", {
"gd-pivot-table-header-label--right": textAlign === "right",
"gd-pivot-table-header-label--center": textAlign === "center",
"gd-pivot-table-header-label--clickable": enableSorting,
});
return (React.createElement("div", { className: classes, onClick: this.onTextClick, onMouseEnter: this.onMouseEnterHeaderCellText, onMouseLeave: this.onMouseLeaveHeaderCellText },
React.createElement("span", null, displayText ? displayText : ""),
this.renderSorting()));
};
HeaderCell.prototype.renderSorting = function () {
var enableSorting = this.props.enableSorting;
var currentSortDirection = this.state.currentSortDirection;
var sortClasses = classNames("s-sort-direction-arrow", "s-sorted-" + currentSortDirection, {
"gd-pivot-table-header-arrow-up": currentSortDirection === "asc",
"gd-pivot-table-header-arrow-down": currentSortDirection === "desc",
});
return (currentSortDirection &&
enableSorting && (React.createElement("span", { className: "gd-pivot-table-header-next-sort" },
React.createElement("span", { className: sortClasses }))));
};
HeaderCell.defaultProps = {
sortDirection: null,
textAlign: exports.ALIGN_LEFT,
menuPosition: exports.ALIGN_LEFT,
defaultSortDirection: "desc",
menu: null,
enableSorting: false,
onMenuAggregationClick: function () { return null; },
onSortClick: function () { return null; },
};
return HeaderCell;
}(React.Component));
exports.default = HeaderCell;
//# sourceMappingURL=HeaderCell.js.map