@hitachivantara/uikit-react-lab
Version:
Contributed React components for the NEXT UI Kit.
63 lines (62 loc) • 2.88 kB
JavaScript
;
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const jsxRuntime = require("react/jsx-runtime");
const react = require("react");
const uikitReactCore = require("@hitachivantara/uikit-react-core");
const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
const uikitStyles = require("@hitachivantara/uikit-styles");
const SidebarGroup_styles = require("./SidebarGroup.styles.cjs");
const useFlowContext = require("../../hooks/useFlowContext.cjs");
const DraggableSidebarGroupItem = require("./SidebarGroupItem/DraggableSidebarGroupItem.cjs");
const HvFlowSidebarGroup = ({
id,
label,
items = [],
color,
description,
icon,
expandButtonProps,
classes: classesProp,
itemProps
}) => {
const { classes, cx, css } = SidebarGroup_styles.useClasses(classesProp);
const { expandedNodeGroups, setExpandedNodeGroups } = useFlowContext.useFlowContext();
const opened = react.useMemo(
() => !!expandedNodeGroups?.find((group) => group === id),
[expandedNodeGroups, id]
);
const handleClick = react.useCallback(() => {
setExpandedNodeGroups?.(
(prev) => opened ? prev.filter((group) => id !== group) : [...prev, id]
);
}, [id, opened, setExpandedNodeGroups]);
return /* @__PURE__ */ jsxRuntime.jsxs("li", { className: cx(css({ borderColor: uikitStyles.getColor(color) }), classes.root), children: [
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.titleContainer, children: [
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.labelContainer, children: [
/* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.icon, role: "presentation", children: icon }),
/* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvTypography, { component: "p", variant: "title4", children: Object.keys(items).length > 1 ? `${label} (${Object.keys(items).length})` : label })
] }),
/* @__PURE__ */ jsxRuntime.jsx(
uikitReactCore.HvButton,
{
icon: true,
onClick: handleClick,
"aria-expanded": opened,
...expandButtonProps,
children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.DropDownXS, { rotate: opened })
}
)
] }),
description && /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.descriptionContainer, children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvTypography, { children: description }) }),
opened && /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.itemsContainer, children: Object.entries(items).map(([itemId, item]) => /* @__PURE__ */ jsxRuntime.jsx(
DraggableSidebarGroupItem.HvFlowDraggableSidebarGroupItem,
{
...itemProps,
...item
},
itemId
)) })
] });
};
exports.flowSidebarGroupClasses = SidebarGroup_styles.staticClasses;
exports.HvFlowSidebarGroup = HvFlowSidebarGroup;