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

128 lines
3.7 KiB
JavaScript
Raw Normal View History

import React from 'react';
2017-03-01 23:57:55 +00:00
import Dropdown, { DropdownTrigger, DropdownContent } from 'react-simple-dropdown';
import PropTypes from 'prop-types';
2017-03-01 23:57:55 +00:00
import { defineMessages, injectIntl } from 'react-intl';
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' },
2017-03-01 23:57:55 +00:00
});
const settings = {
imageType: 'png',
sprites: false,
imagePathPNG: '/emoji/',
2017-03-01 23:57:55 +00:00
};
let EmojiPicker; // load asynchronously
class EmojiPickerDropdown extends React.PureComponent {
2017-03-01 23:57:55 +00:00
static propTypes = {
intl: PropTypes.object.isRequired,
onPickEmoji: PropTypes.func.isRequired,
};
state = {
active: false,
loading: false,
};
2017-03-01 23:57:55 +00:00
setRef = (c) => {
2017-03-01 23:57:55 +00:00
this.dropdown = c;
}
2017-03-01 23:57:55 +00:00
handleChange = (data) => {
2017-03-01 23:57:55 +00:00
this.dropdown.hide();
this.props.onPickEmoji(data);
}
2017-03-01 23:57:55 +00:00
onShowDropdown = () => {
this.setState({ active: true });
if (!EmojiPicker) {
this.setState({ loading: true });
2017-05-25 01:30:29 +00:00
import(/* webpackChunkName: "emojione_picker" */ 'emojione-picker').then(TheEmojiPicker => {
EmojiPicker = TheEmojiPicker.default;
this.setState({ loading: false });
2017-06-23 14:05:04 +00:00
}).catch(() => {
// TODO: show the user an error?
this.setState({ loading: false });
});
}
}
onHideDropdown = () => {
this.setState({ active: false });
}
2017-03-01 23:57:55 +00:00
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;
2017-03-01 23:57:55 +00:00
return (
<Dropdown ref={this.setRef} className='emoji-picker__dropdown' onShow={this.onShowDropdown} onHide={this.onHideDropdown}>
<DropdownTrigger className='emoji-button' title={intl.formatMessage(messages.emoji)}>
<img
draggable='false'
className={`emojione ${active && loading ? 'pulse-loading' : ''}`}
alt='🙂' src='/emoji/1f602.svg'
/>
2017-03-01 23:57:55 +00:00
</DropdownTrigger>
<DropdownContent className='dropdown__left'>
{
this.state.active && !this.state.loading &&
(<EmojiPicker emojione={settings} onChange={this.handleChange} searchPlaceholder={intl.formatMessage(messages.emoji_search)} categories={categories} search />)
}
2017-03-01 23:57:55 +00:00
</DropdownContent>
</Dropdown>
);
}
}
2017-03-01 23:57:55 +00:00
export default injectIntl(EmojiPickerDropdown);