self-hosted/focalboard
1
0
Fork 0
mirror of https://github.com/mattermost/focalboard.git synced 2025-01-08 15:06:08 +02:00
Code Issues Releases Activity

Followed the review request changed and updated the code

Browse Source
This commit is contained in:
Rajat Dabade 2022-04-28 12:31:12 +05:30
parent d5c8f59878
commit 55df4cf224
1 changed files with 42 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

79
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, KeyboardEvent} from 'react'
import { useIntl } from 'react-intl'
import {useIntl} from 'react-intl'
import Dialog from '../dialog'
import Button from '../../widgets/buttons/button'
@ -20,50 +20,55 @@ 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 || '')
const handleKeypress = (e: KeyboardEvent) => {
if (e.key === 'Enter') {
props.onCreate(name)
}
}
return (
<Dialog
className='CreateCategoryModal'
onClose={props.onClose}
>
<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 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}
onKeyUp={handleKeypress}
/>
<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>
</form>
</div>
</Dialog>
)
}