From eb0a7b20aae7c0a8924a4b43ac3aba007a0891c3 Mon Sep 17 00:00:00 2001
From: Devin Howard <devin@callysto.com>
Date: Tue, 3 Jan 2017 14:23:44 -0500
Subject: [PATCH] add emoji picker unstyled

---
 frontend/src/components/MapChat/NewMessage.js | 42 +++++++++++++++++++
 frontend/src/components/MapChat/index.js      | 19 +++++----
 package.json                                  |  1 +
 3 files changed, 54 insertions(+), 8 deletions(-)
 create mode 100644 frontend/src/components/MapChat/NewMessage.js

diff --git a/frontend/src/components/MapChat/NewMessage.js b/frontend/src/components/MapChat/NewMessage.js
new file mode 100644
index 00000000..0e03e7e1
--- /dev/null
+++ b/frontend/src/components/MapChat/NewMessage.js
@@ -0,0 +1,42 @@
+import React, { PropTypes, Component } from 'react'
+import { Picker } from 'emoji-mart'
+
+class NewMessage extends Component {
+  constructor(props) {
+    super(props)
+
+    this.state = {
+      //showEmojiPicker: false
+      showEmojiPicker: true
+    }
+  }
+
+  toggleEmojiPicker = () => {
+    this.setState({ showEmojiPicker: !this.state.showEmojiPicker })
+  }
+
+  render = () => {
+    return (
+      <div className="new-message-area">
+        <span onClick={this.toggleEmojiPicker}>Emoji</span>
+        <Picker set='emojione' style={{ display: this.state.showEmojiPicker ? 'block' : 'none' }} />
+        <textarea {...this.props.textAreaProps} />
+      </div>
+    )
+  }
+}
+
+NewMessage.propTypes = {
+  textAreaProps: PropTypes.shape({
+    className: PropTypes.string,
+    ref: PropTypes.func,
+    placeholder: PropTypes.string,
+    value: PropTypes.string,
+    onChange: PropTypes.func,
+    onKeyUp: PropTypes.func,
+    onFocus: PropTypes.func,
+    onBlur: PropTypes.func
+  })
+}
+
+export default NewMessage
diff --git a/frontend/src/components/MapChat/index.js b/frontend/src/components/MapChat/index.js
index aa5b354e..496c5754 100644
--- a/frontend/src/components/MapChat/index.js
+++ b/frontend/src/components/MapChat/index.js
@@ -2,6 +2,7 @@ import React, { PropTypes, Component } from 'react'
 import Unread from './Unread'
 import Participant from './Participant'
 import Message from './Message'
+import NewMessage from './NewMessage'
 
 function makeList(messages) {
   let currentHeader
@@ -143,14 +144,16 @@ class MapChat extends Component {
         <div className="chat-messages" ref={div => this.messagesDiv = div}>
           {makeList(messages)}
         </div>
-        <textarea className="chat-input"
-          ref={textarea => this.messageInput = textarea}
-          placeholder="Send a message..."
-          value={this.state.messageText}
-          onChange={this.handleChange('messageText')}
-          onKeyUp={this.handleTextareaKeyUp}
-          onFocus={this.props.inputFocus}
-          onBlur={this.props.inputBlur}
+        <NewMessage textAreaProps={{
+            className: 'chat-input',
+            ref: textarea => this.messageInput = textarea,
+            placeholder: 'Send a message...',
+            value: this.state.messageText,
+            onChange: this.handleChange('messageText'),
+            onKeyUp: this.handleTextareaKeyUp,
+            onFocus: this.props.inputFocus,
+            onBlur: this.props.inputBlur
+          }}
         />
       </div>
     )
diff --git a/package.json b/package.json
index e57c9a1e..42c2dd31 100644
--- a/package.json
+++ b/package.json
@@ -30,6 +30,7 @@
     "clipboard-js": "0.3.2",
     "commonmark": "0.27.0",
     "csv-parse": "1.1.7",
+    "emoji-mart": "^0.3.5",
     "getScreenMedia": "git://github.com/devvmh/getScreenMedia#patch-1",
     "hark": "git://github.com/devvmh/hark#patch-1",
     "howler": "2.0.2",