Add keyboard selection with enter

release
Christian Savard 2018-03-15 15:36:07 -04:00
parent 6bd17d3eb5
commit 0765bf56f7
4 changed files with 30 additions and 4 deletions

View File

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

View File

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

View File

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

View File

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