@hitachivantara/uikit-react-lab
Version:
Contributed React components for the NEXT UI Kit.
117 lines (116 loc) • 4.19 kB
JavaScript
import { jsxs, jsx, Fragment } from "react/jsx-runtime";
import { useState } from "react";
import { useLabels, theme, HvTypography, HvInlineEditor, HvActionsGeneric, HvTooltip, HvButton } from "@hitachivantara/uikit-react-core";
import { Info, DropDownXS } from "@hitachivantara/uikit-react-icons";
import { HvFlowBaseNode } from "./BaseNode.js";
import { useClasses } from "./Node.styles.js";
import { staticClasses } from "./Node.styles.js";
import { useFlowNode, useFlowNodeUtils } from "../hooks/useFlowNode.js";
import { ParamRenderer } from "./Parameters/ParamRenderer.js";
import { useFlowContext } from "../hooks/useFlowContext.js";
const DEFAULT_LABELS = {
collapseLabel: "Collapse",
expandLabel: "Expand"
};
const HvFlowNode = ({
id,
type,
headerItems,
actions,
actionCallback,
// TODO - remove in v6
onAction,
maxVisibleActions = 1,
expanded = false,
actionsIconOnly = true,
params,
classes: classesProp,
labels: labelsProps,
children,
expandParamsButtonProps,
disableInlineEdit,
title: titleProp,
subtitle: subtitleProp,
description,
groupId,
color: colorProp,
icon: iconProp,
...props
}) => {
const { classes } = useClasses(classesProp);
const [showParams, setShowParams] = useState(expanded);
const { nodeGroups, defaultActions } = useFlowContext();
const labels = useLabels(DEFAULT_LABELS, labelsProps);
const node = useFlowNode();
const { setNodeData } = useFlowNodeUtils();
const inlineEditorWidth = actions === void 0 || Array.isArray(actions) && actions.length === 0 || maxVisibleActions === 0 ? "100%" : `calc(200px - calc(${maxVisibleActions} * 32px + ${theme.spacing(2)}))`;
const nodeGroup = groupId && nodeGroups && nodeGroups[groupId] || void 0;
const title = titleProp || nodeGroup?.label;
const icon = iconProp || nodeGroup?.icon;
const color = colorProp || nodeGroup?.color;
const subtitle = subtitleProp || node?.data.nodeLabel;
const hasParams = !!(params && params.length > 0);
return /* @__PURE__ */ jsxs(
HvFlowBaseNode,
{
id,
type,
title,
icon,
color,
nodeActions: defaultActions,
classes,
headerItems: /* @__PURE__ */ jsxs(Fragment, { children: [
headerItems,
description && /* @__PURE__ */ jsx(HvTooltip, { title: description, children: /* @__PURE__ */ jsx(Info, { color: "base_dark" }) }),
hasParams && /* @__PURE__ */ jsx(
HvButton,
{
icon: true,
onClick: () => setShowParams((p) => !p),
"aria-label": showParams ? labels?.collapseLabel : labels?.expandLabel,
...expandParamsButtonProps,
children: /* @__PURE__ */ jsx(DropDownXS, { rotate: showParams, color: "base_dark" })
}
)
] }),
labels,
...props,
children: [
(subtitle || actions) && /* @__PURE__ */ jsxs("div", { className: classes.subtitleContainer, children: [
subtitle && (disableInlineEdit ? /* @__PURE__ */ jsx(HvTypography, { className: classes.subtitle, children: subtitle }) : /* @__PURE__ */ jsx(
HvInlineEditor,
{
defaultValue: subtitle,
showIcon: true,
style: { width: inlineEditorWidth },
classes: {
root: classes.inlineEditRoot,
button: classes.inlineEditButton
},
onBlur: (evt, value) => setNodeData((prev) => ({ ...prev, nodeLabel: value }))
}
)),
actions && /* @__PURE__ */ jsx(
HvActionsGeneric,
{
className: classes.actions,
classes: { button: classes.actionsButton },
actions,
actionsCallback: actionCallback,
onAction,
maxVisibleActions,
iconOnly: actionsIconOnly
}
)
] }),
children,
showParams && params && /* @__PURE__ */ jsx("div", { className: classes.paramsContainer, children: /* @__PURE__ */ jsx(ParamRenderer, { params, data: node?.data }) })
]
}
);
};
export {
HvFlowNode,
staticClasses as flowNodeClasses
};