Adds page up/down home/end keyboard support to timeline
This commit is contained in:
parent
e8a3dc5db6
commit
406916ea42
1 changed files with 16 additions and 6 deletions
|
@ -678,7 +678,11 @@ export class Timeline extends React.Component<
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (targetedMessageId && !commandOrCtrl && event.key === 'ArrowUp') {
|
if (
|
||||||
|
targetedMessageId &&
|
||||||
|
!commandOrCtrl &&
|
||||||
|
(event.key === 'ArrowUp' || event.key === 'PageUp')
|
||||||
|
) {
|
||||||
const targetedMessageIndex = items.findIndex(
|
const targetedMessageIndex = items.findIndex(
|
||||||
item => item === targetedMessageId
|
item => item === targetedMessageId
|
||||||
);
|
);
|
||||||
|
@ -686,7 +690,8 @@ export class Timeline extends React.Component<
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
const targetIndex = targetedMessageIndex - 1;
|
const indexIncrement = event.key === 'PageUp' ? 10 : 1;
|
||||||
|
const targetIndex = targetedMessageIndex - indexIncrement;
|
||||||
if (targetIndex < 0) {
|
if (targetIndex < 0) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
@ -700,7 +705,11 @@ export class Timeline extends React.Component<
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (targetedMessageId && !commandOrCtrl && event.key === 'ArrowDown') {
|
if (
|
||||||
|
targetedMessageId &&
|
||||||
|
!commandOrCtrl &&
|
||||||
|
(event.key === 'ArrowDown' || event.key === 'PageDown')
|
||||||
|
) {
|
||||||
const targetedMessageIndex = items.findIndex(
|
const targetedMessageIndex = items.findIndex(
|
||||||
item => item === targetedMessageId
|
item => item === targetedMessageId
|
||||||
);
|
);
|
||||||
|
@ -708,7 +717,8 @@ export class Timeline extends React.Component<
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
const targetIndex = targetedMessageIndex + 1;
|
const indexIncrement = event.key === 'PageDown' ? 10 : 1;
|
||||||
|
const targetIndex = targetedMessageIndex + indexIncrement;
|
||||||
if (targetIndex >= items.length) {
|
if (targetIndex >= items.length) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
@ -722,7 +732,7 @@ export class Timeline extends React.Component<
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (commandOrCtrl && event.key === 'ArrowUp') {
|
if (event.key === 'Home' || (commandOrCtrl && event.key === 'ArrowUp')) {
|
||||||
const firstMessageId = first(items);
|
const firstMessageId = first(items);
|
||||||
if (firstMessageId) {
|
if (firstMessageId) {
|
||||||
targetMessage(firstMessageId, id);
|
targetMessage(firstMessageId, id);
|
||||||
|
@ -732,7 +742,7 @@ export class Timeline extends React.Component<
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (commandOrCtrl && event.key === 'ArrowDown') {
|
if (event.key === 'End' || (commandOrCtrl && event.key === 'ArrowDown')) {
|
||||||
this.scrollDown(true);
|
this.scrollDown(true);
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
event.stopPropagation();
|
event.stopPropagation();
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue