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

Contributed React components for the NEXT UI Kit.

import { jsx } from "react/jsx-runtime";
import { useMemo, isValidElement, useState, useCallback, useEffect } from "react";
import { uid } from "uid";
import { useLabels } from "@hitachivantara/uikit-react-core";
import { Delete, Duplicate } from "@hitachivantara/uikit-react-icons";
import { getColor, theme } from "@hitachivantara/uikit-styles";
import { useNodeMetaRegistry } from "../FlowContext/NodeMetaContext.js";
import { identifyHandles } from "../Node/utils.js";
import { useFlowContext } from "./useFlowContext.js";
import { useFlowInstance } from "./useFlowInstance.js";
import { useFlowNodeInputEdges, useFlowNodeOutputEdges, useFlowNodeIntersections, useFlowNodeUtils, useFlowNode } from "./useFlowNode.js";
const 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 = isValidElement(icon) ? getColor(icon.props.color || "base_dark") : getColor("base_dark");
  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.zIndices.overlay)
            }
          ]);
          break;
      }
    },
    [node, reactFlowInstance]
  );
  return useMemo(
    () => ({
      // state
      id,
      title,
      icon,
      color,
      iconColor,
      subtitle,
      inputs,
      inputEdges,
      outputs,
      outputEdges,
      node,
      nodeActions,
      showActions,
      intersections,
      // prop getters
      getNodeToolbarProps,
      // actions
      toggleShowActions,
      handleDefaultAction,
      setNodeData,
      setNodeParent
    }),
    [
      id,
      title,
      icon,
      color,
      iconColor,
      subtitle,
      inputs,
      inputEdges,
      outputs,
      outputEdges,
      node,
      nodeActions,
      showActions,
      intersections,
      getNodeToolbarProps,
      toggleShowActions,
      handleDefaultAction,
      setNodeData,
      setNodeParent
    ]
  );
}
export {
  useHvNode
};