emptyCardButton.tsx

TLDR

The emptyCardButton.tsx file is a React component that represents a button for adding empty cards. It utilizes internationalization, menus, icons, and other components to provide the desired functionality.

Methods

There are no methods defined in this file.

Classes

There is no specific class defined in this file.

// 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 CardIcon from '../../widgets/icons/card'
import Menu from '../../widgets/menu'

import MenuWrapper from '../../widgets/menuWrapper'
import OptionsIcon from '../../widgets/icons/options'
import IconButton from '../../widgets/buttons/iconButton'
import CheckIcon from '../../widgets/icons/check'
import mutator from '../../mutator'
import {useAppSelector} from '../../store/hooks'
import {getCurrentView} from '../../store/views'
import {getCurrentBoardId} from '../../store/boards'

type Props = {
    addCard: () => void
}

const EmptyCardButton = (props: Props) => {
    const currentView = useAppSelector(getCurrentView)
    const boardId = useAppSelector(getCurrentBoardId)
    const intl = useIntl()

    return (
        <Menu.Text
            icon={<CardIcon/>}
            id='empty-template'
            name={intl.formatMessage({id: 'ViewHeader.empty-card', defaultMessage: 'Empty card'})}
            className={currentView.fields.defaultTemplateId ? '' : 'bold-menu-text'}
            onClick={() => {
                props.addCard()
            }}
            rightIcon={
                <MenuWrapper stopPropagationOnToggle={true}>
                    <IconButton icon={<OptionsIcon/>}/>
                    <Menu position='left'>
                        <Menu.Text
                            icon={<CheckIcon/>}
                            id='default'
                            name={intl.formatMessage({
                                id: 'ViewHeader.set-default-template',
                                defaultMessage: 'Set as default',
                            })}
                            onClick={async () => {
                                await mutator.clearDefaultTemplate(boardId, currentView.id, currentView.fields.defaultTemplateId)
                            }}
                        />
                    </Menu>
                </MenuWrapper>
            }
        />)
}

export default React.memo(EmptyCardButton)