IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

PanelMenu: Make menu disappear on button press (#25015)

Browse Source 
* Fix button press outside

* Add a prop to toggle button press

* Add comments

* Remove public
This commit is contained in:
Tobias Skarhed 2020-05-22 16:20:48 +02:00 committed by GitHub
parent 84031649e3
commit 5f4526ca64
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 17 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
packages/grafana-ui/src/components/ClickOutsideWrapper/ClickOutsideWrapper.tsx
View File

@ -2,7 +2,14 @@ import { PureComponent } from 'react';
import ReactDOM from 'react-dom'; import ReactDOM from 'react-dom';
export interface Props { export interface Props {
/**
* When clicking outside of current element
*/
onClick: () => void; onClick: () => void;
/**
* Runs the 'onClick' function when pressing a key outside of the current element. Defaults to true.
*/
includeButtonPress: boolean;
} }
interface State { interface State {
@ -10,16 +17,26 @@ interface State {
} }
export class ClickOutsideWrapper extends PureComponent<Props, State> { export class ClickOutsideWrapper extends PureComponent<Props, State> {
static defaultProps = {
includeButtonPress: true,
};
state = { state = {
hasEventListener: false, hasEventListener: false,
}; };
componentDidMount() { componentDidMount() {
window.addEventListener('click', this.onOutsideClick, false); window.addEventListener('click', this.onOutsideClick, false);
if (this.props.includeButtonPress) {
// Use keyup since keydown already has an eventlistener on window
window.addEventListener('keyup', this.onOutsideClick, false);
}
} }
componentWillUnmount() { componentWillUnmount() {
window.removeEventListener('click', this.onOutsideClick, false); window.removeEventListener('click', this.onOutsideClick, false);
if (this.props.includeButtonPress) {
window.addEventListener('keyup', this.onOutsideClick, false);
}
} }
onOutsideClick = (event: any) => { onOutsideClick = (event: any) => {