react-phylogeny-tree-gl
Version:
React integration of phylocanvas.gl. Component and hook for phylogenetic tree visualistion.
44 lines • 2.34 kB
JavaScript
import React from 'react';
import { treeMenuItems, nodeMenuItems } from '../plugins/contextMenu/menuItems';
import { ModalContainer } from './modalContainer';
export function ContextMenu({ possition, node, getTree, onCloseRequest }) {
const menuItems = node && !node.isLeaf ? nodeMenuItems : treeMenuItems;
return (React.createElement(ModalContainer, { style: {
left: possition === null || possition === void 0 ? void 0 : possition.x,
top: possition === null || possition === void 0 ? void 0 : possition.y,
zIndex: 1,
}, onCloseRequest: onCloseRequest }, menuItems.map((menuGroup, index) => (React.createElement("ul", { key: index }, menuGroup.map(({ label, handler, visible, isActive }) => {
const tree = getTree();
if (visible ? visible(tree) : true) {
const text = typeof label === 'string' ? label : label(getTree(), node);
return typeof isActive === 'function' ? (React.createElement(ToggleItem, { key: text, text: text, isActive: isActive, tree: tree, onClick: (e) => {
e.preventDefault();
const tree = getTree();
if (tree)
handler(tree, node);
} })) : (React.createElement(MenuItem, { key: text, text: text, onClick: (e) => {
e.preventDefault();
const tree = getTree();
if (tree)
handler(tree, node);
if (onCloseRequest)
onCloseRequest();
} }));
}
return;
}))))));
}
export function MenuItem({ text, onClick }) {
return (React.createElement("li", { className: "react-phylogeny-tree-conext-menu-item", onClick: onClick }, text));
}
export function ToggleItem({ text, isActive, tree, onClick }) {
const [active, setActive] = React.useState(isActive(tree));
const toggleClass = active ? 'is-active' : '';
return (React.createElement("li", { className: "react-phylogeny-tree-context-menu-has-toggle", onClick: (e) => {
onClick(e);
setActive(isActive(tree));
} },
text,
React.createElement("span", { className: `react-phylogeny-tree-context-menu-toggle ${toggleClass}` })));
}
//# sourceMappingURL=contextMenu.js.map