@hitachivantara/uikit-react-lab
Version:
Contributed React components to UI Kit by the community.
61 lines (60 loc) • 2.44 kB
JavaScript
import { useFlowContext } from "../../hooks/useFlowContext.js";
import { useClasses } from "./SidebarGroup.styles.js";
import { HvFlowDraggableSidebarGroupItem } from "./SidebarGroupItem/DraggableSidebarGroupItem.js";
import { useCallback, useMemo } from "react";
import { HvButton, HvTypography } from "@hitachivantara/uikit-react-core";
import { getColor } from "@hitachivantara/uikit-styles";
import { jsx, jsxs } from "react/jsx-runtime";
import { DropDownXS } from "@hitachivantara/uikit-react-icons";
//#region src/Flow/Sidebar/SidebarGroup/SidebarGroup.tsx
var HvFlowSidebarGroup = ({ id, label, items = [], color, description, icon, expandButtonProps, classes: classesProp, itemProps }) => {
const { classes, cx, css } = useClasses(classesProp);
const { expandedNodeGroups, setExpandedNodeGroups } = useFlowContext();
const opened = useMemo(() => !!expandedNodeGroups?.find((group) => group === id), [expandedNodeGroups, id]);
const handleClick = useCallback(() => {
setExpandedNodeGroups?.((prev) => opened ? prev.filter((group) => id !== group) : [...prev, id]);
}, [
id,
opened,
setExpandedNodeGroups
]);
return /* @__PURE__ */ jsxs("li", {
className: cx(css({ borderColor: getColor(color) }), classes.root),
children: [
/* @__PURE__ */ jsxs("div", {
className: classes.titleContainer,
children: [/* @__PURE__ */ jsxs("div", {
className: classes.labelContainer,
children: [/* @__PURE__ */ jsx("div", {
className: classes.icon,
role: "presentation",
children: icon
}), /* @__PURE__ */ jsx(HvTypography, {
component: "p",
variant: "title4",
children: Object.keys(items).length > 1 ? `${label} (${Object.keys(items).length})` : label
})]
}), /* @__PURE__ */ jsx(HvButton, {
icon: true,
onClick: handleClick,
"aria-expanded": opened,
...expandButtonProps,
children: /* @__PURE__ */ jsx(DropDownXS, { rotate: opened })
})]
}),
description && /* @__PURE__ */ jsx("div", {
className: classes.descriptionContainer,
children: /* @__PURE__ */ jsx(HvTypography, { children: description })
}),
opened && /* @__PURE__ */ jsx("div", {
className: classes.itemsContainer,
children: Object.entries(items).map(([itemId, item]) => /* @__PURE__ */ jsx(HvFlowDraggableSidebarGroupItem, {
...itemProps,
...item
}, itemId))
})
]
});
};
//#endregion
export { HvFlowSidebarGroup };