status-im
/
status-js-desktop
mirror of https://github.com/status-im/status-js-desktop.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

add upload button; fix autofocus of text field after inserting an emoji

This commit is contained in:
Iuri Matias 2018-11-24 10:32:46 -05:00
parent a0601c0047
commit 0ace315d7d
1 changed files with 12 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
app/components/ChatRoom.js
View File

@ -15,6 +15,7 @@ import Dropzone from 'react-dropzone';
import Jazzicon, { jsNumberForAddress } from 'react-jazzicon'; import Jazzicon, { jsNumberForAddress } from 'react-jazzicon';
import { Picker } from 'emoji-mart'; import { Picker } from 'emoji-mart';
import InsertEmoticon from '@material-ui/icons/InsertEmoticon' import InsertEmoticon from '@material-ui/icons/InsertEmoticon'
import AddCircle from '@material-ui/icons/AddCircle'
import ChatBox, { Emoji } from './ChatBox'; import ChatBox, { Emoji } from './ChatBox';
import ChatHeader from './ChatHeader'; import ChatHeader from './ChatHeader';
@ -86,10 +87,15 @@ class ChatRoom extends Component {
this.setState(({showEmojis: !this.state.showEmojis})); this.setState(({showEmojis: !this.state.showEmojis}));
} }
uploadFileDialog() {
}
addEmoji(emoji, chatInput, setValue) { addEmoji(emoji, chatInput, setValue) {
console.log(emoji); console.log(emoji);
setValue('chatInput', `${chatInput}:${emoji.id}:`); setValue('chatInput', `${chatInput}:${emoji.id}:`);
this.setState(({showEmojis: false})); this.setState(({showEmojis: false}), () => {
this.nameInput.labelNode.focus();
});
// <Emoji emoji=":santa::skin-tone-3:" size={16} /> // <Emoji emoji=":santa::skin-tone-3:" size={16} />
} }
@ -164,8 +170,11 @@ class ChatRoom extends Component {
<div className="chat-input" <div className="chat-input"
style={{ position: 'absolute', bottom: 0, left: 0, right: 0, paddingBottom: 10, 'background-color': 'white' }}> style={{ position: 'absolute', bottom: 0, left: 0, right: 0, paddingBottom: 10, 'background-color': 'white' }}>
<form onSubmit={handleSubmit} style={formStyle} ref={ChatRoomForm}> <form onSubmit={handleSubmit} style={formStyle} ref={ChatRoomForm}>
<Button onClick={(e) => this.uploadFileDialog()}><AddCircle /></Button>
<TextField <TextField
autofocus
id="chatInput" id="chatInput"
ref={(input) => { this.nameInput = input; }}
multiline multiline
style={{ width: 'auto', flexGrow: '0.95', margin: '2px 0 0 0' }} style={{ width: 'auto', flexGrow: '0.95', margin: '2px 0 0 0' }}
label="Type a message..." label="Type a message..."
@ -178,7 +187,8 @@ class ChatRoom extends Component {
onKeyDown={(e) => keyDownHandler(e, typingEvent, setFieldValue, values.chatInput)} onKeyDown={(e) => keyDownHandler(e, typingEvent, setFieldValue, values.chatInput)}
onBlur={handleBlur} onBlur={handleBlur}
value={values.chatInput || ''} value={values.chatInput || ''}
/> >
</TextField>
{showEmojis && <Picker title="" onSelect={(emoji) => this.addEmoji(emoji, values.chatInput, setFieldValue)} {showEmojis && <Picker title="" onSelect={(emoji) => this.addEmoji(emoji, values.chatInput, setFieldValue)}
style={{ position: 'absolute', bottom: '80px', right: '20px' }}/>} style={{ position: 'absolute', bottom: '80px', right: '20px' }}/>}
<Button onClick={(e) => this.toggleEmojis(e)}><InsertEmoticon /></Button> <Button onClick={(e) => this.toggleEmojis(e)}><InsertEmoticon /></Button>