@hitachivantara/uikit-react-lab
Version:
Contributed React components to UI Kit by the community.
148 lines (147 loc) • 5.48 kB
JavaScript
import { isConnected, isInputGroup, isOutputGroup, renderedIcon } from "./utils.js";
import { useHvNode } from "../hooks/useNode.js";
import { useClasses } from "./BaseNode.styles.js";
import { HvIconButton, HvTypography, useLabels } from "@hitachivantara/uikit-react-core";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
import { Handle, NodeToolbar, Position } from "reactflow";
import { mergeStyles } from "@hitachivantara/uikit-react-utils";
//#region src/Flow/Node/BaseNode.tsx
var DEFAULT_LABELS = {
outputsTitle: "Outputs",
inputsTitle: "Inputs",
deleteActionLabel: "Delete",
duplicateActionLabel: "Duplicate"
};
var 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", 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
})
]
});
};
//#endregion
export { DEFAULT_LABELS, HvFlowBaseNode };