Implement keyboard navigation for Lightbox
This commit is contained in:
parent
e1b620602d
commit
ea49f7a3b6
1 changed files with 21 additions and 4 deletions
|
@ -203,11 +203,28 @@ export class Lightbox extends React.Component<Props, {}> {
|
|||
};
|
||||
|
||||
private onKeyUp = (event: KeyboardEvent) => {
|
||||
if (event.key !== 'Escape') {
|
||||
return;
|
||||
}
|
||||
const { onClose } = this;
|
||||
const { onNext, onPrevious } = this.props;
|
||||
switch (event.key) {
|
||||
case 'Escape':
|
||||
onClose();
|
||||
break;
|
||||
|
||||
this.onClose();
|
||||
case 'ArrowLeft':
|
||||
if (onPrevious) {
|
||||
onPrevious();
|
||||
}
|
||||
break;
|
||||
|
||||
case 'ArrowRight':
|
||||
if (onNext) {
|
||||
onNext();
|
||||
}
|
||||
break;
|
||||
|
||||
default:
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
private onContainerClick = (event: React.MouseEvent<HTMLDivElement>) => {
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue