Mailspring/internal_packages/composer-emoji/lib/emoji-picker.jsx

64 lines
1.8 KiB
React
Raw Normal View History

import {React, ReactDOM} from 'nylas-exports';
import EmojiStore from './emoji-store';
import EmojiActions from './emoji-actions';
import emoji from '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() {
const selectedButton = ReactDOM.findDOMNode(this).querySelector(".emoji-option");
if (selectedButton) {
selectedButton.scrollIntoViewIfNeeded();
}
}
onMouseDown(emojiName) {
EmojiActions.selectEmoji({emojiName, replaceSelection: true});
}
render() {
const emojiButtons = [];
let emojiIndex = this.props.emojiOptions.indexOf(this.props.selectedEmoji);
if (emojiIndex === -1) emojiIndex = 0;
if (this.props.emojiOptions) {
this.props.emojiOptions.forEach((emojiOption, i) => {
const emojiClass = emojiIndex === i ? "btn btn-icon emoji-option" : "btn btn-icon";
let emojiChar = emoji.get(emojiOption);
emojiChar = (<img
src={EmojiStore.getImagePath(emojiOption)}
width="16"
height="16"
style={{marginTop: "-4px", marginRight: "3px"}} />);
emojiButtons.push(
<button
key={emojiOption}
onMouseDown={() => this.onMouseDown(emojiOption)}
className={emojiClass}>
{emojiChar} :{emojiOption}:
</button>
);
emojiButtons.push(<br key={emojiOption + " br"} />);
});
}
return (
<div className="emoji-picker">
{emojiButtons}
</div>
);
}
}
export default EmojiPicker;