mastodon-docker-playground/app/javascript/mastodon/features/compose/components/emoji_picker_dropdown.js

import React from 'react';
import Dropdown, { DropdownTrigger, DropdownContent } from 'react-simple-dropdown';
import PropTypes from 'prop-types';
import { defineMessages, injectIntl } from 'react-intl';
import { EmojiPicker as EmojiPickerAsync } from '../../ui/util/async-components';

const messages = defineMessages({
  emoji: { id: 'emoji_button.label', defaultMessage: 'Insert emoji' },
  emoji_search: { id: 'emoji_button.search', defaultMessage: 'Search...' },
  people: { id: 'emoji_button.people', defaultMessage: 'People' },
  nature: { id: 'emoji_button.nature', defaultMessage: 'Nature' },
  food: { id: 'emoji_button.food', defaultMessage: 'Food & Drink' },
  activity: { id: 'emoji_button.activity', defaultMessage: 'Activity' },
  travel: { id: 'emoji_button.travel', defaultMessage: 'Travel & Places' },
  objects: { id: 'emoji_button.objects', defaultMessage: 'Objects' },
  symbols: { id: 'emoji_button.symbols', defaultMessage: 'Symbols' },
  flags: { id: 'emoji_button.flags', defaultMessage: 'Flags' },
});

const settings = {
  imageType: 'png',
  sprites: false,
  imagePathPNG: '/emoji/',
};

let EmojiPicker; // load asynchronously

@injectIntl
export default class EmojiPickerDropdown extends React.PureComponent {

  static propTypes = {
    intl: PropTypes.object.isRequired,
    onPickEmoji: PropTypes.func.isRequired,
  };

  state = {
    active: false,
    loading: false,
  };

  setRef = (c) => {
    this.dropdown = c;
  }

  handleChange = (data) => {
    this.dropdown.hide();
    this.props.onPickEmoji(data);
  }

  onShowDropdown = () => {
    this.setState({ active: true });
    if (!EmojiPicker) {
      this.setState({ loading: true });
      EmojiPickerAsync().then(TheEmojiPicker => {
        EmojiPicker = TheEmojiPicker.default;
        this.setState({ loading: false });
      }).catch(() => {
        // TODO: show the user an error?
        this.setState({ loading: false });
      });
    }
  }

  onHideDropdown = () => {
    this.setState({ active: false });
  }

  onToggle = (e) => {
    if (!this.state.loading && (!e.key || e.key === 'Enter')) {
      if (this.state.active) {
        this.onHideDropdown();
      } else {
        this.onShowDropdown();
      }
    }
  }

  onEmojiPickerKeyDown = (e) => {
    if (e.key === 'Escape') {
      this.onHideDropdown();
    }
  }

  render () {
    const { intl } = this.props;

    const categories = {
      people: {
        title: intl.formatMessage(messages.people),
        emoji: 'smile',
      },
      nature: {
        title: intl.formatMessage(messages.nature),
        emoji: 'hamster',
      },
      food: {
        title: intl.formatMessage(messages.food),
        emoji: 'pizza',
      },
      activity: {
        title: intl.formatMessage(messages.activity),
        emoji: 'soccer',
      },
      travel: {
        title: intl.formatMessage(messages.travel),
        emoji: 'earth_americas',
      },
      objects: {
        title: intl.formatMessage(messages.objects),
        emoji: 'bulb',
      },
      symbols: {
        title: intl.formatMessage(messages.symbols),
        emoji: 'clock9',
      },
      flags: {
        title: intl.formatMessage(messages.flags),
        emoji: 'flag_gb',
      },
    };

    const { active, loading } = this.state;
    const title = intl.formatMessage(messages.emoji);

    return (
      <Dropdown ref={this.setRef} className='emoji-picker__dropdown' active={active && !loading} onShow={this.onShowDropdown} onHide={this.onHideDropdown}>
        <DropdownTrigger className='emoji-button' title={title} aria-label={title} aria-pressed={active} role='button' onKeyDown={this.onToggle} tabIndex={0} >
          <img
            className={`emojione ${active && loading ? 'pulse-loading' : ''}`}
            alt='🙂'
            src='/emoji/1f602.svg'
          />
        </DropdownTrigger>

        <DropdownContent className='dropdown__left'>
          {
            this.state.active && !this.state.loading &&
            (<EmojiPicker emojione={settings} onChange={this.handleChange} searchPlaceholder={intl.formatMessage(messages.emoji_search)} onKeyDown={this.onEmojiPickerKeyDown} categories={categories} search />)
          }
        </DropdownContent>
      </Dropdown>
    );
  }

}