iconSelector.tsx

TLDR

This file contains a React component called IconSelector. It renders a menu that allows the user to select an icon or perform actions related to icons. The component accepts props such as readonly, iconElement, and various event handlers.

Classes

IconSelector

The IconSelector class is a React component that renders a menu for selecting icons or performing actions related to icons. It accepts the following props:

• readonly: A boolean indicating whether the icon selector is read-only.
• iconElement: The element representing the selected icon.
• onAddRandomIcon: An event handler for adding a random icon.
• onSelectEmoji: An event handler for selecting an emoji icon.
• onRemoveIcon: An event handler for removing the selected icon.

If readonly is true, only the iconElement will be displayed. Otherwise, the iconElement will be displayed along with a menu that includes options to add a random icon, select an emoji icon, and remove the selected icon.

// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import React from 'react'
import {useIntl} from 'react-intl'

import RandomIcon from '../widgets/icons/random'
import EmojiPicker from '../widgets/emojiPicker'
import DeleteIcon from '../widgets/icons/delete'
import EmojiIcon from '../widgets/icons/emoji'
import Menu from '../widgets/menu'
import MenuWrapper from '../widgets/menuWrapper'
import './iconSelector.scss'

type Props = {
    readonly?: boolean
    iconElement: any
    onAddRandomIcon: any
    onSelectEmoji: any
    onRemoveIcon: any
}

const IconSelector = React.memo((props: Props) => {
    const intl = useIntl()

    return (
        <div className='IconSelector'>
            {props.readonly && props.iconElement}
            {!props.readonly &&
                <MenuWrapper>
                    {props.iconElement}
                    <Menu>
                        <Menu.Text
                            id='random'
                            icon={<RandomIcon/>}
                            name={intl.formatMessage({id: 'ViewTitle.random-icon', defaultMessage: 'Random'})}
                            onClick={props.onAddRandomIcon}
                        />
                        <Menu.SubMenu
                            id='pick'
                            icon={<EmojiIcon/>}
                            name={intl.formatMessage({id: 'ViewTitle.pick-icon', defaultMessage: 'Pick icon'})}
                        >
                            <EmojiPicker onSelect={props.onSelectEmoji}/>
                        </Menu.SubMenu>
                        <Menu.Text
                            id='remove'
                            icon={<DeleteIcon/>}
                            name={intl.formatMessage({id: 'ViewTitle.remove-icon', defaultMessage: 'Remove icon'})}
                            onClick={props.onRemoveIcon}
                        />
                    </Menu>
                </MenuWrapper>
            }
        </div>
    )
})

export default IconSelector