@gooddata/react-components
Version:
GoodData React Components
260 lines • 12.5 kB
JavaScript
"use strict";
var __extends = (this && this.__extends) || (function () {
var 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 function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
exports.__esModule = true;
var React = require("react");
var InvertableList_1 = require("@gooddata/goodstrap/lib/List/InvertableList");
var Button_1 = require("@gooddata/goodstrap/lib/Button/Button");
var Dropdown_1 = require("@gooddata/goodstrap/lib/Dropdown/Dropdown");
var js_utils_1 = require("@gooddata/js-utils");
var DataSource_1 = require("@gooddata/goodstrap/lib/DataSource/DataSource");
var react_intl_1 = require("react-intl");
var GoodData = require("gooddata");
var classNames = require("classnames");
var last = require("lodash/last");
var pick = require("lodash/pick");
var range = require("lodash/range");
var isEqual = require("lodash/isEqual");
var AttributeFilterItem_1 = require("./AttributeFilterItem");
var PropTypes = React.PropTypes;
var ITEM_HEIGHT = 28;
var LIST_WIDTH = 208;
var MAX_SELECTION_SIZE = 500;
exports.VISIBLE_ITEMS_COUNT = 10;
exports.LIMIT = 50;
var INITIAL_OFFSET = 0;
// tslint:disable-next-line:variable-name
var getDefaultListLoading = function (_listError, _a) {
var intl = _a.intl;
var text = intl.formatMessage({ id: 'gs.list.loading' });
return React.createElement("div", null,
React.createElement("span", { className: "s-attribute-filter-list-loading" }),
" ",
text);
};
// tslint:disable-next-line:variable-name
var getDefaultListError = function (_listError, _a) {
var intl = _a.intl;
var text = intl.formatMessage({ id: 'gs.list.error' });
return React.createElement("div", { className: "gd-message error" }, text);
};
// tslint:disable-next-line:variable-name
var getDefaultListNoResults = function (_listError, _a) {
var intl = _a.intl;
var text = intl.formatMessage({ id: 'gs.list.noItemsFound' });
return React.createElement("div", null, text);
};
function getObjectIdFromUri(uri) {
return last(uri.split('/'));
}
exports.getObjectIdFromUri = getObjectIdFromUri;
function getProjectIdFromUri(uri) {
return uri.split('/')[3];
}
exports.getProjectIdFromUri = getProjectIdFromUri;
function loadAttributeElements(metadata, uri, searchString, offset, limit) {
if (offset === void 0) { offset = INITIAL_OFFSET; }
if (limit === void 0) { limit = exports.LIMIT; }
var encodedSearchString = encodeURIComponent(searchString);
var projectId = getProjectIdFromUri(uri);
var objectId = getObjectIdFromUri(uri);
var options = {
limit: limit,
offset: offset,
filter: encodedSearchString
};
return metadata.getValidElements(projectId, objectId, options)
.then(function (res) {
var _a = res.validElements, items = _a.items, total = _a.paging.total;
return {
data: {
offset: offset,
limit: limit,
items: items.map(function (item) { return pick(item.element, 'uri', 'title'); }),
totalCount: parseInt(total, 10)
}
};
});
}
exports.loadAttributeElements = loadAttributeElements;
function getElementId(element) {
return element.uri.split('=')[1];
}
function createAfmFilter(id, selection, isInverted) {
return _a = {
id: id,
type: 'attribute'
},
_a[isInverted ? 'notIn' : 'in'] = selection.map(getElementId),
_a;
var _a;
}
exports.createAfmFilter = createAfmFilter;
var AttributeDropdownWrapped = /** @class */ (function (_super) {
__extends(AttributeDropdownWrapped, _super);
function AttributeDropdownWrapped(props) {
var _this = _super.call(this, props) || this;
_this.onSelect = function (selection, isInverted) {
_this.setState({
selection: selection,
isInverted: isInverted
});
};
_this.onSearch = function (searchString) {
_this.setState({ searchString: searchString });
};
_this.onRangeChange = function (_, from, to) {
range(from, to).forEach(_this.dataSource.getRowAt);
};
_this.state = {
isListInitialising: false,
isListReady: false,
listError: null,
items: [],
selection: [],
isInverted: true,
searchString: ''
};
_this.createMediaQuery(props.fullscreenOnMobile);
_this.onDropdownToggle = _this.onDropdownToggle.bind(_this);
_this.onApply = _this.onApply.bind(_this);
_this.onClose = _this.onClose.bind(_this);
return _this;
}
AttributeDropdownWrapped.prototype.componentWillReceiveProps = function (nextProps) {
if (!isEqual(nextProps.attributeDisplayForm, this.props.attributeDisplayForm)) {
this.setupDataSource(nextProps.attributeDisplayForm.meta.uri);
}
if (this.props.fullscreenOnMobile !== nextProps.fullscreenOnMobile) {
this.createMediaQuery(nextProps.fullscreenOnMobile);
}
};
AttributeDropdownWrapped.prototype.render = function () {
var _this = this;
var attributeDisplayForm = this.props.attributeDisplayForm;
var classes = classNames('gd-attribute-filter', attributeDisplayForm ? "gd-id-" + js_utils_1.string.simplifyText(attributeDisplayForm.meta.title) : '');
return (React.createElement(Dropdown_1["default"], { button: React.createElement(Dropdown_1.DropdownButton, { value: attributeDisplayForm.meta.title }), ref: function (ref) { return (_this.dropdownRef = ref); }, body: this.renderList(), className: classes, onOpenStateChanged: this.onDropdownToggle, MediaQuery: this.MediaQuery }));
};
AttributeDropdownWrapped.prototype.createMediaQuery = function (fullscreenOnMobile) {
this.MediaQuery = fullscreenOnMobile ? undefined : function (_a) {
var children = _a.children;
return children(false);
};
};
AttributeDropdownWrapped.prototype.onApply = function () {
var _a = this.state, selection = _a.selection, isInverted = _a.isInverted;
var _b = this.props, attributeDisplayForm = _b.attributeDisplayForm, isUsingIdentifier = _b.isUsingIdentifier;
var id = isUsingIdentifier ? attributeDisplayForm.meta.identifier : attributeDisplayForm.meta.uri;
this.props.onApply(createAfmFilter(id, selection, isInverted));
this.dropdownRef.closeDropdown();
};
AttributeDropdownWrapped.prototype.onClose = function () {
this.dropdownRef.closeDropdown();
};
AttributeDropdownWrapped.prototype.getAttributeElements = function (uri, query) {
var _this = this;
var _a = query.paging, _b = _a === void 0 ? {} : _a, _c = _b.offset, offset = _c === void 0 ? 0 : _c, _d = _b.limit, limit = _d === void 0 ? exports.LIMIT : _d;
var metadata = this.props.metadata;
var searchString = this.state.searchString;
return loadAttributeElements(metadata, uri, searchString, offset, limit)["catch"](function (error) {
_this.setState({
isListInitialising: false,
isListReady: false,
listError: error
});
throw error;
});
};
AttributeDropdownWrapped.prototype.setupDataSource = function (uri) {
var _this = this;
var request = this.getAttributeElements.bind(this, uri);
this.setState({
isListInitialising: true,
listError: null
});
this.dataSource = new DataSource_1["default"](request, request, {
pageSize: exports.LIMIT
});
this.dataSource.onChange(function (result) {
_this.setState({
totalCount: result.data.totalCount,
isListReady: true,
listError: null,
items: result.data.items.map(function (i) { return i || { empty: true }; }),
isListInitialising: true
});
});
this.dataSource.getData({});
};
AttributeDropdownWrapped.prototype.onDropdownToggle = function (isDropdownOpen) {
var _a = this.state, isListReady = _a.isListReady, isListInitialising = _a.isListInitialising;
var attributeDisplayForm = this.props.attributeDisplayForm;
if (isDropdownOpen && !isListReady && !isListInitialising) {
this.setupDataSource(attributeDisplayForm.meta.uri);
}
};
AttributeDropdownWrapped.prototype.renderOverlayWrap = function (overlayContent, applyDisabled) {
if (applyDisabled === void 0) { applyDisabled = false; }
return (React.createElement("div", { className: "gd-attribute-filter-overlay" },
overlayContent,
this.renderButtons(applyDisabled)));
};
AttributeDropdownWrapped.prototype.renderList = function () {
var _a = this.state, isListReady = _a.isListReady, items = _a.items, selection = _a.selection, listError = _a.listError, totalCount = _a.totalCount;
var _b = this.props, getListError = _b.getListError, getListLoading = _b.getListLoading, getListNoResults = _b.getListNoResults;
if (listError) {
return this.renderOverlayWrap(getListError(listError, this.props, this.state), true);
}
if (!isListReady) {
return this.renderOverlayWrap(getListLoading(listError, this.props, this.state), true);
}
if (!items.length) {
return this.renderOverlayWrap(getListNoResults(listError, this.props, this.state), true);
}
return this.renderOverlayWrap(React.createElement(InvertableList_1["default"], { items: items, itemsCount: totalCount, filteredItemsCount: totalCount, selection: selection, isInverted: this.state.isInverted, showSearchField: false, rowItem: React.createElement(AttributeFilterItem_1.AttributeFilterItem, null), maxSelectionSize: MAX_SELECTION_SIZE, width: LIST_WIDTH, itemHeight: ITEM_HEIGHT, height: ITEM_HEIGHT * exports.VISIBLE_ITEMS_COUNT, onRangeChange: this.onRangeChange, onSearch: this.onSearch, onSelect: this.onSelect }));
};
AttributeDropdownWrapped.prototype.renderButtons = function (applyDisabled) {
var intl = this.props.intl;
var cancelText = intl.formatMessage({ id: 'gs.list.cancel' });
var applyText = intl.formatMessage({ id: 'gs.list.apply' });
return (React.createElement("div", { className: "gd-attribute-filter-actions" },
React.createElement(Button_1["default"], { className: "button-secondary button-small cancel-button", onClick: this.onClose, value: cancelText, text: cancelText }),
React.createElement(Button_1["default"], { disabled: applyDisabled, className: "button-action button-small s-apply", onClick: this.onApply, value: applyText, text: applyText })));
};
AttributeDropdownWrapped.propTypes = {
attributeDisplayForm: PropTypes.object.isRequired,
projectId: PropTypes.string.isRequired,
isUsingIdentifier: PropTypes.bool,
intl: react_intl_1.intlShape.isRequired,
onApply: PropTypes.func.isRequired,
fullscreenOnMobile: PropTypes.bool,
getListItem: PropTypes.func,
getListLoading: PropTypes.func,
getListError: PropTypes.func,
getListNoResults: PropTypes.func,
metadata: PropTypes.shape({
getValidElements: PropTypes.func.isRequired
})
};
AttributeDropdownWrapped.defaultProps = {
fullscreenOnMobile: false,
isUsingIdentifier: false,
metadata: GoodData.md,
getListItem: function () { return (React.createElement(AttributeFilterItem_1.AttributeFilterItem, null)); },
getListLoading: getDefaultListLoading,
getListError: getDefaultListError,
getListNoResults: getDefaultListNoResults
};
return AttributeDropdownWrapped;
}(React.PureComponent));
exports.AttributeDropdownWrapped = AttributeDropdownWrapped;
exports.AttributeDropdown = react_intl_1.injectIntl(AttributeDropdownWrapped);
//# sourceMappingURL=AttributeDropdown.js.map