Unfloyded/Legamunt
0
0
Fork 0
Code Activity

add asynchronous emojione-picker (code-splitting) (#2863)

Browse source
This commit is contained in:
Nolan Lawson 2017-05-06 17:42:38 -07:00 • committed by Eugen Rochko
parent 87588fa894
commit df81bc4a97
4 changed files with 54 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

45
app/javascript/mastodon/features/compose/components/emoji_picker_dropdown.js
View file

@ -1,6 +1,5 @@
import React from 'react';
import Dropdown, { DropdownTrigger, DropdownContent } from 'react-simple-dropdown';
import EmojiPicker from 'emojione-picker';
import PropTypes from 'prop-types';
import { defineMessages, injectIntl } from 'react-intl';
@ -37,12 +36,20 @@ const dropdownTriggerStyle = {
width: '24px'
}
let EmojiPicker; // load asynchronously
class EmojiPickerDropdown extends React.PureComponent {
constructor (props, context) {
super(props, context);
this.setRef = this.setRef.bind(this);
this.handleChange = this.handleChange.bind(this);
this.onHideDropdown = this.onHideDropdown.bind(this);
this.onShowDropdown = this.onShowDropdown.bind(this);
this.state = {
active: false,
loading: false
};
}
setRef (c) {
@ -54,6 +61,24 @@ class EmojiPickerDropdown extends React.PureComponent {
this.props.onPickEmoji(data);
}
onShowDropdown () {
this.setState({active: true});
if (!EmojiPicker) {
this.setState({loading: true});
import('emojione-picker').then(TheEmojiPicker => {
EmojiPicker = TheEmojiPicker.default;
this.setState({loading: false});
}).catch(err => {
// TODO: show the user an error?
this.setState({loading: false});
});
}
}
onHideDropdown () {
this.setState({active: false});
}
render () {
const { intl } = this.props;
@ -92,14 +117,20 @@ class EmojiPickerDropdown extends React.PureComponent {
}
}
return (
<Dropdown ref={this.setRef} style={dropdownStyle}>
<DropdownTrigger className='emoji-button' title={intl.formatMessage(messages.emoji)} style={dropdownTriggerStyle}>
<img draggable="false" className="emojione" alt="🙂" src="/emoji/1f602.svg" />
</DropdownTrigger>
const { active, loading } = this.state;
return (
<Dropdown ref={this.setRef} style={dropdownStyle} onShow={this.onShowDropdown} onHide={this.onHideDropdown}>
<DropdownTrigger className='emoji-button' title={intl.formatMessage(messages.emoji)} style={dropdownTriggerStyle}>
<img draggable="false"
className={`emojione ${active && loading ? "pulse-loading" : ''}`}
alt="🙂" src="/emoji/1f602.svg" />
</DropdownTrigger>
<DropdownContent className='dropdown__left'>
<EmojiPicker emojione={settings} onChange={this.handleChange} searchPlaceholder={intl.formatMessage(messages.emoji_search)} categories={categories} search={true} />
{
this.state.active && !this.state.loading &&
(<EmojiPicker emojione={settings} onChange={this.handleChange} searchPlaceholder={intl.formatMessage(messages.emoji_search)} categories={categories} search={true} />)
}
</DropdownContent>
</Dropdown>
);