urbit/shrub
1
1
Fork 0
mirror of https://github.com/urbit/shrub.git synced 2024-12-01 06:35:32 +03:00
Code Issues Packages Projects Releases Wiki Activity

chat: fixes scroll keys

Browse Source 
fixes #3498
This commit is contained in:
Tyler Brown Cifu Shuster 2020-09-17 19:57:44 -07:00
parent 6f5663bcd3
commit 1ccfe2caa8
1 changed files with 30 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
pkg/interface/src/views/components/VirtualScroller.tsx
View File

@ -58,6 +58,7 @@ export default class VirtualScroller extends PureComponent<VirtualScrollerProps,
this.heightOf = this.heightOf.bind(this);
this.setScrollTop = this.setScrollTop.bind(this);
this.scrollToData = this.scrollToData.bind(this);
this.scrollKeyMap = this.scrollKeyMap.bind(this);
this.loadRows = _.memoize(this.loadRows).bind(this);
}
@ -164,7 +165,7 @@ export default class VirtualScroller extends PureComponent<VirtualScrollerProps,
this.loadRows(firstNeededKey, firstVisibleKey - 1);
}
const lastVisibleKey = Array.from(visibleItems.keys())[visibleItems.size - 1] ?? this.estimateIndexFromScrollTop(scrollTop + windowHeight);
const lastNeededKey = Math.min(lastVisibleKey + this.OVERSCAN_SIZE, totalSize)
const lastNeededKey = Math.min(lastVisibleKey + this.OVERSCAN_SIZE, totalSize);
if (!data.has(lastNeededKey - 1)) {
this.loadRows(lastVisibleKey + 1, lastNeededKey);
}
@ -198,25 +199,46 @@ export default class VirtualScroller extends PureComponent<VirtualScrollerProps,
};
}
scrollKeyMap(): Map<string, number> {
return new Map([
['ArrowUp', this.state.averageHeight],
['ArrowDown', this.state.averageHeight * -1],
['PageUp', this.window.offsetHeight],
['PageDown', this.window.offsetHeight * -1],
['Home', this.window.scrollHeight],
['End', this.window.scrollHeight * -1],
['Space', this.window.offsetHeight * -1]
]);
}
invertedKeyHandler(event): void | false {
if (event.code === 'ArrowUp' || event.code === 'ArrowDown') {
const map = this.scrollKeyMap();
if (map.has(event.code) && document.body.isSameNode(document.activeElement)) {
event.preventDefault();
event.stopImmediatePropagation();
if (event.code === 'ArrowUp') {
this.window.scrollBy(0, 30);
} else if (event.code === 'ArrowDown') {
this.window.scrollBy(0, -30);
let distance = map.get(event.code);
if (event.code === 'Space' && event.shiftKey) {
distance = distance * -1;
}
this.window.scrollBy(0, distance);
return false;
}
}
componentWillUnmount() {
window.removeEventListener('keydown', this.invertedKeyHandler, true);
window.removeEventListener('keydown', this.invertedKeyHandler);
}
setWindow(element) {
if (this.window) return;
if (!element) return;
if (this.window) {
if (this.window.isSameNode(element)) {
return;
} else {
window.removeEventListener('keydown', this.invertedKeyHandler);
}
}
this.window = element;
if (this.props.origin === 'bottom') {
element.addEventListener('wheel', (event) => {