diff --git a/webapp/packages/core-app/src/NavigationTree/NavigationTreeNode/useNavigationNode.ts b/webapp/packages/core-app/src/NavigationTree/NavigationTreeNode/useNavigationNode.ts index 5656b6a979..0576f393ba 100644 --- a/webapp/packages/core-app/src/NavigationTree/NavigationTreeNode/useNavigationNode.ts +++ b/webapp/packages/core-app/src/NavigationTree/NavigationTreeNode/useNavigationNode.ts @@ -57,14 +57,14 @@ export function useNavigationNode(node: NavNode): INavigationNode { expanded = false; } - const handleClick = async (leaf: boolean) => contextRef.context?.onClick?.(node, leaf); - const handleOpen = async () => contextRef.context?.onOpen?.(node); - const handleExpand = async () => contextRef.context?.tree.expand(node, !expanded); + const handleClick = async (leaf: boolean) => await contextRef.context?.onClick?.(node, leaf); + const handleOpen = async () => await contextRef.context?.onOpen?.(node); + const handleExpand = async () => await contextRef.context?.tree.expand(node, !expanded); const handleSelect = async ( multiple = false, nested = false - ) => contextRef.context?.tree.select(node, multiple, nested); - const handleFilter = async (value: string) => contextRef.context?.tree.filter(node, value); + ) => await contextRef.context?.tree.select(node, multiple, nested); + const handleFilter = async (value: string) => await contextRef.context?.tree.filter(node, value); useEffect(() => () => { if (!contextRef.context?.selectionTree) { diff --git a/webapp/packages/core-blocks/src/Tree/TreeNode/TreeNode.tsx b/webapp/packages/core-blocks/src/Tree/TreeNode/TreeNode.tsx index d3ad4ca1d3..0db6de1fe7 100644 --- a/webapp/packages/core-blocks/src/Tree/TreeNode/TreeNode.tsx +++ b/webapp/packages/core-blocks/src/Tree/TreeNode/TreeNode.tsx @@ -6,7 +6,7 @@ * you may not use this file except in compliance with the License. */ -import { observable } from 'mobx'; +import { computed, observable } from 'mobx'; import { observer } from 'mobx-react-lite'; import styled, { use } from 'reshadow'; @@ -27,6 +27,10 @@ interface Props extends ITreeNodeState { onOpen?: () => Promise | void; } +interface IInnerTreeNodeContext extends ITreeNodeContext { + inProgress: number; +} + export const TreeNode: React.FC = observer(function TreeNode({ group = false, loading = false, @@ -43,17 +47,20 @@ export const TreeNode: React.FC = observer(function TreeNode({ const handlersRef = useObjectRef(handlers); async function processAction(action: () => Promise) { - nodeContext.processing = true; + nodeContext.inProgress++; try { await action(); } finally { - nodeContext.processing = false; + nodeContext.inProgress--; } } - const nodeContext = useObservableRef(() => ({ - processing: false, + const nodeContext = useObservableRef(() => ({ + get processing() { + return this.inProgress > 0; + }, + inProgress: 0, async click() { await processAction(async () => { await handlersRef.onClick?.(this.leaf); @@ -82,7 +89,8 @@ export const TreeNode: React.FC = observer(function TreeNode({ }), { group: observable.ref, disabled: observable.ref, - processing: observable.ref, + processing: computed, + inProgress: observable.ref, loading: observable.ref, selected: observable.ref, expanded: observable.ref, diff --git a/webapp/packages/core-blocks/src/Tree/TreeNode/TreeNodeContext.ts b/webapp/packages/core-blocks/src/Tree/TreeNode/TreeNodeContext.ts index 876c8d7a3a..462c817fdc 100644 --- a/webapp/packages/core-blocks/src/Tree/TreeNode/TreeNodeContext.ts +++ b/webapp/packages/core-blocks/src/Tree/TreeNode/TreeNodeContext.ts @@ -10,19 +10,19 @@ import { createContext } from 'react'; export interface ITreeNodeContext { disabled: boolean; - processing: boolean; + readonly processing: boolean; expanded: boolean; externalExpanded: boolean; loading: boolean; selected: boolean; leaf: boolean; group: boolean; - select: (multiple?: boolean, nested?: boolean) => Promise; - filter: (value: string) => Promise; + readonly select: (multiple?: boolean, nested?: boolean) => Promise; + readonly filter: (value: string) => Promise; filterValue: string; - click?: () => Promise; - expand: () => Promise; - open: () => Promise; + readonly click?: () => Promise; + readonly expand: () => Promise; + readonly open: () => Promise; } export const TreeNodeContext = createContext(undefined as any); diff --git a/webapp/packages/core-blocks/src/Tree/TreeNode/TreeNodeControl.tsx b/webapp/packages/core-blocks/src/Tree/TreeNode/TreeNodeControl.tsx index a988f4c2ee..b0266e193a 100644 --- a/webapp/packages/core-blocks/src/Tree/TreeNode/TreeNodeControl.tsx +++ b/webapp/packages/core-blocks/src/Tree/TreeNode/TreeNodeControl.tsx @@ -73,7 +73,7 @@ export const TreeNodeControl = observer(function TreeNodeControl({ context.externalExpanded = externalExpanded; } - const handleEnter = (event: React.KeyboardEvent) => { + const handleEnter = async (event: React.KeyboardEvent) => { if (EventContext.has(event, EventTreeNodeExpandFlag, EventTreeNodeSelectFlag, EventStopPropagationFlag)) { return; } @@ -81,13 +81,13 @@ export const TreeNodeControl = observer(function TreeNodeControl({ EventContext.set(event, EventTreeNodeSelectFlag); switch ((event as unknown as KeyboardEvent).code) { case KEY.ENTER: - context.select(event.ctrlKey || event.metaKey); + await context.select(event.ctrlKey || event.metaKey); break; } return true; }; - const handleClick = (event: React.MouseEvent) => { + const handleClick = async (event: React.MouseEvent) => { if (onClick) { onClick(event); } @@ -96,14 +96,14 @@ export const TreeNodeControl = observer(function TreeNodeControl({ return; } - context.click?.(); + await context.click?.(); }; - const handleDbClick = (event: React.MouseEvent) => { + const handleDbClick = async (event: React.MouseEvent) => { if (EventContext.has(event, EventTreeNodeExpandFlag, EventTreeNodeSelectFlag, EventStopPropagationFlag)) { return; } - context.open(); + await context.open(); }; return ( diff --git a/webapp/packages/core-blocks/src/Tree/TreeNode/TreeNodeExpand.tsx b/webapp/packages/core-blocks/src/Tree/TreeNode/TreeNodeExpand.tsx index a5fe33c8db..f296dc175a 100644 --- a/webapp/packages/core-blocks/src/Tree/TreeNode/TreeNodeExpand.tsx +++ b/webapp/packages/core-blocks/src/Tree/TreeNode/TreeNodeExpand.tsx @@ -47,11 +47,11 @@ export const TreeNodeExpand = observer(function TreeNodeExpand({ leaf = context.leaf || leaf; - const handleExpand = (event: React.MouseEvent) => { + const handleExpand = async (event: React.MouseEvent) => { EventContext.set(event, EventTreeNodeExpandFlag); if (!leaf && !disabled) { - context.expand(); + await context.expand(); } }; diff --git a/webapp/packages/core-blocks/src/Tree/TreeNode/TreeNodeSelect.tsx b/webapp/packages/core-blocks/src/Tree/TreeNode/TreeNodeSelect.tsx index 3037fdec8a..164a5ac9fd 100644 --- a/webapp/packages/core-blocks/src/Tree/TreeNode/TreeNodeSelect.tsx +++ b/webapp/packages/core-blocks/src/Tree/TreeNode/TreeNodeSelect.tsx @@ -58,7 +58,7 @@ export const TreeNodeSelect = observer(function TreeNodeSelect({ async function handleSelect() { await onSelect?.(); - context.select(true, group); + await context.select(true, group); } const handleClick = (event: React.MouseEvent) => {