@uipath/apollo-react 3.44.3 → 3.45.0
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/canvas/components/StageNode/StageNode.cjs +3 -5
- package/dist/canvas/components/StageNode/StageNode.d.ts.map +1 -1
- package/dist/canvas/components/StageNode/StageNode.js +4 -6
- package/dist/canvas/components/StageNode/StageNode.stories.cjs +76 -31
- package/dist/canvas/components/StageNode/StageNode.stories.d.ts.map +1 -1
- package/dist/canvas/components/StageNode/StageNode.stories.js +77 -32
- package/package.json +1 -1
|
@@ -476,17 +476,14 @@ const StageNodeComponent = (props)=>{
|
|
|
476
476
|
})
|
|
477
477
|
}),
|
|
478
478
|
(onTaskAdd || onAddTaskFromToolbox) && !isReadOnly && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.ApTooltip, {
|
|
479
|
-
content:
|
|
479
|
+
content: addTaskLabel,
|
|
480
480
|
placement: "top",
|
|
481
481
|
children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
|
|
482
482
|
children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.ApIconButton, {
|
|
483
483
|
onClick: handleTaskAddClick,
|
|
484
484
|
size: "small",
|
|
485
|
-
disabled: addTaskLoading,
|
|
486
485
|
label: addTaskLabel,
|
|
487
|
-
children:
|
|
488
|
-
size: 20
|
|
489
|
-
}) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.ApIcon, {
|
|
486
|
+
children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.ApIcon, {
|
|
490
487
|
name: "add",
|
|
491
488
|
size: "20px"
|
|
492
489
|
})
|
|
@@ -601,6 +598,7 @@ const StageNodeComponent = (props)=>{
|
|
|
601
598
|
children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_Toolbox_index_cjs_namespaceObject.Toolbox, {
|
|
602
599
|
title: addTaskLabel,
|
|
603
600
|
initialItems: taskOptions,
|
|
601
|
+
loading: addTaskLoading,
|
|
604
602
|
onClose: ()=>setIsAddingTask(false),
|
|
605
603
|
onItemSelect: handleAddTaskToolboxItemSelected,
|
|
606
604
|
onSearch: onTaskToolboxSearch
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StageNode.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/StageNode/StageNode.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"StageNode.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/StageNode/StageNode.tsx"],"names":[],"mappings":"AAqDA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAkpBxD,eAAO,MAAM,SAAS,8CAxoBa,cAAc,6CAwoBA,CAAC"}
|
|
@@ -4,7 +4,7 @@ import { SortableContext, sortableKeyboardCoordinates, verticalListSortingStrate
|
|
|
4
4
|
import { FontVariantToken, Padding, Spacing } from "@uipath/apollo-core";
|
|
5
5
|
import { Column, Row } from "../../layouts/index.js";
|
|
6
6
|
import { Position, useStore, useViewport } from "../../xyflow/react.js";
|
|
7
|
-
import {
|
|
7
|
+
import { ApIcon, ApIconButton, ApLink, ApTooltip, ApTypography } from "../../../material/index.js";
|
|
8
8
|
import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
|
|
9
9
|
import { createPortal } from "react-dom";
|
|
10
10
|
import { useConnectedHandles } from "../BaseCanvas/ConnectedHandlesContext.js";
|
|
@@ -448,17 +448,14 @@ const StageNodeComponent = (props)=>{
|
|
|
448
448
|
})
|
|
449
449
|
}),
|
|
450
450
|
(onTaskAdd || onAddTaskFromToolbox) && !isReadOnly && /*#__PURE__*/ jsx(ApTooltip, {
|
|
451
|
-
content:
|
|
451
|
+
content: addTaskLabel,
|
|
452
452
|
placement: "top",
|
|
453
453
|
children: /*#__PURE__*/ jsx("span", {
|
|
454
454
|
children: /*#__PURE__*/ jsx(ApIconButton, {
|
|
455
455
|
onClick: handleTaskAddClick,
|
|
456
456
|
size: "small",
|
|
457
|
-
disabled: addTaskLoading,
|
|
458
457
|
label: addTaskLabel,
|
|
459
|
-
children:
|
|
460
|
-
size: 20
|
|
461
|
-
}) : /*#__PURE__*/ jsx(ApIcon, {
|
|
458
|
+
children: /*#__PURE__*/ jsx(ApIcon, {
|
|
462
459
|
name: "add",
|
|
463
460
|
size: "20px"
|
|
464
461
|
})
|
|
@@ -573,6 +570,7 @@ const StageNodeComponent = (props)=>{
|
|
|
573
570
|
children: /*#__PURE__*/ jsx(Toolbox, {
|
|
574
571
|
title: addTaskLabel,
|
|
575
572
|
initialItems: taskOptions,
|
|
573
|
+
loading: addTaskLoading,
|
|
576
574
|
onClose: ()=>setIsAddingTask(false),
|
|
577
575
|
onItemSelect: handleAddTaskToolboxItemSelected,
|
|
578
576
|
onSearch: onTaskToolboxSearch
|
|
@@ -1651,6 +1651,59 @@ const AddAndReplaceTasks = {
|
|
|
1651
1651
|
render: ()=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(AddAndReplaceTasksStory, {}),
|
|
1652
1652
|
args: {}
|
|
1653
1653
|
};
|
|
1654
|
+
const fetchChildren = (id)=>new Promise((resolve)=>{
|
|
1655
|
+
setTimeout(()=>{
|
|
1656
|
+
resolve([
|
|
1657
|
+
{
|
|
1658
|
+
id: `${id}-sub-1`,
|
|
1659
|
+
name: `${id} - Subtask A`,
|
|
1660
|
+
data: {
|
|
1661
|
+
type: `${id}-a`
|
|
1662
|
+
}
|
|
1663
|
+
},
|
|
1664
|
+
{
|
|
1665
|
+
id: `${id}-sub-2`,
|
|
1666
|
+
name: `${id} - Subtask B`,
|
|
1667
|
+
data: {
|
|
1668
|
+
type: `${id}-b`
|
|
1669
|
+
}
|
|
1670
|
+
},
|
|
1671
|
+
{
|
|
1672
|
+
id: `${id}-sub-3`,
|
|
1673
|
+
name: `${id} - Subtask C`,
|
|
1674
|
+
data: {
|
|
1675
|
+
type: `${id}-c`
|
|
1676
|
+
}
|
|
1677
|
+
}
|
|
1678
|
+
]);
|
|
1679
|
+
}, 2000);
|
|
1680
|
+
});
|
|
1681
|
+
const loadedTaskOptionsWithChildren = [
|
|
1682
|
+
{
|
|
1683
|
+
id: 'email',
|
|
1684
|
+
name: 'Email',
|
|
1685
|
+
data: {
|
|
1686
|
+
type: 'email'
|
|
1687
|
+
},
|
|
1688
|
+
children: (id)=>fetchChildren(id)
|
|
1689
|
+
},
|
|
1690
|
+
{
|
|
1691
|
+
id: 'approval',
|
|
1692
|
+
name: 'Approval',
|
|
1693
|
+
data: {
|
|
1694
|
+
type: 'approval'
|
|
1695
|
+
},
|
|
1696
|
+
children: (id)=>fetchChildren(id)
|
|
1697
|
+
},
|
|
1698
|
+
{
|
|
1699
|
+
id: "script",
|
|
1700
|
+
name: 'Script',
|
|
1701
|
+
data: {
|
|
1702
|
+
type: "script"
|
|
1703
|
+
},
|
|
1704
|
+
children: (id)=>fetchChildren(id)
|
|
1705
|
+
}
|
|
1706
|
+
];
|
|
1654
1707
|
const AddTaskLoadingStory = ()=>{
|
|
1655
1708
|
const StageNodeWrapper = (0, external_react_namespaceObject.useMemo)(()=>function(props) {
|
|
1656
1709
|
return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_StageNode_cjs_namespaceObject.StageNode, {
|
|
@@ -1677,14 +1730,15 @@ const AddTaskLoadingStory = ()=>{
|
|
|
1677
1730
|
width: 304,
|
|
1678
1731
|
data: {
|
|
1679
1732
|
stageDetails: {
|
|
1680
|
-
label: '
|
|
1733
|
+
label: 'Top-level loading (click +)',
|
|
1681
1734
|
tasks: []
|
|
1682
1735
|
},
|
|
1683
|
-
addTaskLoading:
|
|
1736
|
+
addTaskLoading: true,
|
|
1737
|
+
taskOptions: []
|
|
1684
1738
|
}
|
|
1685
1739
|
},
|
|
1686
1740
|
{
|
|
1687
|
-
id: 'loading-stage-
|
|
1741
|
+
id: 'loading-stage-children',
|
|
1688
1742
|
type: 'stage',
|
|
1689
1743
|
position: {
|
|
1690
1744
|
x: 400,
|
|
@@ -1693,7 +1747,7 @@ const AddTaskLoadingStory = ()=>{
|
|
|
1693
1747
|
width: 304,
|
|
1694
1748
|
data: {
|
|
1695
1749
|
stageDetails: {
|
|
1696
|
-
label: '
|
|
1750
|
+
label: 'Async children (click +)',
|
|
1697
1751
|
tasks: [
|
|
1698
1752
|
[
|
|
1699
1753
|
{
|
|
@@ -1701,50 +1755,41 @@ const AddTaskLoadingStory = ()=>{
|
|
|
1701
1755
|
label: 'Existing Task',
|
|
1702
1756
|
icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(VerificationIcon, {})
|
|
1703
1757
|
}
|
|
1704
|
-
],
|
|
1705
|
-
[
|
|
1706
|
-
{
|
|
1707
|
-
id: 'task-2',
|
|
1708
|
-
label: 'Another Task',
|
|
1709
|
-
icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(DocumentIcon, {})
|
|
1710
|
-
}
|
|
1711
1758
|
]
|
|
1712
1759
|
]
|
|
1713
1760
|
},
|
|
1714
|
-
addTaskLoading: false
|
|
1761
|
+
addTaskLoading: false,
|
|
1762
|
+
taskOptions: loadedTaskOptionsWithChildren
|
|
1715
1763
|
}
|
|
1716
1764
|
}
|
|
1717
1765
|
], []);
|
|
1718
1766
|
const [nodesState, setNodes, onNodesChange] = (0, react_cjs_namespaceObject.useNodesState)(initialNodes);
|
|
1719
1767
|
const [edges, setEdges, onEdgesChange] = (0, react_cjs_namespaceObject.useEdgesState)([]);
|
|
1720
|
-
|
|
1721
|
-
|
|
1722
|
-
|
|
1723
|
-
|
|
1724
|
-
|
|
1725
|
-
|
|
1726
|
-
|
|
1727
|
-
|
|
1728
|
-
|
|
1729
|
-
|
|
1730
|
-
]);
|
|
1731
|
-
const handleTaskAddForNode = (0, external_react_namespaceObject.useCallback)((nodeId)=>{
|
|
1732
|
-
setNodeLoading(nodeId, true);
|
|
1733
|
-
setTimeout(()=>{
|
|
1734
|
-
setNodeLoading(nodeId, false);
|
|
1768
|
+
(0, external_react_namespaceObject.useEffect)(()=>{
|
|
1769
|
+
const timeout = setTimeout(()=>{
|
|
1770
|
+
setNodes((nds)=>nds.map((node)=>'loading-stage-empty' === node.id ? {
|
|
1771
|
+
...node,
|
|
1772
|
+
data: {
|
|
1773
|
+
...node.data,
|
|
1774
|
+
addTaskLoading: false,
|
|
1775
|
+
taskOptions: loadedTaskOptionsWithChildren
|
|
1776
|
+
}
|
|
1777
|
+
} : node));
|
|
1735
1778
|
}, 3000);
|
|
1779
|
+
return ()=>clearTimeout(timeout);
|
|
1736
1780
|
}, [
|
|
1737
|
-
|
|
1781
|
+
setNodes
|
|
1738
1782
|
]);
|
|
1739
1783
|
const nodesWithHandler = (0, external_react_namespaceObject.useMemo)(()=>nodesState.map((node)=>({
|
|
1740
1784
|
...node,
|
|
1741
1785
|
data: {
|
|
1742
1786
|
...node.data,
|
|
1743
|
-
|
|
1787
|
+
onAddTaskFromToolbox: (taskItem)=>{
|
|
1788
|
+
window.alert(`Added task "${taskItem.name}" to ${node.id}`);
|
|
1789
|
+
}
|
|
1744
1790
|
}
|
|
1745
1791
|
})), [
|
|
1746
|
-
nodesState
|
|
1747
|
-
handleTaskAddForNode
|
|
1792
|
+
nodesState
|
|
1748
1793
|
]);
|
|
1749
1794
|
const onConnect = (0, external_react_namespaceObject.useCallback)((connection)=>setEdges((eds)=>(0, react_cjs_namespaceObject.addEdge)(connection, eds)), [
|
|
1750
1795
|
setEdges
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StageNode.stories.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/StageNode/StageNode.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAyBvD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAGxC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,SAAS,CA0FD,CAAC;AAEjC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AA4CnC,eAAO,MAAM,OAAO,EAAE,KA2DrB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAsE3B,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KA8M7B,CAAC;AAEF,eAAO,MAAM,yBAAyB,EAAE,KA+HvC,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,KAoKpC,CAAC;AA8GF,eAAO,MAAM,uBAAuB,EAAE,KAOrC,CAAC;AAkVF,eAAO,MAAM,kBAAkB,EAAE,KAOhC,CAAC;
|
|
1
|
+
{"version":3,"file":"StageNode.stories.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/StageNode/StageNode.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAyBvD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAGxC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,SAAS,CA0FD,CAAC;AAEjC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AA4CnC,eAAO,MAAM,OAAO,EAAE,KA2DrB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAsE3B,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KA8M7B,CAAC;AAEF,eAAO,MAAM,yBAAyB,EAAE,KA+HvC,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,KAoKpC,CAAC;AA8GF,eAAO,MAAM,uBAAuB,EAAE,KAOrC,CAAC;AAkVF,eAAO,MAAM,kBAAkB,EAAE,KAOhC,CAAC;AAmJF,eAAO,MAAM,cAAc,EAAE,KAO5B,CAAC"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { ConnectionMode, Panel, ReactFlowProvider, addEdge, useEdgesState, useNodesState } from "../../xyflow/react.js";
|
|
3
3
|
import { ApButton, ApMenu } from "../../../material/components/index.js";
|
|
4
|
-
import { useCallback, useMemo, useState } from "react";
|
|
4
|
+
import { useCallback, useEffect, useMemo, useState } from "react";
|
|
5
5
|
import { DefaultCanvasTranslations } from "../../types.js";
|
|
6
6
|
import { createGroupModificationHandlers, getHandlerForModificationType } from "../../utils/GroupModificationUtils.js";
|
|
7
7
|
import { BaseCanvas } from "../BaseCanvas/index.js";
|
|
@@ -1615,6 +1615,59 @@ const AddAndReplaceTasks = {
|
|
|
1615
1615
|
render: ()=>/*#__PURE__*/ jsx(AddAndReplaceTasksStory, {}),
|
|
1616
1616
|
args: {}
|
|
1617
1617
|
};
|
|
1618
|
+
const fetchChildren = (id)=>new Promise((resolve)=>{
|
|
1619
|
+
setTimeout(()=>{
|
|
1620
|
+
resolve([
|
|
1621
|
+
{
|
|
1622
|
+
id: `${id}-sub-1`,
|
|
1623
|
+
name: `${id} - Subtask A`,
|
|
1624
|
+
data: {
|
|
1625
|
+
type: `${id}-a`
|
|
1626
|
+
}
|
|
1627
|
+
},
|
|
1628
|
+
{
|
|
1629
|
+
id: `${id}-sub-2`,
|
|
1630
|
+
name: `${id} - Subtask B`,
|
|
1631
|
+
data: {
|
|
1632
|
+
type: `${id}-b`
|
|
1633
|
+
}
|
|
1634
|
+
},
|
|
1635
|
+
{
|
|
1636
|
+
id: `${id}-sub-3`,
|
|
1637
|
+
name: `${id} - Subtask C`,
|
|
1638
|
+
data: {
|
|
1639
|
+
type: `${id}-c`
|
|
1640
|
+
}
|
|
1641
|
+
}
|
|
1642
|
+
]);
|
|
1643
|
+
}, 2000);
|
|
1644
|
+
});
|
|
1645
|
+
const loadedTaskOptionsWithChildren = [
|
|
1646
|
+
{
|
|
1647
|
+
id: 'email',
|
|
1648
|
+
name: 'Email',
|
|
1649
|
+
data: {
|
|
1650
|
+
type: 'email'
|
|
1651
|
+
},
|
|
1652
|
+
children: (id)=>fetchChildren(id)
|
|
1653
|
+
},
|
|
1654
|
+
{
|
|
1655
|
+
id: 'approval',
|
|
1656
|
+
name: 'Approval',
|
|
1657
|
+
data: {
|
|
1658
|
+
type: 'approval'
|
|
1659
|
+
},
|
|
1660
|
+
children: (id)=>fetchChildren(id)
|
|
1661
|
+
},
|
|
1662
|
+
{
|
|
1663
|
+
id: "script",
|
|
1664
|
+
name: 'Script',
|
|
1665
|
+
data: {
|
|
1666
|
+
type: "script"
|
|
1667
|
+
},
|
|
1668
|
+
children: (id)=>fetchChildren(id)
|
|
1669
|
+
}
|
|
1670
|
+
];
|
|
1618
1671
|
const AddTaskLoadingStory = ()=>{
|
|
1619
1672
|
const StageNodeWrapper = useMemo(()=>function(props) {
|
|
1620
1673
|
return /*#__PURE__*/ jsx(StageNode, {
|
|
@@ -1641,14 +1694,15 @@ const AddTaskLoadingStory = ()=>{
|
|
|
1641
1694
|
width: 304,
|
|
1642
1695
|
data: {
|
|
1643
1696
|
stageDetails: {
|
|
1644
|
-
label: '
|
|
1697
|
+
label: 'Top-level loading (click +)',
|
|
1645
1698
|
tasks: []
|
|
1646
1699
|
},
|
|
1647
|
-
addTaskLoading:
|
|
1700
|
+
addTaskLoading: true,
|
|
1701
|
+
taskOptions: []
|
|
1648
1702
|
}
|
|
1649
1703
|
},
|
|
1650
1704
|
{
|
|
1651
|
-
id: 'loading-stage-
|
|
1705
|
+
id: 'loading-stage-children',
|
|
1652
1706
|
type: 'stage',
|
|
1653
1707
|
position: {
|
|
1654
1708
|
x: 400,
|
|
@@ -1657,7 +1711,7 @@ const AddTaskLoadingStory = ()=>{
|
|
|
1657
1711
|
width: 304,
|
|
1658
1712
|
data: {
|
|
1659
1713
|
stageDetails: {
|
|
1660
|
-
label: '
|
|
1714
|
+
label: 'Async children (click +)',
|
|
1661
1715
|
tasks: [
|
|
1662
1716
|
[
|
|
1663
1717
|
{
|
|
@@ -1665,50 +1719,41 @@ const AddTaskLoadingStory = ()=>{
|
|
|
1665
1719
|
label: 'Existing Task',
|
|
1666
1720
|
icon: /*#__PURE__*/ jsx(VerificationIcon, {})
|
|
1667
1721
|
}
|
|
1668
|
-
],
|
|
1669
|
-
[
|
|
1670
|
-
{
|
|
1671
|
-
id: 'task-2',
|
|
1672
|
-
label: 'Another Task',
|
|
1673
|
-
icon: /*#__PURE__*/ jsx(DocumentIcon, {})
|
|
1674
|
-
}
|
|
1675
1722
|
]
|
|
1676
1723
|
]
|
|
1677
1724
|
},
|
|
1678
|
-
addTaskLoading: false
|
|
1725
|
+
addTaskLoading: false,
|
|
1726
|
+
taskOptions: loadedTaskOptionsWithChildren
|
|
1679
1727
|
}
|
|
1680
1728
|
}
|
|
1681
1729
|
], []);
|
|
1682
1730
|
const [nodesState, setNodes, onNodesChange] = useNodesState(initialNodes);
|
|
1683
1731
|
const [edges, setEdges, onEdgesChange] = useEdgesState([]);
|
|
1684
|
-
|
|
1685
|
-
|
|
1686
|
-
|
|
1687
|
-
|
|
1688
|
-
|
|
1689
|
-
|
|
1690
|
-
|
|
1691
|
-
|
|
1692
|
-
|
|
1693
|
-
|
|
1694
|
-
]);
|
|
1695
|
-
const handleTaskAddForNode = useCallback((nodeId)=>{
|
|
1696
|
-
setNodeLoading(nodeId, true);
|
|
1697
|
-
setTimeout(()=>{
|
|
1698
|
-
setNodeLoading(nodeId, false);
|
|
1732
|
+
useEffect(()=>{
|
|
1733
|
+
const timeout = setTimeout(()=>{
|
|
1734
|
+
setNodes((nds)=>nds.map((node)=>'loading-stage-empty' === node.id ? {
|
|
1735
|
+
...node,
|
|
1736
|
+
data: {
|
|
1737
|
+
...node.data,
|
|
1738
|
+
addTaskLoading: false,
|
|
1739
|
+
taskOptions: loadedTaskOptionsWithChildren
|
|
1740
|
+
}
|
|
1741
|
+
} : node));
|
|
1699
1742
|
}, 3000);
|
|
1743
|
+
return ()=>clearTimeout(timeout);
|
|
1700
1744
|
}, [
|
|
1701
|
-
|
|
1745
|
+
setNodes
|
|
1702
1746
|
]);
|
|
1703
1747
|
const nodesWithHandler = useMemo(()=>nodesState.map((node)=>({
|
|
1704
1748
|
...node,
|
|
1705
1749
|
data: {
|
|
1706
1750
|
...node.data,
|
|
1707
|
-
|
|
1751
|
+
onAddTaskFromToolbox: (taskItem)=>{
|
|
1752
|
+
window.alert(`Added task "${taskItem.name}" to ${node.id}`);
|
|
1753
|
+
}
|
|
1708
1754
|
}
|
|
1709
1755
|
})), [
|
|
1710
|
-
nodesState
|
|
1711
|
-
handleTaskAddForNode
|
|
1756
|
+
nodesState
|
|
1712
1757
|
]);
|
|
1713
1758
|
const onConnect = useCallback((connection)=>setEdges((eds)=>addEdge(connection, eds)), [
|
|
1714
1759
|
setEdges
|