From 223d017bf94fa72c5c655d830fa8803e15b3fb86 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jes=C3=BAs=20Espino?= <jespinog@gmail.com>
Date: Mon, 26 Oct 2020 13:56:32 +0100
Subject: [PATCH] Splitting menu in multiple components

---
 webapp/src/widgets/menu.tsx                 | 154 --------------------
 webapp/src/widgets/menu/colorOption.tsx     |  29 ++++
 webapp/src/widgets/menu/index.tsx           |   6 +
 webapp/src/widgets/menu/menu.tsx            |  33 +++++
 webapp/src/widgets/menu/menuItem.tsx        |  10 ++
 webapp/src/widgets/menu/separatorOption.tsx |   9 ++
 webapp/src/widgets/menu/subMenuOption.tsx   |  50 +++++++
 webapp/src/widgets/menu/switchOption.tsx    |  35 +++++
 webapp/src/widgets/menu/textOption.tsx      |  28 ++++
 9 files changed, 200 insertions(+), 154 deletions(-)
 delete mode 100644 webapp/src/widgets/menu.tsx
 create mode 100644 webapp/src/widgets/menu/colorOption.tsx
 create mode 100644 webapp/src/widgets/menu/index.tsx
 create mode 100644 webapp/src/widgets/menu/menu.tsx
 create mode 100644 webapp/src/widgets/menu/menuItem.tsx
 create mode 100644 webapp/src/widgets/menu/separatorOption.tsx
 create mode 100644 webapp/src/widgets/menu/subMenuOption.tsx
 create mode 100644 webapp/src/widgets/menu/switchOption.tsx
 create mode 100644 webapp/src/widgets/menu/textOption.tsx

