@hitachivantara/uikit-react-lab
Version:
Contributed React components for the NEXT UI Kit.
64 lines (63 loc) • 2.54 kB
JavaScript
import { jsxs, jsx } from "react/jsx-runtime";
import { useMemo, useCallback } from "react";
import { HvTypography, HvButton } from "@hitachivantara/uikit-react-core";
import { DropDownXS } from "@hitachivantara/uikit-react-icons";
import { getColor } from "@hitachivantara/uikit-styles";
import { useClasses } from "./SidebarGroup.styles.js";
import { staticClasses } from "./SidebarGroup.styles.js";
import { useFlowContext } from "../../hooks/useFlowContext.js";
import { HvFlowDraggableSidebarGroupItem } from "./SidebarGroupItem/DraggableSidebarGroupItem.js";
const 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
)) })
] });
};
export {
HvFlowSidebarGroup,
staticClasses as flowSidebarGroupClasses
};