@hitachivantara/uikit-react-core
Version:
Core React components for the NEXT Design System.
285 lines (284 loc) • 9.18 kB
JavaScript
"use strict";
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const jsxRuntime = require("react/jsx-runtime");
const React = require("react");
const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
const useControlled = require("../../hooks/useControlled.cjs");
const helpers = require("../../utils/helpers.cjs");
const setId = require("../../utils/setId.cjs");
const NavigationPopupContainer = require("../NavigationPopup/NavigationPopupContainer.cjs");
const utils = require("../NavigationSlider/utils.cjs");
const VerticalNavigationContext = require("../VerticalNavigationContext.cjs");
const Navigation_styles = require("./Navigation.styles.cjs");
const NavigationSlider = require("../NavigationSlider/NavigationSlider.cjs");
const TreeView = require("../TreeView/TreeView.cjs");
const TreeViewItem = require("../TreeView/TreeViewItem.cjs");
const createListHierarchy = (items, id, classes, mouseEnterHandler, disableTooltip = false) => items.map((item) => {
const {
id: itemId,
label: itemLabel,
icon,
data: children,
selectable,
disabled,
href,
target
} = item;
const itemMouseEnterHandler = (event) => {
mouseEnterHandler?.(event, item);
};
return /* @__PURE__ */ jsxRuntime.jsx(
TreeViewItem.HvVerticalNavigationTreeViewItem,
{
id: setId.setId(id, itemId),
className: classes?.listItem,
href,
target,
nodeId: itemId,
label: itemLabel,
icon,
payload: item,
selectable,
disabled,
onMouseEnter: itemMouseEnterHandler,
disableTooltip,
children: children ? createListHierarchy(
children,
id,
classes,
mouseEnterHandler,
disableTooltip
) : void 0
},
itemId
);
});
const getAllParents = (items) => {
const parents = items.filter(
(item) => item.data != null && item.data.length > 0
);
const childParents = parents.flatMap((item) => getAllParents(item.data));
return [...parents, ...childParents];
};
function pathToElement(data, targetId) {
const path = [];
if (data != null && data.length > 0) {
for (let i = 0; i !== data.length; ++i) {
const item = data[i];
if (item.id === targetId) {
path.push(item.id);
break;
}
const subPaths = pathToElement(item.data, targetId);
if (subPaths.length > 0) {
path.push(item.id);
path.push(...subPaths);
break;
}
}
}
return path;
}
const HvVerticalNavigationTree = (props) => {
const {
id,
className,
classes: classesProp,
data,
mode = "navigation",
collapsible = false,
expanded: expandedProp,
defaultExpanded,
onToggle,
selected: selectedProp,
defaultSelected,
onChange,
sliderForwardButtonAriaLabel = "Navigate to submenu",
...others
} = uikitReactUtils.useDefaultProps("HvVerticalNavigationTree", props);
const { classes, cx } = Navigation_styles.useClasses(classesProp);
const [selected, setSelected] = useControlled.useControlled(selectedProp, defaultSelected);
const [expanded, setExpanded] = useControlled.useControlled(expandedProp, () => {
if (defaultExpanded === true) {
return getAllParents(data).map((item) => item.id);
}
if (defaultExpanded === false) {
return [];
}
if (defaultExpanded == null) {
if (selected != null) {
const path = pathToElement(data, selected);
return path.slice(0, -1);
}
return [];
}
return defaultExpanded;
});
const {
isOpen,
useIcons,
slider,
parentItem,
setParentItem,
withParentData,
navigateToChildHandler,
setParentData,
setParentSelected
} = React.useContext(VerticalNavigationContext.VerticalNavigationContext);
const [navigationPopup, setNavigationPopup] = React.useState(null);
const handleChange = React.useCallback(
(event, selectedId, selectedItem) => {
if (useIcons && !isOpen && selectedItem.data) {
const currentEventTarget = event.currentTarget;
setNavigationPopup((prevState) => {
return prevState?.anchorEl === currentEventTarget ? null : {
uniqueKey: helpers.uniqueId(),
anchorEl: currentEventTarget,
fixedMode: true,
data: selectedItem.data
};
});
event.stopPropagation();
} else {
setSelected(selectedId);
setExpanded((prevState) => {
if (!isOpen) {
return [...prevState, ...pathToElement(data, selectedId)];
}
return [...prevState];
});
setNavigationPopup(null);
onChange?.(event, selectedItem);
}
},
[onChange, setSelected, setExpanded, isOpen, useIcons, data]
);
const treeViewItemMouseEnterHandler = React.useCallback(
(event, item) => {
const isCollapsed = useIcons && !isOpen;
if (isCollapsed && item.data && !navigationPopup?.fixedMode) {
const currentEventTarget = event.currentTarget;
setNavigationPopup?.({
uniqueKey: helpers.uniqueId(),
anchorEl: currentEventTarget,
fixedMode: false,
data: item.data
});
} else if (isCollapsed && !item.data && !navigationPopup?.fixedMode) {
setNavigationPopup(null);
}
},
[isOpen, useIcons, navigationPopup]
);
const handleToggle = React.useCallback(
(event, newExpanded) => {
setExpanded(newExpanded);
onToggle?.(event, newExpanded);
},
[onToggle, setExpanded]
);
const children = React.useMemo(
() => data && createListHierarchy(
data,
id,
classes,
treeViewItemMouseEnterHandler,
navigationPopup?.fixedMode
),
[classes, data, id, navigationPopup, treeViewItemMouseEnterHandler]
);
React.useEffect(() => {
if (!isOpen) {
setNavigationPopup?.(null);
}
}, [isOpen]);
React.useEffect(() => {
if (setParentSelected) setParentSelected(selected);
}, [selected, setSelected, setParentSelected]);
React.useEffect(() => {
if (setParentData) setParentData(data);
}, [data, setParentData]);
React.useEffect(() => {
if (withParentData && selected && setParentItem && utils.getParentItemById(withParentData, selected)) {
setParentItem(utils.getParentItemById(withParentData, selected));
}
}, [withParentData, selected, setParentItem]);
const navigateToTargetHandler = (event, selectedItem) => handleChange(event, selectedItem.id, selectedItem);
const handleNavigationPopupClose = () => setNavigationPopup(null);
const handleStyledNavMouseLeave = () => {
if (useIcons && !isOpen && !navigationPopup?.fixedMode) {
setNavigationPopup(null);
}
};
const handleNavigationPopupMouseLeave = () => {
if (!navigationPopup?.fixedMode) {
handleNavigationPopupClose();
}
};
const handleNavigationPopupChange = (event, selectedItem) => {
handleChange(event, selectedItem.id, selectedItem);
};
return /* @__PURE__ */ jsxRuntime.jsx(
"nav",
{
id,
className: cx(
classes.root,
{ [classes.collapsed]: !isOpen && !useIcons },
className
),
onMouseLeave: handleStyledNavMouseLeave,
...others,
children: slider ? /* @__PURE__ */ jsxRuntime.jsx(
NavigationSlider.HvVerticalNavigationSlider,
{
data: parentItem.data || withParentData,
selected,
onNavigateToTarget: navigateToTargetHandler,
onNavigateToChild: navigateToChildHandler,
forwardButtonAriaLabel: sliderForwardButtonAriaLabel
}
) : /* @__PURE__ */ jsxRuntime.jsxs(
TreeView.HvVerticalNavigationTreeView,
{
id: setId.setId(id, "tree"),
className: classes.list,
selectable: true,
mode,
collapsible,
selected,
onChange: handleChange,
expanded,
onToggle: handleToggle,
children: [
useIcons && !isOpen && navigationPopup && /* @__PURE__ */ jsxRuntime.jsx(
NavigationPopupContainer.NavigationPopupContainer,
{
anchorEl: navigationPopup.anchorEl,
onClose: handleNavigationPopupClose,
className: classes.navigationPopup,
children: /* @__PURE__ */ jsxRuntime.jsx(
HvVerticalNavigationTree,
{
className: classes.popup,
id: setId.setId(id, "navigation-popup-tree"),
collapsible: true,
defaultExpanded: true,
selected,
data: navigationPopup.data,
onChange: handleNavigationPopupChange,
onMouseLeave: handleNavigationPopupMouseLeave
}
)
},
navigationPopup.uniqueKey
),
children
]
}
)
}
);
};
exports.verticalNavigationTreeClasses = Navigation_styles.staticClasses;
exports.HvVerticalNavigationTree = HvVerticalNavigationTree;