@uipath/apollo-react 3.62.0 → 3.62.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/canvas/components/StageNode/StageNode.cjs +2 -0
- package/dist/canvas/components/StageNode/StageNode.d.ts.map +1 -1
- package/dist/canvas/components/StageNode/StageNode.js +2 -0
- package/dist/canvas/components/StageNode/StageNode.stories.cjs +27 -3
- package/dist/canvas/components/StageNode/StageNode.stories.d.ts.map +1 -1
- package/dist/canvas/components/StageNode/StageNode.stories.js +28 -4
- package/package.json +1 -1
|
@@ -483,11 +483,13 @@ const StageNodeComponent = (props)=>{
|
|
|
483
483
|
(onTaskAdd || onAddTaskFromToolbox) && !isReadOnly && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.ApTooltip, {
|
|
484
484
|
content: addTaskLabel,
|
|
485
485
|
placement: "top",
|
|
486
|
+
hide: addTaskLoading,
|
|
486
487
|
children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
|
|
487
488
|
children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.ApIconButton, {
|
|
488
489
|
onClick: handleTaskAddClick,
|
|
489
490
|
size: "small",
|
|
490
491
|
label: addTaskLabel,
|
|
492
|
+
disabled: addTaskLoading,
|
|
491
493
|
children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.ApIcon, {
|
|
492
494
|
name: "add",
|
|
493
495
|
size: "20px"
|
|
@@ -1 +1 @@
|
|
|
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;
|
|
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;AA2pBxD,eAAO,MAAM,SAAS,8CAjpBa,cAAc,6CAipBA,CAAC"}
|
|
@@ -455,11 +455,13 @@ const StageNodeComponent = (props)=>{
|
|
|
455
455
|
(onTaskAdd || onAddTaskFromToolbox) && !isReadOnly && /*#__PURE__*/ jsx(ApTooltip, {
|
|
456
456
|
content: addTaskLabel,
|
|
457
457
|
placement: "top",
|
|
458
|
+
hide: addTaskLoading,
|
|
458
459
|
children: /*#__PURE__*/ jsx("span", {
|
|
459
460
|
children: /*#__PURE__*/ jsx(ApIconButton, {
|
|
460
461
|
onClick: handleTaskAddClick,
|
|
461
462
|
size: "small",
|
|
462
463
|
label: addTaskLabel,
|
|
464
|
+
disabled: addTaskLoading,
|
|
463
465
|
children: /*#__PURE__*/ jsx(ApIcon, {
|
|
464
466
|
name: "add",
|
|
465
467
|
size: "20px"
|
|
@@ -1968,7 +1968,7 @@ const AddTaskLoadingStory = ()=>{
|
|
|
1968
1968
|
width: 304,
|
|
1969
1969
|
data: {
|
|
1970
1970
|
stageDetails: {
|
|
1971
|
-
label: '
|
|
1971
|
+
label: 'Loading (+ disabled for 3s)',
|
|
1972
1972
|
tasks: []
|
|
1973
1973
|
},
|
|
1974
1974
|
addTaskLoading: true,
|
|
@@ -2018,16 +2018,40 @@ const AddTaskLoadingStory = ()=>{
|
|
|
2018
2018
|
}, [
|
|
2019
2019
|
setNodes
|
|
2020
2020
|
]);
|
|
2021
|
+
const timeoutRef = (0, external_react_namespaceObject.useRef)(void 0);
|
|
2022
|
+
(0, external_react_namespaceObject.useEffect)(()=>()=>clearTimeout(timeoutRef.current), []);
|
|
2023
|
+
const handleAddTaskFromToolbox = (0, external_react_namespaceObject.useCallback)((nodeId, _taskItem)=>{
|
|
2024
|
+
clearTimeout(timeoutRef.current);
|
|
2025
|
+
setNodes((nds)=>nds.map((n)=>n.id === nodeId ? {
|
|
2026
|
+
...n,
|
|
2027
|
+
data: {
|
|
2028
|
+
...n.data,
|
|
2029
|
+
addTaskLoading: true
|
|
2030
|
+
}
|
|
2031
|
+
} : n));
|
|
2032
|
+
timeoutRef.current = setTimeout(()=>{
|
|
2033
|
+
setNodes((nds)=>nds.map((n)=>n.id === nodeId ? {
|
|
2034
|
+
...n,
|
|
2035
|
+
data: {
|
|
2036
|
+
...n.data,
|
|
2037
|
+
addTaskLoading: false
|
|
2038
|
+
}
|
|
2039
|
+
} : n));
|
|
2040
|
+
}, 2000);
|
|
2041
|
+
}, [
|
|
2042
|
+
setNodes
|
|
2043
|
+
]);
|
|
2021
2044
|
const nodesWithHandler = (0, external_react_namespaceObject.useMemo)(()=>nodesState.map((node)=>({
|
|
2022
2045
|
...node,
|
|
2023
2046
|
data: {
|
|
2024
2047
|
...node.data,
|
|
2025
2048
|
onAddTaskFromToolbox: (taskItem)=>{
|
|
2026
|
-
|
|
2049
|
+
handleAddTaskFromToolbox(node.id, taskItem);
|
|
2027
2050
|
}
|
|
2028
2051
|
}
|
|
2029
2052
|
})), [
|
|
2030
|
-
nodesState
|
|
2053
|
+
nodesState,
|
|
2054
|
+
handleAddTaskFromToolbox
|
|
2031
2055
|
]);
|
|
2032
2056
|
const onConnect = (0, external_react_namespaceObject.useCallback)((connection)=>setEdges((eds)=>(0, react_cjs_namespaceObject.addEdge)(connection, eds)), [
|
|
2033
2057
|
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,KAoHrB,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;AA2HF,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,KAoHrB,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;AA2HF,eAAO,MAAM,kBAAkB,EAAE,KAOhC,CAAC;AA0KF,eAAO,MAAM,cAAc,EAAE,KAO5B,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAiHxB,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, useEffect, useMemo, useState } from "react";
|
|
4
|
+
import { useCallback, useEffect, useMemo, useRef, 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";
|
|
@@ -1930,7 +1930,7 @@ const AddTaskLoadingStory = ()=>{
|
|
|
1930
1930
|
width: 304,
|
|
1931
1931
|
data: {
|
|
1932
1932
|
stageDetails: {
|
|
1933
|
-
label: '
|
|
1933
|
+
label: 'Loading (+ disabled for 3s)',
|
|
1934
1934
|
tasks: []
|
|
1935
1935
|
},
|
|
1936
1936
|
addTaskLoading: true,
|
|
@@ -1980,16 +1980,40 @@ const AddTaskLoadingStory = ()=>{
|
|
|
1980
1980
|
}, [
|
|
1981
1981
|
setNodes
|
|
1982
1982
|
]);
|
|
1983
|
+
const timeoutRef = useRef(void 0);
|
|
1984
|
+
useEffect(()=>()=>clearTimeout(timeoutRef.current), []);
|
|
1985
|
+
const handleAddTaskFromToolbox = useCallback((nodeId, _taskItem)=>{
|
|
1986
|
+
clearTimeout(timeoutRef.current);
|
|
1987
|
+
setNodes((nds)=>nds.map((n)=>n.id === nodeId ? {
|
|
1988
|
+
...n,
|
|
1989
|
+
data: {
|
|
1990
|
+
...n.data,
|
|
1991
|
+
addTaskLoading: true
|
|
1992
|
+
}
|
|
1993
|
+
} : n));
|
|
1994
|
+
timeoutRef.current = setTimeout(()=>{
|
|
1995
|
+
setNodes((nds)=>nds.map((n)=>n.id === nodeId ? {
|
|
1996
|
+
...n,
|
|
1997
|
+
data: {
|
|
1998
|
+
...n.data,
|
|
1999
|
+
addTaskLoading: false
|
|
2000
|
+
}
|
|
2001
|
+
} : n));
|
|
2002
|
+
}, 2000);
|
|
2003
|
+
}, [
|
|
2004
|
+
setNodes
|
|
2005
|
+
]);
|
|
1983
2006
|
const nodesWithHandler = useMemo(()=>nodesState.map((node)=>({
|
|
1984
2007
|
...node,
|
|
1985
2008
|
data: {
|
|
1986
2009
|
...node.data,
|
|
1987
2010
|
onAddTaskFromToolbox: (taskItem)=>{
|
|
1988
|
-
|
|
2011
|
+
handleAddTaskFromToolbox(node.id, taskItem);
|
|
1989
2012
|
}
|
|
1990
2013
|
}
|
|
1991
2014
|
})), [
|
|
1992
|
-
nodesState
|
|
2015
|
+
nodesState,
|
|
2016
|
+
handleAddTaskFromToolbox
|
|
1993
2017
|
]);
|
|
1994
2018
|
const onConnect = useCallback((connection)=>setEdges((eds)=>addEdge(connection, eds)), [
|
|
1995
2019
|
setEdges
|