diff --git a/public/app/core/components/ClickOutsideWrapper/ClickOutsideWrapper.tsx b/public/app/core/components/ClickOutsideWrapper/ClickOutsideWrapper.tsx new file mode 100644 index 00000000000..63191862ebb --- /dev/null +++ b/public/app/core/components/ClickOutsideWrapper/ClickOutsideWrapper.tsx @@ -0,0 +1,36 @@ +import { PureComponent } from 'react'; +import ReactDOM from 'react-dom'; + +export interface Props { + onClick: () => void; +} + +interface State { + hasEventListener: boolean; +} + +export class ClickOutsideWrapper extends PureComponent { + state = { + hasEventListener: false, + }; + + componentDidMount() { + window.addEventListener('click', this.onOutsideClick, false); + } + + componentWillUnmount() { + window.removeEventListener('click', this.onOutsideClick, false); + } + + onOutsideClick = event => { + const domNode = ReactDOM.findDOMNode(this) as Element; + + if (!domNode || !domNode.contains(event.target)) { + this.props.onClick(); + } + }; + + render() { + return this.props.children; + } +} diff --git a/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeader.tsx b/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeader.tsx index ab3081ba21e..85ea67f1e68 100644 --- a/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeader.tsx +++ b/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeader.tsx @@ -5,13 +5,37 @@ import { PanelHeaderMenu } from './PanelHeaderMenu'; import { DashboardModel } from 'app/features/dashboard/dashboard_model'; import { PanelModel } from 'app/features/dashboard/panel_model'; +import { ClickOutsideWrapper } from '../../../../core/components/ClickOutsideWrapper/ClickOutsideWrapper'; export interface Props { panel: PanelModel; dashboard: DashboardModel; } -export class PanelHeader extends PureComponent { +interface State { + panelMenuOpen: boolean; +} + +export class PanelHeader extends PureComponent { + state = { + panelMenuOpen: false, + }; + + onMenuToggle = event => { + event.stopPropagation(); + + console.log('toggle menu'); + this.setState(prevState => ({ + panelMenuOpen: !prevState.panelMenuOpen, + })); + }; + + closeMenu = () => { + this.setState({ + panelMenuOpen: false, + }); + }; + render() { const isFullscreen = false; const isLoading = false; @@ -31,14 +55,18 @@ export class PanelHeader extends PureComponent { )} -
+
- + {panel.title} - + {this.state.panelMenuOpen && ( + + + + )} 4m diff --git a/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderMenu.tsx b/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderMenu.tsx index 8eb6b31bf27..cde540c0509 100644 --- a/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderMenu.tsx +++ b/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderMenu.tsx @@ -35,6 +35,7 @@ export class PanelHeaderMenu extends PureComponent { render() { const { dashboard, panel } = this.props; const menu = getPanelMenu(dashboard, panel); - return
{this.renderItems(menu)}
; + + return
{this.renderItems(menu)}
; } }