@hitachivantara/uikit-react-lab 5.46.13 → 6.0.0-next.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/{esm/Flow → Flow}/Background/Background.js +1 -1
- package/dist/{esm/Flow → Flow}/Controls/Controls.js +1 -1
- package/dist/{esm/Flow → Flow}/DroppableFlow.js +1 -1
- package/dist/{esm/Flow → Flow}/Empty/Empty.js +1 -1
- package/dist/{esm/Flow → Flow}/Empty/Empty.styles.js +1 -1
- package/dist/{esm/Flow → Flow}/Flow.js +1 -1
- package/dist/{esm/Flow → Flow}/Flow.styles.js +1 -1
- package/dist/{esm/Flow → Flow}/Minimap/Minimap.js +1 -1
- package/dist/{esm/Flow → Flow}/Node/BaseNode.js +1 -1
- package/dist/{esm/Flow → Flow}/Node/Node.js +0 -3
- package/dist/{esm/Flow → Flow}/Sidebar/Sidebar.js +1 -1
- package/dist/Flow/base.js +732 -0
- package/dist/{esm/Flow → Flow}/hooks/useFlowInstance.js +1 -1
- package/dist/{esm/Flow → Flow}/hooks/useFlowNode.js +4 -4
- package/dist/{esm/Flow → Flow}/hooks/useNodeId.js +1 -1
- package/dist/{esm/StepNavigation → StepNavigation}/DefaultNavigation/DefaultNavigation.js +1 -3
- package/dist/{esm/StepNavigation → StepNavigation}/SimpleNavigation/SimpleNavigation.js +1 -3
- package/dist/{esm/StepNavigation → StepNavigation}/StepNavigation.js +2 -7
- package/dist/{esm/Wizard → Wizard}/WizardTitle/WizardTitle.js +31 -47
- package/dist/{esm/Wizard → Wizard}/WizardTitle/WizardTitle.styles.js +0 -10
- package/dist/{types/index.d.ts → index.d.ts} +63 -178
- package/dist/{esm/index.js → index.js} +12 -18
- package/package.json +15 -15
- package/dist/cjs/Blade/Blade.cjs +0 -174
- package/dist/cjs/Blade/Blade.styles.cjs +0 -71
- package/dist/cjs/Blades/Blades.cjs +0 -104
- package/dist/cjs/Blades/Blades.styles.cjs +0 -11
- package/dist/cjs/Dashboard/Dashboard.cjs +0 -63
- package/dist/cjs/Dashboard/Dashboard.styles.cjs +0 -196
- package/dist/cjs/Flow/Background/Background.cjs +0 -19
- package/dist/cjs/Flow/Controls/Controls.cjs +0 -96
- package/dist/cjs/Flow/DroppableFlow.cjs +0 -204
- package/dist/cjs/Flow/Empty/Empty.cjs +0 -12
- package/dist/cjs/Flow/Empty/Empty.styles.cjs +0 -16
- package/dist/cjs/Flow/Flow.cjs +0 -33
- package/dist/cjs/Flow/Flow.styles.cjs +0 -19
- package/dist/cjs/Flow/FlowContext/FlowContext.cjs +0 -25
- package/dist/cjs/Flow/FlowContext/NodeMetaContext.cjs +0 -43
- package/dist/cjs/Flow/Minimap/Minimap.cjs +0 -30
- package/dist/cjs/Flow/Minimap/Minimap.styles.cjs +0 -10
- package/dist/cjs/Flow/Node/BaseNode.cjs +0 -192
- package/dist/cjs/Flow/Node/BaseNode.styles.cjs +0 -135
- package/dist/cjs/Flow/Node/Node.cjs +0 -115
- package/dist/cjs/Flow/Node/Node.styles.cjs +0 -42
- package/dist/cjs/Flow/Node/Parameters/ParamRenderer.cjs +0 -19
- package/dist/cjs/Flow/Node/Parameters/Select.cjs +0 -41
- package/dist/cjs/Flow/Node/Parameters/Slider.cjs +0 -33
- package/dist/cjs/Flow/Node/Parameters/Text.cjs +0 -19
- package/dist/cjs/Flow/Node/utils.cjs +0 -54
- package/dist/cjs/Flow/Sidebar/Sidebar.cjs +0 -141
- package/dist/cjs/Flow/Sidebar/Sidebar.styles.cjs +0 -24
- package/dist/cjs/Flow/Sidebar/SidebarGroup/SidebarGroup.cjs +0 -62
- package/dist/cjs/Flow/Sidebar/SidebarGroup/SidebarGroup.styles.cjs +0 -34
- package/dist/cjs/Flow/Sidebar/SidebarGroup/SidebarGroupItem/DraggableSidebarGroupItem.cjs +0 -51
- package/dist/cjs/Flow/Sidebar/SidebarGroup/SidebarGroupItem/SidebarGroupItem.cjs +0 -35
- package/dist/cjs/Flow/Sidebar/SidebarGroup/SidebarGroupItem/SidebarGroupItem.styles.cjs +0 -23
- package/dist/cjs/Flow/base.cjs +0 -411
- package/dist/cjs/Flow/hooks/useFlowContext.cjs +0 -6
- package/dist/cjs/Flow/hooks/useFlowInstance.cjs +0 -7
- package/dist/cjs/Flow/hooks/useFlowNode.cjs +0 -134
- package/dist/cjs/Flow/hooks/useFlowNodeMeta.cjs +0 -10
- package/dist/cjs/Flow/hooks/useNode.cjs +0 -159
- package/dist/cjs/Flow/hooks/useNodeId.cjs +0 -8
- package/dist/cjs/Flow/nodes/DashboardNode.cjs +0 -88
- package/dist/cjs/Flow/nodes/DashboardNode.styles.cjs +0 -16
- package/dist/cjs/Flow/nodes/StickyNode.cjs +0 -441
- package/dist/cjs/StepNavigation/DefaultNavigation/DefaultNavigation.cjs +0 -56
- package/dist/cjs/StepNavigation/DefaultNavigation/Step/Step.cjs +0 -78
- package/dist/cjs/StepNavigation/DefaultNavigation/Step/Step.styles.cjs +0 -35
- package/dist/cjs/StepNavigation/DefaultNavigation/utils.cjs +0 -34
- package/dist/cjs/StepNavigation/SimpleNavigation/Dot/Dot.cjs +0 -43
- package/dist/cjs/StepNavigation/SimpleNavigation/Dot/Dot.styles.cjs +0 -18
- package/dist/cjs/StepNavigation/SimpleNavigation/SimpleNavigation.cjs +0 -52
- package/dist/cjs/StepNavigation/SimpleNavigation/utils.cjs +0 -13
- package/dist/cjs/StepNavigation/StepNavigation.cjs +0 -188
- package/dist/cjs/StepNavigation/StepNavigation.styles.cjs +0 -34
- package/dist/cjs/StepNavigation/utils.cjs +0 -8
- package/dist/cjs/Wizard/Wizard.cjs +0 -108
- package/dist/cjs/Wizard/Wizard.styles.cjs +0 -8
- package/dist/cjs/Wizard/WizardActions/WizardActions.cjs +0 -132
- package/dist/cjs/Wizard/WizardActions/WizardActions.styles.cjs +0 -22
- package/dist/cjs/Wizard/WizardContainer/WizardContainer.cjs +0 -31
- package/dist/cjs/Wizard/WizardContainer/WizardContainer.styles.cjs +0 -15
- package/dist/cjs/Wizard/WizardContent/WizardContent.cjs +0 -121
- package/dist/cjs/Wizard/WizardContent/WizardContent.styles.cjs +0 -38
- package/dist/cjs/Wizard/WizardContext/WizardContext.cjs +0 -15
- package/dist/cjs/Wizard/WizardTitle/WizardTitle.cjs +0 -97
- package/dist/cjs/Wizard/WizardTitle/WizardTitle.styles.cjs +0 -27
- package/dist/cjs/index.cjs +0 -93
- package/dist/esm/Flow/base.js +0 -411
- package/dist/esm/Flow/nodes/DashboardNode.js +0 -89
- package/dist/esm/Flow/nodes/DashboardNode.styles.js +0 -16
- package/dist/esm/Flow/nodes/StickyNode.js +0 -439
- /package/dist/{esm/Blade → Blade}/Blade.js +0 -0
- /package/dist/{esm/Blade → Blade}/Blade.styles.js +0 -0
- /package/dist/{esm/Blades → Blades}/Blades.js +0 -0
- /package/dist/{esm/Blades → Blades}/Blades.styles.js +0 -0
- /package/dist/{esm/Dashboard → Dashboard}/Dashboard.js +0 -0
- /package/dist/{esm/Dashboard → Dashboard}/Dashboard.styles.js +0 -0
- /package/dist/{esm/Flow → Flow}/FlowContext/FlowContext.js +0 -0
- /package/dist/{esm/Flow → Flow}/FlowContext/NodeMetaContext.js +0 -0
- /package/dist/{esm/Flow → Flow}/Minimap/Minimap.styles.js +0 -0
- /package/dist/{esm/Flow → Flow}/Node/BaseNode.styles.js +0 -0
- /package/dist/{esm/Flow → Flow}/Node/Node.styles.js +0 -0
- /package/dist/{esm/Flow → Flow}/Node/Parameters/ParamRenderer.js +0 -0
- /package/dist/{esm/Flow → Flow}/Node/Parameters/Select.js +0 -0
- /package/dist/{esm/Flow → Flow}/Node/Parameters/Slider.js +0 -0
- /package/dist/{esm/Flow → Flow}/Node/Parameters/Text.js +0 -0
- /package/dist/{esm/Flow → Flow}/Node/utils.js +0 -0
- /package/dist/{esm/Flow → Flow}/Sidebar/Sidebar.styles.js +0 -0
- /package/dist/{esm/Flow → Flow}/Sidebar/SidebarGroup/SidebarGroup.js +0 -0
- /package/dist/{esm/Flow → Flow}/Sidebar/SidebarGroup/SidebarGroup.styles.js +0 -0
- /package/dist/{esm/Flow → Flow}/Sidebar/SidebarGroup/SidebarGroupItem/DraggableSidebarGroupItem.js +0 -0
- /package/dist/{esm/Flow → Flow}/Sidebar/SidebarGroup/SidebarGroupItem/SidebarGroupItem.js +0 -0
- /package/dist/{esm/Flow → Flow}/Sidebar/SidebarGroup/SidebarGroupItem/SidebarGroupItem.styles.js +0 -0
- /package/dist/{esm/Flow → Flow}/hooks/useFlowContext.js +0 -0
- /package/dist/{esm/Flow → Flow}/hooks/useFlowNodeMeta.js +0 -0
- /package/dist/{esm/Flow → Flow}/hooks/useNode.js +0 -0
- /package/dist/{esm/StepNavigation → StepNavigation}/DefaultNavigation/Step/Step.js +0 -0
- /package/dist/{esm/StepNavigation → StepNavigation}/DefaultNavigation/Step/Step.styles.js +0 -0
- /package/dist/{esm/StepNavigation → StepNavigation}/DefaultNavigation/utils.js +0 -0
- /package/dist/{esm/StepNavigation → StepNavigation}/SimpleNavigation/Dot/Dot.js +0 -0
- /package/dist/{esm/StepNavigation → StepNavigation}/SimpleNavigation/Dot/Dot.styles.js +0 -0
- /package/dist/{esm/StepNavigation → StepNavigation}/SimpleNavigation/utils.js +0 -0
- /package/dist/{esm/StepNavigation → StepNavigation}/StepNavigation.styles.js +0 -0
- /package/dist/{esm/StepNavigation → StepNavigation}/utils.js +0 -0
- /package/dist/{esm/Wizard → Wizard}/Wizard.js +0 -0
- /package/dist/{esm/Wizard → Wizard}/Wizard.styles.js +0 -0
- /package/dist/{esm/Wizard → Wizard}/WizardActions/WizardActions.js +0 -0
- /package/dist/{esm/Wizard → Wizard}/WizardActions/WizardActions.styles.js +0 -0
- /package/dist/{esm/Wizard → Wizard}/WizardContainer/WizardContainer.js +0 -0
- /package/dist/{esm/Wizard → Wizard}/WizardContainer/WizardContainer.styles.js +0 -0
- /package/dist/{esm/Wizard → Wizard}/WizardContent/WizardContent.js +0 -0
- /package/dist/{esm/Wizard → Wizard}/WizardContent/WizardContent.styles.js +0 -0
- /package/dist/{esm/Wizard → Wizard}/WizardContext/WizardContext.js +0 -0
|
@@ -1,96 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
-
const jsxRuntime = require("react/jsx-runtime");
|
|
4
|
-
const reactflow = require("reactflow");
|
|
5
|
-
const shallow = require("zustand/shallow");
|
|
6
|
-
const uikitReactCore = require("@hitachivantara/uikit-react-core");
|
|
7
|
-
const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
|
|
8
|
-
const useFlowInstance = require("../hooks/useFlowInstance.cjs");
|
|
9
|
-
const DEFAULT_LABELS = {
|
|
10
|
-
fitView: "Fit view",
|
|
11
|
-
zoomIn: "Zoom in",
|
|
12
|
-
zoomOut: "Zoom out",
|
|
13
|
-
interactive: "Interactive"
|
|
14
|
-
};
|
|
15
|
-
const selector = (state) => ({
|
|
16
|
-
isInteractive: state.nodesDraggable || state.nodesConnectable || state.elementsSelectable,
|
|
17
|
-
minZoomReached: state.transform[2] <= state.minZoom,
|
|
18
|
-
maxZoomReached: state.transform[2] >= state.maxZoom
|
|
19
|
-
});
|
|
20
|
-
const HvFlowControls = ({
|
|
21
|
-
onZoomIn: onZoomInProp,
|
|
22
|
-
onZoomOut: onZoomOutProp,
|
|
23
|
-
onFitView: onFitViewProp,
|
|
24
|
-
labels: labelsProps,
|
|
25
|
-
hideInteractive,
|
|
26
|
-
hideFitView,
|
|
27
|
-
hideZoom,
|
|
28
|
-
position = "bottom-center",
|
|
29
|
-
orientation = "horizontal",
|
|
30
|
-
onInteractiveChange,
|
|
31
|
-
fitViewOptions,
|
|
32
|
-
children,
|
|
33
|
-
...others
|
|
34
|
-
}) => {
|
|
35
|
-
const { isInteractive, minZoomReached, maxZoomReached } = reactflow.useStore(
|
|
36
|
-
selector,
|
|
37
|
-
shallow.shallow
|
|
38
|
-
);
|
|
39
|
-
const store = reactflow.useStoreApi();
|
|
40
|
-
const { zoomIn, zoomOut, fitView } = useFlowInstance.useFlowInstance();
|
|
41
|
-
const labels = uikitReactCore.useLabels(DEFAULT_LABELS, labelsProps);
|
|
42
|
-
const handleZoomIn = () => {
|
|
43
|
-
zoomIn();
|
|
44
|
-
onZoomInProp?.();
|
|
45
|
-
};
|
|
46
|
-
const handleZoomOut = () => {
|
|
47
|
-
zoomOut();
|
|
48
|
-
onZoomOutProp?.();
|
|
49
|
-
};
|
|
50
|
-
const handleFitView = () => {
|
|
51
|
-
fitView(fitViewOptions);
|
|
52
|
-
onFitViewProp?.();
|
|
53
|
-
};
|
|
54
|
-
const handleInteractive = () => {
|
|
55
|
-
store.setState({
|
|
56
|
-
nodesDraggable: !isInteractive,
|
|
57
|
-
nodesConnectable: !isInteractive,
|
|
58
|
-
elementsSelectable: !isInteractive
|
|
59
|
-
});
|
|
60
|
-
onInteractiveChange?.(!isInteractive);
|
|
61
|
-
};
|
|
62
|
-
return /* @__PURE__ */ jsxRuntime.jsx(reactflow.Panel, { position, ...others, children: /* @__PURE__ */ jsxRuntime.jsxs(uikitReactCore.HvMultiButton, { vertical: orientation === "vertical", children: [
|
|
63
|
-
!hideZoom && /* @__PURE__ */ jsxRuntime.jsx(
|
|
64
|
-
uikitReactCore.HvButton,
|
|
65
|
-
{
|
|
66
|
-
icon: true,
|
|
67
|
-
title: labels?.zoomIn,
|
|
68
|
-
onClick: handleZoomIn,
|
|
69
|
-
disabled: maxZoomReached,
|
|
70
|
-
children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.ZoomIn, {})
|
|
71
|
-
}
|
|
72
|
-
),
|
|
73
|
-
!hideZoom && /* @__PURE__ */ jsxRuntime.jsx(
|
|
74
|
-
uikitReactCore.HvButton,
|
|
75
|
-
{
|
|
76
|
-
icon: true,
|
|
77
|
-
title: labels?.zoomOut,
|
|
78
|
-
onClick: handleZoomOut,
|
|
79
|
-
disabled: minZoomReached,
|
|
80
|
-
children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.ZoomOut, {})
|
|
81
|
-
}
|
|
82
|
-
),
|
|
83
|
-
!hideFitView && /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvButton, { icon: true, title: labels?.fitView, onClick: handleFitView, children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Focus, {}) }),
|
|
84
|
-
!hideInteractive && /* @__PURE__ */ jsxRuntime.jsx(
|
|
85
|
-
uikitReactCore.HvButton,
|
|
86
|
-
{
|
|
87
|
-
icon: true,
|
|
88
|
-
title: labels?.interactive,
|
|
89
|
-
onClick: handleInteractive,
|
|
90
|
-
children: isInteractive ? /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Unlock, {}) : /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Lock, {})
|
|
91
|
-
}
|
|
92
|
-
),
|
|
93
|
-
children
|
|
94
|
-
] }) });
|
|
95
|
-
};
|
|
96
|
-
exports.HvFlowControls = HvFlowControls;
|
|
@@ -1,204 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
-
const jsxRuntime = require("react/jsx-runtime");
|
|
4
|
-
const react = require("react");
|
|
5
|
-
const core = require("@dnd-kit/core");
|
|
6
|
-
const react$1 = require("@emotion/react");
|
|
7
|
-
const reactflow = require("reactflow");
|
|
8
|
-
const uid = require("uid");
|
|
9
|
-
const uikitReactCore = require("@hitachivantara/uikit-react-core");
|
|
10
|
-
const base = require("./base.cjs");
|
|
11
|
-
const Flow_styles = require("./Flow.styles.cjs");
|
|
12
|
-
const NodeMetaContext = require("./FlowContext/NodeMetaContext.cjs");
|
|
13
|
-
const useFlowInstance = require("./hooks/useFlowInstance.cjs");
|
|
14
|
-
const getNode = (nodes, nodeId) => {
|
|
15
|
-
return nodes.find((n) => n.id === nodeId);
|
|
16
|
-
};
|
|
17
|
-
const validateEdge = (nodes, edges, connection, nodeMetaRegistry) => {
|
|
18
|
-
const {
|
|
19
|
-
source: sourceId,
|
|
20
|
-
sourceHandle,
|
|
21
|
-
target: targetId,
|
|
22
|
-
targetHandle
|
|
23
|
-
} = connection;
|
|
24
|
-
if (!sourceHandle || !targetHandle || !sourceId || !targetId) return false;
|
|
25
|
-
const sourceNode = getNode(nodes, sourceId);
|
|
26
|
-
const targetNode = getNode(nodes, targetId);
|
|
27
|
-
if (!sourceNode || !targetNode) return false;
|
|
28
|
-
const sourceType = sourceNode.type;
|
|
29
|
-
const targetType = targetNode.type;
|
|
30
|
-
if (!sourceType || !targetType) return false;
|
|
31
|
-
const inputs = nodeMetaRegistry[targetId]?.inputs || [];
|
|
32
|
-
const outputs = nodeMetaRegistry[sourceId]?.outputs || [];
|
|
33
|
-
const source = outputs.flatMap((out) => out.outputs || out).find((out) => out.id === sourceHandle);
|
|
34
|
-
const target = inputs.flatMap((inp) => inp.inputs || inp).find((inp) => inp.id === targetHandle);
|
|
35
|
-
const sourceProvides = source?.provides || "";
|
|
36
|
-
const targetAccepts = target?.accepts || [];
|
|
37
|
-
const sourceMaxConnections = source?.maxConnections;
|
|
38
|
-
const targetMaxConnections = target?.maxConnections;
|
|
39
|
-
let isValid = targetAccepts.length === 0 || targetAccepts.includes(sourceProvides);
|
|
40
|
-
if (isValid && targetMaxConnections != null) {
|
|
41
|
-
const targetConnections = edges.filter(
|
|
42
|
-
(edg) => edg.target === targetId && edg.targetHandle === targetHandle
|
|
43
|
-
).length;
|
|
44
|
-
isValid = targetConnections < targetMaxConnections;
|
|
45
|
-
}
|
|
46
|
-
if (isValid && sourceMaxConnections != null) {
|
|
47
|
-
const sourceConnections = edges.filter(
|
|
48
|
-
(edg) => edg.source === sourceId && edg.sourceHandle === sourceHandle
|
|
49
|
-
).length;
|
|
50
|
-
isValid = sourceConnections < sourceMaxConnections;
|
|
51
|
-
}
|
|
52
|
-
return isValid;
|
|
53
|
-
};
|
|
54
|
-
const HvDroppableFlow = ({
|
|
55
|
-
id,
|
|
56
|
-
className,
|
|
57
|
-
children,
|
|
58
|
-
onFlowChange,
|
|
59
|
-
onDndDrop,
|
|
60
|
-
classes: classesProp,
|
|
61
|
-
nodes: initialNodes = [],
|
|
62
|
-
edges: initialEdges = [],
|
|
63
|
-
onConnect: onConnectProp,
|
|
64
|
-
onNodesChange: onNodesChangeProp,
|
|
65
|
-
onEdgesChange: onEdgesChangeProp,
|
|
66
|
-
defaultEdgeOptions: defaultEdgeOptionsProp,
|
|
67
|
-
nodeTypes,
|
|
68
|
-
...others
|
|
69
|
-
}) => {
|
|
70
|
-
const { classes, cx } = Flow_styles.useClasses(classesProp);
|
|
71
|
-
const elementId = uikitReactCore.useUniqueId(id);
|
|
72
|
-
const reactFlowInstance = useFlowInstance.useFlowInstance();
|
|
73
|
-
const [nodes, setNodes] = react.useState(initialNodes);
|
|
74
|
-
const [edges, setEdges] = react.useState(initialEdges);
|
|
75
|
-
const nodesRef = react.useRef(initialNodes);
|
|
76
|
-
const edgesRef = react.useRef(initialEdges);
|
|
77
|
-
const updateNodes = (nds) => {
|
|
78
|
-
setNodes(nds);
|
|
79
|
-
nodesRef.current = nds;
|
|
80
|
-
};
|
|
81
|
-
const updateEdges = (eds) => {
|
|
82
|
-
setEdges(eds);
|
|
83
|
-
edgesRef.current = eds;
|
|
84
|
-
};
|
|
85
|
-
const { setNodeRef } = core.useDroppable({
|
|
86
|
-
id: elementId
|
|
87
|
-
});
|
|
88
|
-
const handleDragEnd = react.useCallback(
|
|
89
|
-
(event) => {
|
|
90
|
-
if (event.over?.id !== elementId) return;
|
|
91
|
-
const hvFlow = event.active.data.current?.hvFlow;
|
|
92
|
-
const type = hvFlow?.type;
|
|
93
|
-
if (!type || !nodeTypes?.[type]) {
|
|
94
|
-
return;
|
|
95
|
-
}
|
|
96
|
-
const position = reactFlowInstance.screenToFlowPosition({
|
|
97
|
-
x: hvFlow?.x || 0,
|
|
98
|
-
y: hvFlow?.y || 0
|
|
99
|
-
});
|
|
100
|
-
const data = {
|
|
101
|
-
nodeLabel: hvFlow?.label,
|
|
102
|
-
...hvFlow?.data
|
|
103
|
-
};
|
|
104
|
-
const newNode = {
|
|
105
|
-
id: uid.uid(),
|
|
106
|
-
position,
|
|
107
|
-
data,
|
|
108
|
-
type
|
|
109
|
-
};
|
|
110
|
-
if (onDndDrop) {
|
|
111
|
-
onDndDrop(event, newNode);
|
|
112
|
-
return;
|
|
113
|
-
}
|
|
114
|
-
updateNodes(nodes.concat(newNode));
|
|
115
|
-
},
|
|
116
|
-
[elementId, nodeTypes, nodes, onDndDrop, reactFlowInstance]
|
|
117
|
-
);
|
|
118
|
-
core.useDndMonitor({
|
|
119
|
-
onDragEnd: handleDragEnd
|
|
120
|
-
});
|
|
121
|
-
const handleFlowChange = react.useCallback(
|
|
122
|
-
(nds, eds) => {
|
|
123
|
-
const isDragging = nds.find((node) => node.dragging);
|
|
124
|
-
if (!isDragging) {
|
|
125
|
-
onFlowChange?.(nds, eds);
|
|
126
|
-
}
|
|
127
|
-
},
|
|
128
|
-
[onFlowChange]
|
|
129
|
-
);
|
|
130
|
-
const handleConnect = react.useCallback(
|
|
131
|
-
(connection) => {
|
|
132
|
-
const eds = reactflow.addEdge(connection, edgesRef.current);
|
|
133
|
-
updateEdges(eds);
|
|
134
|
-
handleFlowChange(nodesRef.current, eds);
|
|
135
|
-
onConnectProp?.(connection);
|
|
136
|
-
},
|
|
137
|
-
[handleFlowChange, onConnectProp]
|
|
138
|
-
);
|
|
139
|
-
const handleNodesChange = react.useCallback(
|
|
140
|
-
(changes) => {
|
|
141
|
-
const nds = reactflow.applyNodeChanges(changes, nodesRef.current);
|
|
142
|
-
updateNodes(nds);
|
|
143
|
-
handleFlowChange(nds, edgesRef.current);
|
|
144
|
-
onNodesChangeProp?.(changes);
|
|
145
|
-
},
|
|
146
|
-
[handleFlowChange, onNodesChangeProp]
|
|
147
|
-
);
|
|
148
|
-
const handleEdgesChange = react.useCallback(
|
|
149
|
-
(changes) => {
|
|
150
|
-
const eds = reactflow.applyEdgeChanges(changes, edgesRef.current);
|
|
151
|
-
updateEdges(eds);
|
|
152
|
-
handleFlowChange(nodesRef.current, eds);
|
|
153
|
-
onEdgesChangeProp?.(changes);
|
|
154
|
-
},
|
|
155
|
-
[handleFlowChange, onEdgesChangeProp]
|
|
156
|
-
);
|
|
157
|
-
const { registry } = NodeMetaContext.useNodeMetaRegistry();
|
|
158
|
-
const isValidConnection = (connection) => validateEdge(nodes, edges, connection, registry);
|
|
159
|
-
const defaultEdgeOptions = {
|
|
160
|
-
markerEnd: {
|
|
161
|
-
type: reactflow.MarkerType.ArrowClosed,
|
|
162
|
-
height: 20,
|
|
163
|
-
width: 20
|
|
164
|
-
},
|
|
165
|
-
type: "smoothstep",
|
|
166
|
-
pathOptions: {
|
|
167
|
-
borderRadius: 40
|
|
168
|
-
},
|
|
169
|
-
...defaultEdgeOptionsProp
|
|
170
|
-
};
|
|
171
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
172
|
-
/* @__PURE__ */ jsxRuntime.jsx(react$1.Global, { styles: base.flowStyles }),
|
|
173
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
174
|
-
"div",
|
|
175
|
-
{
|
|
176
|
-
id: elementId,
|
|
177
|
-
ref: setNodeRef,
|
|
178
|
-
className: cx(classes.root, className),
|
|
179
|
-
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
180
|
-
reactflow.ReactFlow,
|
|
181
|
-
{
|
|
182
|
-
nodes,
|
|
183
|
-
edges,
|
|
184
|
-
nodeTypes,
|
|
185
|
-
onNodesChange: handleNodesChange,
|
|
186
|
-
onEdgesChange: handleEdgesChange,
|
|
187
|
-
onConnect: handleConnect,
|
|
188
|
-
isValidConnection,
|
|
189
|
-
defaultEdgeOptions,
|
|
190
|
-
snapGrid: [1, 1],
|
|
191
|
-
snapToGrid: true,
|
|
192
|
-
onError: (code, message) => {
|
|
193
|
-
},
|
|
194
|
-
...others,
|
|
195
|
-
children
|
|
196
|
-
}
|
|
197
|
-
)
|
|
198
|
-
}
|
|
199
|
-
)
|
|
200
|
-
] });
|
|
201
|
-
};
|
|
202
|
-
exports.flowClasses = Flow_styles.staticClasses;
|
|
203
|
-
exports.HvDroppableFlow = HvDroppableFlow;
|
|
204
|
-
exports.getNode = getNode;
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
-
const jsxRuntime = require("react/jsx-runtime");
|
|
4
|
-
const reactflow = require("reactflow");
|
|
5
|
-
const uikitReactCore = require("@hitachivantara/uikit-react-core");
|
|
6
|
-
const Empty_styles = require("./Empty.styles.cjs");
|
|
7
|
-
const HvFlowEmpty = ({ className, ...others }) => {
|
|
8
|
-
const { classes, cx } = Empty_styles.useClasses();
|
|
9
|
-
const nodes = reactflow.useNodes();
|
|
10
|
-
return !nodes || (nodes.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvEmptyState, { className: cx(classes.root, className), ...others }) : null);
|
|
11
|
-
};
|
|
12
|
-
exports.HvFlowEmpty = HvFlowEmpty;
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
-
const uikitReactCore = require("@hitachivantara/uikit-react-core");
|
|
4
|
-
const { staticClasses, useClasses } = uikitReactCore.createClasses("HvFlowEmpty", {
|
|
5
|
-
root: {
|
|
6
|
-
width: "100%",
|
|
7
|
-
height: "100%",
|
|
8
|
-
alignItems: "center",
|
|
9
|
-
justifyContent: "center",
|
|
10
|
-
backgroundColor: uikitReactCore.theme.colors.backgroundColor,
|
|
11
|
-
position: "absolute",
|
|
12
|
-
zIndex: uikitReactCore.theme.zIndices.popover
|
|
13
|
-
}
|
|
14
|
-
});
|
|
15
|
-
exports.staticClasses = staticClasses;
|
|
16
|
-
exports.useClasses = useClasses;
|
package/dist/cjs/Flow/Flow.cjs
DELETED
|
@@ -1,33 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
-
const jsxRuntime = require("react/jsx-runtime");
|
|
4
|
-
const core = require("@dnd-kit/core");
|
|
5
|
-
const modifiers = require("@dnd-kit/modifiers");
|
|
6
|
-
const reactflow = require("reactflow");
|
|
7
|
-
const DroppableFlow = require("./DroppableFlow.cjs");
|
|
8
|
-
const FlowContext = require("./FlowContext/FlowContext.cjs");
|
|
9
|
-
const HvFlow = ({
|
|
10
|
-
nodeGroups,
|
|
11
|
-
sidebar,
|
|
12
|
-
defaultActions,
|
|
13
|
-
dndContextProps,
|
|
14
|
-
...others
|
|
15
|
-
}) => {
|
|
16
|
-
const sensors = core.useSensors(
|
|
17
|
-
core.useSensor(core.PointerSensor),
|
|
18
|
-
core.useSensor(core.KeyboardSensor)
|
|
19
|
-
);
|
|
20
|
-
return /* @__PURE__ */ jsxRuntime.jsx(reactflow.ReactFlowProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(FlowContext.HvFlowProvider, { nodeGroups, defaultActions, children: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
21
|
-
core.DndContext,
|
|
22
|
-
{
|
|
23
|
-
sensors,
|
|
24
|
-
modifiers: [modifiers.restrictToWindowEdges],
|
|
25
|
-
...dndContextProps,
|
|
26
|
-
children: [
|
|
27
|
-
/* @__PURE__ */ jsxRuntime.jsx(DroppableFlow.HvDroppableFlow, { ...others }),
|
|
28
|
-
sidebar
|
|
29
|
-
]
|
|
30
|
-
}
|
|
31
|
-
) }) });
|
|
32
|
-
};
|
|
33
|
-
exports.HvFlow = HvFlow;
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
-
const uikitReactCore = require("@hitachivantara/uikit-react-core");
|
|
4
|
-
const BaseNode_styles = require("./Node/BaseNode.styles.cjs");
|
|
5
|
-
require("react/jsx-runtime");
|
|
6
|
-
require("reactflow");
|
|
7
|
-
require("@hitachivantara/uikit-react-utils");
|
|
8
|
-
const { staticClasses, useClasses } = uikitReactCore.createClasses("HvFlow", {
|
|
9
|
-
root: {
|
|
10
|
-
height: "100%",
|
|
11
|
-
[`& .selected > .${BaseNode_styles.staticClasses.root}`]: {
|
|
12
|
-
border: `1px solid ${uikitReactCore.theme.colors.textDisabled}`,
|
|
13
|
-
borderRadius: uikitReactCore.theme.radii.round,
|
|
14
|
-
boxSizing: "border-box"
|
|
15
|
-
}
|
|
16
|
-
}
|
|
17
|
-
});
|
|
18
|
-
exports.staticClasses = staticClasses;
|
|
19
|
-
exports.useClasses = useClasses;
|
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
-
const jsxRuntime = require("react/jsx-runtime");
|
|
4
|
-
const react = require("react");
|
|
5
|
-
const NodeMetaContext = require("./NodeMetaContext.cjs");
|
|
6
|
-
const HvFlowContext = react.createContext({});
|
|
7
|
-
const HvFlowProvider = ({
|
|
8
|
-
nodeGroups,
|
|
9
|
-
defaultActions,
|
|
10
|
-
children
|
|
11
|
-
}) => {
|
|
12
|
-
const [expandedNodeGroups, setExpandedNodeGroups] = react.useState([]);
|
|
13
|
-
const value = react.useMemo(
|
|
14
|
-
() => ({
|
|
15
|
-
nodeGroups,
|
|
16
|
-
defaultActions,
|
|
17
|
-
expandedNodeGroups,
|
|
18
|
-
setExpandedNodeGroups
|
|
19
|
-
}),
|
|
20
|
-
[nodeGroups, defaultActions, expandedNodeGroups]
|
|
21
|
-
);
|
|
22
|
-
return /* @__PURE__ */ jsxRuntime.jsx(NodeMetaContext.HvFlowNodeMetaProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(HvFlowContext.Provider, { value, children }) });
|
|
23
|
-
};
|
|
24
|
-
exports.HvFlowContext = HvFlowContext;
|
|
25
|
-
exports.HvFlowProvider = HvFlowProvider;
|
|
@@ -1,43 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
-
const jsxRuntime = require("react/jsx-runtime");
|
|
4
|
-
const react = require("react");
|
|
5
|
-
const HvFlowNodeMetaContext = react.createContext(void 0);
|
|
6
|
-
const HvFlowNodeMetaProvider = ({
|
|
7
|
-
children
|
|
8
|
-
}) => {
|
|
9
|
-
const registryRef = react.useRef({});
|
|
10
|
-
const registerNode = react.useCallback((id, nodeInfo) => {
|
|
11
|
-
registryRef.current[id] = nodeInfo;
|
|
12
|
-
}, []);
|
|
13
|
-
const unregisterNode = react.useCallback((id) => {
|
|
14
|
-
delete registryRef.current[id];
|
|
15
|
-
}, []);
|
|
16
|
-
const getRegistry = react.useCallback(() => {
|
|
17
|
-
return registryRef.current;
|
|
18
|
-
}, []);
|
|
19
|
-
const value = react.useMemo(
|
|
20
|
-
() => ({
|
|
21
|
-
registerNode,
|
|
22
|
-
unregisterNode,
|
|
23
|
-
getRegistry
|
|
24
|
-
}),
|
|
25
|
-
[registerNode, unregisterNode, getRegistry]
|
|
26
|
-
);
|
|
27
|
-
return /* @__PURE__ */ jsxRuntime.jsx(HvFlowNodeMetaContext.Provider, { value, children });
|
|
28
|
-
};
|
|
29
|
-
function useNodeMetaRegistry() {
|
|
30
|
-
const context = react.useContext(HvFlowNodeMetaContext);
|
|
31
|
-
if (context === void 0) {
|
|
32
|
-
throw new Error(
|
|
33
|
-
"useNodeRegistry must be used within a HvFlowNodeMetaProvider"
|
|
34
|
-
);
|
|
35
|
-
}
|
|
36
|
-
return {
|
|
37
|
-
registerNode: context.registerNode,
|
|
38
|
-
unregisterNode: context.unregisterNode,
|
|
39
|
-
registry: context.getRegistry()
|
|
40
|
-
};
|
|
41
|
-
}
|
|
42
|
-
exports.HvFlowNodeMetaProvider = HvFlowNodeMetaProvider;
|
|
43
|
-
exports.useNodeMetaRegistry = useNodeMetaRegistry;
|
|
@@ -1,30 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
-
const jsxRuntime = require("react/jsx-runtime");
|
|
4
|
-
const reactflow = require("reactflow");
|
|
5
|
-
const uikitStyles = require("@hitachivantara/uikit-styles");
|
|
6
|
-
const Minimap_styles = require("./Minimap.styles.cjs");
|
|
7
|
-
const HvFlowMinimap = ({
|
|
8
|
-
nodeColor = "border",
|
|
9
|
-
maskColor = "borderSubtle",
|
|
10
|
-
maskStrokeColor = "borderSubtle",
|
|
11
|
-
nodeStrokeColor = "border",
|
|
12
|
-
classes: classesProp,
|
|
13
|
-
className,
|
|
14
|
-
...others
|
|
15
|
-
}) => {
|
|
16
|
-
const { classes, cx } = Minimap_styles.useClasses(classesProp);
|
|
17
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
18
|
-
reactflow.MiniMap,
|
|
19
|
-
{
|
|
20
|
-
className: cx(classes.root, className),
|
|
21
|
-
nodeColor: typeof nodeColor === "string" ? uikitStyles.getColor(nodeColor, "border") : nodeColor,
|
|
22
|
-
nodeStrokeColor: typeof nodeStrokeColor === "string" ? uikitStyles.getColor(nodeStrokeColor, "border") : nodeStrokeColor,
|
|
23
|
-
maskColor: uikitStyles.getColor(maskColor, "borderSubtle"),
|
|
24
|
-
maskStrokeColor: uikitStyles.getColor(maskStrokeColor, "borderSubtle"),
|
|
25
|
-
...others
|
|
26
|
-
}
|
|
27
|
-
);
|
|
28
|
-
};
|
|
29
|
-
exports.flowMinimapClasses = Minimap_styles.staticClasses;
|
|
30
|
-
exports.HvFlowMinimap = HvFlowMinimap;
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
-
const uikitReactCore = require("@hitachivantara/uikit-react-core");
|
|
4
|
-
const { staticClasses, useClasses } = uikitReactCore.createClasses("HvFlowMinimap", {
|
|
5
|
-
root: {
|
|
6
|
-
"&.react-flow__minimap": { backgroundColor: uikitReactCore.theme.colors.bgPage }
|
|
7
|
-
}
|
|
8
|
-
});
|
|
9
|
-
exports.staticClasses = staticClasses;
|
|
10
|
-
exports.useClasses = useClasses;
|
|
@@ -1,192 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
-
const jsxRuntime = require("react/jsx-runtime");
|
|
4
|
-
const reactflow = require("reactflow");
|
|
5
|
-
const uikitReactCore = require("@hitachivantara/uikit-react-core");
|
|
6
|
-
const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
|
|
7
|
-
const BaseNode_styles = require("./BaseNode.styles.cjs");
|
|
8
|
-
const utils = require("./utils.cjs");
|
|
9
|
-
const useNode = require("../hooks/useNode.cjs");
|
|
10
|
-
const DEFAULT_LABELS = {
|
|
11
|
-
outputsTitle: "Outputs",
|
|
12
|
-
inputsTitle: "Inputs",
|
|
13
|
-
deleteActionLabel: "Delete",
|
|
14
|
-
duplicateActionLabel: "Duplicate"
|
|
15
|
-
};
|
|
16
|
-
const HvFlowBaseNode = ({
|
|
17
|
-
id,
|
|
18
|
-
title: titleProp,
|
|
19
|
-
headerItems,
|
|
20
|
-
icon: iconProp,
|
|
21
|
-
color: colorProp,
|
|
22
|
-
inputs: inputsProp,
|
|
23
|
-
outputs: outputsProp,
|
|
24
|
-
nodeActions: nodeActionsProp,
|
|
25
|
-
footer,
|
|
26
|
-
classes: classesProp,
|
|
27
|
-
labels: labelsProp,
|
|
28
|
-
className,
|
|
29
|
-
children
|
|
30
|
-
}) => {
|
|
31
|
-
const {
|
|
32
|
-
toggleShowActions,
|
|
33
|
-
getNodeToolbarProps,
|
|
34
|
-
handleDefaultAction,
|
|
35
|
-
nodeActions,
|
|
36
|
-
title,
|
|
37
|
-
icon,
|
|
38
|
-
color,
|
|
39
|
-
iconColor,
|
|
40
|
-
inputEdges,
|
|
41
|
-
inputs,
|
|
42
|
-
outputEdges,
|
|
43
|
-
outputs,
|
|
44
|
-
node
|
|
45
|
-
} = useNode.useHvNode({
|
|
46
|
-
id,
|
|
47
|
-
title: titleProp,
|
|
48
|
-
inputs: inputsProp,
|
|
49
|
-
outputs: outputsProp,
|
|
50
|
-
icon: iconProp,
|
|
51
|
-
color: colorProp,
|
|
52
|
-
labels: labelsProp,
|
|
53
|
-
nodeActions: nodeActionsProp
|
|
54
|
-
});
|
|
55
|
-
const labels = uikitReactCore.useLabels(DEFAULT_LABELS, labelsProp);
|
|
56
|
-
const { classes, cx } = BaseNode_styles.useClasses(classesProp);
|
|
57
|
-
const renderOutput = (output) => {
|
|
58
|
-
const edgeConnected = utils.isConnected(id, "source", output.id, outputEdges);
|
|
59
|
-
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.outputContainer, children: [
|
|
60
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
61
|
-
reactflow.Handle,
|
|
62
|
-
{
|
|
63
|
-
type: "source",
|
|
64
|
-
isConnectableEnd: false,
|
|
65
|
-
id: output.id,
|
|
66
|
-
position: reactflow.Position.Right,
|
|
67
|
-
className: cx(classes.handle, {
|
|
68
|
-
[classes.handleConnected]: edgeConnected
|
|
69
|
-
})
|
|
70
|
-
}
|
|
71
|
-
),
|
|
72
|
-
output.isMandatory && !edgeConnected && /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.mandatory }),
|
|
73
|
-
/* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvTypography, { component: "div", children: output.label })
|
|
74
|
-
] }, output.id);
|
|
75
|
-
};
|
|
76
|
-
const renderInput = (input) => {
|
|
77
|
-
const edgeConnected = utils.isConnected(id, "target", input.id, inputEdges);
|
|
78
|
-
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.inputContainer, children: [
|
|
79
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
80
|
-
reactflow.Handle,
|
|
81
|
-
{
|
|
82
|
-
type: "target",
|
|
83
|
-
isConnectableStart: false,
|
|
84
|
-
id: input.id,
|
|
85
|
-
position: reactflow.Position.Left,
|
|
86
|
-
className: cx(classes.handle, {
|
|
87
|
-
[classes.handleConnected]: edgeConnected
|
|
88
|
-
})
|
|
89
|
-
}
|
|
90
|
-
),
|
|
91
|
-
/* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvTypography, { component: "div", children: input.label }),
|
|
92
|
-
input.isMandatory && !edgeConnected && /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.mandatory })
|
|
93
|
-
] }, input.id);
|
|
94
|
-
};
|
|
95
|
-
if (!node) return null;
|
|
96
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
97
|
-
"div",
|
|
98
|
-
{
|
|
99
|
-
style: uikitReactUtils.mergeStyles(void 0, {
|
|
100
|
-
"--node-color": color
|
|
101
|
-
}),
|
|
102
|
-
className: cx(
|
|
103
|
-
"nowheel",
|
|
104
|
-
// Disables the default canvas pan behaviour when scrolling inside the node
|
|
105
|
-
classes.root,
|
|
106
|
-
className
|
|
107
|
-
),
|
|
108
|
-
onMouseEnter: toggleShowActions,
|
|
109
|
-
onMouseLeave: toggleShowActions,
|
|
110
|
-
children: [
|
|
111
|
-
/* @__PURE__ */ jsxRuntime.jsx(reactflow.NodeToolbar, { ...getNodeToolbarProps(), children: nodeActions?.map((action) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
112
|
-
uikitReactCore.HvIconButton,
|
|
113
|
-
{
|
|
114
|
-
title: action.label,
|
|
115
|
-
onClick: () => handleDefaultAction(action),
|
|
116
|
-
children: utils.renderedIcon(action.icon)
|
|
117
|
-
},
|
|
118
|
-
action.id
|
|
119
|
-
)) }),
|
|
120
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.headerContainer, children: [
|
|
121
|
-
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
122
|
-
"div",
|
|
123
|
-
{
|
|
124
|
-
style: uikitReactUtils.mergeStyles(void 0, {
|
|
125
|
-
"--icon-color": iconColor
|
|
126
|
-
}),
|
|
127
|
-
className: classes.titleContainer,
|
|
128
|
-
children: [
|
|
129
|
-
icon,
|
|
130
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
131
|
-
uikitReactCore.HvTypography,
|
|
132
|
-
{
|
|
133
|
-
component: "p",
|
|
134
|
-
variant: "title4",
|
|
135
|
-
className: classes.title,
|
|
136
|
-
children: title
|
|
137
|
-
}
|
|
138
|
-
)
|
|
139
|
-
]
|
|
140
|
-
}
|
|
141
|
-
),
|
|
142
|
-
headerItems && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex" }, children: headerItems })
|
|
143
|
-
] }),
|
|
144
|
-
children && /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.contentContainer, children }),
|
|
145
|
-
inputs && inputs.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
146
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.inputsTitleContainer, children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvTypography, { children: labels?.inputsTitle }) }),
|
|
147
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.inputsContainer, children: inputs?.map((input, idx) => {
|
|
148
|
-
if (!utils.isInputGroup(input)) return renderInput(input);
|
|
149
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
150
|
-
"div",
|
|
151
|
-
{
|
|
152
|
-
className: classes.inputGroupContainer,
|
|
153
|
-
children: [
|
|
154
|
-
/* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvTypography, { component: "div", variant: "label", children: input.label }),
|
|
155
|
-
input.inputs.map(
|
|
156
|
-
(inp) => renderInput(inp)
|
|
157
|
-
)
|
|
158
|
-
]
|
|
159
|
-
},
|
|
160
|
-
`group${idx}`
|
|
161
|
-
);
|
|
162
|
-
}) })
|
|
163
|
-
] }),
|
|
164
|
-
outputs && outputs.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
165
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.outputsTitleContainer, children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvTypography, { children: labels?.outputsTitle }) }),
|
|
166
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.outputsContainer, children: outputs?.map((output, idx) => {
|
|
167
|
-
if (!utils.isOutputGroup(output)) {
|
|
168
|
-
return renderOutput(output);
|
|
169
|
-
}
|
|
170
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
171
|
-
"div",
|
|
172
|
-
{
|
|
173
|
-
className: classes.outputGroupContainer,
|
|
174
|
-
children: [
|
|
175
|
-
/* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvTypography, { component: "div", variant: "label", children: output.label }),
|
|
176
|
-
output.outputs.map((out) => {
|
|
177
|
-
return renderOutput(out);
|
|
178
|
-
})
|
|
179
|
-
]
|
|
180
|
-
},
|
|
181
|
-
`group${idx}`
|
|
182
|
-
);
|
|
183
|
-
}) })
|
|
184
|
-
] }),
|
|
185
|
-
footer && /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.footerContainer, children: footer })
|
|
186
|
-
]
|
|
187
|
-
}
|
|
188
|
-
);
|
|
189
|
-
};
|
|
190
|
-
exports.flowBaseNodeClasses = BaseNode_styles.staticClasses;
|
|
191
|
-
exports.DEFAULT_LABELS = DEFAULT_LABELS;
|
|
192
|
-
exports.HvFlowBaseNode = HvFlowBaseNode;
|