@gooddata/react-components
Version:
GoodData.UI - A powerful JavaScript library for building analytical applications
211 lines • 10 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 __());
};
})();
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) 2007-2020 GoodData Corporation
var React = require("react");
var PropTypes = require("prop-types");
var pick = require("lodash/pick");
var noop = require("lodash/noop");
var react_intl_1 = require("react-intl");
var gooddata_js_1 = require("@gooddata/gooddata-js");
var typings_1 = require("@gooddata/typings");
var IntlWrapper_1 = require("../../core/base/IntlWrapper");
var AttributeDropdown_1 = require("./AttributeDropdown");
var AttributeLoader_1 = require("./AttributeLoader");
var utils_1 = require("../../../helpers/utils");
var Model = require("../../../helpers/model");
var TranslationsProvider_1 = require("../../core/base/TranslationsProvider");
var MediaQueries = require("../../../constants/MediaQueries");
var react_responsive_1 = require("react-responsive");
var DefaultFilterLoading = react_intl_1.injectIntl(function (_a) {
var intl = _a.intl;
return (React.createElement("button", { className: "gd-button gd-button-secondary gd-button-small icon-right icon disabled s-button-loading" }, intl.formatMessage({ id: "gs.filter.loading" })));
});
var DefaultFilterError = react_intl_1.injectIntl(function (_a) {
var intl = _a.intl, error = _a.error;
// tslint:disable-next-line:no-console
console.error(error);
var text = intl.formatMessage({ id: "gs.filter.error" });
return React.createElement("div", { className: "gd-message error" }, text);
});
function getElementId(element) {
return element.uri.split("=")[1];
}
function createOldFilterDefinition(id, selection, isInverted, isUsingTextFilter) {
if (isUsingTextFilter === void 0) { isUsingTextFilter = false; }
var _a;
return _a = {
id: id,
type: "attribute"
},
_a[isInverted ? "notIn" : "in"] = isUsingTextFilter
? selection.map(function (item) { return item.title; })
: selection.map(getElementId),
_a;
}
exports.createOldFilterDefinition = createOldFilterDefinition;
function createAfmFilter(id, selection, isInverted, isUsingTextFilter) {
if (isUsingTextFilter === void 0) { isUsingTextFilter = false; }
var filterFactory = isInverted ? Model.negativeAttributeFilter : Model.positiveAttributeFilter;
if (isUsingTextFilter) {
return filterFactory(id, selection.map(function (item) { return item.title; }), true);
}
return filterFactory(id, selection.map(function (item) { return item.uri; }));
}
exports.createAfmFilter = createAfmFilter;
/**
* AttributeFilter
* is a component that renders a dropdown populated with attribute values
*/
var AttributeFilter = /** @class */ (function (_super) {
__extends(AttributeFilter, _super);
function AttributeFilter(props) {
var _this = _super.call(this, props) || this;
_this.onApply = function (selection, isInverted) {
var _a = _this.getIdentifierOrUri(), identifier = _a.identifier, uri = _a.uri;
var isUsingTextFilter = false;
if (_this.props.filter) {
var filterBody = _this.getFilterBody(_this.props.filter);
isUsingTextFilter = Boolean(filterBody.textFilter);
}
var id = identifier || uri;
_this.props.onApply(createOldFilterDefinition(id, selection, isInverted, isUsingTextFilter));
_this.props.onApplyWithFilterDefinition(createAfmFilter(id, selection, isInverted, isUsingTextFilter));
};
_this.getFilterBody = function (filter) {
return typings_1.VisualizationInput.isPositiveAttributeFilter(filter)
? filter.positiveAttributeFilter
: filter.negativeAttributeFilter;
};
var sdk = props.sdk || gooddata_js_1.factory();
_this.sdk = sdk.clone();
utils_1.setTelemetryHeaders(_this.sdk, "AttributeFilter", props);
return _this;
}
AttributeFilter.prototype.componentWillReceiveProps = function (nextProps) {
if (nextProps.sdk && this.sdk !== nextProps.sdk) {
this.sdk = nextProps.sdk.clone();
utils_1.setTelemetryHeaders(this.sdk, "AttributeFilter", nextProps);
}
};
AttributeFilter.prototype.render = function () {
var _this = this;
var _a = this.props, locale = _a.locale, projectId = _a.projectId;
var md = this.sdk.md;
var _b = this.getIdentifierOrUri(), identifier = _b.identifier, uri = _b.uri;
return (React.createElement(IntlWrapper_1.IntlWrapper, { locale: locale },
React.createElement(AttributeLoader_1.AttributeLoader, { uri: uri, identifier: identifier, projectId: projectId, metadata: md }, function (props) { return _this.renderContent(props); })));
};
AttributeFilter.prototype.isInverted = function () {
var filter = this.props.filter;
return !typings_1.VisualizationInput.isPositiveAttributeFilter(filter);
};
AttributeFilter.prototype.getIdentifierOrUri = function () {
var _a = this.props, filter = _a.filter, identifier = _a.identifier, uri = _a.uri;
if ((filter && identifier) || (filter && uri) || (identifier && uri)) {
throw new Error("Don't use multiple attribute definitions");
}
if (identifier || uri) {
// tslint:disable-next-line:no-console
console.warn("Definition of an attribute using 'uri' or 'identifier' is deprecated, use 'filter' property instead. Please see the documentation of [AttributeFilter component](https://sdk.gooddata.com/gooddata-ui/docs/attribute_filter_component.html) for further details.");
}
if (filter) {
var displayForm = typings_1.VisualizationInput.isPositiveAttributeFilter(filter)
? filter.positiveAttributeFilter.displayForm
: filter.negativeAttributeFilter.displayForm;
if (typings_1.AFM.isObjIdentifierQualifier(displayForm)) {
return { identifier: displayForm.identifier };
}
return { uri: displayForm.uri };
}
else if (identifier) {
return { identifier: identifier };
}
else {
return { uri: uri };
}
};
AttributeFilter.prototype.getSelection = function () {
var filter = this.props.filter;
if (filter) {
var filterBody = this.getFilterBody(filter);
var inType = typings_1.VisualizationInput.isPositiveAttributeFilter(filter) ? "in" : "notIn";
var textFilter_1 = Boolean(filterBody.textFilter);
var selection = filterBody[inType];
return selection
? selection.map(function (uriOrTitle) {
var _a;
return (_a = {},
_a[textFilter_1 ? "title" : "uri"] = uriOrTitle,
_a);
})
: [];
}
return [];
};
AttributeFilter.prototype.renderContent = function (_a) {
var _this = this;
var isLoading = _a.isLoading, attributeDisplayForm = _a.attributeDisplayForm, error = _a.error, attribute = _a.attribute;
if (isLoading) {
return React.createElement(this.props.FilterLoading, null);
}
if (error) {
return React.createElement(this.props.FilterError, { error: error });
}
var dropdownProps = pick(this.props, Object.keys(AttributeDropdown_1.AttributeDropdownWrapped.propTypes));
var md = this.sdk.md;
return (React.createElement(react_responsive_1.default, { query: MediaQueries.IS_MOBILE_DEVICE }, function (isMobile) { return (React.createElement(TranslationsProvider_1.IntlTranslationsProvider, null, function (translationProps) { return (React.createElement(AttributeDropdown_1.AttributeDropdown, __assign({ attribute: attribute, attributeDisplayForm: attributeDisplayForm, metadata: md }, dropdownProps, translationProps, { selection: _this.getSelection(), isInverted: _this.isInverted(), onApply: _this.onApply, isMobile: isMobile }))); })); }));
};
AttributeFilter.propTypes = {
uri: PropTypes.string,
identifier: PropTypes.string,
filter: PropTypes.object,
projectId: PropTypes.string,
onApply: PropTypes.func,
onApplyWithFilterDefinition: PropTypes.func,
fullscreenOnMobile: PropTypes.bool,
FilterLoading: PropTypes.func,
FilterError: PropTypes.func,
locale: PropTypes.string,
title: PropTypes.string,
};
AttributeFilter.defaultProps = {
projectId: null,
uri: null,
identifier: null,
filter: null,
locale: "en-US",
FilterLoading: DefaultFilterLoading,
FilterError: DefaultFilterError,
fullscreenOnMobile: false,
title: null,
onApply: noop,
onApplyWithFilterDefinition: noop,
};
return AttributeFilter;
}(React.PureComponent));
exports.AttributeFilter = AttributeFilter;
//# sourceMappingURL=AttributeFilter.js.map