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

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

View file

@ -12,6 +12,7 @@
] ]
], ],
"plugins": [ "plugins": [
"syntax-dynamic-import",
"transform-object-rest-spread", "transform-object-rest-spread",
[ [
"react-intl", "react-intl",

View file

@ -1,6 +1,5 @@
import React from 'react'; import React from 'react';
import Dropdown, { DropdownTrigger, DropdownContent } from 'react-simple-dropdown'; import Dropdown, { DropdownTrigger, DropdownContent } from 'react-simple-dropdown';
import EmojiPicker from 'emojione-picker';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { defineMessages, injectIntl } from 'react-intl'; import { defineMessages, injectIntl } from 'react-intl';
@ -37,12 +36,20 @@ const dropdownTriggerStyle = {
width: '24px' width: '24px'
} }
let EmojiPicker; // load asynchronously
class EmojiPickerDropdown extends React.PureComponent { class EmojiPickerDropdown extends React.PureComponent {
constructor (props, context) { constructor (props, context) {
super(props, context); super(props, context);
this.setRef = this.setRef.bind(this); this.setRef = this.setRef.bind(this);
this.handleChange = this.handleChange.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) { setRef (c) {
@ -54,6 +61,24 @@ class EmojiPickerDropdown extends React.PureComponent {
this.props.onPickEmoji(data); 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 () { render () {
const { intl } = this.props; const { intl } = this.props;
@ -92,14 +117,20 @@ class EmojiPickerDropdown extends React.PureComponent {
} }
} }
return ( const { active, loading } = this.state;
<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>
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'> <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> </DropdownContent>
</Dropdown> </Dropdown>
); );

View file

@ -2141,6 +2141,20 @@ button.icon-button.active i.fa-retweet {
background: radial-gradient(ellipse, rgba($color4, 0.23) 0%, rgba($color4, 0) 60%); background: radial-gradient(ellipse, rgba($color4, 0.23) 0%, rgba($color4, 0) 60%);
} }
@keyframes pulse {
0% {
opacity: 1;
}
100% {
opacity: 0.5;
}
}
.pulse-loading {
animation: pulse 1s ease-in-out infinite;
animation-direction: alternate;
}
.emoji-dialog { .emoji-dialog {
width: 245px; width: 245px;
height: 270px; height: 270px;

View file

@ -25,6 +25,7 @@
"babel-plugin-lodash": "^3.2.11", "babel-plugin-lodash": "^3.2.11",
"babel-plugin-react-intl": "^2.3.1", "babel-plugin-react-intl": "^2.3.1",
"babel-plugin-react-transform": "^2.0.2", "babel-plugin-react-transform": "^2.0.2",
"babel-plugin-syntax-dynamic-import": "^6.18.0",
"babel-plugin-transform-object-rest-spread": "^6.23.0", "babel-plugin-transform-object-rest-spread": "^6.23.0",
"babel-plugin-transform-react-constant-elements": "^6.23.0", "babel-plugin-transform-react-constant-elements": "^6.23.0",
"babel-plugin-transform-react-inline-elements": "^6.22.0", "babel-plugin-transform-react-inline-elements": "^6.22.0",