synapse-react-client
Version:
[](https://travis-ci.com/Sage-Bionetworks/Synapse-React-Client) [](https://badge.fury.io/js/synaps
86 lines • 6.21 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.TreeNode = exports.NodeAppearance = void 0;
var tslib_1 = require("tslib");
var react_1 = (0, tslib_1.__importStar)(require("react"));
var react_intersection_observer_1 = require("react-intersection-observer");
var react_tooltip_1 = (0, tslib_1.__importDefault)(require("react-tooltip"));
var EntityTypeUtils_1 = require("../../../utils/functions/EntityTypeUtils");
var useGetEntityChildren_1 = require("../../../utils/hooks/SynapseAPI/useGetEntityChildren");
var EntityType_1 = require("../../../utils/synapseTypes/EntityType");
var EntityBadgeIcons_1 = require("../../EntityBadgeIcons");
var EntityIcon_1 = require("../../EntityIcon");
var NodeAppearance;
(function (NodeAppearance) {
NodeAppearance[NodeAppearance["SELECT"] = 0] = "SELECT";
NodeAppearance[NodeAppearance["BROWSE"] = 1] = "BROWSE";
})(NodeAppearance = exports.NodeAppearance || (exports.NodeAppearance = {}));
var TreeNode = function (_a) {
var entityHeader = _a.entityHeader, selected = _a.selected, setSelectedId = _a.setSelectedId, _b = _a.level, level = _b === void 0 ? 0 : _b, _c = _a.autoExpand, autoExpand = _c === void 0 ? function () { return false; } : _c, _d = _a.visibleTypes, visibleTypes = _d === void 0 ? [EntityType_1.EntityType.PROJECT, EntityType_1.EntityType.FOLDER] : _d, rootNodeConfiguration = _a.rootNodeConfiguration, appearance = _a.appearance, selectableTypes = _a.selectableTypes;
var isRootNode = !!rootNodeConfiguration;
var isDisabled = !isRootNode &&
entityHeader &&
!selectableTypes.includes((0, EntityTypeUtils_1.getEntityTypeFromHeader)(entityHeader));
var nodeId = isRootNode ? 'root' : entityHeader.id;
var nodeName = isRootNode
? rootNodeConfiguration === null || rootNodeConfiguration === void 0 ? void 0 : rootNodeConfiguration.nodeText
: entityHeader.name;
var TOOLTIP_ID = "TreeViewNodeTooltipId_" + nodeId;
var _e = (0, react_1.useState)(isRootNode || autoExpand(nodeId)), isExpanded = _e[0], setIsExpanded = _e[1];
var _f = (0, react_1.useState)([]), entityChildren = _f[0], setEntityChildren = _f[1];
// For retrieving the entity bundle and children
var _g = (0, react_intersection_observer_1.useInView)({
triggerOnce: true,
}), nodeRef = _g.ref, nodeInView = _g.inView;
// For "infinite scroll" paginated retrieval of the children
var _h = (0, react_intersection_observer_1.useInView)({
rootMargin: '200px',
}), endRef = _h.ref, endInView = _h.inView;
var _j = (0, useGetEntityChildren_1.useGetEntityChildrenInfinite)({
parentId: nodeId,
includeTypes: visibleTypes,
}, {
enabled: (nodeInView || endInView) &&
!isRootNode &&
(0, EntityTypeUtils_1.isContainerType)((0, EntityTypeUtils_1.getEntityTypeFromHeader)(entityHeader)),
}), children = _j.data, fetchNextPage = _j.fetchNextPage, hasNextPage = _j.hasNextPage, isSuccess = _j.isSuccess;
(0, react_1.useEffect)(function () {
if (isSuccess && endInView && hasNextPage) {
fetchNextPage();
}
}, [isSuccess, endInView, hasNextPage, fetchNextPage]);
(0, react_1.useEffect)(function () {
var _a;
if (isRootNode) {
setEntityChildren(rootNodeConfiguration.children);
}
else {
setEntityChildren((_a = children === null || children === void 0 ? void 0 : children.pages.flatMap(function (page) { return page.page; })) !== null && _a !== void 0 ? _a : []);
}
}, [isRootNode, children, rootNodeConfiguration]);
return (react_1.default.createElement("div", { className: "Node " + (appearance === NodeAppearance.SELECT ? 'SelectNode' : 'BrowseNode'), role: "treeitem", "aria-selected": selected.has(nodeId), "aria-disabled": isDisabled },
react_1.default.createElement("div", { ref: nodeRef, style: { paddingLeft: level * 20 + 20 + "px" }, role: "button", "aria-label": "Select " + nodeName, className: "NodeContent " + (isRootNode ? 'NodeRootContent' : ''), key: nodeId, onClick: function (event) {
event.stopPropagation();
if (!isDisabled) {
setSelectedId(nodeId);
}
} },
react_1.default.createElement(react_tooltip_1.default, { id: TOOLTIP_ID, delayShow: 500, place: 'top' }),
entityChildren && entityChildren.length > 0 ? (react_1.default.createElement("div", { className: 'ExpandButton', "aria-label": "Expand " + nodeName, role: "button", onClick: function (e) {
e.stopPropagation();
setIsExpanded(!isExpanded);
} }, isExpanded ? '▾' : '▸')) : (react_1.default.createElement("span", null)),
appearance === NodeAppearance.SELECT && ( // SWC-5592
react_1.default.createElement("div", { className: "EntityIcon" }, !isRootNode && entityHeader && (react_1.default.createElement(EntityIcon_1.EntityTypeIcon, { type: (0, EntityTypeUtils_1.getEntityTypeFromHeader)(entityHeader) })))),
react_1.default.createElement("div", { className: "EntityName", "data-for": TOOLTIP_ID, "data-tip": nodeName },
react_1.default.createElement("span", null, nodeName)),
appearance === NodeAppearance.SELECT && (react_1.default.createElement(EntityBadgeIcons_1.EntityBadgeIcons, { entityId: nodeId, showHasDiscussionThread: false, showHasWiki: false, showUnlink: false, canOpenModal: false, renderTooltipComponent: true }))),
react_1.default.createElement("div", { className: 'NodeChildren', "aria-hidden": !isExpanded },
entityChildren &&
entityChildren.map(function (child) {
return (react_1.default.createElement(exports.TreeNode, { key: child.id, entityHeader: child, selected: selected, setSelectedId: setSelectedId, level: level + 1, autoExpand: autoExpand, visibleTypes: visibleTypes, appearance: appearance, selectableTypes: selectableTypes }));
}),
react_1.default.createElement("div", { ref: endRef }))));
};
exports.TreeNode = TreeNode;
//# sourceMappingURL=TreeNode.js.map