Simplifiying SubMenuOption

webapp/src/widgets/menu/subMenuOption.tsx

@@ -1,6 +1,6 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
-import React from 'react'
+import React, {useState} from 'react'
 
 import SubmenuTriangleIcon from '../icons/submenuTriangle'
 
@@ -13,70 +13,53 @@ type SubMenuOptionProps = {
     name: string,
     position?: 'bottom' | 'top'
     icon?: React.ReactNode
+    children: React.ReactNode
 }
 
-type SubMenuState = {
-    isOpen: boolean;
-}
+function SubMenuOption(props: SubMenuOptionProps): JSX.Element {
+    const [isOpen, setIsOpen] = useState(false)
 
-export default class SubMenuOption extends React.PureComponent<SubMenuOptionProps, SubMenuState> {
-    state = {
-        isOpen: false,
-    }
-
-    private handleMouseEnter = (): void => {
-        setTimeout(() => {
-            this.setState({isOpen: true})
-        }, 50)
-    }
-
-    // The click handler is needed to support Android Chrome
-    private handleClick = (e: React.MouseEvent): void => {
-        e.preventDefault()
-        e.stopPropagation()
-        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}
-                onClick={this.handleClick}
-            >
-                {this.props.icon ?? <div className='noicon'/>}
-                <div className='menu-name'>{this.props.name}</div>
-                <SubmenuTriangleIcon/>
-                {this.state.isOpen &&
-                    <div className={'SubMenu Menu noselect ' + (this.props.position || 'bottom')}>
-                        <div className='menu-contents'>
-                            <div className='menu-options'>
-                                {this.props.children}
-                            </div>
-                            <div className='menu-spacer hideOnWidescreen'/>
-
-                            <div className='menu-options hideOnWidescreen'>
-                                <Menu.Text
-                                    id='menu-cancel'
-                                    name={'Cancel'}
-                                    className='menu-cancel'
-                                    onClick={this.onCancel}
-                                />
-                            </div>
+    return (
+        <div
+            id={props.id}
+            className='MenuOption SubMenuOption menu-option'
+            onMouseEnter={() => {
+                setTimeout(() => {
+                    setIsOpen(true)
+                }, 50)
+            }}
+            onMouseLeave={() => setIsOpen(false)}
+            onClick={(e: React.MouseEvent) => {
+                e.preventDefault()
+                e.stopPropagation()
+                setIsOpen(true)
+            }}
+        >
+            {props.icon ?? <div className='noicon'/>}
+            <div className='menu-name'>{props.name}</div>
+            <SubmenuTriangleIcon/>
+            {isOpen &&
+                <div className={'SubMenu Menu noselect ' + (props.position || 'bottom')}>
+                    <div className='menu-contents'>
+                        <div className='menu-options'>
+                            {props.children}
                         </div>
+                        <div className='menu-spacer hideOnWidescreen'/>
 
+                        <div className='menu-options hideOnWidescreen'>
+                            <Menu.Text
+                                id='menu-cancel'
+                                name={'Cancel'}
+                                className='menu-cancel'
+                                onClick={() => undefined}
+                            />
+                        </div>
                     </div>
-                }
-            </div>
-        )
-    }
 
-    private onCancel = () => {
-        // No need to do anything, as click bubbled up to MenuWrapper, which closes
-    }
+                </div>
+            }
+        </div>
+    )
 }
+
+export default React.memo(SubMenuOption)

webapp/src/widgets/menu/switchOption.tsx

@@ -19,7 +19,7 @@ function SwitchOption(props: SwitchOptionProps): JSX.Element {
             className='MenuOption SwitchOption menu-option'
             onClick={(e: React.MouseEvent) => {
                 e.target.dispatchEvent(new Event('menuItemClicked'))
-                this.props.onClick(props.id)
+                props.onClick(props.id)
             }}
         >
             {icon ?? <div className='noicon'/>}