dave/ocrcc-chatbox
1
0
Fork 0
forked from Github/ocrcc-chatbox
Code Issues Pull Requests Projects Releases Wiki Activity

fix emoji selector issues

Browse Source
This commit is contained in:
Sharon Kennedy 2020-03-26 23:58:47 -04:00
parent 9d62ff661c
commit 3fd9c7365d
2 changed files with 14 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/components/chatbox.jsx
View File

@ -82,7 +82,7 @@ class ChatBox extends React.Component {
} }
closeEmojiSelector = () => { closeEmojiSelector = () => {
this.setState({ emojiSelectorOpen: false }, () => this.chatboxInput.current.focus()) this.setState({ emojiSelectorOpen: false })
} }
handleWidgetExit = () => { handleWidgetExit = () => {
@ -269,7 +269,6 @@ class ChatBox extends React.Component {
} }
createRoom = async function() { createRoom = async function() {
console.log('CREATING ROOM')
const currentDate = new Date() const currentDate = new Date()
const chatDate = currentDate.toLocaleDateString() const chatDate = currentDate.toLocaleDateString()
const chatTime = currentDate.toLocaleTimeString() const chatTime = currentDate.toLocaleTimeString()
@ -389,7 +388,9 @@ class ChatBox extends React.Component {
this.closeEmojiSelector() this.closeEmojiSelector()
} else if (this.state.opened) { } else if (this.state.opened) {
this.handleToggleOpen() this.handleToggleOpen()
} };
default:
break;
} }
} }
@ -412,7 +413,6 @@ class ChatBox extends React.Component {
if (event.isEncrypted()) { if (event.isEncrypted()) {
return; return;
} }
console.log("handleing UNENCRYPTED event")
this.handleMessageEvent(event) this.handleMessageEvent(event)
} }
}); });
@ -422,7 +422,6 @@ class ChatBox extends React.Component {
return this.handleDecryptionError() return this.handleDecryptionError()
} }
if (event.getType() === "m.room.message") { if (event.getType() === "m.room.message") {
console.log("handleing DECRYPTED event")
this.handleMessageEvent(event) this.handleMessageEvent(event)
} }
}); });
@ -471,11 +470,13 @@ class ChatBox extends React.Component {
handleSubmit = e => { handleSubmit = e => {
e.preventDefault() e.preventDefault()
e.stopPropagation()
const message = this.state.inputValue const message = this.state.inputValue
console.log('event', e)
console.log('message', message)
if (!Boolean(message)) return null; if (!Boolean(message)) return null;
if (this.state.client && this.state.roomId) { if (this.state.client && this.state.roomId) {
console.log("Setting state to empty")
this.setState({ inputValue: "" }) this.setState({ inputValue: "" })
this.chatboxInput.current.focus() this.chatboxInput.current.focus()
return this.sendMessage(message) return this.sendMessage(message)
@ -483,11 +484,12 @@ class ChatBox extends React.Component {
} }
onEmojiClick = (event, emojiObject) => { onEmojiClick = (event, emojiObject) => {
event.preventDefault()
const { emoji } = emojiObject; const { emoji } = emojiObject;
this.setState({ this.setState({
inputValue: this.state.inputValue.concat(emoji), inputValue: this.state.inputValue.concat(emoji),
emojiSelectorOpen: false, emojiSelectorOpen: false,
}, () => this.chatboxInput.current.focus()) }, this.chatboxInput.current.focus())
} }
render() { render() {
@ -551,7 +553,6 @@ class ChatBox extends React.Component {
aria-label={inputLabel} aria-label={inputLabel}
placeholder={inputLabel} placeholder={inputLabel}
autoFocus={true} autoFocus={true}
onFocus={(e) => this.setState({ inputValue: this.state.inputValue })}
ref={this.chatboxInput} ref={this.chatboxInput}
/> />
<EmojiSelector <EmojiSelector
@ -561,7 +562,7 @@ class ChatBox extends React.Component {
closeEmojiSelector={this.closeEmojiSelector} closeEmojiSelector={this.closeEmojiSelector}
/> />
</div> </div>
<input type="submit" value="Send" id="submit" /> <input type="submit" value="Send" id="submit" onClick={this.handleSubmit} />
</form> </form>
</div> </div>
</div> </div>

8
src/components/emoji-selector.jsx
View File

@ -27,10 +27,10 @@ class EmojiSelector extends React.Component {
{ {
status => { status => {
return( return(
<div className={`emoji-picker emoji-picker-${status}`} aria-hidden={!emojiSelectorOpen}> <div className={`emoji-picker emoji-picker-${status}`} aria-hidden={!emojiSelectorOpen}>
<EmojiPicker onEmojiClick={onEmojiClick}/> <EmojiPicker onEmojiClick={onEmojiClick} />
</div> </div>
) )
} }
} }
</Transition> </Transition>