@backstage/plugin-techdocs-module-addons-contrib
Version:
Plugin module for contributed TechDocs Addons
117 lines (114 loc) • 3.6 kB
JavaScript
import { jsx, Fragment } from 'react/jsx-runtime';
import { useState, useCallback, useEffect } from 'react';
import { useLocalStorageValue } from '@react-hookz/web';
import { withStyles, Button } from '@material-ui/core';
import ChevronRightIcon from '@material-ui/icons/ChevronRight';
import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
import { useShadowRootElements } from '@backstage/plugin-techdocs-react';
const NESTED_LIST_TOGGLE = ".md-nav__item--nested .md-toggle";
const EXPANDABLE_NAVIGATION_LOCAL_STORAGE = "@backstage/techdocs-addons/nav-expanded";
const StyledButton = withStyles({
root: {
position: "absolute",
left: "13.7rem",
// Sidebar inner width (15.1em) minus the different margins/paddings
top: "19px",
zIndex: 2,
padding: 0,
minWidth: 0
}
})(Button);
const CollapsedIcon = withStyles({
root: {
height: "20px",
width: "20px"
}
})(ChevronRightIcon);
const ExpandedIcon = withStyles({
root: {
height: "20px",
width: "20px"
}
})(ExpandMoreIcon);
const ExpandableNavigationAddon = () => {
const defaultValue = { expandAllNestedNavs: false };
const { value: expanded, set: setExpanded } = useLocalStorageValue(
EXPANDABLE_NAVIGATION_LOCAL_STORAGE,
{ defaultValue }
);
const [hasNavSubLevels, setHasNavSubLevels] = useState(false);
const [...checkboxToggles] = useShadowRootElements([
NESTED_LIST_TOGGLE
]);
const shouldToggle = useCallback(
(item) => {
const isExpanded = item.checked;
const shouldExpand = expanded?.expandAllNestedNavs;
if (shouldExpand && !isExpanded) {
return true;
}
if (!shouldExpand && isExpanded) {
return true;
}
return false;
},
[expanded]
);
const handleKeyPass = (event, toggleAction) => {
if (event.key === "Enter" || event.key === " ") {
event.preventDefault();
toggleAction();
}
};
useEffect(() => {
if (!checkboxToggles?.length) return;
setHasNavSubLevels(true);
checkboxToggles.forEach((item) => {
item.tabIndex = 0;
const toggleAction = () => {
if (shouldToggle(item)) {
item.click();
}
};
const keydownHandler = (event) => {
handleKeyPass(
event,
toggleAction
);
};
item.addEventListener("keydown", keydownHandler);
item.addEventListener("click", toggleAction);
return () => {
item.removeEventListener("keydown", keydownHandler);
item.removeEventListener("click", toggleAction);
};
});
}, [checkboxToggles, shouldToggle]);
useEffect(() => {
if (!checkboxToggles?.length) return;
checkboxToggles.forEach((item) => {
if (shouldToggle(item)) {
item.click();
}
});
}, [expanded, checkboxToggles, shouldToggle]);
const handleState = () => {
setExpanded((prevState) => ({
expandAllNestedNavs: !prevState?.expandAllNestedNavs
}));
};
return /* @__PURE__ */ jsx(Fragment, { children: hasNavSubLevels ? /* @__PURE__ */ jsx(
StyledButton,
{
size: "small",
onClick: handleState,
onKeyDown: (event) => handleKeyPass(event, handleState),
tabIndex: 0,
"aria-expanded": expanded?.expandAllNestedNavs,
"aria-label": expanded?.expandAllNestedNavs ? "collapse-nav" : "expand-nav",
children: expanded?.expandAllNestedNavs ? /* @__PURE__ */ jsx(ExpandedIcon, {}) : /* @__PURE__ */ jsx(CollapsedIcon, {})
}
) : null });
};
export { ExpandableNavigationAddon };
//# sourceMappingURL=ExpandableNavigation.esm.js.map