mirror of
https://github.com/Foundry376/Mailspring.git
synced 2024-09-22 16:26:08 +08:00
51 lines
1.3 KiB
React
51 lines
1.3 KiB
React
|
import {React} from 'nylas-exports'
|
||
|
import EmojiActions from './emoji-actions'
|
||
|
const emoji = require('node-emoji');
|
||
|
|
||
|
class EmojiPicker extends React.Component {
|
||
|
static displayName = "EmojiPicker"
|
||
|
static propTypes = {
|
||
|
emojiOptions: React.PropTypes.array,
|
||
|
selectedEmoji: React.PropTypes.string
|
||
|
};
|
||
|
|
||
|
constructor(props) {
|
||
|
super(props);
|
||
|
this.state = {};
|
||
|
}
|
||
|
|
||
|
componentDidUpdate() {
|
||
|
selectedButton = React.findDOMNode(this).querySelector(".emoji-option");
|
||
|
if (selectedButton) {
|
||
|
selectedButton.scrollIntoViewIfNeeded();
|
||
|
}
|
||
|
}
|
||
|
|
||
|
render() {
|
||
|
let emojis = [];
|
||
|
emojiIndex = this.props.emojiOptions.indexOf(this.props.selectedEmoji);
|
||
|
if (emojiIndex == -1) {
|
||
|
emojiIndex = 0;
|
||
|
}
|
||
|
if (this.props.emojiOptions) {
|
||
|
this.props.emojiOptions.forEach((emojiOption, i) => {
|
||
|
const emojiChar = emoji.get(emojiOption);
|
||
|
emojiClass = emojiIndex == i ? "btn btn-icon emoji-option" : "btn btn-icon";
|
||
|
emojis.push(<button onMouseDown={() => this.onMouseDown(emojiChar)} className={emojiClass}>{emojiChar} :{emojiOption}:</button>);
|
||
|
emojis.push(<br />);
|
||
|
})
|
||
|
}
|
||
|
return(
|
||
|
<div className="emoji-picker">
|
||
|
{emojis}
|
||
|
</div>
|
||
|
);
|
||
|
}
|
||
|
|
||
|
onMouseDown(emojiChar) {
|
||
|
EmojiActions.selectEmoji({emojiChar});
|
||
|
}
|
||
|
}
|
||
|
|
||
|
export default EmojiPicker;
|