1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
|
import Dropdown, { DropdownTrigger, DropdownContent } from 'react-simple-dropdown';
import EmojiPicker from 'emojione-picker';
import PureRenderMixin from 'react-addons-pure-render-mixin';
import { defineMessages, injectIntl } from 'react-intl';
const messages = defineMessages({
emoji: { id: 'emoji_button.label', defaultMessage: 'Emoji' }
});
const settings = {
imageType: 'png',
sprites: false,
imagePathPNG: '/emoji/'
};
const EmojiPickerDropdown = React.createClass({
propTypes: {
intl: React.PropTypes.object.isRequired,
onPickEmoji: React.PropTypes.func.isRequired
},
mixins: [PureRenderMixin],
setRef (c) {
this.dropdown = c;
},
handleChange (data) {
this.dropdown.hide();
this.props.onPickEmoji(data);
},
render () {
const { intl } = this.props;
return (
<Dropdown ref={this.setRef} style={{ marginLeft: '5px' }}>
<DropdownTrigger className='icon-button' title={intl.formatMessage(messages.emoji)} style={{ fontSize: `24px`, width: `24px`, lineHeight: `24px`, display: 'block', marginLeft: '2px' }}>
<i className={`fa fa-smile-o`} style={{ verticalAlign: 'middle' }} />
</DropdownTrigger>
<DropdownContent>
<EmojiPicker emojione={settings} onChange={this.handleChange} />
</DropdownContent>
</Dropdown>
);
}
});
export default injectIntl(EmojiPickerDropdown);
|
