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]); }, [props.selectedNode]);
return ( return (
<HighlightProvider <div
text={searchTerm} onMouseLeave={() => {
highlightColor={theme.searchHighlightBackground.yellow}> instance.uiState.hoveredNodes.set([]);
<ControlledTreeEnvironment }}>
ref={treeEnvRef as any} <HighlightProvider
items={items} text={searchTerm}
getItemTitle={(item) => item.data.name} highlightColor={theme.searchHighlightBackground.yellow}>
canRename={false} <ControlledTreeEnvironment
canDragAndDrop={false} ref={treeEnvRef as any}
viewState={{ items={items}
tree: { getItemTitle={(item) => item.data.name}
focusedItem: head(hoveredNodes), canRename={false}
expandedItems, canDragAndDrop={false}
selectedItems: props.selectedNode ? [props.selectedNode] : [], viewState={{
}, tree: {
}} focusedItem: head(hoveredNodes),
onFocusItem={(item) => { expandedItems,
instance.uiState.hoveredNodes.set([item.index]); selectedItems: props.selectedNode ? [props.selectedNode] : [],
}}
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();
}
}, },
}}
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: () => { onMouseOver: () => {
if (!instance.uiState.isContextMenuOpen.get()) { if (!instance.uiState.isContextMenuOpen.get()) {
instance.uiState.hoveredNodes.set([item.index]); instance.uiState.hoveredNodes.set([item.index]);
} }
}, },
}), }),
}}> }}>
<ComplexTree <ComplexTree
treeId="tree" treeId="tree"
rootItem={FakeNode.id as any} //the typing in in the library is wrong here rootItem={FakeNode.id as any} //the typing in in the library is wrong here
treeLabel="UI" treeLabel="UI"
/> />
</ControlledTreeEnvironment> </ControlledTreeEnvironment>
</HighlightProvider> </HighlightProvider>
</div>
); );
} }