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

Contributed React components for the NEXT UI Kit.

import { jsxs, jsx, Fragment } from "react/jsx-runtime";
import { NodeToolbar, Handle, Position } from "reactflow";
import { useLabels, HvIconButton, HvTypography } from "@hitachivantara/uikit-react-core";
import { mergeStyles } from "@hitachivantara/uikit-react-utils";
import { useClasses } from "./BaseNode.styles.js";
import { staticClasses } from "./BaseNode.styles.js";
import { renderedIcon, isInputGroup, isOutputGroup, isConnected } from "./utils.js";
import { useHvNode } from "../hooks/useNode.js";
const DEFAULT_LABELS = {
  outputsTitle: "Outputs",
  inputsTitle: "Inputs",
  deleteActionLabel: "Delete",
  duplicateActionLabel: "Duplicate"
};
const HvFlowBaseNode = ({
  id,
  title: titleProp,
  headerItems,
  icon: iconProp,
  color: colorProp,
  inputs: inputsProp,
  outputs: outputsProp,
  nodeActions: nodeActionsProp,
  footer,
  classes: classesProp,
  labels: labelsProp,
  className,
  children
}) => {
  const {
    toggleShowActions,
    getNodeToolbarProps,
    handleDefaultAction,
    nodeActions,
    title,
    icon,
    color,
    iconColor,
    inputEdges,
    inputs,
    outputEdges,
    outputs,
    node
  } = useHvNode({
    id,
    title: titleProp,
    inputs: inputsProp,
    outputs: outputsProp,
    icon: iconProp,
    color: colorProp,
    labels: labelsProp,
    nodeActions: nodeActionsProp
  });
  const labels = useLabels(DEFAULT_LABELS, labelsProp);
  const { classes, cx } = useClasses(classesProp);
  const renderOutput = (output) => {
    const edgeConnected = isConnected(id, "source", output.id, outputEdges);
    return /* @__PURE__ */ jsxs("div", { className: classes.outputContainer, children: [
      /* @__PURE__ */ jsx(
        Handle,
        {
          type: "source",
          isConnectableEnd: false,
          id: output.id,
          position: Position.Right,
          className: cx(classes.handle, {
            [classes.handleConnected]: edgeConnected
          })
        }
      ),
      output.isMandatory && !edgeConnected && /* @__PURE__ */ jsx("div", { className: classes.mandatory }),
      /* @__PURE__ */ jsx(HvTypography, { component: "div", children: output.label })
    ] }, output.id);
  };
  const renderInput = (input) => {
    const edgeConnected = isConnected(id, "target", input.id, inputEdges);
    return /* @__PURE__ */ jsxs("div", { className: classes.inputContainer, children: [
      /* @__PURE__ */ jsx(
        Handle,
        {
          type: "target",
          isConnectableStart: false,
          id: input.id,
          position: Position.Left,
          className: cx(classes.handle, {
            [classes.handleConnected]: edgeConnected
          })
        }
      ),
      /* @__PURE__ */ jsx(HvTypography, { component: "div", children: input.label }),
      input.isMandatory && !edgeConnected && /* @__PURE__ */ jsx("div", { className: classes.mandatory })
    ] }, input.id);
  };
  if (!node) return null;
  return /* @__PURE__ */ jsxs(
    "div",
    {
      style: mergeStyles(void 0, {
        "--node-color": color
      }),
      className: cx(
        "nowheel",
        // Disables the default canvas pan behaviour when scrolling inside the node
        classes.root,
        className
      ),
      onMouseEnter: toggleShowActions,
      onMouseLeave: toggleShowActions,
      children: [
        /* @__PURE__ */ jsx(NodeToolbar, { ...getNodeToolbarProps(), children: nodeActions?.map((action) => /* @__PURE__ */ jsx(
          HvIconButton,
          {
            title: action.label,
            onClick: () => handleDefaultAction(action),
            children: renderedIcon(action.icon)
          },
          action.id
        )) }),
        /* @__PURE__ */ jsxs("div", { className: classes.headerContainer, children: [
          /* @__PURE__ */ jsxs(
            "div",
            {
              style: mergeStyles(void 0, {
                "--icon-color": iconColor
              }),
              className: classes.titleContainer,
              children: [
                icon,
                /* @__PURE__ */ jsx(
                  HvTypography,
                  {
                    component: "p",
                    variant: "title4",
                    className: classes.title,
                    children: title
                  }
                )
              ]
            }
          ),
          headerItems && /* @__PURE__ */ jsx("div", { style: { display: "flex" }, children: headerItems })
        ] }),
        children && /* @__PURE__ */ jsx("div", { className: classes.contentContainer, children }),
        inputs && inputs.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
          /* @__PURE__ */ jsx("div", { className: classes.inputsTitleContainer, children: /* @__PURE__ */ jsx(HvTypography, { children: labels?.inputsTitle }) }),
          /* @__PURE__ */ jsx("div", { className: classes.inputsContainer, children: inputs?.map((input, idx) => {
            if (!isInputGroup(input)) return renderInput(input);
            return /* @__PURE__ */ jsxs(
              "div",
              {
                className: classes.inputGroupContainer,
                children: [
                  /* @__PURE__ */ jsx(HvTypography, { component: "div", variant: "label", children: input.label }),
                  input.inputs.map(
                    (inp) => renderInput(inp)
                  )
                ]
              },
              `group${idx}`
            );
          }) })
        ] }),
        outputs && outputs.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
          /* @__PURE__ */ jsx("div", { className: classes.outputsTitleContainer, children: /* @__PURE__ */ jsx(HvTypography, { children: labels?.outputsTitle }) }),
          /* @__PURE__ */ jsx("div", { className: classes.outputsContainer, children: outputs?.map((output, idx) => {
            if (!isOutputGroup(output)) {
              return renderOutput(output);
            }
            return /* @__PURE__ */ jsxs(
              "div",
              {
                className: classes.outputGroupContainer,
                children: [
                  /* @__PURE__ */ jsx(HvTypography, { component: "div", variant: "label", children: output.label }),
                  output.outputs.map((out) => {
                    return renderOutput(out);
                  })
                ]
              },
              `group${idx}`
            );
          }) })
        ] }),
        footer && /* @__PURE__ */ jsx("div", { className: classes.footerContainer, children: footer })
      ]
    }
  );
};
export {
  DEFAULT_LABELS,
  HvFlowBaseNode,
  staticClasses as flowBaseNodeClasses
};