UNPKG

@backstage/plugin-techdocs-module-addons-contrib

Version:

Plugin module for contributed TechDocs Addons

117 lines (114 loc) 3.6 kB
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