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

Basic new tree implemenation

Browse Source 
Summary: The old implementation would always rerender on every operation (select, hover etc) and was quite slow for large hierachies

Reviewed By: lblasa

Differential Revision: D41838166

fbshipit-source-id: 1270841027926440a9c1f1a846d3aedc75ffe8bf
This commit is contained in:
Luke De Feo
2022-12-12 07:28:37 -08:00
committed by Facebook GitHub Bot
parent 3fc319ea36
commit a6544489f3
4 changed files with 174 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -41,7 +41,7 @@ export function Tree(props: {
onSelectNode: (id: Id) => void;
}) {
const instance = usePlugin(plugin);
const expandedItems = useValue(instance.uiState.treeState).expandedNodes;
const expandedItems = useValue(instance.uiState.expandedNodes);
const focused = useValue(instance.uiState.focusedNode);
const items = useMemo(
@@ -87,7 +87,7 @@ export function Tree(props: {
viewState={{
tree: {
focusedItem: head(hoveredNodes),
expandedItems,
expandedItems: [...expandedItems],
selectedItems: props.selectedNode ? [props.selectedNode] : [],
},
}}
@@ -95,15 +95,13 @@ export function Tree(props: {
instance.uiState.hoveredNodes.set([item.index]);
}}
onExpandItem={(item) => {
instance.uiState.treeState.update((draft) => {
draft.expandedNodes.push(item.index);
instance.uiState.expandedNodes.update((draft) => {
draft.add(item.index);
});
}}
onCollapseItem={(item) =>
instance.uiState.treeState.update((draft) => {
draft.expandedNodes = draft.expandedNodes.filter(
(expandedItemIndex) => expandedItemIndex !== item.index,
);
instance.uiState.expandedNodes.update((draft) => {
draft.delete(item.index);
})
}
renderItem={renderItem}