@gooddata/react-components
Version:
GoodData.UI - A powerful JavaScript library for building analytical applications
178 lines • 10.3 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 __());
};
})();
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
Object.defineProperty(exports, "__esModule", { value: true });
// (C) 2019-2020 GoodData Corporation
var React = require("react");
var react_intl_1 = require("react-intl");
var Button_1 = require("@gooddata/goodstrap/lib/Button/Button");
var IntlWrapper_1 = require("../../core/base/IntlWrapper");
var OperatorDropdown_1 = require("./OperatorDropdown");
var RangeInput_1 = require("./RangeInput");
var ComparisonInput_1 = require("./ComparisonInput");
var MeasureValueFilter_1 = require("../../../interfaces/MeasureValueFilter");
var Operator = require("../../../constants/measureValueFilterOperators");
var TreatNullValuesAsZeroCheckbox_1 = require("./TreatNullValuesAsZeroCheckbox");
// The platform supports 6 decimal places
var MAX_DECIMAL_PLACES = 6;
var DropdownBodyWrapped = /** @class */ (function (_super) {
__extends(DropdownBodyWrapped, _super);
function DropdownBodyWrapped(props) {
var _this = _super.call(this, props) || this;
_this.renderInputSection = function () {
var _a = _this.props, usePercentage = _a.usePercentage, disableAutofocus = _a.disableAutofocus, separators = _a.separators;
var _b = _this.state, operator = _b.operator, _c = _b.value, _d = _c.value, value = _d === void 0 ? null : _d, _e = _c.from, from = _e === void 0 ? null : _e, _f = _c.to, to = _f === void 0 ? null : _f;
if (MeasureValueFilter_1.isComparisonOperator(operator)) {
return (React.createElement(ComparisonInput_1.default, { value: value, usePercentage: usePercentage, onValueChange: _this.handleValueChange, onEnterKeyPress: _this.onApply, disableAutofocus: disableAutofocus, separators: separators }));
}
else if (MeasureValueFilter_1.isRangeOperator(operator)) {
return (React.createElement(RangeInput_1.default, { from: from, to: to, usePercentage: usePercentage, onFromChange: _this.handleFromChange, onToChange: _this.handleToChange, onEnterKeyPress: _this.onApply, disableAutofocus: disableAutofocus, separators: separators }));
}
return null;
};
_this.isChanged = function () {
return _this.state.operator !== _this.props.operator ||
_this.state.enabledTreatNullValuesAsZero !== _this.props.treatNullAsZeroValue;
};
_this.isApplyButtonDisabled = function () {
var operator = _this.state.operator;
if (MeasureValueFilter_1.isComparisonOperator(operator)) {
return _this.isApplyButtonDisabledForComparison();
}
if (MeasureValueFilter_1.isRangeOperator(operator)) {
return _this.isApplyButtonDisabledForRange();
}
return _this.isApplyButtonDisabledForAll();
};
_this.handleOperatorSelection = function (operator) { return _this.setState({ operator: operator }); };
_this.handleValueChange = function (value) {
_this.setState({ value: __assign({}, _this.state.value, { value: value }) });
};
_this.handleFromChange = function (from) {
_this.setState({ value: __assign({}, _this.state.value, { from: from }) });
};
_this.handleToChange = function (to) {
_this.setState({ value: __assign({}, _this.state.value, { to: to }) });
};
_this.handleTreatNullAsZeroClicked = function (checked) {
_this.setState({ enabledTreatNullValuesAsZero: checked });
};
_this.round = function (n) { return parseFloat(n.toFixed(MAX_DECIMAL_PLACES)); };
_this.convertToRawValue = function (value, operator) {
if (!value || operator === Operator.ALL) {
return value;
}
return MeasureValueFilter_1.isComparisonOperator(operator)
? { value: _this.round(value.value / 100) }
: { from: _this.round(value.from / 100), to: _this.round(value.to / 100) };
};
_this.convertToPercentageValue = function (value, operator) {
if (!value || operator === Operator.ALL) {
return value;
}
return MeasureValueFilter_1.isComparisonOperator(operator)
? { value: _this.round(value.value * 100) }
: { from: _this.round(value.from * 100), to: _this.round(value.to * 100) };
};
_this.onApply = function () {
if (_this.isApplyButtonDisabled()) {
return;
}
var _a = _this.state, enabledTreatNullValuesAsZero = _a.enabledTreatNullValuesAsZero, stateOperator = _a.operator, stateValue = _a.value;
var usePercentage = _this.props.usePercentage;
var operator = stateOperator === Operator.ALL ? null : stateOperator;
var value = usePercentage ? _this.convertToRawValue(stateValue, stateOperator) : stateValue;
_this.props.onApply(operator, value, enabledTreatNullValuesAsZero);
};
var operator = props.operator, value = props.value, usePercentage = props.usePercentage, treatNullAsZeroValue = props.treatNullAsZeroValue;
_this.state = {
operator: operator || Operator.ALL,
value: (usePercentage ? _this.convertToPercentageValue(value, operator) : value) || {},
enabledTreatNullValuesAsZero: treatNullAsZeroValue,
};
return _this;
}
DropdownBodyWrapped.prototype.render = function () {
var _a = this.props, onCancel = _a.onCancel, warningMessage = _a.warningMessage, displayTreatNullAsZeroOption = _a.displayTreatNullAsZeroOption, intl = _a.intl;
var _b = this.state, operator = _b.operator, enabledTreatNullValuesAsZero = _b.enabledTreatNullValuesAsZero;
return (React.createElement("div", { className: "gd-mvf-dropdown-body gd-dialog gd-dropdown overlay s-mvf-dropdown-body" },
React.createElement("div", { className: "gd-mvf-dropdown-content" },
warningMessage && (React.createElement("div", { className: "gd-mvf-dropdown-section" },
React.createElement("div", { className: "gd-mvf-warning-message s-mvf-warning-message" }, warningMessage))),
React.createElement("div", { className: "gd-mvf-dropdown-section" },
React.createElement(OperatorDropdown_1.default, { onSelect: this.handleOperatorSelection, operator: operator })),
operator !== Operator.ALL && (React.createElement("div", { className: "gd-mvf-dropdown-section" },
this.renderInputSection(),
displayTreatNullAsZeroOption && (React.createElement(TreatNullValuesAsZeroCheckbox_1.default, { onChange: this.handleTreatNullAsZeroClicked, checked: enabledTreatNullValuesAsZero, intl: intl }))))),
React.createElement("div", { className: "gd-mvf-dropdown-footer" },
React.createElement(Button_1.default, { className: "gd-button-secondary gd-button-small s-mvf-dropdown-cancel", onClick: onCancel, value: intl.formatMessage({ id: "cancel" }) }),
React.createElement(Button_1.default, { className: "gd-button-action gd-button-small s-mvf-dropdown-apply", onClick: this.onApply, value: intl.formatMessage({ id: "apply" }), disabled: this.isApplyButtonDisabled() }))));
};
DropdownBodyWrapped.prototype.isApplyButtonDisabledForComparison = function () {
var _a = this.state.value.value, value = _a === void 0 ? null : _a;
if (value === null) {
return true;
}
if (this.props.value === null || this.isChanged()) {
return false;
}
if (this.props.usePercentage) {
return value === this.round(this.props.value.value * 100);
}
return value === this.props.value.value;
};
DropdownBodyWrapped.prototype.isApplyButtonDisabledForRange = function () {
var _a = this.state.value, _b = _a.from, from = _b === void 0 ? null : _b, _c = _a.to, to = _c === void 0 ? null : _c;
if (from === null || to === null) {
return true;
}
if (this.props.value === null || this.isChanged()) {
return false;
}
if (this.props.usePercentage) {
return (from === this.round(this.props.value.from * 100) &&
to === this.round(this.props.value.to * 100));
}
return from === this.props.value.from && to === this.props.value.to;
};
DropdownBodyWrapped.prototype.isApplyButtonDisabledForAll = function () {
return this.props.operator === Operator.ALL;
};
return DropdownBodyWrapped;
}(React.PureComponent));
exports.DropdownBodyWithIntl = react_intl_1.injectIntl(DropdownBodyWrapped);
var DropdownBody = /** @class */ (function (_super) {
__extends(DropdownBody, _super);
function DropdownBody() {
return _super !== null && _super.apply(this, arguments) || this;
}
DropdownBody.prototype.render = function () {
return (React.createElement(IntlWrapper_1.IntlWrapper, { locale: this.props.locale },
React.createElement(exports.DropdownBodyWithIntl, __assign({}, this.props))));
};
return DropdownBody;
}(React.PureComponent));
exports.DropdownBody = DropdownBody;
//# sourceMappingURL=DropdownBody.js.map