add kamojis

poker/app/assets/javascripts/components/chat/add_chat.js.jsx

@@ -2,6 +2,11 @@ class AddChat extends React.Component {
   constructor(props) {
     super(props);
     this.state = { message: "" };
+    this.focus = this.focus.bind(this);
+  }
+
+  componentDidMount() {
+    this.focus();
   }
 
   handleChatChange(event) {
@@ -16,17 +21,35 @@ class AddChat extends React.Component {
     this.setState({ message: "" });
   }
 
+  handleClickEmoji(emoji) {
+    this.setState({ message: this.state.message + emoji });
+    this.focus();
+  }
+
   render() {
     return (
       <div>
         <form className="new_chat" role="form" onSubmit={this.handleSubmit.bind(this)}>
           <div className="add-chat input-group form-group-no-border input-lg">
-            <input type="text" autoComplete="off" className="form-control" name="message" placeholder="Typing here ..."
-                value={this.state.message} onChange={this.handleChatChange.bind(this)} maxLength="255"/>
+            <span className="input-group-addon dropup emoji-container">
+                <a href="#" role="button" id="emojiBtn" className="emoji-btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                  <i className="fa fa-smile-o"></i>
+                </a>
+                <EmojiBox onClickEmoji={this.handleClickEmoji.bind(this)} />
+            </span>
+            <input  type="text" autoComplete="off" className="form-control"
+                    name="message" placeholder="Typing here ..."
+                    value={this.state.message} onChange={this.handleChatChange.bind(this)}
+                    maxLength="255" ref={(input) => { this.textInput = input; }}/>
           </div>
         </form>
       </div>
     );
   }
+
+  focus() {
+    this.textInput.focus();
+  }
+
 }
 

poker/app/assets/javascripts/components/chat/emoji-box.js.jsx

@@ -0,0 +1,50 @@
+class EmojiBox extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { kamojis: this.getKamojis() };
+  }
+
+  componentDidMount() {
+  }
+
+  handleKamoji(e){
+    this.props.onClickEmoji(e.target.innerHTML + ' ')
+  }
+
+  render() {
+    let ks = this.state.kamojis.map((kamoji, index) => {
+      return this.renderKamoji(index, kamoji);
+    });
+    return (
+      <div className="dropdown-menu emoji-box" aria-labelledby="dropdownMenuButton">
+        <ul>
+          {ks}
+        </ul>
+      </div>
+    );
+  }
+
+  renderKamoji(index,k){
+    return(
+      <li key={index}>
+        <a className="emoji-item" title={k} onClick={(e) => this.handleKamoji(e)}>{k}</a>
+      </li>
+    );
+  }
+
+  getKamojis () {
+    return this.getRandomArrayElements(kamojiList, 40);
+  }
+
+  getRandomArrayElements(arr, count) {
+    var shuffled = arr.slice(0), i = arr.length, min = i - count, temp, index;
+    while (i-- > min) {
+        index = Math.floor((i + 1) * Math.random());
+        temp = shuffled[index];
+        shuffled[index] = shuffled[i];
+        shuffled[i] = temp;
+    }
+    return shuffled.slice(min);
+  }
+
+}