diff --git a/app/javascript/flavours/glitch/features/compose/components/compose_form.js b/app/javascript/flavours/glitch/features/compose/components/compose_form.js
index 44dd2693a6..0be14e495b 100644
--- a/app/javascript/flavours/glitch/features/compose/components/compose_form.js
+++ b/app/javascript/flavours/glitch/features/compose/components/compose_form.js
@@ -5,7 +5,7 @@ import ReplyIndicatorContainer from '../containers/reply_indicator_container';
import AutosuggestTextarea from '../../../components/autosuggest_textarea';
import AutosuggestInput from '../../../components/autosuggest_input';
import { defineMessages, injectIntl } from 'react-intl';
-import EmojiPicker from 'flavours/glitch/features/emoji_picker';
+import EmojiPickerDropdown from '../containers/emoji_picker_dropdown_container';
import PollFormContainer from '../containers/poll_form_container';
import UploadFormContainer from '../containers/upload_form_container';
import WarningContainer from '../containers/warning_container';
@@ -143,7 +143,7 @@ class ComposeForm extends ImmutablePureComponent {
};
// Inserts an emoji at the caret.
- handleEmoji = (data) => {
+ handleEmojiPick = (data) => {
const { textarea: { selectionStart } } = this;
const { onPickEmoji } = this.props;
if (onPickEmoji) {
@@ -275,7 +275,7 @@ class ComposeForm extends ImmutablePureComponent {
render () {
const {
- handleEmoji,
+ handleEmojiPick,
handleSecondarySubmit,
handleSelect,
handleSubmit,
@@ -344,7 +344,7 @@ class ComposeForm extends ImmutablePureComponent {
onPaste={onPaste}
autoFocus={!showSearch && !isMobile(window.innerWidth, layout)}
>
-
+
diff --git a/app/javascript/flavours/glitch/features/emoji_picker/index.js b/app/javascript/flavours/glitch/features/compose/components/emoji_picker_dropdown.js
similarity index 85%
rename from app/javascript/flavours/glitch/features/emoji_picker/index.js
rename to app/javascript/flavours/glitch/features/compose/components/emoji_picker_dropdown.js
index 05ae2c09f7..0e49a35c3e 100644
--- a/app/javascript/flavours/glitch/features/emoji_picker/index.js
+++ b/app/javascript/flavours/glitch/features/compose/components/emoji_picker_dropdown.js
@@ -1,17 +1,12 @@
-import { connect } from 'react-redux';
-import { changeSetting } from 'flavours/glitch/actions/settings';
-import { createSelector } from 'reselect';
-import { Map as ImmutableMap } from 'immutable';
-import { useEmoji } from 'flavours/glitch/actions/emojis';
import React from 'react';
import PropTypes from 'prop-types';
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
-import { EmojiPicker as EmojiPickerAsync } from '../ui/util/async-components';
+import { EmojiPicker as EmojiPickerAsync } from '../../ui/util/async-components';
import Overlay from 'react-overlays/lib/Overlay';
import classNames from 'classnames';
import ImmutablePropTypes from 'react-immutable-proptypes';
import { supportsPassiveEvents } from 'detect-passive-events';
-import { buildCustomEmojis, categoriesFromEmojis } from 'flavours/glitch/features/emoji/emoji';
+import { buildCustomEmojis, categoriesFromEmojis } from '../../emoji/emoji';
import { useSystemEmojiFont } from 'flavours/glitch/initial_state';
import { assetHost } from 'flavours/glitch/utils/config';
@@ -31,80 +26,6 @@ const messages = defineMessages({
flags: { id: 'emoji_button.flags', defaultMessage: 'Flags' },
});
-const perLine = 8;
-const lines = 2;
-
-const DEFAULTS = [
- '+1',
- 'grinning',
- 'kissing_heart',
- 'heart_eyes',
- 'laughing',
- 'stuck_out_tongue_winking_eye',
- 'sweat_smile',
- 'joy',
- 'yum',
- 'disappointed',
- 'thinking_face',
- 'weary',
- 'sob',
- 'sunglasses',
- 'heart',
- 'ok_hand',
-];
-
-const getFrequentlyUsedEmojis = createSelector([
- state => state.getIn(['settings', 'frequentlyUsedEmojis'], ImmutableMap()),
-], emojiCounters => {
- let emojis = emojiCounters
- .keySeq()
- .sort((a, b) => emojiCounters.get(a) - emojiCounters.get(b))
- .reverse()
- .slice(0, perLine * lines)
- .toArray();
-
- if (emojis.length < DEFAULTS.length) {
- emojis = emojis.concat(DEFAULTS.slice(0, DEFAULTS.length - emojis.length));
- }
-
- return emojis;
-});
-
-const getCustomEmojis = createSelector([
- state => state.get('custom_emojis'),
-], emojis => emojis.filter(e => e.get('visible_in_picker')).sort((a, b) => {
- const aShort = a.get('shortcode').toLowerCase();
- const bShort = b.get('shortcode').toLowerCase();
-
- if (aShort < bShort) {
- return -1;
- } else if (aShort > bShort ) {
- return 1;
- } else {
- return 0;
- }
-}));
-
-const mapStateToProps = state => ({
- custom_emojis: getCustomEmojis(state),
- skinTone: state.getIn(['settings', 'skinTone']),
- frequentlyUsedEmojis: getFrequentlyUsedEmojis(state),
-});
-
-const mapDispatchToProps = (dispatch, { onPickEmoji }) => ({
- onSkinTone: skinTone => {
- dispatch(changeSetting(['skinTone'], skinTone));
- },
-
- onPickEmoji: emoji => {
- dispatch(useEmoji(emoji));
-
- if (onPickEmoji) {
- onPickEmoji(emoji);
- }
- },
-});
-
let EmojiPicker, Emoji; // load asynchronously
const listenerOptions = supportsPassiveEvents ? { passive: true } : false;
@@ -389,8 +310,7 @@ class EmojiPickerMenu extends React.PureComponent {
}
-export default @connect(mapStateToProps, mapDispatchToProps)
-@injectIntl
+export default @injectIntl
class EmojiPickerDropdown extends React.PureComponent {
static propTypes = {
diff --git a/app/javascript/flavours/glitch/features/compose/containers/emoji_picker_dropdown_container.js b/app/javascript/flavours/glitch/features/compose/containers/emoji_picker_dropdown_container.js
new file mode 100644
index 0000000000..ba85edd873
--- /dev/null
+++ b/app/javascript/flavours/glitch/features/compose/containers/emoji_picker_dropdown_container.js
@@ -0,0 +1,82 @@
+import { connect } from 'react-redux';
+import EmojiPickerDropdown from '../components/emoji_picker_dropdown';
+import { changeSetting } from 'flavours/glitch/actions/settings';
+import { createSelector } from 'reselect';
+import { Map as ImmutableMap } from 'immutable';
+import { useEmoji } from 'flavours/glitch/actions/emojis';
+
+const perLine = 8;
+const lines = 2;
+
+const DEFAULTS = [
+ '+1',
+ 'grinning',
+ 'kissing_heart',
+ 'heart_eyes',
+ 'laughing',
+ 'stuck_out_tongue_winking_eye',
+ 'sweat_smile',
+ 'joy',
+ 'yum',
+ 'disappointed',
+ 'thinking_face',
+ 'weary',
+ 'sob',
+ 'sunglasses',
+ 'heart',
+ 'ok_hand',
+];
+
+const getFrequentlyUsedEmojis = createSelector([
+ state => state.getIn(['settings', 'frequentlyUsedEmojis'], ImmutableMap()),
+], emojiCounters => {
+ let emojis = emojiCounters
+ .keySeq()
+ .sort((a, b) => emojiCounters.get(a) - emojiCounters.get(b))
+ .reverse()
+ .slice(0, perLine * lines)
+ .toArray();
+
+ if (emojis.length < DEFAULTS.length) {
+ emojis = emojis.concat(DEFAULTS.slice(0, DEFAULTS.length - emojis.length));
+ }
+
+ return emojis;
+});
+
+const getCustomEmojis = createSelector([
+ state => state.get('custom_emojis'),
+], emojis => emojis.filter(e => e.get('visible_in_picker')).sort((a, b) => {
+ const aShort = a.get('shortcode').toLowerCase();
+ const bShort = b.get('shortcode').toLowerCase();
+
+ if (aShort < bShort) {
+ return -1;
+ } else if (aShort > bShort ) {
+ return 1;
+ } else {
+ return 0;
+ }
+}));
+
+const mapStateToProps = state => ({
+ custom_emojis: getCustomEmojis(state),
+ skinTone: state.getIn(['settings', 'skinTone']),
+ frequentlyUsedEmojis: getFrequentlyUsedEmojis(state),
+});
+
+const mapDispatchToProps = (dispatch, { onPickEmoji }) => ({
+ onSkinTone: skinTone => {
+ dispatch(changeSetting(['skinTone'], skinTone));
+ },
+
+ onPickEmoji: emoji => {
+ dispatch(useEmoji(emoji));
+
+ if (onPickEmoji) {
+ onPickEmoji(emoji);
+ }
+ },
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(EmojiPickerDropdown);
diff --git a/app/javascript/flavours/glitch/features/getting_started/components/announcements.js b/app/javascript/flavours/glitch/features/getting_started/components/announcements.js
index ecbda56f02..93f3c9428f 100644
--- a/app/javascript/flavours/glitch/features/getting_started/components/announcements.js
+++ b/app/javascript/flavours/glitch/features/getting_started/components/announcements.js
@@ -11,7 +11,7 @@ import elephantUIPlane from 'mastodon/../images/elephant_ui_plane.svg';
import { mascot } from 'flavours/glitch/initial_state';
import unicodeMapping from 'flavours/glitch/features/emoji/emoji_unicode_mapping_light';
import classNames from 'classnames';
-import EmojiPickerDropdown from 'flavours/glitch/features/emoji_picker';
+import EmojiPickerDropdown from 'flavours/glitch/features/compose/containers/emoji_picker_dropdown_container';
import AnimatedNumber from 'flavours/glitch/components/animated_number';
import TransitionMotion from 'react-motion/lib/TransitionMotion';
import spring from 'react-motion/lib/spring';