diff --git a/README.md b/README.md index 9e6aae3..321d360 100644 --- a/README.md +++ b/README.md @@ -17,7 +17,7 @@ import 'emoji-mart/css/emoji-mart.css' import { Picker } from 'emoji-mart' - + @@ -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 | diff --git a/docs/index.js b/docs/index.js index c4a2718..592a16d 100644 --- a/docs/index.js +++ b/docs/index.js @@ -69,7 +69,7 @@ class Example extends React.Component {
diff --git a/src/components/picker.js b/src/components/picker.js index 16ac1a8..f2c03a1 100644 --- a/src/components/picker.js +++ b/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 ( -
+
{}, + onSelect: () => {}, onSkinChange: () => {}, emojiSize: 24, perLine: 9, diff --git a/stories/index.js b/stories/index.js index 2561a6b..b0798ec 100644 --- a/stories/index.js +++ b/stories/index.js @@ -28,6 +28,7 @@ storiesOf('Picker', module) .add('default', () => (