@gooddata/react-components
Version:
GoodData.UI - A powerful JavaScript library for building analytical applications
64 lines • 2.98 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-2018 GoodData Corporation
var React = require("react");
var cx = require("classnames");
var LegendList_1 = require("./LegendList");
var helpers_1 = require("./helpers");
var FluidLegend = /** @class */ (function (_super) {
__extends(FluidLegend, _super);
function FluidLegend(props) {
var _this = _super.call(this, props) || this;
_this.state = {
showAll: false,
};
_this.toggleShowAll = _this.toggleShowAll.bind(_this);
return _this;
}
FluidLegend.prototype.toggleShowAll = function () {
this.setState({
showAll: !this.state.showAll,
});
};
FluidLegend.prototype.renderSeries = function (itemWidth, visibleItemsCount) {
var _a = this.props, series = _a.series, chartType = _a.chartType, onItemClick = _a.onItemClick;
var limit = this.state.showAll ? series.length : visibleItemsCount;
var pagedSeries = series.slice(0, limit);
return (React.createElement("div", { className: "series" },
React.createElement(LegendList_1.default, { chartType: chartType, series: pagedSeries, onItemClick: onItemClick, width: itemWidth })));
};
FluidLegend.prototype.renderPaging = function () {
var classes = cx("gd-button-link", "gd-button-icon-only", "paging-button", {
"icon-chevron-up": this.state.showAll,
"icon-chevron-down": !this.state.showAll,
});
return (React.createElement("div", { className: "paging" },
React.createElement("button", { className: classes, onClick: this.toggleShowAll })));
};
FluidLegend.prototype.render = function () {
var _a = this.props, series = _a.series, containerWidth = _a.containerWidth;
var _b = helpers_1.calculateFluidLegend(series.length, containerWidth), itemWidth = _b.itemWidth, hasPaging = _b.hasPaging, visibleItemsCount = _b.visibleItemsCount;
return (React.createElement("div", { className: "viz-legend fluid" },
this.renderSeries(itemWidth, visibleItemsCount),
hasPaging && this.renderPaging()));
};
FluidLegend.defaultProps = {
containerWidth: null,
};
return FluidLegend;
}(React.PureComponent));
exports.default = FluidLegend;
//# sourceMappingURL=FluidLegend.js.map