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

UI/ClickOutsideWrapper: Adds parent prop for situations where event should be on document (#27221)

Browse Source
This commit is contained in:
kay delaney 2020-08-27 09:18:34 +01:00 committed by GitHub
parent 093477c036
commit 262a42b249
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 8 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -10,6 +10,7 @@ export interface Props {
* Runs the 'onClick' function when pressing a key outside of the current element. Defaults to true.
*/
includeButtonPress: boolean;
parent: Window | Document;
}
interface State {
@ -19,22 +20,24 @@ interface State {
export class ClickOutsideWrapper extends PureComponent<Props, State> {
static defaultProps = {
includeButtonPress: true,
parent: window,
};
state = {
hasEventListener: false,
};
componentDidMount() {
document.addEventListener('mousedown', this.onOutsideClick, false);
this.props.parent.addEventListener('click', this.onOutsideClick, false);
if (this.props.includeButtonPress) {
document.addEventListener('keydown', this.onOutsideClick, false);
// Use keyup since keydown already has an eventlistener on window
this.props.parent.addEventListener('keyup', this.onOutsideClick, false);
}
}
componentWillUnmount() {
document.removeEventListener('mousedown', this.onOutsideClick, false);
this.props.parent.removeEventListener('click', this.onOutsideClick, false);
if (this.props.includeButtonPress) {
document.removeEventListener('keydown', this.onOutsideClick, false);
this.props.parent.removeEventListener('keyup', this.onOutsideClick, false);
}
}

2
public/app/features/dashboard/dashgrid/PanelHeader/PanelHeader.tsx
View File

@ -180,7 +180,7 @@ export class PanelHeader extends Component<Props, State> {
<span className="panel-title-text">{title}</span>
<Icon name="angle-down" className="panel-menu-toggle" />
{this.state.panelMenuOpen && (
<ClickOutsideWrapper onClick={this.closeMenu}>
<ClickOutsideWrapper onClick={this.closeMenu} parent={document}>
<PanelHeaderMenu items={menuItems} />
</ClickOutsideWrapper>
)}