newCardButton.tsx

TLDR

This file newCardButton.tsx contains a React component called NewCardButton that renders a button with a menu for creating new cards. The component utilizes several other components and functions to handle card templates and views.

Methods

NewCardButton

This method is the main component function that renders a button with a menu. It takes several props, such as addCard, addCardFromTemplate, addCardTemplate, and editCardTemplate, to handle the actions triggered by the button and menu items. The component uses the useAppSelector hook to get the current board templates and current view from the Redux store. Inside the component, it renders a ButtonWithMenu component and maps through the cardTemplates array to render each NewCardButtonTemplateItem component. It also renders an EmptyCardButton component and a Menu.Text component for adding new card templates.

Classes

// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.

import React from 'react'
import {FormattedMessage, useIntl} from 'react-intl'

import {Card} from '../../blocks/card'
import ButtonWithMenu from '../../widgets/buttons/buttonWithMenu'
import AddIcon from '../../widgets/icons/add'
import Menu from '../../widgets/menu'
import {useAppSelector} from '../../store/hooks'
import {getCurrentBoardTemplates} from '../../store/cards'
import {getCurrentView} from '../../store/views'

import NewCardButtonTemplateItem from './newCardButtonTemplateItem'
import EmptyCardButton from './emptyCardButton'

type Props = {
    addCard: () => void
    addCardFromTemplate: (cardTemplateId: string) => void
    addCardTemplate: () => void
    editCardTemplate: (cardTemplateId: string) => void
}

const NewCardButton = (props: Props): JSX.Element => {
    const cardTemplates: Card[] = useAppSelector(getCurrentBoardTemplates)
    const currentView = useAppSelector(getCurrentView)
    let defaultTemplateID = ''
    const intl = useIntl()

    return (
        <ButtonWithMenu
            onClick={() => {
                if (defaultTemplateID) {
                    props.addCardFromTemplate(defaultTemplateID)
                } else {
                    props.addCard()
                }
            }}
            text={(
                <FormattedMessage
                    id='ViewHeader.new'
                    defaultMessage='New'
                />
            )}
        >
            <Menu position='left'>
                {cardTemplates.length > 0 && <>
                    <Menu.Label>
                        <b>
                            <FormattedMessage
                                id='ViewHeader.select-a-template'
                                defaultMessage='Select a template'
                            />
                        </b>
                    </Menu.Label>

                    <Menu.Separator/>
                </>}

                {cardTemplates.map((cardTemplate) => {
                    if (cardTemplate.id === currentView.fields.defaultTemplateId) {
                        defaultTemplateID = currentView.fields.defaultTemplateId
                    }
                    return (
                        <NewCardButtonTemplateItem
                            key={cardTemplate.id}
                            cardTemplate={cardTemplate}
                            addCardFromTemplate={props.addCardFromTemplate}
                            editCardTemplate={props.editCardTemplate}
                        />
                    )
                })}

                <EmptyCardButton
                    addCard={props.addCard}
                />

                <Menu.Text
                    icon={<AddIcon/>}
                    id='add-template'
                    name={intl.formatMessage({id: 'ViewHeader.add-template', defaultMessage: 'New template'})}
                    onClick={() => props.addCardTemplate()}
                />
            </Menu>
        </ButtonWithMenu>
    )
}

export default React.memo(NewCardButton)