diff options
author | Eugen Rochko <eugen@zeonfederated.com> | 2017-10-07 19:02:30 +0200 |
---|---|---|
committer | GitHub <noreply@github.com> | 2017-10-07 19:02:30 +0200 |
commit | d2dee6ea431f52ab90c568b21b25169d5129c7a6 (patch) | |
tree | bf825270d09dec66084a521bcf2bae630f4377a7 /app/javascript/mastodon/features/compose/components/emoji_picker_dropdown.js | |
parent | 967e70663fc694836e3b99595bea74485557cbd1 (diff) |
Fix custom emoji in emoji picker, persist skin tone (#5258)
Diffstat (limited to 'app/javascript/mastodon/features/compose/components/emoji_picker_dropdown.js')
-rw-r--r-- | app/javascript/mastodon/features/compose/components/emoji_picker_dropdown.js | 45 |
1 files changed, 31 insertions, 14 deletions
diff --git a/app/javascript/mastodon/features/compose/components/emoji_picker_dropdown.js b/app/javascript/mastodon/features/compose/components/emoji_picker_dropdown.js index 210721d9c..9be8909d8 100644 --- a/app/javascript/mastodon/features/compose/components/emoji_picker_dropdown.js +++ b/app/javascript/mastodon/features/compose/components/emoji_picker_dropdown.js @@ -31,6 +31,19 @@ let EmojiPicker, Emoji; // load asynchronously const backgroundImageFn = () => `${assetHost}/emoji/sheet.png`; const listenerOptions = detectPassiveEvents.hasSupport ? { passive: true } : false; +const categoriesSort = [ + 'recent', + 'custom', + 'people', + 'nature', + 'foods', + 'activity', + 'places', + 'objects', + 'symbols', + 'flags', +]; + class ModifierPickerMenu extends React.PureComponent { static propTypes = { @@ -141,6 +154,9 @@ class EmojiPickerMenu extends React.PureComponent { arrowOffsetLeft: PropTypes.string, arrowOffsetTop: PropTypes.string, intl: PropTypes.object.isRequired, + skinTone: PropTypes.number.isRequired, + onSkinTone: PropTypes.func.isRequired, + autoPlay: PropTypes.bool, }; static defaultProps = { @@ -151,7 +167,6 @@ class EmojiPickerMenu extends React.PureComponent { state = { modifierOpen: false, - modifier: 1, }; handleDocumentClick = e => { @@ -214,20 +229,18 @@ class EmojiPickerMenu extends React.PureComponent { } handleModifierChange = modifier => { - if (modifier !== this.state.modifier) { - this.setState({ modifier }); - } + this.props.onSkinTone(modifier); } render () { - const { loading, style, intl } = this.props; + const { loading, style, intl, custom_emojis, autoPlay, skinTone } = this.props; if (loading) { return <div style={{ width: 299 }} />; } const title = intl.formatMessage(messages.emoji); - const { modifierOpen, modifier } = this.state; + const { modifierOpen } = this.state; return ( <div className={classNames('emoji-picker-dropdown__menu', { selecting: modifierOpen })} style={style} ref={this.setRef}> @@ -235,20 +248,22 @@ class EmojiPickerMenu extends React.PureComponent { perLine={8} emojiSize={22} sheetSize={32} + custom={buildCustomEmojis(custom_emojis, autoPlay)} color='' emoji='' set='twitter' title={title} i18n={this.getI18n()} onClick={this.handleClick} - skin={modifier} + include={categoriesSort} + skin={skinTone} showPreview={false} backgroundImageFn={backgroundImageFn} /> <ModifierPicker active={modifierOpen} - modifier={modifier} + modifier={skinTone} onOpen={this.handleModifierOpen} onClose={this.handleModifierClose} onChange={this.handleModifierChange} @@ -267,6 +282,8 @@ export default class EmojiPickerDropdown extends React.PureComponent { autoPlay: PropTypes.bool, intl: PropTypes.object.isRequired, onPickEmoji: PropTypes.func.isRequired, + onSkinTone: PropTypes.func.isRequired, + skinTone: PropTypes.number.isRequired, }; state = { @@ -279,8 +296,6 @@ export default class EmojiPickerDropdown extends React.PureComponent { } onShowDropdown = () => { - const { autoPlay } = this.props; - this.setState({ active: true }); if (!EmojiPicker) { @@ -288,9 +303,8 @@ export default class EmojiPickerDropdown extends React.PureComponent { EmojiPickerAsync().then(EmojiMart => { EmojiPicker = EmojiMart.Picker; - Emoji = EmojiMart.Emoji; - // populate custom emoji in search - EmojiMart.emojiIndex.search('', { custom: buildCustomEmojis(this.props.custom_emojis, autoPlay) }); + Emoji = EmojiMart.Emoji; + this.setState({ loading: false }); }).catch(() => { this.setState({ loading: false }); @@ -327,7 +341,7 @@ export default class EmojiPickerDropdown extends React.PureComponent { } render () { - const { intl, onPickEmoji } = this.props; + const { intl, onPickEmoji, autoPlay, onSkinTone, skinTone } = this.props; const title = intl.formatMessage(messages.emoji); const { active, loading } = this.state; @@ -347,6 +361,9 @@ export default class EmojiPickerDropdown extends React.PureComponent { loading={loading} onClose={this.onHideDropdown} onPick={onPickEmoji} + autoPlay={autoPlay} + onSkinTone={onSkinTone} + skinTone={skinTone} /> </Overlay> </div> |