Add emojis block

app/components/Room/SendMessageField.js

@@ -14,7 +14,7 @@ export default class SendMessageField extends Component {
     this.handleChangeText = this.handleChangeText.bind(this)
 
     this.state = {
-      height: 56,
+      height: 46,
       value: ''
     }
   }
@@ -34,7 +34,7 @@ export default class SendMessageField extends Component {
   // }
 
   handleChangeSize(e) {
-    this.setState({height: e.nativeEvent.layout.height + 30})
+    this.setState({height: e.nativeEvent.layout.height})
   }
 
   handleChangeText(value) {
@@ -57,18 +57,19 @@ export default class SendMessageField extends Component {
       return
     }
     onSending()
-    this.setState({height: 56, value: ''})
+    this.setState({height: 46, value: ''})
   }
 
   render() {
     const {value, height} = this.state
+    const {emojis, onRightAddIconPress} = this.props
     return (
       <View style={s.container}>
         <View style={s.innerContainer}>
           <TextInput
             ref="textInput"
             multiline
-            style={[s.textInput, {height: height > 90 ? 90 : Math.max(56, height)}]}
+            style={[s.textInput, {height: height > 90 ? 90 : Math.max(46, height)}]}
             value={value}
             keyboardShouldPersistTaps={false}
             underlineColorAndroid="white"
@@ -81,14 +82,24 @@ export default class SendMessageField extends Component {
                {value}
              </Text>
         </View>
-        <Button
-          background="SelectableBackgroundBorderless"
-          onPress={() => this.sendMessage()}
-          style={s.button}>
-          <Image
-            source={require('image!ic_send_black_24dp')}
-            style={[s.sendIcon, {opacity: !value.trim() ? 0.2 : 1}]}/>
-        </Button>
+        <View style={s.rightButtons}>
+          <Button
+            background="SelectableBackgroundBorderless"
+            onPress={() => onRightAddIconPress()}
+            style={[s.button, s.left]}>
+            <Image
+              source={emojis ? require('image!ic_keyboard_black_24dp') : require('image!ic_insert_emoticon_black_24dp')}
+              style={s.sendIcon} />
+          </Button>
+          <Button
+            background="SelectableBackgroundBorderless"
+            onPress={() => this.sendMessage()}
+            style={s.button}>
+            <Image
+              source={require('image!ic_send_black_24dp')}
+              style={[s.sendIcon, {opacity: !value.trim() ? 0.4 : 0.8}]}/>
+          </Button>
+        </View>
       </View>
 
     )
@@ -98,5 +109,7 @@ export default class SendMessageField extends Component {
 SendMessageField.propTypes = {
   onSending: PropTypes.func,
   value: PropTypes.string,
-  onChange: PropTypes.func
+  onChange: PropTypes.func,
+  emojis: PropTypes.bool,
+  onRightAddIconPress: PropTypes.func
 }

app/screens/Room.js

@@ -1,5 +1,5 @@
 import React, {Component, PropTypes} from 'react';
-import {InteractionManager, ToastAndroid, Clipboard, Alert, ListView, View, Platform} from 'react-native';
+import {InteractionManager, ToastAndroid, Clipboard, Alert, ListView, View, Platform, Keyboard} from 'react-native';
 import Toolbar from '../components/Toolbar'
 import {connect} from 'react-redux'
 import DrawerLayout from 'react-native-drawer-layout'
@@ -84,11 +84,13 @@ class Room extends Component {
     this.onNavigateBack = this.onNavigateBack.bind(this)
     this.handleSharingRoom = this.handleSharingRoom.bind(this)
     this.handleSharingMessage = this.handleSharingMessage.bind(this)
+    this.handleToggleEmojis = this.handleToggleEmojis.bind(this)
 
     this.state = {
       textInputValue: '',
       editing: false,
-      editMessage: {}
+      editMessage: {},
+      showEmojiBar: false
     }
   }
 
@@ -466,6 +468,18 @@ class Room extends Component {
     })
   }
 
+  handleToggleEmojis() {
+    const {showEmojiBar} = this.state
+
+    if (!showEmojiBar) {
+      // TODO(terrysahaidak) waiting 0.36 to be released
+      Keyboard.dismiss()
+    } else {
+      this.refs.sendMessageField.focus()
+    }
+    this.setState({showEmojiBar: !showEmojiBar})
+  }
+
   leaveRoom() {
     const {dispatch, route: {roomId}} = this.props
     Alert.alert(
@@ -589,6 +603,8 @@ class Room extends Component {
     }
     return (
       <SendMessageField
+        emojis={this.state.showEmojiBar}
+        onRightAddIconPress={this.handleToggleEmojis}
         ref="sendMessageField"
         onSending={this.onSending.bind(this)}
         onChange={this.onTextFieldChange.bind(this)}

app/styles/screens/Room/SendMessageFieldStyles.js

@@ -1,33 +1,52 @@
 import {StyleSheet} from 'react-native'
 
-const padding = 12
-const button = 35
+const padding = 16
+const button = 46
 const buttonMargin = 8
 
 const style = StyleSheet.create({
   container: {
     flexDirection: 'row',
     alignItems: 'center',
-    paddingHorizontal: padding,
+    paddingLeft: padding,
+    paddingRight: 4,
+    // marginVertical: 4,
     backgroundColor: 'white',
-    elevation: 8
+    elevation: 8,
+    borderTopWidth: 1,
+    borderTopColor: 'rgba(0, 0, 0, 0.1)'
   },
   innerContainer: {
     flex: 1
   },
   textInput: {
+    paddingVertical: 4,
     backgroundColor: 'white',
-    fontSize: 14
+    fontSize: 14,
+    textAlignVertical: 'center'
+  },
+  rightButtons: {
+    width: 90,
+    flexDirection: 'row',
+    justifyContent: 'space-around',
+    // backgroundColor: 'red'
   },
   button: {
+    // backgroundColor: 'gray',
     height: button,
-    margin: buttonMargin,
+    width: button,
+    // margin: buttonMargin,
     alignItems: 'center',
     justifyContent: 'center'
   },
+  left: {
+    // marginRight: 4,
+    // backgroundColor: 'pink',
+    opacity: 0.8
+  },
   sendIcon: {
-    width: 30,
-    height: 30
+    width: 32,
+    height: 32
   },
   hidden: {
     position: 'absolute',

ios/gittermobile/Images.xcassets/ic_attach_file_black_24dp.imageset/Contents.json

@@ -0,0 +1,23 @@
+{
+  "images" : [
+    {
+      "idiom" : "universal",
+      "filename" : "ic_attach_file.png",
+      "scale" : "1x"
+    },
+    {
+      "idiom" : "universal",
+      "filename" : "ic_attach_file_2x.png",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "universal",
+      "filename" : "ic_attach_file_3x.png",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "version" : 1,
+    "author" : "xcode"
+  }
+}

ios/gittermobile/Images.xcassets/ic_attach_file_white_24dp.imageset/Contents.json

@@ -0,0 +1,23 @@
+{
+  "images" : [
+    {
+      "idiom" : "universal",
+      "filename" : "ic_attach_file_white.png",
+      "scale" : "1x"
+    },
+    {
+      "idiom" : "universal",
+      "filename" : "ic_attach_file_white_2x.png",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "universal",
+      "filename" : "ic_attach_file_white_3x.png",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "version" : 1,
+    "author" : "xcode"
+  }
+}

ios/gittermobile/Images.xcassets/ic_insert_emoticon_black_24dp.imageset/Contents.json

@@ -0,0 +1,23 @@
+{
+  "images" : [
+    {
+      "idiom" : "universal",
+      "filename" : "ic_insert_emoticon.png",
+      "scale" : "1x"
+    },
+    {
+      "idiom" : "universal",
+      "filename" : "ic_insert_emoticon_2x.png",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "universal",
+      "filename" : "ic_insert_emoticon_3x.png",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "version" : 1,
+    "author" : "xcode"
+  }
+}

ios/gittermobile/Images.xcassets/ic_insert_emoticon_white_24dp.imageset/Contents.json

@@ -0,0 +1,23 @@
+{
+  "images" : [
+    {
+      "idiom" : "universal",
+      "filename" : "ic_insert_emoticon_white.png",
+      "scale" : "1x"
+    },
+    {
+      "idiom" : "universal",
+      "filename" : "ic_insert_emoticon_white_2x.png",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "universal",
+      "filename" : "ic_insert_emoticon_white_3x.png",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "version" : 1,
+    "author" : "xcode"
+  }
+}

ios/gittermobile/Images.xcassets/ic_keyboard_black_24dp.imageset/Contents.json

@@ -0,0 +1,23 @@
+{
+  "images" : [
+    {
+      "idiom" : "universal",
+      "filename" : "ic_keyboard.png",
+      "scale" : "1x"
+    },
+    {
+      "idiom" : "universal",
+      "filename" : "ic_keyboard_2x.png",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "universal",
+      "filename" : "ic_keyboard_3x.png",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "version" : 1,
+    "author" : "xcode"
+  }
+}

ios/gittermobile/Images.xcassets/ic_keyboard_white_24dp.imageset/Contents.json

@@ -0,0 +1,23 @@
+{
+  "images" : [
+    {
+      "idiom" : "universal",
+      "filename" : "ic_keyboard_white.png",
+      "scale" : "1x"
+    },
+    {
+      "idiom" : "universal",
+      "filename" : "ic_keyboard_white_2x.png",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "universal",
+      "filename" : "ic_keyboard_white_3x.png",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "version" : 1,
+    "author" : "xcode"
+  }
+}