1
0
mirror of https://github.com/mattermost/focalboard.git synced 2025-01-11 18:13:52 +02:00

Feature added: Pressing enter should create a category

This commit is contained in:
Rajat Dabade 2022-04-27 18:53:02 +05:30
parent d2c4a54d36
commit d5c8f59878

View File

@ -1,9 +1,9 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information. // See LICENSE.txt for license information.
import React, {useState} from 'react' import React, { useState } from 'react'
import {useIntl} from 'react-intl' import { useIntl } from 'react-intl'
import Dialog from '../dialog' import Dialog from '../dialog'
import Button from '../../widgets/buttons/button' import Button from '../../widgets/buttons/button'
@ -20,10 +20,10 @@ type Props = {
const CreateCategory = (props: Props): JSX.Element => { const CreateCategory = (props: Props): JSX.Element => {
const intl = useIntl() const intl = useIntl()
const placeholder = intl.formatMessage({id: 'Categories.CreateCategoryDialog.Placeholder', defaultMessage: 'Name your category'}) const placeholder = intl.formatMessage({ id: 'Categories.CreateCategoryDialog.Placeholder', defaultMessage: 'Name your category' })
const cancelText = intl.formatMessage({id: 'Categories.CreateCategoryDialog.CancelText', defaultMessage: 'Cancel'}) const cancelText = intl.formatMessage({ id: 'Categories.CreateCategoryDialog.CancelText', defaultMessage: 'Cancel' })
const createText = intl.formatMessage({id: 'Categories.CreateCategoryDialog.CreateText', defaultMessage: 'Create'}) const createText = intl.formatMessage({ id: 'Categories.CreateCategoryDialog.CreateText', defaultMessage: 'Create' })
const updateText = intl.formatMessage({id: 'Categories.CreateCategoryDialog.UpdateText', defaultMessage: 'Update'}) const updateText = intl.formatMessage({ id: 'Categories.CreateCategoryDialog.UpdateText', defaultMessage: 'Update' })
const [name, setName] = useState(props.initialValue || '') const [name, setName] = useState(props.initialValue || '')
@ -32,35 +32,38 @@ const CreateCategory = (props: Props): JSX.Element => {
className='CreateCategoryModal' className='CreateCategoryModal'
onClose={props.onClose} onClose={props.onClose}
> >
<div className='CreateCategory'> <form>
<h3>{props.title}</h3> <div className='CreateCategory'>
<input <h3>{props.title}</h3>
className='categoryNameInput' <input
type='text' className='categoryNameInput'
placeholder={placeholder} type='text'
value={name} placeholder={placeholder}
onChange={(e) => setName(e.target.value)} value={name}
autoFocus={true} onChange={(e) => setName(e.target.value)}
maxLength={100} autoFocus={true}
/> maxLength={100}
<div className='createCategoryActions'> />
<Button <div className='createCategoryActions'>
size={'medium'} <Button
danger={true} size={'medium'}
onClick={props.onClose} danger={true}
> onClick={props.onClose}
{cancelText} >
</Button> {cancelText}
<Button </Button>
size={'medium'} <Button
filled={Boolean(name)} size={'medium'}
onClick={() => props.onCreate(name)} filled={Boolean(name)}
disabled={!name} onClick={() => props.onCreate(name)}
> disabled={!name}
{props.initialValue ? updateText : createText} submit={true}
</Button> >
{props.initialValue ? updateText : createText}
</Button>
</div>
</div> </div>
</div> </form>
</Dialog> </Dialog>
) )
} }