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) => {
|
private onKeyUp = (event: KeyboardEvent) => {
|
||||||
if (event.key !== 'Escape') {
|
const { onClose } = this;
|
||||||
return;
|
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>) => {
|
private onContainerClick = (event: React.MouseEvent<HTMLDivElement>) => {
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue