2016-05-31 14:36:52 +00:00
|
|
|
import React from 'react'
|
|
|
|
import data from '../../data'
|
|
|
|
|
|
|
|
const SHEET_SIZE = 2624
|
|
|
|
const EMOJI_SIZE = 64
|
|
|
|
|
|
|
|
export default class Emoji extends React.Component {
|
2016-05-31 19:16:48 +00:00
|
|
|
shouldComponentUpdate(nextProps) {
|
|
|
|
return (
|
|
|
|
nextProps.size != this.props.size ||
|
|
|
|
nextProps.sheetURL != this.props.sheetURL
|
|
|
|
)
|
2016-05-31 14:36:52 +00:00
|
|
|
}
|
|
|
|
|
2016-05-31 23:35:46 +00:00
|
|
|
getEmojiData() {
|
|
|
|
var { emoji } = this.props,
|
|
|
|
emojiData = emoji
|
|
|
|
|
|
|
|
if (typeof emoji == 'string') {
|
|
|
|
emojiData = data.emojis[emoji]
|
|
|
|
}
|
|
|
|
|
|
|
|
return emojiData
|
|
|
|
}
|
|
|
|
|
2016-05-31 14:36:52 +00:00
|
|
|
getSheetSize() {
|
|
|
|
var { size } = this.props,
|
|
|
|
sheetSize = SHEET_SIZE * size / EMOJI_SIZE
|
|
|
|
|
|
|
|
return `${sheetSize}px ${sheetSize}px`
|
|
|
|
}
|
|
|
|
|
2016-05-31 23:35:46 +00:00
|
|
|
getPosition(emojiData) {
|
2016-05-31 14:36:52 +00:00
|
|
|
var { size } = this.props,
|
2016-05-31 23:35:46 +00:00
|
|
|
{ sheet_x, sheet_y } = emojiData,
|
2016-05-31 14:36:52 +00:00
|
|
|
x = sheet_x * size,
|
|
|
|
y = sheet_y * size
|
|
|
|
|
|
|
|
return `-${x}px -${y}px`
|
|
|
|
}
|
|
|
|
|
|
|
|
render() {
|
2016-05-31 23:35:46 +00:00
|
|
|
var { sheetURL, size, onOver, onLeave, onClick } = this.props,
|
|
|
|
emojiData = this.getEmojiData()
|
2016-05-31 14:36:52 +00:00
|
|
|
|
|
|
|
return <span
|
2016-05-31 23:35:46 +00:00
|
|
|
onClick={() => onClick(emojiData)}
|
|
|
|
onMouseEnter={() => onOver(emojiData)}
|
|
|
|
onMouseLeave={() => onLeave(emojiData)}
|
2016-05-31 14:36:52 +00:00
|
|
|
className='emoji-picker-emoji'>
|
|
|
|
<span style={{
|
|
|
|
width: size,
|
|
|
|
height: size,
|
|
|
|
display: 'inline-block',
|
|
|
|
backgroundImage: `url(${sheetURL})`,
|
|
|
|
backgroundSize: this.getSheetSize(),
|
2016-05-31 23:35:46 +00:00
|
|
|
backgroundPosition: this.getPosition(emojiData),
|
2016-05-31 14:36:52 +00:00
|
|
|
}}>
|
|
|
|
</span>
|
|
|
|
</span>
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
Emoji.propTypes = {
|
|
|
|
onOver: React.PropTypes.func,
|
2016-05-31 20:53:06 +00:00
|
|
|
onLeave: React.PropTypes.func,
|
2016-05-31 14:36:52 +00:00
|
|
|
onClick: React.PropTypes.func,
|
|
|
|
size: React.PropTypes.number.isRequired,
|
|
|
|
sheetURL: React.PropTypes.string.isRequired,
|
2016-05-31 23:35:46 +00:00
|
|
|
emoji: React.PropTypes.oneOfType([
|
|
|
|
React.PropTypes.string,
|
|
|
|
React.PropTypes.object,
|
|
|
|
]).isRequired,
|
2016-05-31 14:36:52 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
Emoji.defaultProps = {
|
|
|
|
onOver: (() => {}),
|
2016-05-31 20:53:06 +00:00
|
|
|
onLeave: (() => {}),
|
2016-05-31 14:36:52 +00:00
|
|
|
onClick: (() => {}),
|
|
|
|
}
|