@gooddata/react-components
Version:
GoodData.UI - A powerful JavaScript library for building analytical applications
105 lines • 5.3 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) 2019-2020 GoodData Corporation
var React = require("react");
var react_intl_1 = require("react-intl");
var classNames = require("classnames");
var noop = require("lodash/noop");
var get = require("lodash/get");
var set = require("lodash/set");
var DisabledBubbleMessage_1 = require("../DisabledBubbleMessage");
var translations_1 = require("../../utils/translations");
var ConfigSection = /** @class */ (function (_super) {
__extends(ConfigSection, _super);
function ConfigSection(props) {
var _this = _super.call(this, props) || this;
_this.toggleCollapsed = _this.toggleCollapsed.bind(_this);
_this.toggleValue = _this.toggleValue.bind(_this);
var collapsed = get(props, "propertiesMeta." + _this.props.id + ".collapsed", true);
_this.state = {
collapsed: collapsed,
};
return _this;
}
ConfigSection.prototype.componentWillReceiveProps = function (nextProps) {
var collapsed = get(nextProps, "propertiesMeta." + this.props.id + ".collapsed", true);
this.setState({ collapsed: collapsed });
};
ConfigSection.prototype.render = function () {
var collapsed = this.state.collapsed;
var _a = this.props, title = _a.title, intl = _a.intl, subtitle = _a.subtitle, className = _a.className;
var configSectionClassName = "adi-bucket-configuration " + className;
return (React.createElement("div", { className: this.getSectionClassNames() },
React.createElement("div", { className: this.getHeaderClassNames(), onClick: this.toggleCollapsed }, translations_1.getTranslation(title, intl) + (subtitle ? " (" + translations_1.getTranslation(subtitle, intl) + ")" : "")),
this.renderToggleSwitch(),
React.createElement("div", { className: configSectionClassName }, !collapsed && this.props.children)));
};
ConfigSection.prototype.renderToggleSwitch = function () {
if (this.props.canBeToggled) {
var _a = this.props, toggledOn = _a.toggledOn, toggleDisabled = _a.toggleDisabled, showDisabledMessage = _a.showDisabledMessage;
return (React.createElement(DisabledBubbleMessage_1.default, { className: "adi-bucket-item-toggle", showDisabledMessage: showDisabledMessage },
React.createElement("label", { className: this.getToggleLabelClassNames() },
React.createElement("input", { type: "checkbox", checked: toggledOn, disabled: toggleDisabled, onChange: this.toggleValue, className: "s-checkbox-toggle " + (toggleDisabled ? "s-disabled" : "s-enabled") }),
React.createElement("span", { className: "input-label-text" }))));
}
return null;
};
ConfigSection.prototype.getHeaderClassNames = function () {
var collapsed = this.state.collapsed;
return classNames("adi-bucket-item-header", "adi-configuration-section-header", "s-configuration-panel-item-header", {
expanded: !collapsed,
"adi-bucket-item-header-has-toggle": this.props.canBeToggled,
collapsed: collapsed,
});
};
ConfigSection.prototype.getToggleLabelClassNames = function () {
return classNames("input-checkbox-toggle", "s-checkbox-toggle-label");
};
ConfigSection.prototype.getSectionClassNames = function () {
return classNames("adi-bucket-item", "s-config-section-" + this.props.id);
};
ConfigSection.prototype.toggleCollapsed = function () {
var collapsed = this.state.collapsed;
var propertiesMeta = {};
propertiesMeta[this.props.id] = {
collapsed: !collapsed,
};
this.setState({ collapsed: !collapsed });
this.props.pushData({ propertiesMeta: propertiesMeta });
};
ConfigSection.prototype.toggleValue = function (event) {
var _a = this.props, valuePath = _a.valuePath, properties = _a.properties, pushData = _a.pushData;
if (valuePath && properties && pushData) {
var newProperties = set(properties, "controls." + valuePath, event.target.checked);
pushData({ properties: newProperties });
}
};
ConfigSection.defaultProps = {
collapsed: true,
canBeToggled: false,
toggleDisabled: false,
toggledOn: true,
disabled: false,
pushData: noop,
showDisabledMessage: false,
className: "",
properties: {},
};
return ConfigSection;
}(React.Component));
exports.ConfigSection = ConfigSection;
exports.default = react_intl_1.injectIntl(ConfigSection);
//# sourceMappingURL=ConfigSection.js.map