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

Changing editable on commentsList

Browse source
This commit is contained in:
Jesús Espino 2020-10-26 17:55:05 +01:00
parent 0c35255dcb
commit 896e1ee240
1 changed files with 38 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

55
webapp/src/components/commentsList.tsx
View file

@ -8,7 +8,8 @@ import {IBlock} from '../blocks/block'
import {Utils} from '../utils' import {Utils} from '../utils'
import mutator from '../mutator' import mutator from '../mutator'
import {Editable} from './editable' import Editable from '../widgets/editable'
import Comment from './comment' import Comment from './comment'
import './commentsList.scss' import './commentsList.scss'
@ -19,21 +20,32 @@ type Props = {
intl: IntlShape intl: IntlShape
} }
class CommentsList extends React.Component<Props> { type State = {
newCommentRef = React.createRef<Editable>() newComment: string
sendCommentButtonRef = React.createRef<HTMLDivElement>() inputFocused: boolean
}
class CommentsList extends React.Component<Props, State> {
public constructor(props: Props) {
super(props)
this.state = {
newComment: '',
inputFocused: false,
}
}
public shouldComponentUpdate() { public shouldComponentUpdate() {
return true return true
} }
private sendComment = (text: string) => { private sendComment = () => {
const {cardId} = this.props const {cardId} = this.props
Utils.assertValue(cardId) Utils.assertValue(cardId)
const block = new MutableCommentBlock({parentId: cardId, title: text}) const block = new MutableCommentBlock({parentId: cardId, title: this.state.newComment})
mutator.insertBlock(block, 'add comment') mutator.insertBlock(block, 'add comment')
this.setState({newComment: ''})
} }
public render(): JSX.Element { public render(): JSX.Element {
@ -62,42 +74,33 @@ class CommentsList extends React.Component<Props> {
src={userImageUrl} src={userImageUrl}
/> />
<Editable <Editable
ref={this.newCommentRef}
className='newcomment' className='newcomment'
placeholderText={intl.formatMessage({id: 'CardDetail.new-comment-placeholder', defaultMessage: 'Add a comment...'})} placeholderText={intl.formatMessage({id: 'CardDetail.new-comment-placeholder', defaultMessage: 'Add a comment...'})}
onChanged={() => { }} onChange={(value: string) => this.setState({newComment: value})}
onFocus={() => { value={this.state.newComment}
this.sendCommentButtonRef.current.style.display = null onFocus={() => this.setState({inputFocused: true})}
}} onBlur={() => this.setState({inputFocused: false})}
onBlur={() => { onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>) => {
if (!this.newCommentRef.current?.text) {
this.sendCommentButtonRef.current.style.display = 'none'
}
}}
onKeyDown={(e: React.KeyboardEvent) => {
if (e.keyCode === 13 && !(e.metaKey || e.ctrlKey) && !e.shiftKey && !e.altKey) { if (e.keyCode === 13 && !(e.metaKey || e.ctrlKey) && !e.shiftKey && !e.altKey) {
this.sendCommentButtonRef.current.click() this.sendComment()
} }
}} }}
/> />
{this.state.newComment && this.state.inputFocused &&
<div <div
ref={this.sendCommentButtonRef}
className='octo-button filled' className='octo-button filled'
style={{display: 'none'}}
onClick={() => { onClick={() => {
const text = this.newCommentRef.current.text Utils.log(`Send comment: ${this.state.newComment}`)
Utils.log(`Send comment: ${this.newCommentRef.current.text}`) this.sendComment()
this.sendComment(text) this.setState({inputFocused: false, newComment: ''})
this.newCommentRef.current.text = undefined
this.newCommentRef.current.blur()
}} }}
> >
<FormattedMessage <FormattedMessage
id='CommentsList.send' id='CommentsList.send'
defaultMessage='Send' defaultMessage='Send'
/> />
</div> </div>}
</div> </div>
</div> </div>
) )