1
0
mirror of https://github.com/lensapp/lens.git synced 2025-05-20 05:10:56 +00:00

Listening global keydown event in <Dock/>

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
This commit is contained in:
Alex Andreev 2021-09-16 15:25:30 +03:00
parent 2a13484a84
commit 0a0c156e98

View File

@ -46,19 +46,31 @@ interface Props {
@observer
export class Dock extends React.Component<Props> {
onKeydown = (evt: React.KeyboardEvent<HTMLElement>) => {
const { close, closeTab, selectedTab } = dockStore;
private element = React.createRef<HTMLDivElement>();
if (!selectedTab) return;
const { code, ctrlKey, shiftKey } = evt.nativeEvent;
componentDidMount() {
document.addEventListener("keydown", this.onKeyDown);
}
componentWillUnmount() {
document.removeEventListener("keydown", this.onKeyDown);
}
onKeyDown = (evt: KeyboardEvent) => {
const { close, selectedTab, closeTab } = dockStore;
const { code, ctrlKey, metaKey, shiftKey } = evt;
// Determine if user working inside <Dock/> or using any other areas in app
const dockIsFocused = this.element?.current.contains(document.activeElement);
if (!selectedTab || !dockIsFocused) return;
if (shiftKey && code === "Escape") {
close();
}
if (ctrlKey && code === "KeyW") {
if (selectedTab.pinned) close();
else closeTab(selectedTab.id);
if ((ctrlKey && code === "KeyW") || (metaKey && code === "KeyW")) {
closeTab(selectedTab.id);
this.element?.current.focus(); // Avoid loosing focus when closing tab
}
};
@ -105,7 +117,7 @@ export class Dock extends React.Component<Props> {
return (
<div
className={cssNames("Dock", className, { isOpen, fullSize })}
onKeyDown={this.onKeydown}
ref={this.element}
tabIndex={-1}
>
<ResizingAnchor