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

Contributed React components for the NEXT UI Kit.

"use strict";
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const jsxRuntime = require("react/jsx-runtime");
const reactflow = require("reactflow");
const uikitReactCore = require("@hitachivantara/uikit-react-core");
const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
const BaseNode_styles = require("./BaseNode.styles.cjs");
const utils = require("./utils.cjs");
const useNode = require("../hooks/useNode.cjs");
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
  } = useNode.useHvNode({
    id,
    title: titleProp,
    inputs: inputsProp,
    outputs: outputsProp,
    icon: iconProp,
    color: colorProp,
    labels: labelsProp,
    nodeActions: nodeActionsProp
  });
  const labels = uikitReactCore.useLabels(DEFAULT_LABELS, labelsProp);
  const { classes, cx } = BaseNode_styles.useClasses(classesProp);
  const renderOutput = (output) => {
    const edgeConnected = utils.isConnected(id, "source", output.id, outputEdges);
    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.outputContainer, children: [
      /* @__PURE__ */ jsxRuntime.jsx(
        reactflow.Handle,
        {
          type: "source",
          isConnectableEnd: false,
          id: output.id,
          position: reactflow.Position.Right,
          className: cx(classes.handle, {
            [classes.handleConnected]: edgeConnected
          })
        }
      ),
      output.isMandatory && !edgeConnected && /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.mandatory }),
      /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvTypography, { component: "div", children: output.label })
    ] }, output.id);
  };
  const renderInput = (input) => {
    const edgeConnected = utils.isConnected(id, "target", input.id, inputEdges);
    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.inputContainer, children: [
      /* @__PURE__ */ jsxRuntime.jsx(
        reactflow.Handle,
        {
          type: "target",
          isConnectableStart: false,
          id: input.id,
          position: reactflow.Position.Left,
          className: cx(classes.handle, {
            [classes.handleConnected]: edgeConnected
          })
        }
      ),
      /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvTypography, { component: "div", children: input.label }),
      input.isMandatory && !edgeConnected && /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.mandatory })
    ] }, input.id);
  };
  if (!node) return null;
  return /* @__PURE__ */ jsxRuntime.jsxs(
    "div",
    {
      style: uikitReactUtils.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__ */ jsxRuntime.jsx(reactflow.NodeToolbar, { ...getNodeToolbarProps(), children: nodeActions?.map((action) => /* @__PURE__ */ jsxRuntime.jsx(
          uikitReactCore.HvIconButton,
          {
            title: action.label,
            onClick: () => handleDefaultAction(action),
            children: utils.renderedIcon(action.icon)
          },
          action.id
        )) }),
        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.headerContainer, children: [
          /* @__PURE__ */ jsxRuntime.jsxs(
            "div",
            {
              style: uikitReactUtils.mergeStyles(void 0, {
                "--icon-color": iconColor
              }),
              className: classes.titleContainer,
              children: [
                icon,
                /* @__PURE__ */ jsxRuntime.jsx(
                  uikitReactCore.HvTypography,
                  {
                    component: "p",
                    variant: "title4",
                    className: classes.title,
                    children: title
                  }
                )
              ]
            }
          ),
          headerItems && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex" }, children: headerItems })
        ] }),
        children && /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.contentContainer, children }),
        inputs && inputs.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
          /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.inputsTitleContainer, children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvTypography, { children: labels?.inputsTitle }) }),
          /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.inputsContainer, children: inputs?.map((input, idx) => {
            if (!utils.isInputGroup(input)) return renderInput(input);
            return /* @__PURE__ */ jsxRuntime.jsxs(
              "div",
              {
                className: classes.inputGroupContainer,
                children: [
                  /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvTypography, { component: "div", variant: "label", children: input.label }),
                  input.inputs.map(
                    (inp) => renderInput(inp)
                  )
                ]
              },
              `group${idx}`
            );
          }) })
        ] }),
        outputs && outputs.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
          /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.outputsTitleContainer, children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvTypography, { children: labels?.outputsTitle }) }),
          /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.outputsContainer, children: outputs?.map((output, idx) => {
            if (!utils.isOutputGroup(output)) {
              return renderOutput(output);
            }
            return /* @__PURE__ */ jsxRuntime.jsxs(
              "div",
              {
                className: classes.outputGroupContainer,
                children: [
                  /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvTypography, { component: "div", variant: "label", children: output.label }),
                  output.outputs.map((out) => {
                    return renderOutput(out);
                  })
                ]
              },
              `group${idx}`
            );
          }) })
        ] }),
        footer && /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.footerContainer, children: footer })
      ]
    }
  );
};
exports.flowBaseNodeClasses = BaseNode_styles.staticClasses;
exports.DEFAULT_LABELS = DEFAULT_LABELS;
exports.HvFlowBaseNode = HvFlowBaseNode;