Migrate a couple of menus using MenuWrapper

src/client/components/boardComponent.tsx

@@ -7,6 +7,7 @@ import { BoardTree } from "../boardTree"
 import { CardFilter } from "../cardFilter"
 import ViewMenu from "../components/viewMenu"
 import MenuWrapper from "../widgets/menuWrapper"
+import Menu from "../widgets/menu"
 import { Constants } from "../constants"
 import { Menu as OldMenu } from "../menu"
 import { Mutator } from "../mutator"
@@ -85,7 +86,13 @@ class BoardComponent extends React.Component<Props, State> {
 
 					<div className="octo-icontitle">
 						{board.icon ?
-							<div className="octo-button octo-icon" onClick={(e) => { this.iconClicked(e) }}>{board.icon}</div>
+							<MenuWrapper>
+								<div className="octo-button octo-icon">{board.icon}</div>
+								<Menu>
+									<Menu.Text id='random' name='Random' onClick={() => mutator.changeIcon(board, undefined, "remove icon")}/>
+									<Menu.Text id='remove' name='Remove Icon' onClick={() => mutator.changeIcon(board, BlockIcons.shared.randomIcon())}/>
+								</Menu>
+							</MenuWrapper>
 							: undefined}
 						<Editable className="title" text={board.title} placeholderText="Untitled Board" onChanged={(text) => { mutator.changeTitle(board, text) }} />
 					</div>
@@ -93,20 +100,20 @@ 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) }} />
-                            <MenuWrapper>
-                                <div
-                                    className="octo-button"
-                                    style={{ color: "#000000", fontWeight: 600 }}
-                                >
-                                    <div className="imageDropdown"></div>
-							    </div>
-                                <ViewMenu
-                                    board={board}
-                                    mutator={mutator}
-                                    boardTree={boardTree}
-                                    showView={showView}
-                                />
-                            </MenuWrapper>
+							<MenuWrapper>
+								<div
+									className="octo-button"
+									style={{ color: "#000000", fontWeight: 600 }}
+								>
+									<div className="imageDropdown"></div>
+								</div>
+								<ViewMenu
+									board={board}
+									mutator={mutator}
+									boardTree={boardTree}
+									showView={showView}
+								/>
+							</MenuWrapper>
 							<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) }}>
@@ -162,7 +169,16 @@ class BoardComponent extends React.Component<Props, State> {
 										onChanged={(text) => { this.propertyNameChanged(group.option, text) }} />
 									<Button text={`${group.cards.length}`} />
 									<div className="octo-spacer" />
-									<Button onClick={(e) => { this.valueOptionClicked(e, group.option) }}><div className="imageOptions" /></Button>
+									<MenuWrapper>
+										<Button><div className="imageOptions" /></Button>
+										<Menu>
+											<Menu.Text id='delete' name='Delete' onClick={() => mutator.deletePropertyOption(boardTree, boardTree.groupByProperty, group.option)}/>
+											<Menu.Separator/>
+											{Constants.menuColors.map((color) =>
+												<Menu.Color key={color.id} id={color.id} name={color.name} onClick={() => mutator.changePropertyOptionColor(boardTree.board, group.option, color.id)} />
+											)}
+										</Menu>
+									</MenuWrapper>
 									<Button onClick={() => { this.addCard(group.option.value) }}><div className="imageAdd" /></Button>
 								</div>
 							)}
@@ -216,28 +232,6 @@ class BoardComponent extends React.Component<Props, State> {
 		)
 	}
 
