You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
58 lines
1.5 KiB
58 lines
1.5 KiB
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: 'Insert emoji' }
|
|
});
|
|
|
|
const settings = {
|
|
imageType: 'png',
|
|
sprites: false,
|
|
imagePathPNG: '/emoji/'
|
|
};
|
|
|
|
const style = {
|
|
position: 'absolute',
|
|
right: '5px',
|
|
top: '5px'
|
|
};
|
|
|
|
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={style}>
|
|
<DropdownTrigger className='emoji-button' title={intl.formatMessage(messages.emoji)} style={{ fontSize: `24px`, width: `24px`, lineHeight: `24px`, display: 'block', marginLeft: '2px' }}>
|
|
<img draggable="false" className="emojione" alt="🙂" src="/emoji/1f602.svg" />
|
|
</DropdownTrigger>
|
|
|
|
<DropdownContent className='dropdown__left'>
|
|
<EmojiPicker emojione={settings} onChange={this.handleChange} />
|
|
</DropdownContent>
|
|
</Dropdown>
|
|
);
|
|
}
|
|
|
|
});
|
|
|
|
export default injectIntl(EmojiPickerDropdown);
|
|
|