synapse-react-client
Version:
[](https://travis-ci.com/Sage-Bionetworks/Synapse-React-Client) [](https://badge.fury.io/js/synaps
71 lines • 4.76 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.SelectionPane = void 0;
var tslib_1 = require("tslib");
var icons_1 = require("@material-ui/icons");
var react_1 = (0, tslib_1.__importStar)(require("react"));
var react_tooltip_1 = (0, tslib_1.__importDefault)(require("react-tooltip"));
var useEntityBundle_1 = (0, tslib_1.__importDefault)(require("../../utils/hooks/SynapseAPI/useEntityBundle"));
var Typography_1 = (0, tslib_1.__importDefault)(require("../../utils/typography/Typography"));
var EntityIcon_1 = require("../EntityIcon");
var EntityFinder_1 = require("./EntityFinder");
var lab_1 = require("@material-ui/lab");
var SelectionPane = function (_a) {
var title = _a.title, selectedEntities = _a.selectedEntities, toggleSelection = _a.toggleSelection;
if (typeof title === 'function') {
title = title(selectedEntities.size);
}
return (react_1.default.createElement("div", { className: "EntityFinderSelectionPane alert alert-warning" },
react_1.default.createElement(Typography_1.default, { variant: 'headline3', display: 'inline' }, title),
selectedEntities.size <= 200 ? (react_1.default.createElement("div", { className: 'EntityFinderSelectionPane__Items' }, Array.from(selectedEntities.keys()).map(function (id) {
var version = selectedEntities.get(id);
return (react_1.default.createElement("div", { key: "" + id + (version !== EntityFinder_1.NO_VERSION_NUMBER ? "." + version : '') },
react_1.default.createElement(EntityPathDisplay, { entity: {
targetId: id,
targetVersionNumber: version !== EntityFinder_1.NO_VERSION_NUMBER ? version : undefined,
}, toggleSelection: toggleSelection })));
}))) : (react_1.default.createElement(Typography_1.default, { variant: "smallText1" }, "Too many items to show here"))));
};
exports.SelectionPane = SelectionPane;
var EntityPathDisplay = function (_a) {
var entity = _a.entity, toggleSelection = _a.toggleSelection;
var ENTITY_PATH_TOOLTIP_ID = "EntityPathDisplayReactTooltip_" + entity.targetId;
var bundle = (0, useEntityBundle_1.default)(entity.targetId, undefined, entity.targetVersionNumber).data;
var _b = (0, react_1.useState)(''), entityName = _b[0], setEntityName = _b[1];
var _c = (0, react_1.useState)(''), fullPath = _c[0], setFullPath = _c[1];
var _d = (0, react_1.useState)(''), displayedPath = _d[0], setDisplayedPath = _d[1];
(0, react_1.useEffect)(function () {
var _a;
if ((_a = bundle === null || bundle === void 0 ? void 0 : bundle.path) === null || _a === void 0 ? void 0 : _a.path) {
setEntityName(bundle.path.path[bundle.path.path.length - 1].name);
var path = bundle.path.path.slice(1, bundle.path.path.length - 1); // drop the first element, which is always syn4489 "root"
setFullPath(path.map(function (header) { return header.name; }).join('/'));
if (path.length < 4) {
// Show the full path from project to entity
setDisplayedPath(fullPath);
}
else {
// Truncate the path, showing only project, parent, and self
setDisplayedPath(path[0].name + // Project
'/…/' +
path
.slice(path.length - 1) // drop everything except parent and self
.map(function (header) { return header.name; })
.join('/'));
}
}
}, [bundle, fullPath]);
return (react_1.default.createElement("div", { className: "EntityFinderSelectionPane__Row" },
react_1.default.createElement(react_tooltip_1.default, { id: ENTITY_PATH_TOOLTIP_ID, delayShow: 500, place: 'top' }),
bundle && (react_1.default.createElement(EntityIcon_1.EntityTypeIcon, { className: "EntityIcon", type: bundle.entityType })),
react_1.default.createElement("span", { "data-for": ENTITY_PATH_TOOLTIP_ID, "data-tip": fullPath + "/" + entityName }, displayedPath ? displayedPath + '/' : ''),
entityName ? (react_1.default.createElement("span", { className: "EntityFinderSelectionPane__Row__EntityName" }, entityName)) : (react_1.default.createElement(lab_1.Skeleton, { width: 500 })),
entity.targetVersionNumber && (react_1.default.createElement("span", null,
" (Version ",
entity.targetVersionNumber,
")")),
react_1.default.createElement(icons_1.Clear, { className: "EntityFinderSelectionPane__Row__DeselectButton", onClick: function () {
toggleSelection(entity);
} })));
};
//# sourceMappingURL=SelectionPane.js.map