@gooddata/react-components
Version:
GoodData.UI - A powerful JavaScript library for building analytical applications
63 lines • 3.73 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 });
var React = require("react");
var react_intl_1 = require("react-intl");
var js_utils_1 = require("@gooddata/js-utils");
var Bubble_1 = require("@gooddata/goodstrap/lib/Bubble/Bubble");
var PreviewRows_1 = require("../shared/PreviewRows");
function templateDropdownItemId(template) {
return "gd-format-preset-template-" + template.localIdentifier;
}
var DropdownItem = /** @class */ (function (_super) {
__extends(DropdownItem, _super);
function DropdownItem() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.state = {
displayHelp: false,
};
_this.onClick = function () {
_this.props.onClick(_this.props.template);
};
_this.toggleHelp = function () {
_this.setState(function (state) { return ({ displayHelp: !state.displayHelp }); });
};
return _this;
}
DropdownItem.prototype.render = function () {
var _a = this.props, template = _a.template, separators = _a.separators;
var displayHelp = this.state.displayHelp;
return (React.createElement(React.Fragment, null,
React.createElement("div", { id: templateDropdownItemId(template), className: "gd-list-item gd-format-preset gd-format-template s-measure-format-template-" + js_utils_1.string.simplifyText(template.name), onClick: this.onClick },
React.createElement("span", { title: template.name, className: "gd-format-preset-name gd-list-item-shortened" }, template.name),
React.createElement("div", { className: "gd-format-template-help icon-circle-question s-measure-format-template-help-toggle-icon", onMouseEnter: this.toggleHelp, onMouseLeave: this.toggleHelp })),
displayHelp && (React.createElement(Bubble_1.default, { alignTo: "#" + templateDropdownItemId(template), className: "gd-measure-format-template-preview-bubble bubble-light s-measure-format-template-help-bubble-" + js_utils_1.string.simplifyText(template.name), alignPoints: [{ align: "cr cl" }, { align: "cr bl" }, { align: "cr tl" }] },
React.createElement("h3", { className: "gd-measure-format-template-preview-bubble-title" }, template.name),
React.createElement("div", { className: "gd-measure-format-template-preview-bubble-subtitle s-measure-format-template-help-preview-" + js_utils_1.string.simplifyText(template.name) },
React.createElement(react_intl_1.FormattedMessage, { id: "measureNumberCustomFormatDialog.template.preview.title" })),
React.createElement(PreviewRows_1.default, { previewNumbers: [
-1234567.891,
-1234.567,
-1.234,
0,
1.234,
1234.567,
1234567.891,
], format: template.format, separators: separators })))));
};
return DropdownItem;
}(React.Component));
exports.default = DropdownItem;
//# sourceMappingURL=DropdownItem.js.map