@gooddata/react-components
Version:
GoodData.UI - A powerful JavaScript library for building analytical applications
69 lines • 4.48 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) 2020 GoodData Corporation
var React = require("react");
var Overlay_1 = require("@gooddata/goodstrap/lib/core/Overlay");
var Button_1 = require("@gooddata/goodstrap/lib/Button/Button");
var positioning_1 = require("../../../typings/positioning");
var utils_1 = require("../../../helpers/utils");
var Preview_1 = require("./previewSection/Preview");
var FormatInput_1 = require("./FormatInput");
var DocumentationLink_1 = require("./DocumentationLink");
var CustomFormatDialog = /** @class */ (function (_super) {
__extends(CustomFormatDialog, _super);
function CustomFormatDialog() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.state = {
format: _this.props.formatString || "",
};
_this.onApply = function () {
_this.props.onApply(_this.state.format);
};
_this.isApplyButtonDisabled = function () {
return _this.props.formatString === _this.state.format || _this.state.format === "";
};
_this.onFormatChange = function (format) {
_this.setState({ format: format });
};
return _this;
}
CustomFormatDialog.prototype.render = function () {
var _a = this.props, anchorEl = _a.anchorEl, positioning = _a.positioning, onCancel = _a.onCancel, separators = _a.separators, templates = _a.templates, documentationLink = _a.documentationLink, intl = _a.intl;
var format = this.state.format;
return (React.createElement(Overlay_1.default, { closeOnParentScroll: true, closeOnMouseDrag: true, closeOnOutsideClick: true, alignTo: anchorEl, alignPoints: utils_1.positioningToAlignPoints(positioning), onClose: onCancel },
React.createElement("div", { className: "gd-dropdown overlay" },
React.createElement("div", { className: "gd-measure-custom-format-dialog-body s-custom-format-dialog-body" },
React.createElement("div", { className: "gd-measure-custom-format-dialog-header" },
React.createElement("span", null, intl.formatMessage({ id: "measureNumberCustomFormatDialog.title" }))),
React.createElement("div", { className: "gd-measure-custom-format-dialog-content" },
React.createElement(FormatInput_1.default, { format: format, templates: templates, separators: separators, onFormatChange: this.onFormatChange }),
documentationLink && React.createElement(DocumentationLink_1.default, { url: documentationLink }),
React.createElement(Preview_1.default, { format: format, separators: separators })),
React.createElement("div", { className: "gd-measure-custom-format-dialog-footer" },
React.createElement(Button_1.default, { className: "gd-button-secondary gd-button-small s-custom-format-dialog-cancel", onClick: onCancel, value: intl.formatMessage({ id: "cancel" }) }),
React.createElement(Button_1.default, { className: "gd-button-action gd-button-small s-custom-format-dialog-apply", onClick: this.onApply, value: intl.formatMessage({ id: "apply" }), disabled: this.isApplyButtonDisabled() }))))));
};
CustomFormatDialog.defaultProps = {
positioning: [
{ snapPoints: { parent: positioning_1.SnapPoint.CenterRight, child: positioning_1.SnapPoint.CenterLeft } },
{ snapPoints: { parent: positioning_1.SnapPoint.TopRight, child: positioning_1.SnapPoint.TopLeft } },
{ snapPoints: { parent: positioning_1.SnapPoint.BottomRight, child: positioning_1.SnapPoint.BottomLeft } },
],
};
return CustomFormatDialog;
}(React.PureComponent));
exports.CustomFormatDialog = CustomFormatDialog;
//# sourceMappingURL=CustomFormatDialog.js.map