add emoji picker unstyled

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

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"
+        <NewMessage textAreaProps={{
-          ref={textarea => this.messageInput = textarea}
+            className: 'chat-input',
-          placeholder="Send a message..."
+            ref: textarea => this.messageInput = textarea,
-          value={this.state.messageText}
+            placeholder: 'Send a message...',
-          onChange={this.handleChange('messageText')}
+            value: this.state.messageText,
-          onKeyUp={this.handleTextareaKeyUp}
+            onChange: this.handleChange('messageText'),
-          onFocus={this.props.inputFocus}
+            onKeyUp: this.handleTextareaKeyUp,
-          onBlur={this.props.inputBlur}
+            onFocus: this.props.inputFocus,
+            onBlur: this.props.inputBlur
+          }}
         />
       </div>
     )

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",