maxmustermann/kibana
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

[Lens] Close dimension panel on escape key (#96783)

Browse source 
* ✨ Close panel on escape key

* 👌 Stabilize callback ref

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
This commit is contained in:
Marco Liberati 2021-04-15 14:29:40 +02:00 committed by GitHub
parent d5a4a708f9
commit dd142b92ae
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 16 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_container.tsx
View file

@ -7,7 +7,7 @@
import './dimension_container.scss';
import React, { useState, useEffect } from 'react';
import React, { useState, useEffect, useCallback } from 'react';
import {
EuiFlyoutHeader,
EuiFlyoutFooter,
@ -18,6 +18,8 @@ import {
EuiFlexItem,
EuiFocusTrap,
EuiOutsideClickDetector,
EuiWindowEvent,
keys,
} from '@elastic/eui';
import { i18n } from '@kbn/i18n';
@ -35,10 +37,10 @@ export function DimensionContainer({
}) {
const [focusTrapIsEnabled, setFocusTrapIsEnabled] = useState(false);
const closeFlyout = () => {
const closeFlyout = useCallback(() => {
handleClose();
setFocusTrapIsEnabled(false);
};
}, [handleClose]);
useEffect(() => {
if (isOpen) {
@ -49,8 +51,19 @@ export function DimensionContainer({
}
}, [isOpen]);
const closeOnEscape = useCallback(
(event: KeyboardEvent) => {
if (event.key === keys.ESCAPE) {
event.preventDefault();
closeFlyout();
}
},
[closeFlyout]
);
return isOpen ? (
<EuiFocusTrap disabled={!focusTrapIsEnabled} clickOutsideDisables={true}>
<EuiWindowEvent event="keydown" handler={closeOnEscape} />
<EuiOutsideClickDetector onOutsideClick={closeFlyout} isDisabled={!isOpen}>
<div
role="dialog"