react-phylogeny-tree-gl
Version:
React integration of phylocanvas.gl. Component and hook for phylogenetic tree visualistion.
54 lines • 2.67 kB
JavaScript
import React from 'react';
function hasRedoUndoPlugin(tree) {
if (tree !== null &&
'redo' in tree &&
'undo' in tree &&
'canRedo' in tree &&
'canUndo' in tree &&
'history' in tree.props) {
return true;
}
return false;
}
export function RedoUndo({ getTree }) {
const tree = getTree();
if (tree && hasRedoUndoPlugin(tree)) {
return React.createElement(RedoUndoView, { tree: tree });
}
return null;
}
export function RedoUndoView({ tree, }) {
var _a, _b, _c, _d;
const [redoActive, setRedoActive] = React.useState(false);
const [undoActive, setUndoActive] = React.useState(false);
React.useEffect(() => {
if (tree !== null && 'undo' in tree && 'redo') {
const { canUndo, canRedo } = tree;
setRedoActive(canRedo());
setUndoActive(canUndo());
}
}, [tree, (_b = (_a = tree === null || tree === void 0 ? void 0 : tree.props) === null || _a === void 0 ? void 0 : _a.history) === null || _b === void 0 ? void 0 : _b.past, (_d = (_c = tree === null || tree === void 0 ? void 0 : tree.props) === null || _c === void 0 ? void 0 : _c.history) === null || _d === void 0 ? void 0 : _d.future]);
if (tree !== null && 'undo' in tree) {
const { redo, undo, canUndo, canRedo } = tree;
return (React.createElement(RedoUndoButtons, { canRedo: redoActive, canUndo: undoActive, onRedo: () => {
if (canRedo())
redo();
setRedoActive(canRedo());
setUndoActive(canUndo());
}, onUndo: () => {
if (canUndo())
undo();
setRedoActive(canRedo());
setUndoActive(canUndo());
} }));
}
return null;
}
export function RedoUndoButtons({ canUndo, canRedo, onUndo, onRedo, style = {}, }) {
return (React.createElement("div", { className: "react-phylogeny-tree-ctrl-group react-phylogeny-tree-redo-undo", style: style },
React.createElement("button", { className: "react-phylogeny-tree-ctrl-zoom-in", type: "button", onClick: onUndo, title: "Undo", disabled: !canUndo },
React.createElement("span", { className: "react-phylogeny-tree-undo react-phylogeny-tree-redo-undo-icon", "aria-hidden": "true" })),
React.createElement("button", { className: "react-phylogeny-tree-ctrl-zoom-out", type: "button", onClick: onRedo, title: "Redo", disabled: !canRedo },
React.createElement("span", { className: " react-phylogeny-tree-redo react-phylogeny-tree-redo-undo-icon", "aria-hidden": "true" }))));
}
//# sourceMappingURL=redoUndo.js.map