@hitachivantara/uikit-react-lab 6.1.9 → 6.1.10
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/Blade/Blade.js +134 -173
- package/dist/Blade/Blade.styles.js +54 -69
- package/dist/Blades/Blades.js +70 -101
- package/dist/Blades/Blades.styles.js +7 -10
- package/dist/Dashboard/Dashboard.js +57 -60
- package/dist/Dashboard/Dashboard.styles.js +6 -10
- package/dist/Flow/Background/Background.js +10 -16
- package/dist/Flow/Controls/Controls.js +77 -91
- package/dist/Flow/DroppableFlow.js +135 -200
- package/dist/Flow/Empty/Empty.js +12 -9
- package/dist/Flow/Empty/Empty.styles.js +12 -15
- package/dist/Flow/Flow.js +28 -30
- package/dist/Flow/Flow.styles.js +12 -18
- package/dist/Flow/FlowContext/FlowContext.js +22 -23
- package/dist/Flow/FlowContext/NodeMetaContext.js +36 -39
- package/dist/Flow/Minimap/Minimap.js +15 -28
- package/dist/Flow/Minimap/Minimap.styles.js +4 -9
- package/dist/Flow/Node/BaseNode.js +144 -190
- package/dist/Flow/Node/BaseNode.styles.js +122 -133
- package/dist/Flow/Node/Node.js +90 -108
- package/dist/Flow/Node/Node.styles.js +30 -40
- package/dist/Flow/Node/Parameters/ParamRenderer.js +17 -14
- package/dist/Flow/Node/Parameters/Select.js +33 -38
- package/dist/Flow/Node/Parameters/Slider.js +27 -29
- package/dist/Flow/Node/Parameters/Text.js +17 -17
- package/dist/Flow/Node/utils.js +44 -49
- package/dist/Flow/Sidebar/Sidebar.js +115 -137
- package/dist/Flow/Sidebar/Sidebar.styles.js +21 -22
- package/dist/Flow/Sidebar/SidebarGroup/SidebarGroup.js +57 -60
- package/dist/Flow/Sidebar/SidebarGroup/SidebarGroup.styles.js +27 -33
- package/dist/Flow/Sidebar/SidebarGroup/SidebarGroupItem/DraggableSidebarGroupItem.js +27 -47
- package/dist/Flow/Sidebar/SidebarGroup/SidebarGroupItem/SidebarGroupItem.js +14 -32
- package/dist/Flow/Sidebar/SidebarGroup/SidebarGroupItem/SidebarGroupItem.styles.js +17 -23
- package/dist/Flow/base.js +5 -5
- package/dist/Flow/hooks/useFlowContext.js +5 -5
- package/dist/Flow/hooks/useFlowInstance.js +5 -4
- package/dist/Flow/hooks/useFlowNode.js +92 -113
- package/dist/Flow/hooks/useFlowNodeMeta.js +7 -7
- package/dist/Flow/hooks/useNode.js +136 -154
- package/dist/Flow/hooks/useNodeId.js +8 -7
- package/dist/Flow/nodes/DashboardNode.js +64 -86
- package/dist/Flow/nodes/DashboardNode.styles.js +8 -14
- package/dist/Flow/nodes/StickyNode.js +370 -435
- package/dist/StepNavigation/DefaultNavigation/DefaultNavigation.js +36 -52
- package/dist/StepNavigation/DefaultNavigation/Step/Step.js +40 -51
- package/dist/StepNavigation/DefaultNavigation/Step/Step.styles.js +22 -33
- package/dist/StepNavigation/DefaultNavigation/utils.js +38 -30
- package/dist/StepNavigation/SimpleNavigation/Dot/Dot.js +24 -41
- package/dist/StepNavigation/SimpleNavigation/Dot/Dot.styles.js +13 -16
- package/dist/StepNavigation/SimpleNavigation/SimpleNavigation.js +35 -47
- package/dist/StepNavigation/SimpleNavigation/utils.js +10 -11
- package/dist/StepNavigation/StepNavigation.js +136 -179
- package/dist/StepNavigation/StepNavigation.styles.js +29 -32
- package/dist/Wizard/Wizard.js +81 -104
- package/dist/Wizard/Wizard.styles.js +4 -7
- package/dist/Wizard/WizardActions/WizardActions.js +111 -131
- package/dist/Wizard/WizardActions/WizardActions.styles.js +19 -20
- package/dist/Wizard/WizardContainer/WizardContainer.js +19 -28
- package/dist/Wizard/WizardContainer/WizardContainer.styles.js +8 -14
- package/dist/Wizard/WizardContent/WizardContent.js +103 -120
- package/dist/Wizard/WizardContent/WizardContent.styles.js +33 -36
- package/dist/Wizard/WizardContext/WizardContext.js +10 -13
- package/dist/Wizard/WizardTitle/WizardTitle.js +74 -79
- package/dist/Wizard/WizardTitle/WizardTitle.styles.js +12 -15
- package/dist/index.d.ts +1 -1
- package/dist/index.js +30 -81
- package/package.json +6 -6
- package/dist/StepNavigation/utils.js +0 -8
package/dist/Flow/Node/Node.js
CHANGED
|
@@ -1,113 +1,95 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
3
|
-
import { useLabels, theme, HvTypography, HvInlineEditor, HvActionsGeneric, HvTooltip, HvButton } from "@hitachivantara/uikit-react-core";
|
|
4
|
-
import { Info, DropDownXS } from "@hitachivantara/uikit-react-icons";
|
|
1
|
+
import { useFlowNode, useFlowNodeUtils } from "../hooks/useFlowNode.js";
|
|
2
|
+
import { useFlowContext } from "../hooks/useFlowContext.js";
|
|
5
3
|
import { HvFlowBaseNode } from "./BaseNode.js";
|
|
6
4
|
import { useClasses } from "./Node.styles.js";
|
|
7
|
-
import { staticClasses } from "./Node.styles.js";
|
|
8
|
-
import { useFlowContext } from "../hooks/useFlowContext.js";
|
|
9
|
-
import { useFlowNode, useFlowNodeUtils } from "../hooks/useFlowNode.js";
|
|
10
5
|
import { ParamRenderer } from "./Parameters/ParamRenderer.js";
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
};
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
actions,
|
|
20
|
-
onAction,
|
|
21
|
-
maxVisibleActions = 1,
|
|
22
|
-
expanded = false,
|
|
23
|
-
actionsIconOnly = true,
|
|
24
|
-
params,
|
|
25
|
-
classes: classesProp,
|
|
26
|
-
labels: labelsProps,
|
|
27
|
-
children,
|
|
28
|
-
expandParamsButtonProps,
|
|
29
|
-
disableInlineEdit,
|
|
30
|
-
title: titleProp,
|
|
31
|
-
subtitle: subtitleProp,
|
|
32
|
-
description,
|
|
33
|
-
groupId,
|
|
34
|
-
color: colorProp,
|
|
35
|
-
icon: iconProp,
|
|
36
|
-
...props
|
|
37
|
-
}) => {
|
|
38
|
-
const { classes } = useClasses(classesProp);
|
|
39
|
-
const [showParams, setShowParams] = useState(expanded);
|
|
40
|
-
const { nodeGroups, defaultActions } = useFlowContext();
|
|
41
|
-
const labels = useLabels(DEFAULT_LABELS, labelsProps);
|
|
42
|
-
const node = useFlowNode();
|
|
43
|
-
const { setNodeData } = useFlowNodeUtils();
|
|
44
|
-
const inlineEditorWidth = actions === void 0 || Array.isArray(actions) && actions.length === 0 || maxVisibleActions === 0 ? "100%" : `calc(200px - calc(${maxVisibleActions} * 32px + ${theme.spacing(2)}))`;
|
|
45
|
-
const nodeGroup = groupId && nodeGroups && nodeGroups[groupId] || void 0;
|
|
46
|
-
const title = titleProp || nodeGroup?.label;
|
|
47
|
-
const icon = iconProp || nodeGroup?.icon;
|
|
48
|
-
const color = colorProp || nodeGroup?.color;
|
|
49
|
-
const subtitle = subtitleProp || node?.data.nodeLabel;
|
|
50
|
-
const hasParams = !!(params && params.length > 0);
|
|
51
|
-
return /* @__PURE__ */ jsxs(
|
|
52
|
-
HvFlowBaseNode,
|
|
53
|
-
{
|
|
54
|
-
id,
|
|
55
|
-
type,
|
|
56
|
-
title,
|
|
57
|
-
icon,
|
|
58
|
-
color,
|
|
59
|
-
nodeActions: defaultActions,
|
|
60
|
-
classes,
|
|
61
|
-
headerItems: /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
62
|
-
headerItems,
|
|
63
|
-
description && /* @__PURE__ */ jsx(HvTooltip, { title: description, children: /* @__PURE__ */ jsx(Info, { color: "textDark" }) }),
|
|
64
|
-
hasParams && /* @__PURE__ */ jsx(
|
|
65
|
-
HvButton,
|
|
66
|
-
{
|
|
67
|
-
icon: true,
|
|
68
|
-
onClick: () => setShowParams((p) => !p),
|
|
69
|
-
"aria-label": showParams ? labels?.collapseLabel : labels?.expandLabel,
|
|
70
|
-
...expandParamsButtonProps,
|
|
71
|
-
children: /* @__PURE__ */ jsx(DropDownXS, { rotate: showParams, color: "textDark" })
|
|
72
|
-
}
|
|
73
|
-
)
|
|
74
|
-
] }),
|
|
75
|
-
labels,
|
|
76
|
-
...props,
|
|
77
|
-
children: [
|
|
78
|
-
(subtitle || actions) && /* @__PURE__ */ jsxs("div", { className: classes.subtitleContainer, children: [
|
|
79
|
-
subtitle && (disableInlineEdit ? /* @__PURE__ */ jsx(HvTypography, { className: classes.subtitle, children: subtitle }) : /* @__PURE__ */ jsx(
|
|
80
|
-
HvInlineEditor,
|
|
81
|
-
{
|
|
82
|
-
defaultValue: subtitle,
|
|
83
|
-
showIcon: true,
|
|
84
|
-
style: { width: inlineEditorWidth },
|
|
85
|
-
classes: {
|
|
86
|
-
root: classes.inlineEditRoot,
|
|
87
|
-
button: classes.inlineEditButton
|
|
88
|
-
},
|
|
89
|
-
onBlur: (evt, value) => setNodeData((prev) => ({ ...prev, nodeLabel: value }))
|
|
90
|
-
}
|
|
91
|
-
)),
|
|
92
|
-
actions && /* @__PURE__ */ jsx(
|
|
93
|
-
HvActionsGeneric,
|
|
94
|
-
{
|
|
95
|
-
className: classes.actions,
|
|
96
|
-
classes: { button: classes.actionsButton },
|
|
97
|
-
actions,
|
|
98
|
-
onAction,
|
|
99
|
-
maxVisibleActions,
|
|
100
|
-
iconOnly: actionsIconOnly
|
|
101
|
-
}
|
|
102
|
-
)
|
|
103
|
-
] }),
|
|
104
|
-
children,
|
|
105
|
-
showParams && params && /* @__PURE__ */ jsx("div", { className: classes.paramsContainer, children: /* @__PURE__ */ jsx(ParamRenderer, { params, data: node?.data }) })
|
|
106
|
-
]
|
|
107
|
-
}
|
|
108
|
-
);
|
|
6
|
+
import { useState } from "react";
|
|
7
|
+
import { HvActionsGeneric, HvButton, HvInlineEditor, HvTooltip, HvTypography, theme, useLabels } from "@hitachivantara/uikit-react-core";
|
|
8
|
+
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
9
|
+
import { DropDownXS, Info } from "@hitachivantara/uikit-react-icons";
|
|
10
|
+
//#region src/Flow/Node/Node.tsx
|
|
11
|
+
var DEFAULT_LABELS = {
|
|
12
|
+
collapseLabel: "Collapse",
|
|
13
|
+
expandLabel: "Expand"
|
|
109
14
|
};
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
15
|
+
var HvFlowNode = ({ id, type, headerItems, actions, 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 }) => {
|
|
16
|
+
const { classes } = useClasses(classesProp);
|
|
17
|
+
const [showParams, setShowParams] = useState(expanded);
|
|
18
|
+
const { nodeGroups, defaultActions } = useFlowContext();
|
|
19
|
+
const labels = useLabels(DEFAULT_LABELS, labelsProps);
|
|
20
|
+
const node = useFlowNode();
|
|
21
|
+
const { setNodeData } = useFlowNodeUtils();
|
|
22
|
+
const inlineEditorWidth = actions === void 0 || Array.isArray(actions) && actions.length === 0 || maxVisibleActions === 0 ? "100%" : `calc(200px - calc(${maxVisibleActions} * 32px + ${theme.spacing(2)}))`;
|
|
23
|
+
const nodeGroup = groupId && nodeGroups && nodeGroups[groupId] || void 0;
|
|
24
|
+
const title = titleProp || nodeGroup?.label;
|
|
25
|
+
const icon = iconProp || nodeGroup?.icon;
|
|
26
|
+
const color = colorProp || nodeGroup?.color;
|
|
27
|
+
const subtitle = subtitleProp || node?.data.nodeLabel;
|
|
28
|
+
const hasParams = !!(params && params.length > 0);
|
|
29
|
+
return /* @__PURE__ */ jsxs(HvFlowBaseNode, {
|
|
30
|
+
id,
|
|
31
|
+
type,
|
|
32
|
+
title,
|
|
33
|
+
icon,
|
|
34
|
+
color,
|
|
35
|
+
nodeActions: defaultActions,
|
|
36
|
+
classes,
|
|
37
|
+
headerItems: /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
38
|
+
headerItems,
|
|
39
|
+
description && /* @__PURE__ */ jsx(HvTooltip, {
|
|
40
|
+
title: description,
|
|
41
|
+
children: /* @__PURE__ */ jsx(Info, { color: "textDark" })
|
|
42
|
+
}),
|
|
43
|
+
hasParams && /* @__PURE__ */ jsx(HvButton, {
|
|
44
|
+
icon: true,
|
|
45
|
+
onClick: () => setShowParams((p) => !p),
|
|
46
|
+
"aria-label": showParams ? labels?.collapseLabel : labels?.expandLabel,
|
|
47
|
+
...expandParamsButtonProps,
|
|
48
|
+
children: /* @__PURE__ */ jsx(DropDownXS, {
|
|
49
|
+
rotate: showParams,
|
|
50
|
+
color: "textDark"
|
|
51
|
+
})
|
|
52
|
+
})
|
|
53
|
+
] }),
|
|
54
|
+
labels,
|
|
55
|
+
...props,
|
|
56
|
+
children: [
|
|
57
|
+
(subtitle || actions) && /* @__PURE__ */ jsxs("div", {
|
|
58
|
+
className: classes.subtitleContainer,
|
|
59
|
+
children: [subtitle && (disableInlineEdit ? /* @__PURE__ */ jsx(HvTypography, {
|
|
60
|
+
className: classes.subtitle,
|
|
61
|
+
children: subtitle
|
|
62
|
+
}) : /* @__PURE__ */ jsx(HvInlineEditor, {
|
|
63
|
+
defaultValue: subtitle,
|
|
64
|
+
showIcon: true,
|
|
65
|
+
style: { width: inlineEditorWidth },
|
|
66
|
+
classes: {
|
|
67
|
+
root: classes.inlineEditRoot,
|
|
68
|
+
button: classes.inlineEditButton
|
|
69
|
+
},
|
|
70
|
+
onBlur: (evt, value) => setNodeData((prev) => ({
|
|
71
|
+
...prev,
|
|
72
|
+
nodeLabel: value
|
|
73
|
+
}))
|
|
74
|
+
})), actions && /* @__PURE__ */ jsx(HvActionsGeneric, {
|
|
75
|
+
className: classes.actions,
|
|
76
|
+
classes: { button: classes.actionsButton },
|
|
77
|
+
actions,
|
|
78
|
+
onAction,
|
|
79
|
+
maxVisibleActions,
|
|
80
|
+
iconOnly: actionsIconOnly
|
|
81
|
+
})]
|
|
82
|
+
}),
|
|
83
|
+
children,
|
|
84
|
+
showParams && params && /* @__PURE__ */ jsx("div", {
|
|
85
|
+
className: classes.paramsContainer,
|
|
86
|
+
children: /* @__PURE__ */ jsx(ParamRenderer, {
|
|
87
|
+
params,
|
|
88
|
+
data: node?.data
|
|
89
|
+
})
|
|
90
|
+
})
|
|
91
|
+
]
|
|
92
|
+
});
|
|
113
93
|
};
|
|
94
|
+
//#endregion
|
|
95
|
+
export { HvFlowNode };
|
|
@@ -1,42 +1,32 @@
|
|
|
1
|
-
import { createClasses, theme } from "@hitachivantara/uikit-react-core";
|
|
2
1
|
import { staticClasses as staticClasses$1 } from "./BaseNode.styles.js";
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
);
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
display: "flex",
|
|
32
|
-
flexDirection: "column",
|
|
33
|
-
gap: theme.space.xs,
|
|
34
|
-
padding: theme.space.sm
|
|
35
|
-
},
|
|
36
|
-
// Spread here to know if we are overriding classes from parents
|
|
37
|
-
...baseClasses
|
|
2
|
+
import { createClasses, theme } from "@hitachivantara/uikit-react-core";
|
|
3
|
+
//#region src/Flow/Node/Node.styles.tsx
|
|
4
|
+
var baseClasses = Object.fromEntries(Object.keys(staticClasses$1).map((key) => [key, {}]));
|
|
5
|
+
var { staticClasses, useClasses } = createClasses("HvFlowNode", {
|
|
6
|
+
subtitleContainer: {
|
|
7
|
+
minHeight: 48,
|
|
8
|
+
padding: theme.spacing("xs"),
|
|
9
|
+
display: "flex",
|
|
10
|
+
flexDirection: "row",
|
|
11
|
+
justifyContent: "space-between",
|
|
12
|
+
alignItems: "center"
|
|
13
|
+
},
|
|
14
|
+
subtitle: { paddingLeft: theme.spacing("xs") },
|
|
15
|
+
inlineEditRoot: {
|
|
16
|
+
display: "inline-flex",
|
|
17
|
+
flexGrow: 1
|
|
18
|
+
},
|
|
19
|
+
inlineEditButton: { justifyContent: "space-between" },
|
|
20
|
+
actions: {},
|
|
21
|
+
actionsButton: { gap: 0 },
|
|
22
|
+
paramsContainer: {
|
|
23
|
+
borderTop: `1px solid ${theme.colors.border}`,
|
|
24
|
+
display: "flex",
|
|
25
|
+
flexDirection: "column",
|
|
26
|
+
gap: theme.space.xs,
|
|
27
|
+
padding: theme.space.sm
|
|
28
|
+
},
|
|
29
|
+
...baseClasses
|
|
38
30
|
});
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
useClasses
|
|
42
|
-
};
|
|
31
|
+
//#endregion
|
|
32
|
+
export { staticClasses, useClasses };
|
|
@@ -1,19 +1,22 @@
|
|
|
1
|
-
import { jsx, Fragment } from "react/jsx-runtime";
|
|
2
1
|
import Select from "./Select.js";
|
|
3
2
|
import Slider from "./Slider.js";
|
|
4
3
|
import Text from "./Text.js";
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
4
|
+
import { Fragment, jsx } from "react/jsx-runtime";
|
|
5
|
+
//#region src/Flow/Node/Parameters/ParamRenderer.tsx
|
|
6
|
+
var renderers = {
|
|
7
|
+
text: Text,
|
|
8
|
+
select: Select,
|
|
9
|
+
slider: Slider
|
|
9
10
|
};
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
11
|
+
var ParamRenderer = ({ params, data }) => {
|
|
12
|
+
return /* @__PURE__ */ jsx(Fragment, { children: params.map((param) => {
|
|
13
|
+
const Renderer = renderers[param.type];
|
|
14
|
+
if (!Renderer) return null;
|
|
15
|
+
return /* @__PURE__ */ jsx(Renderer, {
|
|
16
|
+
param,
|
|
17
|
+
data
|
|
18
|
+
}, param.id);
|
|
19
|
+
}) });
|
|
19
20
|
};
|
|
21
|
+
//#endregion
|
|
22
|
+
export { ParamRenderer };
|
|
@@ -1,41 +1,36 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { useFlowNodeUtils } from "../../hooks/useFlowNode.js";
|
|
2
2
|
import { useState } from "react";
|
|
3
3
|
import { HvDropdown } from "@hitachivantara/uikit-react-core";
|
|
4
|
-
import {
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
maxHeight: 100,
|
|
35
|
-
multiSelect: multiple
|
|
36
|
-
}
|
|
37
|
-
);
|
|
38
|
-
};
|
|
39
|
-
export {
|
|
40
|
-
Select as default
|
|
4
|
+
import { jsx } from "react/jsx-runtime";
|
|
5
|
+
//#region src/Flow/Node/Parameters/Select.tsx
|
|
6
|
+
var Select = ({ param, data }) => {
|
|
7
|
+
const { id, label, multiple = false, options } = param;
|
|
8
|
+
const { setNodeData } = useFlowNodeUtils();
|
|
9
|
+
const [opts, setOpts] = useState(data[id] ? Array.isArray(data[id]) ? data[id] : [data[id]] : void 0);
|
|
10
|
+
const handleChange = (item) => {
|
|
11
|
+
const newOpts = Array.isArray(item) ? item.map((x) => x.id) : item?.id ?? void 0;
|
|
12
|
+
setNodeData((prev) => ({
|
|
13
|
+
...prev,
|
|
14
|
+
[id]: newOpts
|
|
15
|
+
}));
|
|
16
|
+
setOpts(newOpts ? Array.isArray(newOpts) ? newOpts : [newOpts] : void 0);
|
|
17
|
+
};
|
|
18
|
+
return /* @__PURE__ */ jsx(HvDropdown, {
|
|
19
|
+
className: "nodrag",
|
|
20
|
+
disablePortal: true,
|
|
21
|
+
label,
|
|
22
|
+
values: options?.map((option) => {
|
|
23
|
+
const optionId = typeof option === "string" ? option : option.id;
|
|
24
|
+
return {
|
|
25
|
+
id: optionId,
|
|
26
|
+
label: typeof option === "string" ? option : option.label,
|
|
27
|
+
selected: !!opts?.find((opt) => opt === optionId)
|
|
28
|
+
};
|
|
29
|
+
}),
|
|
30
|
+
onChange: handleChange,
|
|
31
|
+
maxHeight: 100,
|
|
32
|
+
multiSelect: multiple
|
|
33
|
+
});
|
|
41
34
|
};
|
|
35
|
+
//#endregion
|
|
36
|
+
export { Select as default };
|
|
@@ -1,33 +1,31 @@
|
|
|
1
|
+
import { useFlowNodeUtils } from "../../hooks/useFlowNode.js";
|
|
2
|
+
import { HvSlider } from "@hitachivantara/uikit-react-core";
|
|
1
3
|
import { jsx } from "react/jsx-runtime";
|
|
2
4
|
import { css } from "@emotion/css";
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
sliderBase: css({
|
|
11
|
-
padding: 0
|
|
12
|
-
})
|
|
13
|
-
};
|
|
14
|
-
const Slider = ({ param, data }) => {
|
|
15
|
-
const { id } = param;
|
|
16
|
-
const { setNodeData } = useFlowNodeUtils();
|
|
17
|
-
return /* @__PURE__ */ jsx(
|
|
18
|
-
HvSlider,
|
|
19
|
-
{
|
|
20
|
-
className: "nodrag",
|
|
21
|
-
defaultValues: data[id],
|
|
22
|
-
onChange: (val) => setNodeData((prev) => ({ ...prev, [id]: val })),
|
|
23
|
-
classes: {
|
|
24
|
-
labelContainer: classes.labelContainer,
|
|
25
|
-
sliderBase: classes.sliderBase
|
|
26
|
-
},
|
|
27
|
-
...param
|
|
28
|
-
}
|
|
29
|
-
);
|
|
5
|
+
//#region src/Flow/Node/Parameters/Slider.tsx
|
|
6
|
+
var classes = {
|
|
7
|
+
labelContainer: css({
|
|
8
|
+
marginRight: 0,
|
|
9
|
+
marginLeft: 0
|
|
10
|
+
}),
|
|
11
|
+
sliderBase: css({ padding: 0 })
|
|
30
12
|
};
|
|
31
|
-
|
|
32
|
-
|
|
13
|
+
var Slider = ({ param, data }) => {
|
|
14
|
+
const { id } = param;
|
|
15
|
+
const { setNodeData } = useFlowNodeUtils();
|
|
16
|
+
return /* @__PURE__ */ jsx(HvSlider, {
|
|
17
|
+
className: "nodrag",
|
|
18
|
+
defaultValues: data[id],
|
|
19
|
+
onChange: (val) => setNodeData((prev) => ({
|
|
20
|
+
...prev,
|
|
21
|
+
[id]: val
|
|
22
|
+
})),
|
|
23
|
+
classes: {
|
|
24
|
+
labelContainer: classes.labelContainer,
|
|
25
|
+
sliderBase: classes.sliderBase
|
|
26
|
+
},
|
|
27
|
+
...param
|
|
28
|
+
});
|
|
33
29
|
};
|
|
30
|
+
//#endregion
|
|
31
|
+
export { Slider as default };
|
|
@@ -1,19 +1,19 @@
|
|
|
1
|
-
import { jsx } from "react/jsx-runtime";
|
|
2
|
-
import { HvInput } from "@hitachivantara/uikit-react-core";
|
|
3
1
|
import { useFlowNodeUtils } from "../../hooks/useFlowNode.js";
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
2
|
+
import { HvInput } from "@hitachivantara/uikit-react-core";
|
|
3
|
+
import { jsx } from "react/jsx-runtime";
|
|
4
|
+
//#region src/Flow/Node/Parameters/Text.tsx
|
|
5
|
+
var Text = ({ param, data }) => {
|
|
6
|
+
const { id, label } = param;
|
|
7
|
+
const { setNodeData } = useFlowNodeUtils();
|
|
8
|
+
return /* @__PURE__ */ jsx(HvInput, {
|
|
9
|
+
className: "nodrag",
|
|
10
|
+
label,
|
|
11
|
+
defaultValue: data[id],
|
|
12
|
+
onChange: (evt, val) => setNodeData((prev) => ({
|
|
13
|
+
...prev,
|
|
14
|
+
[id]: val
|
|
15
|
+
}))
|
|
16
|
+
});
|
|
19
17
|
};
|
|
18
|
+
//#endregion
|
|
19
|
+
export { Text as default };
|
package/dist/Flow/Node/utils.js
CHANGED
|
@@ -1,54 +1,49 @@
|
|
|
1
1
|
import { isValidElement } from "react";
|
|
2
|
-
|
|
3
|
-
|
|
2
|
+
//#region src/Flow/Node/utils.ts
|
|
3
|
+
var isInputGroup = (input) => {
|
|
4
|
+
return "inputs" in input;
|
|
4
5
|
};
|
|
5
|
-
|
|
6
|
-
|
|
6
|
+
var isOutputGroup = (output) => {
|
|
7
|
+
return "outputs" in output;
|
|
7
8
|
};
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
if (type === "source") {
|
|
13
|
-
return edges.some((e) => e.source === id && e.sourceHandle === handleId);
|
|
14
|
-
}
|
|
15
|
-
return false;
|
|
9
|
+
var isConnected = (id, type, handleId, edges) => {
|
|
10
|
+
if (type === "target") return edges.some((e) => e.target === id && e.targetHandle === handleId);
|
|
11
|
+
if (type === "source") return edges.some((e) => e.source === id && e.sourceHandle === handleId);
|
|
12
|
+
return false;
|
|
16
13
|
};
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
isConnected,
|
|
51
|
-
isInputGroup,
|
|
52
|
-
isOutputGroup,
|
|
53
|
-
renderedIcon
|
|
14
|
+
var renderedIcon = (actionIcon) => isValidElement(actionIcon) ? actionIcon : actionIcon?.();
|
|
15
|
+
var identifyHandles = (handles) => {
|
|
16
|
+
let idx = 0;
|
|
17
|
+
return handles?.map((handle) => {
|
|
18
|
+
if (isInputGroup(handle)) return {
|
|
19
|
+
...handle,
|
|
20
|
+
inputs: handle.inputs.map((x) => {
|
|
21
|
+
const identifiedHandle = x.id != null ? x : {
|
|
22
|
+
...x,
|
|
23
|
+
id: String(idx)
|
|
24
|
+
};
|
|
25
|
+
idx += 1;
|
|
26
|
+
return identifiedHandle;
|
|
27
|
+
})
|
|
28
|
+
};
|
|
29
|
+
if (isOutputGroup(handle)) return {
|
|
30
|
+
...handle,
|
|
31
|
+
outputs: handle.outputs.map((x) => {
|
|
32
|
+
const identifiedHandle = x.id != null ? x : {
|
|
33
|
+
...x,
|
|
34
|
+
id: String(idx)
|
|
35
|
+
};
|
|
36
|
+
idx += 1;
|
|
37
|
+
return identifiedHandle;
|
|
38
|
+
})
|
|
39
|
+
};
|
|
40
|
+
const identifiedHandle = handle.id != null ? handle : {
|
|
41
|
+
...handle,
|
|
42
|
+
id: String(idx)
|
|
43
|
+
};
|
|
44
|
+
idx += 1;
|
|
45
|
+
return identifiedHandle;
|
|
46
|
+
});
|
|
54
47
|
};
|
|
48
|
+
//#endregion
|
|
49
|
+
export { identifyHandles, isConnected, isInputGroup, isOutputGroup, renderedIcon };
|