blockIconSelector.tsx

TLDR

This file, blockIconSelector.tsx, is a React component that provides an icon selector for a block. It allows users to select and change the icon associated with the block.

Methods

onSelectEmoji

This method is called when a user selects an emoji from the icon selector. It takes the selected emoji as a parameter and updates the block's icon in the mutator, then triggers a click event on the document body.

onAddRandomIcon

This method is called when a user clicks the "add random icon" button in the icon selector. It generates a random icon using BlockIcons.shared.randomIcon() and updates the block's icon in the mutator.

onRemoveIcon

This method is called when a user clicks the "remove icon" button in the icon selector. It removes the block's icon by setting it to an empty string in the mutator.

Classes

(No classes in this file)

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

import {BlockIcons} from '../blockIcons'
import {Card} from '../blocks/card'
import mutator from '../mutator'

import IconSelector from './iconSelector'

type Props = {
    block: Card
    size?: 's' | 'm' | 'l'
    readonly?: boolean
}

const BlockIconSelector = (props: Props) => {
    const {block, size} = props

    const onSelectEmoji = useCallback((emoji: string) => {
        mutator.changeBlockIcon(block.boardId, block.id, block.fields.icon, emoji)
        document.body.click()
    }, [block.id, block.fields.icon])
    const onAddRandomIcon = useCallback(() => mutator.changeBlockIcon(block.boardId, block.id, block.fields.icon, BlockIcons.shared.randomIcon()), [block.id, block.fields.icon])
    const onRemoveIcon = useCallback(() => mutator.changeBlockIcon(block.boardId, block.id, block.fields.icon, '', 'remove icon'), [block.id, block.fields.icon])

    if (!block.fields.icon) {
        return null
    }

    let className = `octo-icon size-${size || 'm'}`
    if (props.readonly) {
        className += ' readonly'
    }
    const iconElement = <div className={className}><span>{block.fields.icon}</span></div>

    return (
        <IconSelector
            readonly={props.readonly}
            iconElement={iconElement}
            onAddRandomIcon={onAddRandomIcon}
            onSelectEmoji={onSelectEmoji}
            onRemoveIcon={onRemoveIcon}
        />
    )
}

export default React.memo(BlockIconSelector)