diff --git a/webapp/src/widgets/menu.tsx b/webapp/src/widgets/menu.tsx
deleted file mode 100644
index 91ed99ff7..000000000
--- a/webapp/src/widgets/menu.tsx
+++ /dev/null
@@ -1,154 +0,0 @@
-// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// See LICENSE.txt for license information.
-import React from 'react'
-
-import Switch from './switch'
-
-type MenuOptionProps = {
-    id: string,
-    name: string,
-    onClick?: (id: string) => void,
-}
-
-function SeparatorOption() {
-    return (<div className='MenuOption MenuSeparator menu-separator'/>)
-}
-
-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='menu-name'>{this.props.name}</div>
-                <div
-                    className='imageSubmenuTriangle'
-                    style={{float: 'right'}}
-                />
-                {this.state.isOpen &&
-                    <Menu>
-                        {this.props.children}
-                    </Menu>
-                }
-            </div>
-        )
-    }
-}
-
-type ColorOptionProps = MenuOptionProps & {
-    icon?: 'checked' | 'sortUp' | 'sortDown' | undefined,
-}
-
-class ColorOption extends React.Component<ColorOptionProps> {
-    handleOnClick = () => {
-        this.props.onClick(this.props.id)
-    }
-
-    render() {
-        const {id, name, icon} = this.props
-        return (
-            <div
-                className='MenuOption ColorOption menu-option'
-                onClick={this.handleOnClick}
-            >
-                <div className='menu-name'>{name}</div>
-                {icon && <div className={'icon ' + icon}/>}
-                <div className={`menu-colorbox ${id}`}/>
-            </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'
-                onClick={this.handleOnClick}
-            >
-                <div className='menu-name'>{name}</div>
-                {icon && <div className={`icon ${icon}`}/>}
-                <Switch
-                    isOn={isOn}
-                    onChanged={() => {}}
-                />
-            </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='menu-name'>{name}</div>
-                {icon && <div className={`icon ${icon}`}/>}
-            </div>
-        )
-    }
-}
-
-type MenuProps = {
-    children: React.ReactNode
-    position?: 'top'|'bottom'
-}
-
-export default class Menu extends React.Component<MenuProps> {
-    static Color = ColorOption
-    static SubMenu = SubMenuOption
-    static Switch = SwitchOption
-    static Separator = SeparatorOption
-    static Text = TextOption
-
-    render() {
-        const {position, children} = this.props
-        return (
-            <div className={'Menu menu noselect ' + (position || 'bottom')}>
-                <div className='menu-options'>
-                    {children}
-                </div>
-            </div>
-        )
-    }
-}
diff --git a/webapp/src/widgets/menu/colorOption.tsx b/webapp/src/widgets/menu/colorOption.tsx
new file mode 100644
index 000000000..fab1df337
--- /dev/null
+++ b/webapp/src/widgets/menu/colorOption.tsx
@@ -0,0 +1,29 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+import React from 'react'
+
+import {MenuOptionProps} from './menuItem'
+
+type ColorOptionProps = MenuOptionProps & {
+    icon?: 'checked' | 'sortUp' | 'sortDown' | undefined,
+}
+
+export default class ColorOption extends React.PureComponent<ColorOptionProps> {
+    private handleOnClick = (): void => {
+        this.props.onClick(this.props.id)
+    }
+
+    public render(): JSX.Element {
+        const {id, name, icon} = this.props
+        return (
+            <div
+                className='MenuOption ColorOption menu-option'
+                onClick={this.handleOnClick}
+            >
+                <div className='menu-name'>{name}</div>
+                {icon && <div className={'icon ' + icon}/>}
+                <div className={`menu-colorbox ${id}`}/>
+            </div>
+        )
+    }
+}
diff --git a/webapp/src/widgets/menu/index.tsx b/webapp/src/widgets/menu/index.tsx
new file mode 100644
index 000000000..72976c1c7
--- /dev/null
+++ b/webapp/src/widgets/menu/index.tsx
@@ -0,0 +1,6 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import Menu from './menu'
+
+export default Menu
diff --git a/webapp/src/widgets/menu/menu.tsx b/webapp/src/widgets/menu/menu.tsx
new file mode 100644
index 000000000..e1c2038c3
--- /dev/null
+++ b/webapp/src/widgets/menu/menu.tsx
@@ -0,0 +1,33 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+import React from 'react'
+
+import SeparatorOption from './separatorOption'
+import SwitchOption from './switchOption'
+import TextOption from './textOption'
+import ColorOption from './colorOption'
+import SubMenuOption from './subMenuOption'
+
+type MenuProps = {
+    children: React.ReactNode
+    position?: 'top'|'bottom'
+}
+
+export default class Menu extends React.PureComponent<MenuProps> {
+    static Color = ColorOption
+    static SubMenu = SubMenuOption
+    static Switch = SwitchOption
+    static Separator = SeparatorOption
+    static Text = TextOption
+
+    public render(): JSX.Element {
+        const {position, children} = this.props
+        return (
+            <div className={'Menu menu noselect ' + (position || 'bottom')}>
+                <div className='menu-options'>
+                    {children}
+                </div>
+            </div>
+        )
+    }
+}
diff --git a/webapp/src/widgets/menu/menuItem.tsx b/webapp/src/widgets/menu/menuItem.tsx
new file mode 100644
index 000000000..30b76df1f
--- /dev/null
+++ b/webapp/src/widgets/menu/menuItem.tsx
@@ -0,0 +1,10 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React from 'react'
+
+export type MenuOptionProps = {
+    id: string,
+    name: string,
+    onClick?: (id: string) => void,
+}
diff --git a/webapp/src/widgets/menu/separatorOption.tsx b/webapp/src/widgets/menu/separatorOption.tsx
new file mode 100644
index 000000000..4d5f30559
--- /dev/null
+++ b/webapp/src/widgets/menu/separatorOption.tsx
@@ -0,0 +1,9 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+import React, {FC} from 'react'
+
+const SeparatorOption: FC = (): JSX.Element => (
+    <div className='MenuOption MenuSeparator menu-separator'/>
+)
+
+export default SeparatorOption
diff --git a/webapp/src/widgets/menu/subMenuOption.tsx b/webapp/src/widgets/menu/subMenuOption.tsx
new file mode 100644
index 000000000..be971a9fa
--- /dev/null
+++ b/webapp/src/widgets/menu/subMenuOption.tsx
@@ -0,0 +1,50 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+import React from 'react'
+
+import {MenuOptionProps} from './menuItem'
+
+type SubMenuOptionProps = MenuOptionProps & {
+    position?: 'bottom | top'
+}
+
+type SubMenuState = {
+    isOpen: boolean;
+}
+
+export default class SubMenuOption extends React.PureComponent<SubMenuOptionProps, SubMenuState> {
+    state = {
+        isOpen: false,
+    }
+
+    private handleMouseEnter = (): void => {
+        this.setState({isOpen: true})
+    }
+
+    private close = (): void => {
+        this.setState({isOpen: false})
+    }
+
+    public render(): JSX.Element {
+        return (
+            <div
+                className='MenuOption SubMenuOption menu-option'
+                onMouseEnter={this.handleMouseEnter}
+                onMouseLeave={this.close}
+            >
+                <div className='menu-name'>{this.props.name}</div>
+                <div
+                    className='imageSubmenuTriangle'
+                    style={{float: 'right'}}
+                />
+                {this.state.isOpen &&
+                    <div className={'SubMenu menu noselect ' + (this.props.position || 'bottom')}>
+                        <div className='menu-options'>
+                            {this.props.children}
+                        </div>
+                    </div>
+                }
+            </div>
+        )
+    }
+}
diff --git a/webapp/src/widgets/menu/switchOption.tsx b/webapp/src/widgets/menu/switchOption.tsx
new file mode 100644
index 000000000..8cc74434b
--- /dev/null
+++ b/webapp/src/widgets/menu/switchOption.tsx
@@ -0,0 +1,35 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+import React from 'react'
+
+import Switch from '../switch'
+
+import {MenuOptionProps} from './menuItem'
+
+type SwitchOptionProps = MenuOptionProps & {
+    isOn: boolean,
+    icon?: 'checked' | 'sortUp' | 'sortDown' | undefined,
+}
+
+export default class SwitchOption extends React.PureComponent<SwitchOptionProps> {
+    private handleOnClick = (): void => {
+        this.props.onClick(this.props.id)
+    }
+
+    public render(): JSX.Element {
+        const {name, icon, isOn} = this.props
+        return (
+            <div
+                className='MenuOption SwitchOption menu-option'
+                onClick={this.handleOnClick}
+            >
+                <div className='menu-name'>{name}</div>
+                {icon && <div className={`icon ${icon}`}/>}
+                <Switch
+                    isOn={isOn}
+                    onChanged={() => {}}
+                />
+            </div>
+        )
+    }
+}
diff --git a/webapp/src/widgets/menu/textOption.tsx b/webapp/src/widgets/menu/textOption.tsx
new file mode 100644
index 000000000..24cd50d13
--- /dev/null
+++ b/webapp/src/widgets/menu/textOption.tsx
@@ -0,0 +1,28 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+import React from 'react'
+
+import {MenuOptionProps} from './menuItem'
+
+type TextOptionProps = MenuOptionProps & {
+    icon?: 'checked' | 'sortUp' | 'sortDown' | undefined,
+}
+
+export default class TextOption extends React.PureComponent<TextOptionProps> {
+    private handleOnClick = (): void => {
+        this.props.onClick(this.props.id)
+    }
+
+    public render(): JSX.Element {
+        const {name, icon} = this.props
+        return (
+            <div
+                className='MenuOption TextOption menu-option'
+                onClick={this.handleOnClick}
+            >
+                <div className='menu-name'>{name}</div>
+                {icon && <div className={`icon ${icon}`}/>}
+            </div>
+        )
+    }
+}