jens/flipper
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Unhover on mouse exit of tree

Browse Source 
Summary: This was causing the hover state to linger which is now quite noticable in the tree

Reviewed By: lblasa

Differential Revision: D41548249

fbshipit-source-id: cdf8ed434aa064dba05ebf31773bedaef18ba007
This commit is contained in:
Luke De Feo
2022-11-28 05:09:20 -08:00
committed by Facebook GitHub Bot
parent 6183671a5d
commit a93d571dc0
1 changed files with 67 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

129
desktop/plugins/public/ui-debugger/components/Tree.tsx
View File

@@ -58,70 +58,75 @@ export function Tree(props: {
}, [props.selectedNode]);
return (
<HighlightProvider
text={searchTerm}
highlightColor={theme.searchHighlightBackground.yellow}>
<ControlledTreeEnvironment
ref={treeEnvRef as any}
items={items}
getItemTitle={(item) => item.data.name}
canRename={false}
canDragAndDrop={false}
viewState={{
tree: {
focusedItem: head(hoveredNodes),
expandedItems,
selectedItems: props.selectedNode ? [props.selectedNode] : [],
},
}}
onFocusItem={(item) => {
instance.uiState.hoveredNodes.set([item.index]);
}}
onExpandItem={(item) => {
instance.uiState.treeState.update((draft) => {
draft.expandedNodes.push(item.index);
});
}}
onCollapseItem={(item) =>
instance.uiState.treeState.update((draft) => {
draft.expandedNodes = draft.expandedNodes.filter(
(expandedItemIndex) => expandedItemIndex !== item.index,
);
})
}
renderItem={renderItem}
onSelectItems={(items) => props.onSelectNode(items[0])}
defaultInteractionMode={{
mode: 'custom',
extends: InteractionMode.DoubleClickItemToExpand,
createInteractiveElementProps: (
item,
treeId,
actions,
renderFlags,
) => ({
onClick: () => {
if (renderFlags.isSelected) {
actions.unselectItem();
} else {
actions.selectItem();
}
<div
onMouseLeave={() => {
instance.uiState.hoveredNodes.set([]);
}}>
<HighlightProvider
text={searchTerm}
highlightColor={theme.searchHighlightBackground.yellow}>
<ControlledTreeEnvironment
ref={treeEnvRef as any}
items={items}
getItemTitle={(item) => item.data.name}
canRename={false}
canDragAndDrop={false}
viewState={{
tree: {
focusedItem: head(hoveredNodes),
expandedItems,
selectedItems: props.selectedNode ? [props.selectedNode] : [],
},
}}
onFocusItem={(item) => {
instance.uiState.hoveredNodes.set([item.index]);
}}
onExpandItem={(item) => {
instance.uiState.treeState.update((draft) => {
draft.expandedNodes.push(item.index);
});
}}
onCollapseItem={(item) =>
instance.uiState.treeState.update((draft) => {
draft.expandedNodes = draft.expandedNodes.filter(
(expandedItemIndex) => expandedItemIndex !== item.index,
);
})
}
renderItem={renderItem}
onSelectItems={(items) => props.onSelectNode(items[0])}
defaultInteractionMode={{
mode: 'custom',
extends: InteractionMode.DoubleClickItemToExpand,
createInteractiveElementProps: (
item,
treeId,
actions,
renderFlags,
) => ({
onClick: () => {
if (renderFlags.isSelected) {
actions.unselectItem();
} else {
actions.selectItem();
}
},
onMouseOver: () => {
if (!instance.uiState.isContextMenuOpen.get()) {
instance.uiState.hoveredNodes.set([item.index]);
}
},
}),
}}>
<ComplexTree
treeId="tree"
rootItem={FakeNode.id as any} //the typing in in the library is wrong here
treeLabel="UI"
/>
</ControlledTreeEnvironment>
</HighlightProvider>
onMouseOver: () => {
if (!instance.uiState.isContextMenuOpen.get()) {
instance.uiState.hoveredNodes.set([item.index]);
}
},
}),
}}>
<ComplexTree
treeId="tree"
rootItem={FakeNode.id as any} //the typing in in the library is wrong here
treeLabel="UI"
/>
</ControlledTreeEnvironment>
</HighlightProvider>
</div>
);
}