@hitachivantara/uikit-react-lab/dist/Flow/hooks/useNode.js

Contributed React components to UI Kit by the community.

import { useFlowInstance } from "./useFlowInstance.js";
import { useFlowNode, useFlowNodeInputEdges, useFlowNodeIntersections, useFlowNodeOutputEdges, useFlowNodeUtils } from "./useFlowNode.js";
import { useNodeMetaRegistry } from "../FlowContext/NodeMetaContext.js";
import { useFlowContext } from "./useFlowContext.js";
import { identifyHandles } from "../Node/utils.js";
import { isValidElement, useCallback, useEffect, useMemo, useState } from "react";
import { useLabels } from "@hitachivantara/uikit-react-core";
import { getColor, theme as theme$1 } from "@hitachivantara/uikit-styles";
import { jsx } from "react/jsx-runtime";
import { Delete, Duplicate } from "@hitachivantara/uikit-react-icons";
import { uid } from "uid";
//#region src/Flow/hooks/useNode.tsx
var DEFAULT_LABELS = {
	deleteActionLabel: "Delete",
	duplicateActionLabel: "Duplicate"
};
function useHvNode(props) {
	const { id, title: titleProp, icon: iconProp, color: colorProp, subtitle: subtitleProp, nodeActions: nodeActionsProp, inputs: inputsProp, outputs: outputsProp, groupId, labels: labelsProps, nodeToolbarProps } = props;
	const { registerNode, unregisterNode } = useNodeMetaRegistry();
	const labels = useLabels(DEFAULT_LABELS, labelsProps);
	const inputs = useMemo(() => identifyHandles(inputsProp), [inputsProp]);
	const inputEdges = useFlowNodeInputEdges();
	const outputs = useMemo(() => identifyHandles(outputsProp), [outputsProp]);
	const outputEdges = useFlowNodeOutputEdges();
	const { nodeGroups } = useFlowContext();
	const intersections = useFlowNodeIntersections();
	const { setNodeParent, setNodeData } = useFlowNodeUtils();
	const node = useFlowNode();
	const reactFlowInstance = useFlowInstance();
	const nodeGroup = groupId && nodeGroups && nodeGroups[groupId] || void 0;
	const title = titleProp || nodeGroup?.label;
	const icon = iconProp || nodeGroup?.icon;
	const color = getColor(colorProp || nodeGroup?.color);
	const iconColor = getColor(isValidElement(icon) && icon.props.color || "textDark");
	const subtitle = subtitleProp || node?.data.nodeLabel;
	const [showActions, setShowActions] = useState(false);
	const toggleShowActions = useCallback(() => {
		setShowActions(!showActions);
	}, [showActions]);
	const getNodeToolbarProps = useCallback(() => ({
		offset: 0,
		isVisible: showActions,
		...nodeToolbarProps
	}), [nodeToolbarProps, showActions]);
	const nodeActions = useMemo(() => nodeActionsProp || [{
		id: "delete",
		label: labels?.deleteActionLabel,
		icon: /* @__PURE__ */ jsx(Delete, {})
	}, {
		id: "duplicate",
		label: labels?.duplicateActionLabel,
		icon: /* @__PURE__ */ jsx(Duplicate, {})
	}], [
		labels?.deleteActionLabel,
		labels?.duplicateActionLabel,
		nodeActionsProp
	]);
	useEffect(() => {
		registerNode(id, {
			label: title || "",
			inputs,
			outputs
		});
		return () => unregisterNode(id);
	}, [
		id,
		title,
		inputs,
		outputs,
		registerNode,
		unregisterNode
	]);
	const handleDefaultAction = useCallback((action) => {
		if (!node) return;
		if (action.callback) {
			action.callback(node);
			return;
		}
		switch (action.id) {
			case "delete":
				reactFlowInstance.deleteElements({ nodes: [node] });
				break;
			case "duplicate":
				reactFlowInstance.addNodes([{
					...node,
					id: uid(),
					position: {
						x: node.position.x,
						y: node.position.y + (node.height || 0) + 20
					},
					selected: false,
					zIndex: Number(theme$1.zIndices.overlay)
				}]);
				break;
			default: break;
		}
	}, [node, reactFlowInstance]);
	return useMemo(() => ({
		id,
		title,
		icon,
		color,
		iconColor,
		subtitle,
		inputs,
		inputEdges,
		outputs,
		outputEdges,
		node,
		nodeActions,
		showActions,
		intersections,
		getNodeToolbarProps,
		toggleShowActions,
		handleDefaultAction,
		setNodeData,
		setNodeParent
	}), [
		id,
		title,
		icon,
		color,
		iconColor,
		subtitle,
		inputs,
		inputEdges,
		outputs,
		outputEdges,
		node,
		nodeActions,
		showActions,
		intersections,
		getNodeToolbarProps,
		toggleShowActions,
		handleDefaultAction,
		setNodeData,
		setNodeParent
	]);
}
//#endregion
export { useHvNode };