@gooddata/react-components
Version:
GoodData React Components
212 lines • 10 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 __());
};
})();
var __assign = (this && this.__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;
};
exports.__esModule = true;
var React = require("react");
var bindAll = require("lodash/bindAll");
var get = require("lodash/get");
var noop = require("lodash/noop");
var isEqual = require("lodash/isEqual");
var indigo_visualizations_1 = require("@gooddata/indigo-visualizations");
var data_layer_1 = require("@gooddata/data-layer");
var IntlWrapper_1 = require("./base/IntlWrapper");
var Table_1 = require("../../proptypes/Table");
var sorting_1 = require("../../helpers/sorting");
var promise_1 = require("../../helpers/promise");
var errorStates_1 = require("../../constants/errorStates");
var load_1 = require("../../helpers/load");
var TranslationsProvider_1 = require("./base/TranslationsProvider");
var options_1 = require("../../helpers/options");
var defaultErrorHandler = function (error) {
if (error.status !== errorStates_1.ErrorStates.OK) {
console.error(error); // tslint:disable-line:no-console
}
};
var Table = /** @class */ (function (_super) {
__extends(Table, _super);
function Table(props) {
var _this = _super.call(this, props) || this;
_this.state = {
error: errorStates_1.ErrorStates.OK,
result: null,
isLoading: false,
sorting: null,
metadata: null,
page: 1
};
bindAll(_this, ['onSortChange', 'onLoadingChanged', 'onDataTooLarge', 'onError', 'onMore', 'onLess']);
_this.dataCancellable = null;
return _this;
}
Table.prototype.componentDidMount = function () {
var _a = this.props, metadataSource = _a.metadataSource, dataSource = _a.dataSource, transformation = _a.transformation;
this.initDataLoading(dataSource, metadataSource, transformation);
};
Table.prototype.componentWillReceiveProps = function (nextProps) {
var sortingPrev = get(this.props.visualizationProperties, 'sorting');
var sortingNext = get(nextProps.visualizationProperties, 'sorting');
// next sorting needs to be different from previous and also
// than actual inner sorting to get rid of duplicate execution
// This handles only UNDO sorting change
var sortingChanged = !isEqual(sortingPrev, sortingNext) && !isEqual(this.state.sorting, sortingNext);
if (!data_layer_1.DataSourceUtils.dataSourcesMatch(this.props.dataSource, nextProps.dataSource) || sortingChanged) {
if (this.dataCancellable) {
this.dataCancellable.cancel();
}
var sorting = sortingChanged ? sortingNext : this.state.sorting;
var metadataSource = nextProps.metadataSource, dataSource = nextProps.dataSource, transformation = nextProps.transformation;
this.initDataLoading(dataSource, metadataSource, transformation, sorting);
}
};
Table.prototype.componentWillUnmount = function () {
if (this.dataCancellable) {
this.dataCancellable.cancel();
}
this.onLoadingChanged = noop;
this.onError = noop;
};
Table.prototype.onSortChange = function (change) {
var sorting = sorting_1.getSorting(change, get(this.state.sorting, 'sorting'));
var sortingInfo = {
sorting: sorting, change: change
};
this.setState({
sorting: sortingInfo
});
var _a = this.props, metadataSource = _a.metadataSource, dataSource = _a.dataSource, transformation = _a.transformation;
this.props.pushData({
properties: {
sorting: sortingInfo
}
});
this.initDataLoading(dataSource, metadataSource, transformation, sortingInfo);
};
Table.prototype.onMore = function (_a) {
var page = _a.page;
this.setState({
page: page
});
};
Table.prototype.onLess = function () {
this.setState({
page: 1
});
};
Table.prototype.render = function () {
var _this = this;
var _a = this.state, result = _a.result, metadata = _a.metadata, page = _a.page;
var metadataContent = get(metadata, 'content', { buckets: {} });
var _b = this.props, afterRender = _b.afterRender, height = _b.height, locale = _b.locale, stickyHeader = _b.stickyHeader, drillableItems = _b.drillableItems, onFiredDrillEvent = _b.onFiredDrillEvent, environment = _b.environment, dataSource = _b.dataSource;
if (!this.canRender()) {
return null;
}
var isDashboardsEnvironment = environment === 'dashboards';
var onDataTooLarge = isDashboardsEnvironment ? this.onDataTooLarge : noop;
var tableRenderer = isDashboardsEnvironment ?
function (tableProps) { return (React.createElement(indigo_visualizations_1.ResponsiveTable, __assign({}, tableProps, { afm: dataSource.getAfm(), rowsPerPage: 9, onSortChange: _this.onSortChange, page: page, onMore: _this.onMore, onLess: _this.onLess }))); } :
function (tableProps) { return (React.createElement(indigo_visualizations_1.Table, __assign({}, tableProps, { afm: dataSource.getAfm(), onSortChange: _this.onSortChange }))); };
return (React.createElement(IntlWrapper_1.IntlWrapper, { locale: locale },
React.createElement(TranslationsProvider_1.IntlTranslationsProvider, { result: result },
React.createElement(indigo_visualizations_1.TableTransformation, { data: {}, drillableItems: drillableItems, onFiredDrillEvent: onFiredDrillEvent, tableRenderer: tableRenderer, afterRender: afterRender, height: height, onDataTooLarge: onDataTooLarge, config: __assign({ stickyHeader: stickyHeader }, metadataContent) }))));
};
Table.prototype.canRender = function () {
var _a = this.state, result = _a.result, isLoading = _a.isLoading, error = _a.error;
return result && !isLoading && error === errorStates_1.ErrorStates.OK;
};
Table.prototype.onError = function (errorCode, dataSource, options) {
if (dataSource === void 0) { dataSource = this.props.dataSource; }
if (options === void 0) { options = {}; }
if (data_layer_1.DataSourceUtils.dataSourcesMatch(this.props.dataSource, dataSource)) {
this.setState({
error: errorCode
});
this.onLoadingChanged({ isLoading: false });
this.props.onError({ status: errorCode, options: options });
}
};
Table.prototype.onDataTooLarge = function () {
this.onError(errorStates_1.ErrorStates.DATA_TOO_LARGE_TO_DISPLAY);
};
Table.prototype.onLoadingChanged = function (loadingState) {
this.props.onLoadingChanged(loadingState);
var isLoading = loadingState.isLoading;
if (isLoading) {
this.props.onError({ status: errorStates_1.ErrorStates.OK }); // reset all errors in parent on loading start
this.setState({
isLoading: isLoading,
error: errorStates_1.ErrorStates.OK // reset local errors
});
}
else {
this.setState({
isLoading: isLoading
});
}
};
Table.prototype.initDataLoading = function (dataSource, metadataSource, transformation, sorting) {
var _this = this;
if (sorting === void 0) { sorting = null; }
this.onLoadingChanged({ isLoading: true });
if (this.dataCancellable) {
this.dataCancellable.cancel();
}
var visualizationOptions = options_1.getVisualizationOptions(dataSource.getAfm());
this.dataCancellable = promise_1.getCancellable(load_1.initTableDataLoading(dataSource, metadataSource, transformation, sorting));
this.dataCancellable.promise.then(function (result) {
if (data_layer_1.DataSourceUtils.dataSourcesMatch(_this.props.dataSource, dataSource)) {
var executionResult = get(result, 'result');
var metadata = get(result, 'metadata');
var sorting_2 = get(result, 'sorting');
_this.setState({
result: executionResult,
metadata: metadata,
sorting: sorting_2
});
_this.props.pushData({
executionResult: executionResult,
options: visualizationOptions
});
_this.onLoadingChanged({ isLoading: false });
}
}, function (error) {
if (error !== errorStates_1.ErrorStates.PROMISE_CANCELLED) {
_this.onError(error, dataSource, visualizationOptions);
}
});
};
Table.defaultProps = {
metadataSource: null,
transformation: {},
onError: defaultErrorHandler,
onLoadingChanged: noop,
afterRender: noop,
pushData: noop,
stickyHeader: 0,
height: 300,
locale: 'en-US',
environment: 'none',
drillableItems: [],
onFiredDrillEvent: noop,
visualizationProperties: null
};
Table.propTypes = Table_1.TablePropTypes;
return Table;
}(React.Component));
exports.Table = Table;
//# sourceMappingURL=Table.js.map