[Glitch] Add categories for custom emojis

Port front-end changes from e64e6a03dd to glitch-soc

Signed-off-by: Thibaut Girka <thib@sitedethib.com>
main
Eugen Rochko 5 years ago committed by Thibaut Girka
parent 4d964398de
commit 662252c8f7

@ -11,7 +11,7 @@ import Overlay from 'react-overlays/lib/Overlay';
import classNames from 'classnames'; import classNames from 'classnames';
import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePropTypes from 'react-immutable-proptypes';
import detectPassiveEvents from 'detect-passive-events'; import detectPassiveEvents from 'detect-passive-events';
import { buildCustomEmojis } from 'flavours/glitch/util/emoji'; import { buildCustomEmojis, categoriesFromEmojis } from 'flavours/glitch/util/emoji';
const messages = defineMessages({ const messages = defineMessages({
emoji: { id: 'emoji_button.label', defaultMessage: 'Insert emoji' }, emoji: { id: 'emoji_button.label', defaultMessage: 'Insert emoji' },
@ -110,19 +110,6 @@ let EmojiPicker, Emoji; // load asynchronously
const backgroundImageFn = () => `${assetHost}/emoji/sheet_10.png`; const backgroundImageFn = () => `${assetHost}/emoji/sheet_10.png`;
const listenerOptions = detectPassiveEvents.hasSupport ? { passive: true } : false; const listenerOptions = detectPassiveEvents.hasSupport ? { passive: true } : false;
const categoriesSort = [
'recent',
'custom',
'people',
'nature',
'foods',
'activity',
'places',
'objects',
'symbols',
'flags',
];
class ModifierPickerMenu extends React.PureComponent { class ModifierPickerMenu extends React.PureComponent {
static propTypes = { static propTypes = {
@ -320,8 +307,23 @@ class EmojiPickerMenu extends React.PureComponent {
} }
const title = intl.formatMessage(messages.emoji); const title = intl.formatMessage(messages.emoji);
const { modifierOpen } = this.state; const { modifierOpen } = this.state;
const categoriesSort = [
'recent',
'people',
'nature',
'foods',
'activity',
'places',
'objects',
'symbols',
'flags',
];
categoriesSort.splice(1, 0, ...Array.from(categoriesFromEmojis(custom_emojis)).sort());
return ( return (
<div className={classNames('emoji-picker-dropdown__menu', { selecting: modifierOpen })} style={style} ref={this.setRef}> <div className={classNames('emoji-picker-dropdown__menu', { selecting: modifierOpen })} style={style} ref={this.setRef}>
<EmojiPicker <EmojiPicker

@ -93,8 +93,11 @@ export const buildCustomEmojis = (customEmojis) => {
keywords: [name], keywords: [name],
imageUrl: url, imageUrl: url,
custom: true, custom: true,
customCategory: emoji.get('category'),
}); });
}); });
return emojis; return emojis;
}; };
export const categoriesFromEmojis = customEmojis => customEmojis.reduce((set, emoji) => set.add(emoji.get('category') ? `custom-${emoji.get('category')}` : 'custom'), new Set());

Loading…
Cancel
Save