Prevent nodes out of viewport triggering render (#296)

* Prevent nodes out of viewport triggering render

* Update frontend/src/common/SortedCollection.ts

Co-authored-by: David <dvdplm@gmail.com>

* Tweak the comment on `setFocus`, move it closer to `ref` and `hasChangedSince`

* Switch `SortedCollection.ref()` to a getter

Co-authored-by: David <dvdplm@gmail.com>
This commit is contained in:
Maciej Hirsz
2020-11-02 19:33:51 +01:00
committed by GitHub
parent 98cd3cfa12
commit 54039faa3b
3 changed files with 53 additions and 15 deletions
+9 -6
View File
@@ -52,11 +52,11 @@ export class List extends React.Component<List.Props, {}> {
}
public render() {
const { selectedColumns } = this.props.appState;
const { pins, sortBy } = this.props;
const { filter } = this.state;
const { pins, sortBy, appState } = this.props;
const { selectedColumns } = appState;
const { filter, listStart, listEnd } = this.state;
let nodes = this.props.appState.nodes.sorted();
let nodes = appState.nodes.sorted();
if (filter != null) {
nodes = nodes.filter(filter);
@@ -73,10 +73,13 @@ export class List extends React.Component<List.Props, {}> {
</React.Fragment>
);
}
// With filter present, we can no longer guarantee that focus corresponds
// to rendering view, so we put the whole list in focus
appState.nodes.setFocus(0, nodes.length);
} else {
appState.nodes.setFocus(listStart, listEnd);
}
const { listStart, listEnd } = this.state;
const height = TH_HEIGHT + nodes.length * TR_HEIGHT;
const transform = `translateY(${listStart * TR_HEIGHT}px)`;