<Emoji /> can either receive an emoji object or short_name

exclude-unsupported-native-emojis
Etienne Lemay 2016-05-31 19:35:46 -04:00
parent 9f99155031
commit e23d5ce53e
2 changed files with 25 additions and 14 deletions

View File

@ -5,10 +5,6 @@ const SHEET_SIZE = 2624
const EMOJI_SIZE = 64 const EMOJI_SIZE = 64
export default class Emoji extends React.Component { export default class Emoji extends React.Component {
componentWillMount() {
this.emoji = data.emojis[this.props.emoji]
}
shouldComponentUpdate(nextProps) { shouldComponentUpdate(nextProps) {
return ( return (
nextProps.size != this.props.size || nextProps.size != this.props.size ||
@ -16,6 +12,17 @@ export default class Emoji extends React.Component {
) )
} }
getEmojiData() {
var { emoji } = this.props,
emojiData = emoji
if (typeof emoji == 'string') {
emojiData = data.emojis[emoji]
}
return emojiData
}
getSheetSize() { getSheetSize() {
var { size } = this.props, var { size } = this.props,
sheetSize = SHEET_SIZE * size / EMOJI_SIZE sheetSize = SHEET_SIZE * size / EMOJI_SIZE
@ -23,9 +30,9 @@ export default class Emoji extends React.Component {
return `${sheetSize}px ${sheetSize}px` return `${sheetSize}px ${sheetSize}px`
} }
getEmojiPosition(emoji) { getPosition(emojiData) {
var { size } = this.props, var { size } = this.props,
{ sheet_x, sheet_y } = emoji, { sheet_x, sheet_y } = emojiData,
x = sheet_x * size, x = sheet_x * size,
y = sheet_y * size y = sheet_y * size
@ -33,12 +40,13 @@ export default class Emoji extends React.Component {
} }
render() { render() {
var { sheetURL, size, onOver, onLeave, onClick } = this.props var { sheetURL, size, onOver, onLeave, onClick } = this.props,
emojiData = this.getEmojiData()
return <span return <span
onClick={() => onClick(this.emoji)} onClick={() => onClick(emojiData)}
onMouseEnter={() => onOver(this.emoji)} onMouseEnter={() => onOver(emojiData)}
onMouseLeave={() => onLeave(this.emoji)} onMouseLeave={() => onLeave(emojiData)}
className='emoji-picker-emoji'> className='emoji-picker-emoji'>
<span style={{ <span style={{
width: size, width: size,
@ -46,7 +54,7 @@ export default class Emoji extends React.Component {
display: 'inline-block', display: 'inline-block',
backgroundImage: `url(${sheetURL})`, backgroundImage: `url(${sheetURL})`,
backgroundSize: this.getSheetSize(), backgroundSize: this.getSheetSize(),
backgroundPosition: this.getEmojiPosition(this.emoji), backgroundPosition: this.getPosition(emojiData),
}}> }}>
</span> </span>
</span> </span>
@ -58,8 +66,11 @@ Emoji.propTypes = {
onLeave: React.PropTypes.func, onLeave: React.PropTypes.func,
onClick: React.PropTypes.func, onClick: React.PropTypes.func,
size: React.PropTypes.number.isRequired, size: React.PropTypes.number.isRequired,
emoji: React.PropTypes.string.isRequired,
sheetURL: React.PropTypes.string.isRequired, sheetURL: React.PropTypes.string.isRequired,
emoji: React.PropTypes.oneOfType([
React.PropTypes.string,
React.PropTypes.object,
]).isRequired,
} }
Emoji.defaultProps = { Emoji.defaultProps = {

View File

@ -15,8 +15,8 @@ export default class Preview extends React.Component {
return <div> return <div>
<div className='emoji-picker-preview-emoji'> <div className='emoji-picker-preview-emoji'>
<Emoji <Emoji
key={emoji.short_name} key={emoji.short_name || emoji}
emoji={emoji.short_name} emoji={emoji}
{...emojiProps} {...emojiProps}
/> />
</div> </div>