app/javascript/mastodon/features/compose/components/emoji_picker_dropdown.js

   1 import React from 'react';
   2 import Dropdown, { DropdownTrigger, DropdownContent } from 'react-simple-dropdown';
   3 import PropTypes from 'prop-types';
   4 import { defineMessages, injectIntl } from 'react-intl';
   5
   6 const messages = defineMessages({
   7   emoji: { id: 'emoji_button.label', defaultMessage: 'Insert emoji' },
   8   emoji_search: { id: 'emoji_button.search', defaultMessage: 'Search...' },
   9   people: { id: 'emoji_button.people', defaultMessage: 'People' },
  10   nature: { id: 'emoji_button.nature', defaultMessage: 'Nature' },
  11   food: { id: 'emoji_button.food', defaultMessage: 'Food & Drink' },
  12   activity: { id: 'emoji_button.activity', defaultMessage: 'Activity' },
  13   travel: { id: 'emoji_button.travel', defaultMessage: 'Travel & Places' },
  14   objects: { id: 'emoji_button.objects', defaultMessage: 'Objects' },
  15   symbols: { id: 'emoji_button.symbols', defaultMessage: 'Symbols' },
  16   flags: { id: 'emoji_button.flags', defaultMessage: 'Flags' },
  17 });
  18
  19 const settings = {
  20   imageType: 'png',
  21   sprites: false,
  22   imagePathPNG: '/emoji/',
  23 };
  24
  25 let EmojiPicker; // load asynchronously
  26
  27 class EmojiPickerDropdown extends React.PureComponent {
  28
  29   static propTypes = {
  30     intl: PropTypes.object.isRequired,
  31     onPickEmoji: PropTypes.func.isRequired,
  32   };
  33
  34   state = {
  35     active: false,
  36     loading: false,
  37   };
  38
  39   setRef = (c) => {
  40     this.dropdown = c;
  41   }
  42
  43   handleChange = (data) => {
  44     this.dropdown.hide();
  45     this.props.onPickEmoji(data);
  46   }
  47
  48   onShowDropdown = () => {
  49     this.setState({active: true});
  50     if (!EmojiPicker) {
  51       this.setState({loading: true});
  52       import('emojione-picker').then(TheEmojiPicker => {
  53         EmojiPicker = TheEmojiPicker.default;
  54         this.setState({loading: false});
  55       }).catch(err => {
  56         // TODO: show the user an error?
  57         this.setState({loading: false});
  58       });
  59     }
  60   }
  61
  62   onHideDropdown = () => {
  63     this.setState({active: false});
  64   }
  65
  66   render () {
  67     const { intl } = this.props;
  68
  69     const categories = {
  70       people: {
  71         title: intl.formatMessage(messages.people),
  72         emoji: 'smile',
  73       },
  74       nature: {
  75         title: intl.formatMessage(messages.nature),
  76         emoji: 'hamster',
  77       },
  78       food: {
  79         title: intl.formatMessage(messages.food),
  80         emoji: 'pizza',
  81       },
  82       activity: {
  83         title: intl.formatMessage(messages.activity),
  84         emoji: 'soccer',
  85       },
  86       travel: {
  87         title: intl.formatMessage(messages.travel),
  88         emoji: 'earth_americas',
  89       },
  90       objects: {
  91         title: intl.formatMessage(messages.objects),
  92         emoji: 'bulb',
  93       },
  94       symbols: {
  95         title: intl.formatMessage(messages.symbols),
  96         emoji: 'clock9',
  97       },
  98       flags: {
  99         title: intl.formatMessage(messages.flags),
 100         emoji: 'flag_gb',
 101       },
 102     };
 103
 104     const { active, loading } = this.state;
 105
 106     return (
 107       <Dropdown ref={this.setRef} className='emoji-picker__dropdown' onShow={this.onShowDropdown} onHide={this.onHideDropdown}>
 108         <DropdownTrigger className='emoji-button' title={intl.formatMessage(messages.emoji)}>
 109           <img draggable="false"
 110                className={`emojione ${active && loading ? "pulse-loading" : ''}`}
 111                alt="🙂" src="/emoji/1f602.svg" />
 112         </DropdownTrigger>
 113         <DropdownContent className='dropdown__left'>
 114           {
 115             this.state.active && !this.state.loading &&
 116             (<EmojiPicker emojione={settings} onChange={this.handleChange} searchPlaceholder={intl.formatMessage(messages.emoji_search)} categories={categories} search={true} />)
 117           }
 118         </DropdownContent>
 119       </Dropdown>
 120     );
 121   }
 122
 123 }
 124
 125 export default injectIntl(EmojiPickerDropdown);