Merge pull request #175 from savardc/keyboardSelect

Select first emoji in list with `enter`

README.md

@@ -17,7 +17,7 @@ import 'emoji-mart/css/emoji-mart.css'
 import { Picker } from 'emoji-mart'
 
 <Picker set='emojione' />
-<Picker onClick={this.addEmoji} />
+<Picker onSelect={this.addEmoji} />
 <Picker title='Pick your emoji…' emoji='point_up' />
 <Picker style={{ position: 'absolute', bottom: '20px', right: '20px' }} />
 <Picker i18n={{ search: 'Recherche', categories: { search: 'Résultats de recherche', recent: 'Récents' } }} />
@@ -33,7 +33,8 @@ import { Picker } from 'emoji-mart'
 | **custom** | | `[]` | [Custom emojis](#custom-emojis) |
 | **recent** | | | Pass your own frequently used emojis as array of string IDs |
 | **emojiSize** | | `24` | The emoji width and height |
-| **onClick** | | | Params: `(emoji, event) => {}` |
+| **onClick** | | | Params: `(emoji, event) => {}`. Not called when emoji is selected with `enter` |
+| **onSelect** | | | Params: `(emoji) => {}`  |
 | **onSkinChange** | | | Params: `(skin) => {}` |
 | **perLine** | | `9` | Number of emojis per line. While there’s no minimum or maximum, this will affect the picker’s width. This will set *Frequently Used* length as well (`perLine * 4`) |
 | **i18n** | | [`{…}`](#i18n) | [An object](#i18n) containing localized strings |

docs/index.js

@@ -69,7 +69,7 @@ class Example extends React.Component {
       <div className="row">
         <Picker
           {...this.state}
-          onClick={console.log}
+          onSelect={console.log}
         />
       </div>
 

src/components/picker.js

@@ -147,8 +147,10 @@ export default class Picker extends React.PureComponent {
     this.handleEmojiOver = this.handleEmojiOver.bind(this)
     this.handleEmojiLeave = this.handleEmojiLeave.bind(this)
     this.handleEmojiClick = this.handleEmojiClick.bind(this)
+    this.handleEmojiSelect = this.handleEmojiSelect.bind(this)
     this.setPreviewRef = this.setPreviewRef.bind(this)
     this.handleSkinChange = this.handleSkinChange.bind(this)
+    this.handleKeyDown = this.handleKeyDown.bind(this)
   }
 
   componentWillReceiveProps(props) {
@@ -225,6 +227,11 @@ export default class Picker extends React.PureComponent {
 
   handleEmojiClick(emoji, e) {
     this.props.onClick(emoji, e)
+    this.handleEmojiSelect(emoji)
+  }
+
+  handleEmojiSelect(emoji) {
+    this.props.onSelect(emoji)
     if (!this.hideRecent && !this.props.recent) frequently.add(emoji)
 
     var component = this.categoryRefs['category-1']
@@ -368,6 +375,26 @@ export default class Picker extends React.PureComponent {
     onSkinChange(skin)
   }
 
+  handleKeyDown(e) {
+    let handled = false
+
+    switch (e.keyCode) {
+      case 13:
+        let emoji
+
+        if (this.SEARCH_CATEGORY.emojis && (emoji = this.SEARCH_CATEGORY.emojis[0])) {
+          this.handleEmojiSelect(emoji)
+        }
+
+        handled = true
+        break;
+    }
+
+    if (handled) {
+      e.preventDefault()
+    }
+  }
+
   updateCategoriesSize() {
     for (let i = 0, l = this.categories.length; i < l; i++) {
       let component = this.categoryRefs[`category-${i}`]
@@ -436,7 +463,7 @@ export default class Picker extends React.PureComponent {
       width = perLine * (emojiSize + 12) + 12 + 2 + measureScrollbar()
 
     return (
-      <div style={{ width: width, ...style }} className="emoji-mart">
+      <div style={{ width: width, ...style }} className="emoji-mart" onKeyDown={this.handleKeyDown}>
         <div className="emoji-mart-bar">
           <Anchors
             ref={this.setAnchorsRef}
@@ -530,6 +557,7 @@ export default class Picker extends React.PureComponent {
 
 Picker.propTypes = {
   onClick: PropTypes.func,
+  onSelect: PropTypes.func,
   onSkinChange: PropTypes.func,
   perLine: PropTypes.number,
   emojiSize: PropTypes.number,
@@ -564,6 +592,7 @@ Picker.propTypes = {
 
 Picker.defaultProps = {
   onClick: () => {},
+  onSelect: () => {},
   onSkinChange: () => {},
   emojiSize: 24,
   perLine: 9,

stories/index.js

@@ -28,6 +28,7 @@ storiesOf('Picker', module)
   .add('default', () => (
     <Picker
       onClick={action('clicked')}
+      onSelect={action('selected')}
       onSkinChange={action('skin changed')}
       native={boolean('Unicode', true)}
       set={select('Emoji pack', SETS, SETS[0])}