@hitachivantara/uikit-react-lab/dist/Flow/Node/Node.js

Contributed React components to UI Kit by the community.

import { useFlowNode, useFlowNodeUtils } from "../hooks/useFlowNode.js";
import { useFlowContext } from "../hooks/useFlowContext.js";
import { HvFlowBaseNode } from "./BaseNode.js";
import { useClasses } from "./Node.styles.js";
import { ParamRenderer } from "./Parameters/ParamRenderer.js";
import { useState } from "react";
import { HvActionsGeneric, HvButton, HvInlineEditor, HvTooltip, HvTypography, theme, useLabels } from "@hitachivantara/uikit-react-core";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
import { DropDownXS, Info } from "@hitachivantara/uikit-react-icons";
//#region src/Flow/Node/Node.tsx
var DEFAULT_LABELS = {
	collapseLabel: "Collapse",
	expandLabel: "Expand"
};
var HvFlowNode = ({ id, type, headerItems, actions, 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: "textDark" })
			}),
			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: "textDark"
				})
			})
		] }),
		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,
					onAction,
					maxVisibleActions,
					iconOnly: actionsIconOnly
				})]
			}),
			children,
			showParams && params && /* @__PURE__ */ jsx("div", {
				className: classes.paramsContainer,
				children: /* @__PURE__ */ jsx(ParamRenderer, {
					params,
					data: node?.data
				})
			})
		]
	});
};
//#endregion
export { HvFlowNode };