@hitachivantara/uikit-react-lab
Version:
Contributed React components for the NEXT UI Kit.
116 lines (115 loc) • 4.51 kB
JavaScript
"use strict";
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const jsxRuntime = require("react/jsx-runtime");
const react = require("react");
const uikitReactCore = require("@hitachivantara/uikit-react-core");
const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
const BaseNode = require("./BaseNode.cjs");
const Node_styles = require("./Node.styles.cjs");
const useFlowNode = require("../hooks/useFlowNode.cjs");
const ParamRenderer = require("./Parameters/ParamRenderer.cjs");
const useFlowContext = require("../hooks/useFlowContext.cjs");
const DEFAULT_LABELS = {
collapseLabel: "Collapse",
expandLabel: "Expand"
};
const HvFlowNode = ({
id,
type,
headerItems,
actions,
actionCallback,
// TODO - remove in v6
onAction,
maxVisibleActions = 1,
expanded = false,
actionsIconOnly = true,
params,
classes: classesProp,
labels: labelsProps,
children,
expandParamsButtonProps,
disableInlineEdit,
title: titleProp,
subtitle: subtitleProp,
description,
groupId,
color: colorProp,
icon: iconProp,
...props
}) => {
const { classes } = Node_styles.useClasses(classesProp);
const [showParams, setShowParams] = react.useState(expanded);
const { nodeGroups, defaultActions } = useFlowContext.useFlowContext();
const labels = uikitReactCore.useLabels(DEFAULT_LABELS, labelsProps);
const node = useFlowNode.useFlowNode();
const { setNodeData } = useFlowNode.useFlowNodeUtils();
const inlineEditorWidth = actions === void 0 || Array.isArray(actions) && actions.length === 0 || maxVisibleActions === 0 ? "100%" : `calc(200px - calc(${maxVisibleActions} * 32px + ${uikitReactCore.theme.spacing(2)}))`;
const nodeGroup = groupId && nodeGroups && nodeGroups[groupId] || void 0;
const title = titleProp || nodeGroup?.label;
const icon = iconProp || nodeGroup?.icon;
const color = colorProp || nodeGroup?.color;
const subtitle = subtitleProp || node?.data.nodeLabel;
const hasParams = !!(params && params.length > 0);
return /* @__PURE__ */ jsxRuntime.jsxs(
BaseNode.HvFlowBaseNode,
{
id,
type,
title,
icon,
color,
nodeActions: defaultActions,
classes,
headerItems: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
headerItems,
description && /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvTooltip, { title: description, children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Info, { color: "base_dark" }) }),
hasParams && /* @__PURE__ */ jsxRuntime.jsx(
uikitReactCore.HvButton,
{
icon: true,
onClick: () => setShowParams((p) => !p),
"aria-label": showParams ? labels?.collapseLabel : labels?.expandLabel,
...expandParamsButtonProps,
children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.DropDownXS, { rotate: showParams, color: "base_dark" })
}
)
] }),
labels,
...props,
children: [
(subtitle || actions) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.subtitleContainer, children: [
subtitle && (disableInlineEdit ? /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvTypography, { className: classes.subtitle, children: subtitle }) : /* @__PURE__ */ jsxRuntime.jsx(
uikitReactCore.HvInlineEditor,
{
defaultValue: subtitle,
showIcon: true,
style: { width: inlineEditorWidth },
classes: {
root: classes.inlineEditRoot,
button: classes.inlineEditButton
},
onBlur: (evt, value) => setNodeData((prev) => ({ ...prev, nodeLabel: value }))
}
)),
actions && /* @__PURE__ */ jsxRuntime.jsx(
uikitReactCore.HvActionsGeneric,
{
className: classes.actions,
classes: { button: classes.actionsButton },
actions,
actionsCallback: actionCallback,
onAction,
maxVisibleActions,
iconOnly: actionsIconOnly
}
)
] }),
children,
showParams && params && /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.paramsContainer, children: /* @__PURE__ */ jsxRuntime.jsx(ParamRenderer.ParamRenderer, { params, data: node?.data }) })
]
}
);
};
exports.flowNodeClasses = Node_styles.staticClasses;
exports.HvFlowNode = HvFlowNode;