Merge pull request #7 from mattermost/menu-widget

Sample implementation of the menu widget (some extra work needed)

src/client/components/boardComponent.tsx

@@ -5,8 +5,9 @@ import { BlockIcons } from "../blockIcons"
 import { IPropertyOption } from "../board"
 import { BoardTree } from "../boardTree"
 import { CardFilter } from "../cardFilter"
+import ViewMenu from "../components/viewMenu"
 import { Constants } from "../constants"
-import { Menu } from "../menu"
+import { Menu as OldMenu } from "../menu"
 import { Mutator } from "../mutator"
 import { IBlock } from "../octoTypes"
 import { OctoUtils } from "../octoUtils"
@@ -28,6 +29,7 @@ type Props = {
 type State = {
 	isHoverOnCover: boolean
 	isSearching: boolean
+	viewMenu: boolean
 }
 
 class BoardComponent extends React.Component<Props, State> {
@@ -37,7 +39,7 @@ class BoardComponent extends React.Component<Props, State> {
 
 	constructor(props: Props) {
 		super(props)
-		this.state = { isHoverOnCover: false, isSearching: !!this.props.boardTree?.getSearchText() }
+		this.state = { isHoverOnCover: false, isSearching: !!this.props.boardTree?.getSearchText(), viewMenu: false }
 	}
 
 	componentDidUpdate(prevPros: Props, prevState: State) {
@@ -91,7 +93,21 @@ class BoardComponent extends React.Component<Props, State> {
 					<div className="octo-board">
 						<div className="octo-controls">
 							<Editable style={{ color: "#000000", fontWeight: 600 }} text={activeView.title} placeholderText="Untitled View" onChanged={(text) => { mutator.changeTitle(activeView, text) }} />
-							<div className="octo-button" style={{ color: "#000000", fontWeight: 600 }} onClick={(e) => { OctoUtils.showViewMenu(e, mutator, boardTree, showView) }}><div className="imageDropdown"></div></div>
+							<div
+								className="octo-button"
+								style={{ color: "#000000", fontWeight: 600 }}
+								onClick={() => this.setState({ viewMenu: true })}
+							>
+								{this.state.viewMenu &&
+									<ViewMenu
+										board={board}
+										onClose={() => this.setState({ viewMenu: false })}
+										mutator={mutator}
+										boardTree={boardTree}
+										showView={showView}
+									/>}
+								<div className="imageDropdown"></div>
+							</div>
 							<div className="octo-spacer"></div>
 							<div className="octo-button" onClick={(e) => { this.propertiesClicked(e) }}>Properties</div>
 							<div className="octo-button" id="groupByButton" onClick={(e) => { this.groupByClicked(e) }}>
@@ -205,11 +221,11 @@ class BoardComponent extends React.Component<Props, State> {
 		const { mutator, boardTree } = this.props
 		const { board } = boardTree
 
-		Menu.shared.options = [
+		OldMenu.shared.options = [
 			{ id: "random", name: "Random" },
 			{ id: "remove", name: "Remove Icon" },
 		]
-		Menu.shared.onMenuClicked = (optionId: string, type?: string) => {
+		OldMenu.shared.onMenuClicked = (optionId: string, type?: string) => {
 			switch (optionId) {
 				case "remove":
 					mutator.changeIcon(board, undefined, "remove icon")
@@ -220,7 +236,7 @@ class BoardComponent extends React.Component<Props, State> {
 					break
 			}
 		}
-		Menu.shared.showAtElement(e.target as HTMLElement)
+		OldMenu.shared.showAtElement(e.target as HTMLElement)
 	}
 
 	async showCard(card?: IBlock) {
@@ -250,12 +266,12 @@ class BoardComponent extends React.Component<Props, State> {
 	async valueOptionClicked(e: React.MouseEvent<HTMLElement>, option: IPropertyOption) {
 		const { mutator, boardTree } = this.props
 
-		Menu.shared.options = [
+		OldMenu.shared.options = [
 			{ id: "delete", name: "Delete" },
 			{ id: "", name: "", type: "separator" },
 			...Constants.menuColors
 		]
-		Menu.shared.onMenuClicked = async (optionId: string, type?: string) => {
+		OldMenu.shared.onMenuClicked = async (optionId: string, type?: string) => {
 			switch (optionId) {
 				case "delete":
 					console.log(`Delete property value: ${option.value}`)
@@ -269,7 +285,7 @@ class BoardComponent extends React.Component<Props, State> {
 					}
 			}
 		}
-		Menu.shared.showAtElement(e.target as HTMLElement)
+		OldMenu.shared.showAtElement(e.target as HTMLElement)
 	}
 
 	private filterClicked(e: React.MouseEvent) {
@@ -279,13 +295,13 @@ class BoardComponent extends React.Component<Props, State> {
 	private async optionsClicked(e: React.MouseEvent) {
 		const { boardTree } = this.props
 
-		Menu.shared.options = [
+		OldMenu.shared.options = [
 			{ id: "exportBoardArchive", name: "Export board archive" },
 			{ id: "testAdd100Cards", name: "TEST: Add 100 cards" },
 			{ id: "testAdd1000Cards", name: "TEST: Add 1,000 cards" },
 		]
 
-		Menu.shared.onMenuClicked = async (id: string) => {
+		OldMenu.shared.onMenuClicked = async (id: string) => {
 			switch (id) {
 				case "exportBoardArchive": {
 					Archiver.exportBoardTree(boardTree)
@@ -299,7 +315,7 @@ class BoardComponent extends React.Component<Props, State> {
 				}
 			}
 		}
-		Menu.shared.showAtElement(e.target as HTMLElement)
+		OldMenu.shared.showAtElement(e.target as HTMLElement)
 	}
 
 	private async testAddCards(count: number) {
@@ -327,12 +343,12 @@ class BoardComponent extends React.Component<Props, State> {
 		const { activeView } = boardTree
 
 		const selectProperties = boardTree.board.cardProperties
-		Menu.shared.options = selectProperties.map((o) => {
+		OldMenu.shared.options = selectProperties.map((o) => {
 			const isVisible = activeView.visiblePropertyIds.includes(o.id)
 			return { id: o.id, name: o.name, type: "switch", isOn: isVisible }
 		})
 
-		Menu.shared.onMenuToggled = async (id: string, isOn: boolean) => {
+		OldMenu.shared.onMenuToggled = async (id: string, isOn: boolean) => {
 			const property = selectProperties.find(o => o.id === id)
 			Utils.assertValue(property)
 			Utils.log(`Toggle property ${property.name} ${isOn}`)
@@ -345,20 +361,20 @@ class BoardComponent extends React.Component<Props, State> {
 			}
 			await mutator.changeViewVisibleProperties(activeView, newVisiblePropertyIds)
 		}
-		Menu.shared.showAtElement(e.target as HTMLElement)
+		OldMenu.shared.showAtElement(e.target as HTMLElement)
 	}
 
 	private async groupByClicked(e: React.MouseEvent) {
 		const { mutator, boardTree } = this.props
 
 		const selectProperties = boardTree.board.cardProperties.filter(o => o.type === "select")
-		Menu.shared.options = selectProperties.map((o) => { return { id: o.id, name: o.name } })
+		OldMenu.shared.options = selectProperties.map((o) => { return { id: o.id, name: o.name } })
-		Menu.shared.onMenuClicked = async (command: string) => {
+		OldMenu.shared.onMenuClicked = async (command: string) => {
 			if (boardTree.activeView.groupById === command) { return }
 
 			await mutator.changeViewGroupById(boardTree.activeView, command)
 		}
-		Menu.shared.showAtElement(e.target as HTMLElement)
+		OldMenu.shared.showAtElement(e.target as HTMLElement)
 	}
 
 	async addGroupClicked() {

src/client/components/rootPortal.tsx

@@ -1,44 +1,44 @@
 // Copyright (c) 2020-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import React from 'react';
+import React from 'react'
-import ReactDOM from 'react-dom';
+import ReactDOM from 'react-dom'
-import PropTypes from 'prop-types';
+import PropTypes from 'prop-types'
 
 type Props = {
-    children: React.ReactNode
+	children: React.ReactNode
 }
 
 export default class RootPortal extends React.PureComponent<Props> {
-    el: HTMLDivElement
+	el: HTMLDivElement
 
-    static propTypes = {
+	static propTypes = {
-        children: PropTypes.node,
+		children: PropTypes.node,
-    }
+	}
 
-    constructor(props: Props) {
+	constructor(props: Props) {
-        super(props);
+		super(props)
-        this.el = document.createElement('div');
+		this.el = document.createElement('div')
-    }
+	}
 
-    componentDidMount() {
+	componentDidMount() {
-        const rootPortal = document.getElementById('root-portal');
+		const rootPortal = document.getElementById('root-portal')
-        if (rootPortal) {
+		if (rootPortal) {
-            rootPortal.appendChild(this.el);
+			rootPortal.appendChild(this.el)
-        }
+		}
-    }
+	}
 
-    componentWillUnmount() {
+	componentWillUnmount() {
-        const rootPortal = document.getElementById('root-portal');
+		const rootPortal = document.getElementById('root-portal')
-        if (rootPortal) {
+		if (rootPortal) {
-            rootPortal.removeChild(this.el);
+			rootPortal.removeChild(this.el)
-        }
+		}
-    }
+	}
 
-    render() {
+	render() {
-        return ReactDOM.createPortal(
+		return ReactDOM.createPortal(
-            this.props.children,
+			this.props.children,
-            this.el,
+			this.el,
-        );
+		)
-    }
+	}
 }

src/client/components/tableComponent.tsx

@@ -5,7 +5,8 @@ import { BlockIcons } from "../blockIcons"
 import { IPropertyTemplate } from "../board"
 import { BoardTree } from "../boardTree"
 import { CsvExporter } from "../csvExporter"
-import { Menu } from "../menu"
+import ViewMenu from "../components/viewMenu"
+import { Menu as OldMenu } from "../menu"
 import { Mutator } from "../mutator"
 import { IBlock } from "../octoTypes"
 import { OctoUtils } from "../octoUtils"
@@ -26,6 +27,7 @@ type Props = {
 type State = {
 	isHoverOnCover: boolean
 	isSearching: boolean
+	viewMenu: boolean
 }
 
 class TableComponent extends React.Component<Props, State> {
@@ -36,7 +38,7 @@ class TableComponent extends React.Component<Props, State> {
 
 	constructor(props: Props) {
 		super(props)
-		this.state = { isHoverOnCover: false, isSearching: !!this.props.boardTree?.getSearchText() }
+		this.state = { isHoverOnCover: false, isSearching: !!this.props.boardTree?.getSearchText(), viewMenu: false }
 	}
 
 	componentDidUpdate(prevPros: Props, prevState: State) {
@@ -88,7 +90,21 @@ class TableComponent extends React.Component<Props, State> {
 					<div className="octo-table">
 						<div className="octo-controls">
 							<Editable style={{ color: "#000000", fontWeight: 600 }} text={activeView.title} placeholderText="Untitled View" onChanged={(text) => { mutator.changeTitle(activeView, text) }} />
-							<div className="octo-button" style={{ color: "#000000", fontWeight: 600 }} onClick={(e) => { OctoUtils.showViewMenu(e, mutator, boardTree, showView) }}><div className="imageDropdown"></div></div>
+							<div
+								className="octo-button"
+								style={{ color: "#000000", fontWeight: 600 }}
+								onClick={() => this.setState({ viewMenu: true })}
+							>
+								{this.state.viewMenu &&
+									<ViewMenu
+										board={board}
+										onClose={() => this.setState({ viewMenu: false })}
+										mutator={mutator}
+										boardTree={boardTree}
+										showView={showView}
+									/>}
+								<div className="imageDropdown"></div>
+							</div>
 							<div className="octo-spacer"></div>
 							<div className="octo-button" onClick={(e) => { this.propertiesClicked(e) }}>Properties</div>
 							<div className={hasFilter ? "octo-button active" : "octo-button"} onClick={(e) => { this.filterClicked(e) }}>Filter</div>
@@ -201,11 +217,11 @@ class TableComponent extends React.Component<Props, State> {
 		const { mutator, boardTree } = this.props
 		const { board } = boardTree
 
-		Menu.shared.options = [
+		OldMenu.shared.options = [
 			{ id: "random", name: "Random" },
 			{ id: "remove", name: "Remove Icon" },
 		]
-		Menu.shared.onMenuClicked = (optionId: string, type?: string) => {
+		OldMenu.shared.onMenuClicked = (optionId: string, type?: string) => {
 			switch (optionId) {
 				case "remove":
 					mutator.changeIcon(board, undefined, "remove icon")
@@ -216,7 +232,7 @@ class TableComponent extends React.Component<Props, State> {
 					break
 			}
 		}
-		Menu.shared.showAtElement(e.target as HTMLElement)
+		OldMenu.shared.showAtElement(e.target as HTMLElement)
 	}
 
 	private async propertiesClicked(e: React.MouseEvent) {
@@ -224,12 +240,12 @@ class TableComponent extends React.Component<Props, State> {
 		const { activeView } = boardTree
 
 		const selectProperties = boardTree.board.cardProperties
-		Menu.shared.options = selectProperties.map((o) => {
+		OldMenu.shared.options = selectProperties.map((o) => {
 			const isVisible = activeView.visiblePropertyIds.includes(o.id)
 			return { id: o.id, name: o.name, type: "switch", isOn: isVisible }
 		})
 
-		Menu.shared.onMenuToggled = async (id: string, isOn: boolean) => {
+		OldMenu.shared.onMenuToggled = async (id: string, isOn: boolean) => {
 			const property = selectProperties.find(o => o.id === id)
 			Utils.assertValue(property)
 			Utils.log(`Toggle property ${property.name} ${isOn}`)
@@ -242,7 +258,7 @@ class TableComponent extends React.Component<Props, State> {
 			}
 			await mutator.changeViewVisibleProperties(activeView, newVisiblePropertyIds)
 		}
-		Menu.shared.showAtElement(e.target as HTMLElement)
+		OldMenu.shared.showAtElement(e.target as HTMLElement)
 	}
 
 	private filterClicked(e: React.MouseEvent) {
@@ -252,12 +268,12 @@ class TableComponent extends React.Component<Props, State> {
 	private async optionsClicked(e: React.MouseEvent) {
 		const { boardTree } = this.props
 
-		Menu.shared.options = [
+		OldMenu.shared.options = [
 			{ id: "exportCsv", name: "Export to CSV" },
 			{ id: "exportBoardArchive", name: "Export board archive" },
 		]
 
-		Menu.shared.onMenuClicked = async (id: string) => {
+		OldMenu.shared.onMenuClicked = async (id: string) => {
 			switch (id) {
 				case "exportCsv": {
 					CsvExporter.exportTableCsv(boardTree)
@@ -269,7 +285,7 @@ class TableComponent extends React.Component<Props, State> {
 				}
 			}
 		}
-		Menu.shared.showAtElement(e.target as HTMLElement)
+		OldMenu.shared.showAtElement(e.target as HTMLElement)
 	}
 
 	private async headerClicked(e: React.MouseEvent<HTMLDivElement>, templateId: string) {
@@ -290,8 +306,8 @@ class TableComponent extends React.Component<Props, State> {
 			options.push({ id: "delete", name: "Delete" })
 		}
 
-		Menu.shared.options = options
+		OldMenu.shared.options = options
-		Menu.shared.onMenuClicked = async (optionId: string, type?: string) => {
+		OldMenu.shared.onMenuClicked = async (optionId: string, type?: string) => {
 			switch (optionId) {
 				case "sortAscending": {
 					const newSortOptions = [
@@ -344,7 +360,7 @@ class TableComponent extends React.Component<Props, State> {
 				}
 			}
 		}
-		Menu.shared.showAtElement(e.target as HTMLElement)
+		OldMenu.shared.showAtElement(e.target as HTMLElement)
 	}
 
 	async showCard(card: IBlock) {

src/client/components/viewMenu.tsx

@@ -0,0 +1,84 @@
+import React from "react"
+import { Board } from "../board"
+import { BoardTree } from "../boardTree"
+import { BoardView } from "../boardView"
+import { Mutator } from "../mutator"
+import { Utils } from "../utils"
+import Menu from "../widgets/menu"
+
+type Props = {
+	mutator: Mutator,
+	boardTree?: BoardTree
+	board: Board,
+	showView: (id: string) => void
+	onClose: () => void,
+}
+
+export default class ViewMenu extends React.Component<Props> {
+	handleDeleteView = async (id: string) => {
+		const { board, boardTree, mutator, showView } = this.props
+		Utils.log(`deleteView`)
+		const view = boardTree.activeView
+		const nextView = boardTree.views.find(o => o !== view)
+		await mutator.deleteBlock(view, "delete view")
+		showView(nextView.id)
+	}
+
+	handleViewClick = (id: string) => {
+		const { boardTree, showView } = this.props
+		Utils.log(`view ` + id)
+		const view = boardTree.views.find(o => o.id === id)
+		showView(view.id)
+	}
+
+	handleAddViewBoard = async (id: string) => {
+		const { board, boardTree, mutator, showView } = this.props
+		Utils.log(`addview-board`)
+		const view = new BoardView()
+		view.title = "Board View"
+		view.viewType = "board"
+		view.parentId = board.id
+
+		const oldViewId = boardTree.activeView.id
+
+		await mutator.insertBlock(
+			view,
+			"add view",
+			async () => { showView(view.id) },
+			async () => { showView(oldViewId) })
+	}
+
+	handleAddViewTable = async (id: string) => {
+		const { board, boardTree, mutator, showView } = this.props
+
+		Utils.log(`addview-table`)
+		const view = new BoardView()
+		view.title = "Table View"
+		view.viewType = "table"
+		view.parentId = board.id
+		view.visiblePropertyIds = board.cardProperties.map(o => o.id)
+
+		const oldViewId = boardTree.activeView.id
+
+		await mutator.insertBlock(
+			view,
+			"add view",
+			async () => { showView(view.id) },
+			async () => { showView(oldViewId) })
+	}
+
+	render() {
+		const { onClose, boardTree } = this.props
+		return (
+			<Menu onClose={onClose}>
+				{boardTree.views.map((view) => (<Menu.Text key={view.id} id={view.id} name={view.title} onClick={this.handleViewClick} />))}
+				<Menu.Separator />
+				{boardTree.views.length > 1 && <Menu.Text id="__deleteView" name="Delete View" onClick={this.handleDeleteView} />}
+				<Menu.SubMenu id="__addView" name="Add View">
+					<Menu.Text id='board' name='Board' onClick={this.handleAddViewBoard} />
+					<Menu.Text id='table' name='Table' onClick={this.handleAddViewTable} />
+				</Menu.SubMenu>
+			</Menu>
+		)
+	}
+}

src/client/octoUtils.tsx

@@ -9,75 +9,6 @@ import { IBlock } from "./octoTypes"
 import { Utils } from "./utils"
 
 class OctoUtils {
-	static async showViewMenu(e: React.MouseEvent, mutator: Mutator, boardTree: BoardTree, showView: (id: string) => void) {
-		const { board } = boardTree
-
-		const options: MenuOption[] = boardTree.views.map(view => ({ id: view.id, name: view.title || "Untitled View" }))
-		options.push({ id: "", name: "", type: "separator" })
-		if (boardTree.views.length > 1) {
-			options.push({ id: "__deleteView", name: "Delete View" })
-		}
-		options.push({ id: "__addview", name: "Add View", type: "submenu" })
-
-		const addViewMenuOptions = [
-			{ id: "board", name: "Board" },
-			{ id: "table", name: "Table" }
-		]
-		Menu.shared.subMenuOptions.set("__addview", addViewMenuOptions)
-
-		Menu.shared.options = options
-		Menu.shared.onMenuClicked = async (optionId: string, type?: string) => {
-			switch (optionId) {
-				case "__deleteView": {
-					Utils.log(`deleteView`)
-					const view = boardTree.activeView
-					const nextView = boardTree.views.find(o => o !== view)
-					await mutator.deleteBlock(view, "delete view")
-					showView(nextView.id)
-					break
-				}
-				case "__addview-board": {
-					Utils.log(`addview-board`)
-					const view = new BoardView()
-					view.title = "Board View"
-					view.viewType = "board"
-					view.parentId = board.id
-
-					const oldViewId = boardTree.activeView.id
-
-					await mutator.insertBlock(
-						view,
-						"add view",
-						async () => { showView(view.id) },
-						async () => { showView(oldViewId) })
-					break
-				}
-				case "__addview-table": {
-					Utils.log(`addview-table`)
-					const view = new BoardView()
-					view.title = "Table View"
-					view.viewType = "table"
-					view.parentId = board.id
-					view.visiblePropertyIds = board.cardProperties.map(o => o.id)
-
-					const oldViewId = boardTree.activeView.id
-
-					await mutator.insertBlock(
-						view,
-						"add view",
-						async () => { showView(view.id) },
-						async () => { showView(oldViewId) })
-					break
-				}
-				default: {
-					const view = boardTree.views.find(o => o.id === optionId)
-					showView(view.id)
-				}
-			}
-		}
-		Menu.shared.showAtElement(e.target as HTMLElement)
-	}
-
 	static propertyDisplayValue(block: IBlock, propertyValue: string | undefined, propertyTemplate: IPropertyTemplate) {
 		let displayValue: string
 		switch (propertyTemplate.type) {

src/client/widgets/menu.tsx

@@ -0,0 +1,159 @@
+import React from 'react';
+
+type MenuOptionProps = {
+	id: string,
+	name: string,
+    onClick?: (id: string) => void,
+}
+
+function SeparatorOption() {
+    return (<div className="MenuOption MenuSeparator menu-separator"></div>)
+}
+
+type SubMenuOptionProps = MenuOptionProps & {
+}
+
+type SubMenuState = {
+    isOpen: boolean;
+}
+
+class SubMenuOption extends React.Component<SubMenuOptionProps, SubMenuState> {
+    state = {
+        isOpen: false
+    }
+
+    handleMouseEnter = () => {
+        this.setState({isOpen: true});
+    }
+
+    close = () => {
+        this.setState({isOpen: false});
+    }
+
+    render() {
+        return (
+            <div
+                className='MenuOption SubMenuOption menu-option'
+                onMouseEnter={this.handleMouseEnter}
+                onMouseLeave={this.close}
+            >
+                <div className='name menu-name'>{this.props.name}</div>
+                <div className="imageSubmenuTriangle" style={{float: 'right'}}></div>
+                {this.state.isOpen &&
+                    <Menu onClose={this.close}>
+                        {this.props.children}
+                    </Menu>
+                }
+            </div>
+        )
+    }
+}
+
+type ColorOptionProps = MenuOptionProps & {
+	icon?: "checked" | "sortUp" | "sortDown" | undefined,
+}
+
+class ColorOption extends React.Component<ColorOptionProps> {
+    render() {
+        const {name, icon} = this.props;
+        return (
+            <div className='MenuOption ColorOption menu-option'>
+                <div className='name'>{name}</div>
+                {icon && <div className={'icon ' + icon}></div>}
+                <div className='menu-colorbox'></div>
+            </div>
+        )
+    }
+}
+
+type SwitchOptionProps = MenuOptionProps & {
+	isOn: boolean,
+	icon?: "checked" | "sortUp" | "sortDown" | undefined,
+}
+
+class SwitchOption extends React.Component<SwitchOptionProps> {
+    handleOnClick = () => {
+        this.props.onClick(this.props.id)
+    }
+    render() {
+        const {name, icon, isOn} = this.props;
+        return (
+            <div className='MenuOption SwitchOption menu-option'>
+                <div className='name'>{name}</div>
+                {icon && <div className={`icon ${icon}`}></div>}
+                <div className={isOn ? "octo-switch on" : "octo-switch"}>
+                    <div
+                        className="octo-switch-inner"
+                        onClick={this.handleOnClick}
+                    ></div>
+                </div>
+            </div>
+        );
+    }
+}
+
+type TextOptionProps = MenuOptionProps & {
+	icon?: "checked" | "sortUp" | "sortDown" | undefined,
+}
+class TextOption extends React.Component<TextOptionProps> {
+    handleOnClick = () => {
+        this.props.onClick(this.props.id)
+    }
+
+    render() {
+        const {name, icon} = this.props;
+        return (
+            <div className='MenuOption TextOption menu-option' onClick={this.handleOnClick}>
+                <div className='name'>{name}</div>
+                {icon && <div className={`icon ${icon}`}></div>}
+            </div>
+        );
+    }
+}
+
+type MenuProps = {
+    children: React.ReactNode
+    onClose: () => void
+}
+
+export default class Menu extends React.Component<MenuProps> {
+    static Color = ColorOption
+    static SubMenu = SubMenuOption
+    static Switch = SwitchOption
+    static Separator = SeparatorOption
+    static Text = TextOption
+
+    onBodyClick = (e: MouseEvent) => {
+        this.props.onClose()
+    }
+
+    onBodyKeyDown = (e: KeyboardEvent) => {
+        // Ignore keydown events on other elements
+        if (e.target !== document.body) { return }
+        if (e.keyCode === 27) {
+            // ESC
+            this.props.onClose()
+            e.stopPropagation()
+        }
+    }
+
+    componentDidMount() {
+        document.addEventListener("click", this.onBodyClick)
+        document.addEventListener("keydown", this.onBodyKeyDown)
+    }
+
+    componentWillUnmount() {
+        document.removeEventListener("click", this.onBodyClick)
+        document.removeEventListener("keydown", this.onBodyKeyDown)
+    }
+
+    render() {
+        return (
+            <div className="Menu menu noselect">
+                <div className="menu-options">
+                    {this.props.children}
+                </div>
+            </div>
+        )
+    }
+}