@gooddata/react-components
Version:
GoodData.UI - A powerful JavaScript library for building analytical applications
151 lines • 7.84 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 __());
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
// (C) 2007-2019 GoodData Corporation
var React = require("react");
var classNames = require("classnames");
var noop = require("lodash/noop");
var ResponsiveText_1 = require("@gooddata/goodstrap/lib/ResponsiveText/ResponsiveText");
var HeadlineDataItemUtils_1 = require("./utils/HeadlineDataItemUtils");
/**
* The React component that renders the Headline visualisation.
*/
var Headline = /** @class */ (function (_super) {
__extends(Headline, _super);
function Headline(props) {
var _this = _super.call(this, props) || this;
_this.handleClickOnPrimaryItem = _this.handleClickOnPrimaryItem.bind(_this);
_this.handleClickOnSecondaryItem = _this.handleClickOnSecondaryItem.bind(_this);
return _this;
}
Headline.prototype.componentDidMount = function () {
this.props.onAfterRender();
};
Headline.prototype.componentDidUpdate = function () {
this.props.onAfterRender();
};
Headline.prototype.render = function () {
return (React.createElement("div", { className: "headline" },
this.renderPrimaryItem(),
this.renderCompareItems()));
};
Headline.prototype.getDrillableClasses = function (isDrillable) {
return isDrillable ? ["is-drillable", "s-is-drillable"] : [];
};
Headline.prototype.getPrimaryItemClasses = function (primaryItem) {
return classNames([
"headline-primary-item",
"s-headline-primary-item"
].concat(this.getDrillableClasses(primaryItem.isDrillable)));
};
Headline.prototype.getSecondaryItemClasses = function (secondaryItem) {
return classNames([
"gd-flex-item",
"headline-compare-section-item",
"headline-secondary-item",
"s-headline-secondary-item"
].concat(this.getDrillableClasses(secondaryItem.isDrillable)));
};
Headline.prototype.getValueWrapperClasses = function (formattedItem) {
return classNames(["headline-value-wrapper", "s-headline-value-wrapper"], {
"headline-value--empty": formattedItem.isValueEmpty,
"s-headline-value--empty": formattedItem.isValueEmpty,
});
};
Headline.prototype.fireDrillEvent = function (item, elementType, elementTarget) {
var _a = this.props, onFiredDrillEvent = _a.onFiredDrillEvent, onDrill = _a.onDrill;
var itemContext = {
localIdentifier: item.localIdentifier,
value: item.value,
element: elementType,
};
if (onFiredDrillEvent) {
onFiredDrillEvent(itemContext, elementTarget);
}
if (onDrill) {
onDrill(itemContext, elementTarget);
}
};
Headline.prototype.handleClickOnPrimaryItem = function (event) {
var primaryItem = this.props.data.primaryItem;
this.fireDrillEvent(primaryItem, "primaryValue", event.target);
};
Headline.prototype.handleClickOnSecondaryItem = function (event) {
var secondaryItem = this.props.data.secondaryItem;
this.fireDrillEvent(secondaryItem, "secondaryValue", event.target);
};
Headline.prototype.renderTertiaryItem = function () {
var tertiaryItem = this.props.data.tertiaryItem;
var formattedItem = HeadlineDataItemUtils_1.formatPercentageValue(tertiaryItem);
return (React.createElement("div", { className: "gd-flex-item headline-compare-section-item headline-tertiary-item s-headline-tertiary-item" },
React.createElement("div", { className: this.getValueWrapperClasses(formattedItem) }, formattedItem.value),
React.createElement("div", { className: "headline-title-wrapper s-headline-title-wrapper", title: tertiaryItem.title }, tertiaryItem.title)));
};
Headline.prototype.renderSecondaryItem = function () {
var _a = this.props, secondaryItem = _a.data.secondaryItem, config = _a.config;
var formattedItem = HeadlineDataItemUtils_1.formatItemValue(secondaryItem, config);
var valueClickCallback = secondaryItem.isDrillable ? this.handleClickOnSecondaryItem : null;
var secondaryValue = secondaryItem.isDrillable
? this.renderHeadlineItemAsLink(formattedItem)
: this.renderHeadlineItemAsValue(formattedItem);
return (React.createElement("div", { className: this.getSecondaryItemClasses(secondaryItem), onClick: valueClickCallback },
React.createElement("div", { className: "headline-value-wrapper s-headline-value-wrapper", style: formattedItem.cssStyle },
React.createElement(ResponsiveText_1.default, null, secondaryValue)),
React.createElement("div", { className: "headline-title-wrapper s-headline-title-wrapper", title: secondaryItem.title }, secondaryItem.title)));
};
Headline.prototype.renderCompareItems = function () {
var secondaryItem = this.props.data.secondaryItem;
if (!secondaryItem) {
return null;
}
return (React.createElement("div", { className: "gd-flex-container headline-compare-section" },
this.renderTertiaryItem(),
this.renderSecondaryItem()));
};
Headline.prototype.renderHeadlineItem = function (item, formattedItem) {
return item.isDrillable
? this.renderHeadlineItemAsLink(formattedItem)
: this.renderHeadlineItemAsValue(formattedItem);
};
Headline.prototype.renderHeadlineItemAsValue = function (formattedItem) {
var valueClassNames = classNames(["headline-value", "s-headline-value"], {
"headline-value--empty": formattedItem.isValueEmpty,
"s-headline-value--empty": formattedItem.isValueEmpty,
"headline-link-style-underline": !this.props.disableDrillUnderline,
});
return React.createElement("div", { className: valueClassNames }, formattedItem.value);
};
Headline.prototype.renderHeadlineItemAsLink = function (formattedItem) {
return (React.createElement("div", { className: "headline-item-link s-headline-item-link" }, this.renderHeadlineItemAsValue(formattedItem)));
};
Headline.prototype.renderPrimaryItem = function () {
var _a = this.props, primaryItem = _a.data.primaryItem, config = _a.config;
var formattedItem = HeadlineDataItemUtils_1.formatItemValue(primaryItem, config);
var valueClickCallback = primaryItem.isDrillable ? this.handleClickOnPrimaryItem : null;
return (React.createElement("div", { className: this.getPrimaryItemClasses(primaryItem), style: formattedItem.cssStyle },
React.createElement(ResponsiveText_1.default, null,
React.createElement("div", { className: "headline-value-wrapper", onClick: valueClickCallback }, this.renderHeadlineItem(primaryItem, formattedItem)))));
};
Headline.defaultProps = {
onFiredDrillEvent: function () { return true; },
onDrill: function () { return undefined; },
onAfterRender: noop,
config: {},
disableDrillUnderline: false,
};
return Headline;
}(React.Component));
exports.default = Headline;
//# sourceMappingURL=Headline.js.map