luisgulo/focalboard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Feature added: Pressing enter should create a category

Browse source
This commit is contained in:
Rajat Dabade 2022-04-27 18:53:02 +05:30
parent d2c4a54d36
commit d5c8f59878
1 changed files with 37 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

71
webapp/src/components/createCategory/createCategory.tsx
View file

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