mirror of
https://github.com/Foundry376/Mailspring.git
synced 2024-09-23 00:36:50 +08:00
5c6b4adf9a
Summary: Emojis can now be added in the composer window with colons and the emoji names (referenced by the same names used on Slack/GitHub/etc.). When using the correct syntax, if there are emojis that match the text typed, they appear in a dropdown floating toolbar. Selection works with either mouse clicks or arrow keys (plus `Enter`). Currently, the toolbar won't trigger if the colon is adjacent to a non-whitespace character. Test Plan: TODO: Will write tests soon! Reviewers: evan, bengotow Reviewed By: bengotow Differential Revision: https://phab.nylas.com/D2505
51 lines
1.3 KiB
JavaScript
51 lines
1.3 KiB
JavaScript
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;
|