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

Add in / out behaviour to left / right arrow

Browse Source 
Summary:
Following feedback from https://fb.workplace.com/groups/443457641253219/permalink/587444816854500/

When pressing left arrow and is already collapse goes to parent, when pressing right arrow and is expanded will go to first child. this mimics behaviours in mac os and other ides.

Also refactored kb scroll to use row virtualiser instead of dom refs

I also fixed the kb scroll hijacking, previously we were using a setTimeout, if you held a key down for a long time then the timeout would fire and the mouse enter event would briefly fire causing the hover position to jump. I now use a more robust approach were we just reserve the focus input for 250ms from the keyboard input, each time the key is held this reservation is extended slightly.

Changelog: UIDebugger, pressing left arrow jumps to parent after collapse. Pressing right arrow enters after expand. Similar to file browsers in IDES

Reviewed By: aigoncharov

Differential Revision: D46760448

fbshipit-source-id: da45d81056aa070be84b2db972400d650b86a172
This commit is contained in:
Luke De Feo
2023-06-19 05:06:52 -07:00
committed by Facebook GitHub Bot
parent e9d098b9cd
commit 43c7dc39c8
2 changed files with 104 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
desktop/plugins/public/ui-debugger/index.tsx
View File

@@ -387,16 +387,16 @@ function uiActions(uiState: UIState, nodes: Atom<Map<Id, UINode>>): UIActions {
if (tags) {
tracker.track('node-selected', {name: selectedNode.name, tags});
}
}
let current = node;
// expand entire ancestory in case it has been manually collapsed
uiState.expandedNodes.update((expandedNodesDraft) => {
while (current != null) {
expandedNodesDraft.add(current);
current = nodes.get().get(current)?.parent;
}
});
let current = selectedNode?.parent;
// expand entire ancestory in case it has been manually collapsed
uiState.expandedNodes.update((expandedNodesDraft) => {
while (current != null) {
expandedNodesDraft.add(current);
current = nodes.get().get(current)?.parent;
}
});
}
};
const onCollapseNode = (node: Id) => {