synapse-react-client
Version:
[](https://travis-ci.com/Sage-Bionetworks/Synapse-React-Client) [](https://badge.fury.io/js/synaps
60 lines • 5.24 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.EntityDetailsList = exports.EntityDetailsListDataConfigurationType = void 0;
var tslib_1 = require("tslib");
var react_1 = (0, tslib_1.__importStar)(require("react"));
var use_deep_compare_effect_1 = (0, tslib_1.__importDefault)(require("use-deep-compare-effect"));
var EntityChildrenDetails_1 = require("./configurations/EntityChildrenDetails");
var FavoritesDetails_1 = require("./configurations/FavoritesDetails");
var ProjectListDetails_1 = require("./configurations/ProjectListDetails");
var SearchDetails_1 = require("./configurations/SearchDetails");
var useGetIsAllSelectedInfiniteList_1 = require("../../../utils/hooks/useGetIsAllSelectedInfiniteList");
var DetailsView_1 = require("./view/DetailsView");
var EntityDetailsListDataConfigurationType;
(function (EntityDetailsListDataConfigurationType) {
EntityDetailsListDataConfigurationType[EntityDetailsListDataConfigurationType["HEADER_LIST"] = 0] = "HEADER_LIST";
EntityDetailsListDataConfigurationType[EntityDetailsListDataConfigurationType["PARENT_CONTAINER"] = 1] = "PARENT_CONTAINER";
EntityDetailsListDataConfigurationType[EntityDetailsListDataConfigurationType["USER_PROJECTS"] = 2] = "USER_PROJECTS";
EntityDetailsListDataConfigurationType[EntityDetailsListDataConfigurationType["USER_FAVORITES"] = 3] = "USER_FAVORITES";
EntityDetailsListDataConfigurationType[EntityDetailsListDataConfigurationType["ENTITY_SEARCH"] = 4] = "ENTITY_SEARCH";
EntityDetailsListDataConfigurationType[EntityDetailsListDataConfigurationType["PROMPT"] = 5] = "PROMPT";
})(EntityDetailsListDataConfigurationType = exports.EntityDetailsListDataConfigurationType || (exports.EntityDetailsListDataConfigurationType = {}));
var EntityDetailsList = function (_a) {
/**
* This component simply uses the data configuration prop to determine which configuration component
* to use. Each configuration component has its own logic to utilize different Synapse APIs.
* The configuration components also manage view props that are more tightly-coupled with data,
* such as pagination and sorting.
*
* In the future, if we wanted to reuse this in other contexts (e.g. not selecting entities), we should consider refactoring
* to support different 'Row' components, determining the correct one determined at this level.
*/
var configuration = _a.configuration, sharedProps = (0, tslib_1.__rest)(_a, ["configuration"]);
var _b = (0, react_1.useState)(react_1.default.createElement(react_1.default.Fragment, null)), component = _b[0], setComponent = _b[1];
(0, use_deep_compare_effect_1.default)(function () {
var getComponentFromConfiguration = function (config) {
var _a;
switch (config.type) {
case EntityDetailsListDataConfigurationType.PARENT_CONTAINER:
return (react_1.default.createElement(EntityChildrenDetails_1.EntityChildrenDetails, (0, tslib_1.__assign)({ parentContainerId: config.parentContainerId }, sharedProps)));
case EntityDetailsListDataConfigurationType.HEADER_LIST:
return (react_1.default.createElement(DetailsView_1.DetailsView, (0, tslib_1.__assign)({ entities: config.headerList, isLoading: false, hasNextPage: false }, sharedProps, { enableSelectAll: sharedProps.enableSelectAll, selectAllIsChecked: (0, useGetIsAllSelectedInfiniteList_1.getIsAllSelectedFromInfiniteList)((_a = config.headerList) !== null && _a !== void 0 ? _a : [], sharedProps.selected, sharedProps.selectableTypes) })));
case EntityDetailsListDataConfigurationType.USER_FAVORITES:
return react_1.default.createElement(FavoritesDetails_1.FavoritesDetails, (0, tslib_1.__assign)({}, sharedProps));
case EntityDetailsListDataConfigurationType.ENTITY_SEARCH:
return (react_1.default.createElement(SearchDetails_1.SearchDetails, (0, tslib_1.__assign)({ searchQuery: config.query }, sharedProps)));
case EntityDetailsListDataConfigurationType.USER_PROJECTS:
return (react_1.default.createElement(ProjectListDetails_1.ProjectListDetails, (0, tslib_1.__assign)({ projectsParams: config.getProjectParams }, sharedProps)));
case EntityDetailsListDataConfigurationType.PROMPT:
return (react_1.default.createElement(DetailsView_1.DetailsView, (0, tslib_1.__assign)({ entities: [], isLoading: false, noResultsPlaceholder: react_1.default.createElement("div", null, "Use the left panel to browse Synapse, then make a selection in this panel") }, sharedProps, { enableSelectAll: false })));
default:
console.warn('The configuration type does not map to a known view type. No Details view will be rendered. Invalid configuration: ', config);
return react_1.default.createElement(react_1.default.Fragment, null);
}
};
setComponent(getComponentFromConfiguration(configuration));
}, [configuration, sharedProps]);
return component;
};
exports.EntityDetailsList = EntityDetailsList;
//# sourceMappingURL=EntityDetailsList.js.map