Adding search icon in search input field

css/emoji-mart.css

@@ -87,17 +87,29 @@
 .emoji-mart-search {
   margin-top: 6px;
   padding: 0 6px;
+  position: relative;
 }
+
 .emoji-mart-search input {
   font-size: 16px;
   display: block;
   width: 100%;
-  padding: .2em .6em;
+  padding: 5px 25px 6px 10px;
   border-radius: 25px;
   border: 1px solid #d9d9d9;
   outline: 0;
 }
 
+.emoji-mart-search-icon {
+  position: absolute;
+  top: 9px;
+  right: 16px;
+  z-index: 2;
+  padding: 0;
+  border: none;
+  background: none;
+}
+
 .emoji-mart-category .emoji-mart-emoji span {
   z-index: 1;
   position: relative;

src/components/anchors.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import SVGs from '../svgs'
+import { categories as icons } from '../svgs'
 
 export default class Anchors extends React.PureComponent {
   constructor(props) {
@@ -18,21 +18,6 @@ export default class Anchors extends React.PureComponent {
     this.handleClick = this.handleClick.bind(this)
   }
 
-  getSVG(id) {
-    this.SVGs || (this.SVGs = {})
-
-    if (this.SVGs[id]) {
-      return this.SVGs[id]
-    } else {
-      let svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
-       ${SVGs[id]}
-      </svg>`
-
-      this.SVGs[id] = svg
-      return svg
-    }
-  }
-
   handleClick(e) {
     var index = e.currentTarget.getAttribute('data-index')
     var { categories, onAnchorClick } = this.props
@@ -65,7 +50,7 @@ export default class Anchors extends React.PureComponent {
               }`}
               style={{ color: isSelected ? color : null }}
             >
-              <div dangerouslySetInnerHTML={{ __html: this.getSVG(id) }} />
+              <div dangerouslySetInnerHTML={{ __html: icons[id] }} />
               <span
                 className="emoji-mart-anchor-bar"
                 style={{ backgroundColor: color }}

src/components/search.js

@@ -1,20 +1,36 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
+import { search as icons } from '../svgs'
 import NimbleEmojiIndex from '../utils/emoji-index/nimble-emoji-index'
 
 export default class Search extends React.PureComponent {
   constructor(props) {
     super(props)
+    this.state = {
+      icon: icons.search,
+      isSearching: false,
+    }
 
     this.data = props.data
     this.emojiIndex = new NimbleEmojiIndex(this.data)
     this.setRef = this.setRef.bind(this)
     this.handleChange = this.handleChange.bind(this)
+    this.clear = this.clear.bind(this)
+    this.handleKeyUp = this.handleKeyUp.bind(this)
   }
 
-  handleChange() {
-    var value = this.input.value
+  search(value) {
+    if (value == '')
+      this.setState({
+        icon: icons.search,
+        isSearching: false,
+      })
+    else
+      this.setState({
+        icon: icons.delete,
+        isSearching: true,
+      })
 
     this.props.onSearch(
       this.emojiIndex.search(value, {
@@ -27,16 +43,29 @@ export default class Search extends React.PureComponent {
     )
   }
 
-  setRef(c) {
-    this.input = c
-  }
-
   clear() {
+    if (this.input.value == '') return
     this.input.value = ''
+    this.search('')
+  }
+
+  handleChange() {
+    this.search(this.input.value)
+  }
+
+  handleKeyUp(e) {
+    if (e.keyCode === 13) {
+      this.clear()
+    }
+  }
+
+  setRef(c) {
+    this.input = c
   }
 
   render() {
     var { i18n, autoFocus } = this.props
+    var { icon, isSearching } = this.state
 
     return (
       <div className="emoji-mart-search">
@@ -47,6 +76,13 @@ export default class Search extends React.PureComponent {
           placeholder={i18n.search}
           autoFocus={autoFocus}
         />
+        <button
+          className="emoji-mart-search-icon"
+          onClick={this.clear}
+          onKeyUp={this.handleKeyUp}
+          disabled={!isSearching}
+          dangerouslySetInnerHTML={{ __html: icon }}
+        />
       </div>
     )
   }