Close lightbox on escape key press
This commit is contained in:
@@ -55,6 +55,16 @@ const IconButton = ({ onClick, type }: IconButtonProps) => (
|
|||||||
);
|
);
|
||||||
|
|
||||||
export class Lightbox extends React.Component<Props, {}> {
|
export class Lightbox extends React.Component<Props, {}> {
|
||||||
|
public componentDidMount() {
|
||||||
|
const useCapture = true;
|
||||||
|
document.addEventListener('keyup', this.onKeyUp, useCapture);
|
||||||
|
}
|
||||||
|
|
||||||
|
public componentWillMount() {
|
||||||
|
const useCapture = true;
|
||||||
|
document.removeEventListener('keyup', this.onKeyUp, useCapture);
|
||||||
|
}
|
||||||
|
|
||||||
public render() {
|
public render() {
|
||||||
const { imageURL } = this.props;
|
const { imageURL } = this.props;
|
||||||
return (
|
return (
|
||||||
@@ -69,4 +79,12 @@ export class Lightbox extends React.Component<Props, {}> {
|
|||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
private onKeyUp = (event: KeyboardEvent) => {
|
||||||
|
if (event.key !== 'Escape') {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.props.close();
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
Reference in New Issue
Block a user