logo

mastofe

My custom branche(s) on git.pleroma.social/pleroma/mastofe git clone https://hacktivis.me/git/mastofe.git

emoji_picker_dropdown_container.js (2087B)


  1. import { connect } from 'react-redux';
  2. import EmojiPickerDropdown from '../components/emoji_picker_dropdown';
  3. import { changeSetting } from '../../../actions/settings';
  4. import { createSelector } from 'reselect';
  5. import { Map as ImmutableMap } from 'immutable';
  6. import { useEmoji } from '../../../actions/emojis';
  7. const perLine = 8;
  8. const lines = 2;
  9. const DEFAULTS = [
  10. '+1',
  11. 'grinning',
  12. 'kissing_heart',
  13. 'heart_eyes',
  14. 'laughing',
  15. 'stuck_out_tongue_winking_eye',
  16. 'sweat_smile',
  17. 'joy',
  18. 'yum',
  19. 'disappointed',
  20. 'thinking_face',
  21. 'weary',
  22. 'sob',
  23. 'sunglasses',
  24. 'heart',
  25. 'ok_hand',
  26. ];
  27. const getFrequentlyUsedEmojis = createSelector([
  28. state => state.getIn(['settings', 'frequentlyUsedEmojis'], ImmutableMap()),
  29. ], emojiCounters => {
  30. let emojis = emojiCounters
  31. .keySeq()
  32. .sort((a, b) => emojiCounters.get(a) - emojiCounters.get(b))
  33. .reverse()
  34. .slice(0, perLine * lines)
  35. .toArray();
  36. if (emojis.length < DEFAULTS.length) {
  37. let uniqueDefaults = DEFAULTS.filter(emoji => !emojis.includes(emoji));
  38. emojis = emojis.concat(uniqueDefaults.slice(0, DEFAULTS.length - emojis.length));
  39. }
  40. return emojis;
  41. });
  42. const getCustomEmojis = createSelector([
  43. state => state.get('custom_emojis'),
  44. ], emojis => emojis.filter(e => e.get('visible_in_picker')).sort((a, b) => {
  45. const aShort = a.get('shortcode').toLowerCase();
  46. const bShort = b.get('shortcode').toLowerCase();
  47. if (aShort < bShort) {
  48. return -1;
  49. } else if (aShort > bShort ) {
  50. return 1;
  51. } else {
  52. return 0;
  53. }
  54. }));
  55. const mapStateToProps = state => ({
  56. custom_emojis: getCustomEmojis(state),
  57. skinTone: state.getIn(['settings', 'skinTone']),
  58. frequentlyUsedEmojis: getFrequentlyUsedEmojis(state),
  59. });
  60. const mapDispatchToProps = (dispatch, { onPickEmoji }) => ({
  61. onSkinTone: skinTone => {
  62. dispatch(changeSetting(['skinTone'], skinTone));
  63. },
  64. onPickEmoji: emoji => {
  65. dispatch(useEmoji(emoji));
  66. if (onPickEmoji) {
  67. onPickEmoji(emoji);
  68. }
  69. },
  70. });
  71. export default connect(mapStateToProps, mapDispatchToProps)(EmojiPickerDropdown);