Migrating BlockIconSelector to functional component

webapp/src/components/blockIconSelector.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, {useMemo} from 'react'
 import {injectIntl, IntlShape} from 'react-intl'
 
 import {BlockIcons} from '../blockIcons'
@@ -21,36 +21,28 @@ type Props = {
     readonly?: boolean
 }
 
-class BlockIconSelector extends React.Component<Props> {
-    static defaultProps: Partial<Props> = {
-        size: 'm',
-    }
+const BlockIconSelector = React.memo((props: Props) => {
+    const {block, intl, size} = props
 
-    shouldComponentUpdate(): boolean {
-        return true
-    }
-
-    onSelectEmoji = (emoji: string) => {
-        mutator.changeIcon(this.props.block, emoji)
-
-        // Close the menu
+    const onSelectEmoji = useMemo(() => (emoji: string) => {
+        mutator.changeIcon(props.block, emoji)
         document.body.click()
-    }
+    }, [])
 
-    render(): JSX.Element | null {
-        const {block, intl, size} = this.props
     if (!block.icon) {
         return null
     }
-        let className = `octo-icon size-${size}`
-        if (this.props.readonly) {
+
+    let className = `octo-icon size-${size || 'm'}`
+    if (props.readonly) {
         className += ' readonly'
     }
     const iconElement = <div className={className}><span>{block.icon}</span></div>
+
     return (
         <div className='BlockIconSelector'>
-                {this.props.readonly && iconElement}
-                {!this.props.readonly &&
+            {props.readonly && iconElement}
+            {!props.readonly &&
             <MenuWrapper>
                 {iconElement}
                 <Menu>
@@ -65,7 +57,7 @@ class BlockIconSelector extends React.Component<Props> {
                         icon={<EmojiIcon/>}
                         name={intl.formatMessage({id: 'ViewTitle.pick-icon', defaultMessage: 'Pick icon'})}
                     >
-                            <EmojiPicker onSelect={this.onSelectEmoji}/>
+                        <EmojiPicker onSelect={onSelectEmoji}/>
                     </Menu.SubMenu>
                     <Menu.Text
                         id='remove'
@@ -78,7 +70,6 @@ class BlockIconSelector extends React.Component<Props> {
             }
         </div>
     )
-    }
-}
+})
 
 export default injectIntl(BlockIconSelector)