-	private iconClicked(e: React.MouseEvent) {
-		const { mutator, boardTree } = this.props
-		const { board } = boardTree
-
-		OldMenu.shared.options = [
-			{ id: "random", name: "Random" },
-			{ id: "remove", name: "Remove Icon" },
-		]
-		OldMenu.shared.onMenuClicked = (optionId: string, type?: string) => {
-			switch (optionId) {
-				case "remove":
-					mutator.changeIcon(board, undefined, "remove icon")
-					break
-				case "random":
-					const newIcon = BlockIcons.shared.randomIcon()
-					mutator.changeIcon(board, newIcon)
-					break
-			}
-		}
-		OldMenu.shared.showAtElement(e.target as HTMLElement)
-	}
-
 	async showCard(card?: IBlock) {
 		console.log(`showCard: ${card?.title}`)
 
@@ -262,31 +256,6 @@ class BoardComponent extends React.Component<Props, State> {
 		await mutator.changePropertyOptionValue(boardTree, boardTree.groupByProperty, option, text)
 	}
 
-	async valueOptionClicked(e: React.MouseEvent<HTMLElement>, option: IPropertyOption) {
-		const { mutator, boardTree } = this.props
-
-		OldMenu.shared.options = [
-			{ id: "delete", name: "Delete" },
-			{ id: "", name: "", type: "separator" },
-			...Constants.menuColors
-		]
-		OldMenu.shared.onMenuClicked = async (optionId: string, type?: string) => {
-			switch (optionId) {
-				case "delete":
-					console.log(`Delete property value: ${option.value}`)
-					await mutator.deletePropertyOption(boardTree, boardTree.groupByProperty, option)
-					break
-				default:
-					if (type === "color") {
-						// id is the color
-						await mutator.changePropertyOptionColor(boardTree.board, option, optionId)
-						break
-					}
-			}
-		}
-		OldMenu.shared.showAtElement(e.target as HTMLElement)
-	}
-
 	private filterClicked(e: React.MouseEvent) {
 		this.props.showFilter(e.target as HTMLElement)
 	}

src/client/components/tableComponent.tsx

@@ -7,6 +7,7 @@ import { BoardTree } from "../boardTree"
 import { CsvExporter } from "../csvExporter"
 import ViewMenu from "../components/viewMenu"
 import MenuWrapper from "../widgets/menuWrapper"
+import Menu from "../widgets/menu"
 import { Menu as OldMenu } from "../menu"
 import { Mutator } from "../mutator"
 import { IBlock } from "../octoTypes"
@@ -83,7 +84,13 @@ class TableComponent extends React.Component<Props, State> {
 
 					<div className="octo-icontitle">
 						{board.icon ?
-							<div className="octo-button octo-icon" onClick={(e) => { this.iconClicked(e) }}>{board.icon}</div>
+							<MenuWrapper>
+								<div className="octo-button octo-icon">{board.icon}</div>
+								<Menu>
+									<Menu.Text id='random' name='Random' onClick={() => mutator.changeIcon(board, undefined, "remove icon")}/>
+									<Menu.Text id='remove' name='Remove Icon' onClick={() => mutator.changeIcon(board, BlockIcons.shared.randomIcon())}/>
+								</Menu>
+							</MenuWrapper>
 							: undefined}
 						<Editable className="title" text={board.title} placeholderText="Untitled Board" onChanged={(text) => { mutator.changeTitle(board, text) }} />
 					</div>
@@ -91,20 +98,20 @@ 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) }} />
-                            <MenuWrapper>
-                                <div
-                                    className="octo-button"
-                                    style={{ color: "#000000", fontWeight: 600 }}
-                                >
-                                    <div className="imageDropdown"></div>
-							    </div>
-                                <ViewMenu
-                                    board={board}
-                                    mutator={mutator}
-                                    boardTree={boardTree}
-                                    showView={showView}
-                                />
-                            </MenuWrapper>
+							<MenuWrapper>
+								<div
+									className="octo-button"
+									style={{ color: "#000000", fontWeight: 600 }}
+								>
+									<div className="imageDropdown"></div>
+								</div>
+								<ViewMenu
+									board={board}
+									mutator={mutator}
+									boardTree={boardTree}
+									showView={showView}
+								/>
+							</MenuWrapper>
 							<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>
@@ -213,28 +220,6 @@ class TableComponent extends React.Component<Props, State> {
 		)
 	}
 
-	private iconClicked(e: React.MouseEvent) {
-		const { mutator, boardTree } = this.props
-		const { board } = boardTree
-
-		OldMenu.shared.options = [
-			{ id: "random", name: "Random" },
-			{ id: "remove", name: "Remove Icon" },
-		]
-		OldMenu.shared.onMenuClicked = (optionId: string, type?: string) => {
-			switch (optionId) {
-				case "remove":
-					mutator.changeIcon(board, undefined, "remove icon")
-					break
-				case "random":
-					const newIcon = BlockIcons.shared.randomIcon()
-					mutator.changeIcon(board, newIcon)
-					break
-			}
-		}
-		OldMenu.shared.showAtElement(e.target as HTMLElement)
-	}
-
 	private async propertiesClicked(e: React.MouseEvent) {
 		const { mutator, boardTree } = this.props
 		const { activeView } = boardTree

src/client/widgets/menu.tsx

@@ -54,13 +54,17 @@ type ColorOptionProps = MenuOptionProps & {
 }
 
 class ColorOption extends React.Component<ColorOptionProps> {
+    handleOnClick = () => {
+        this.props.onClick(this.props.id)
+    }
+
     render() {
-        const {name, icon} = this.props;
+        const {id, name, icon} = this.props;
         return (
-            <div className='MenuOption ColorOption menu-option'>
+            <div className='MenuOption ColorOption menu-option' onClick={this.handleOnClick}>
                 <div className='name'>{name}</div>
                 {icon && <div className={'icon ' + icon}></div>}
-                <div className='menu-colorbox'></div>
+                <div className={`menu-colorbox ${id}`}></div>
             </div>
         )
     }

src/client/widgets/menuWrapper.tsx

@@ -86,7 +86,7 @@ export default class MenuWrapper extends React.PureComponent<Props, State> {
                 onClick={this.toggle}
                 ref={this.node}
             >
-                {children && !this.state.open ? Object.values(children)[0] : null}
+                {children ? Object.values(children)[0] : null}
                 {children && this.state.open ? Object.values(children)[1] : null}
             </div>
         );