luisgulo/focalboard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Migrating BlockIconSelector to functional component

Browse source
This commit is contained in:
Jesús Espino 2021-03-27 10:25:10 +01:00
parent c54c50f2e8
commit acfc171fe4
1 changed files with 46 additions and 55 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

101
webapp/src/components/blockIconSelector.tsx
View file

@ -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,64 +21,55 @@ 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()
}, [])
if (!block.icon) {
return null
}
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) {
className += ' readonly'
}
const iconElement = <div className={className}><span>{block.icon}</span></div>
return (
<div className='BlockIconSelector'>
{this.props.readonly && iconElement}
{!this.props.readonly &&
<MenuWrapper>
{iconElement}
<Menu>
<Menu.Text
id='random'
icon={<EmojiIcon/>}
name={intl.formatMessage({id: 'ViewTitle.random-icon', defaultMessage: 'Random'})}
onClick={() => mutator.changeIcon(block, BlockIcons.shared.randomIcon())}
/>
<Menu.SubMenu
id='pick'
icon={<EmojiIcon/>}
name={intl.formatMessage({id: 'ViewTitle.pick-icon', defaultMessage: 'Pick icon'})}
>
<EmojiPicker onSelect={this.onSelectEmoji}/>
</Menu.SubMenu>
<Menu.Text
id='remove'
icon={<DeleteIcon/>}
name={intl.formatMessage({id: 'ViewTitle.remove-icon', defaultMessage: 'Remove icon'})}
onClick={() => mutator.changeIcon(block, '', 'remove icon')}
/>
</Menu>
</MenuWrapper>
}
</div>
)
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'>
{props.readonly && iconElement}
{!props.readonly &&
<MenuWrapper>
{iconElement}
<Menu>
<Menu.Text
id='random'
icon={<EmojiIcon/>}
name={intl.formatMessage({id: 'ViewTitle.random-icon', defaultMessage: 'Random'})}
onClick={() => mutator.changeIcon(block, BlockIcons.shared.randomIcon())}
/>
<Menu.SubMenu
id='pick'
icon={<EmojiIcon/>}
name={intl.formatMessage({id: 'ViewTitle.pick-icon', defaultMessage: 'Pick icon'})}
>
<EmojiPicker onSelect={onSelectEmoji}/>
</Menu.SubMenu>
<Menu.Text
id='remove'
icon={<DeleteIcon/>}
name={intl.formatMessage({id: 'ViewTitle.remove-icon', defaultMessage: 'Remove icon'})}
onClick={() => mutator.changeIcon(block, '', 'remove icon')}
/>
</Menu>
</MenuWrapper>
}
</div>
)
})
export default injectIntl(BlockIconSelector)