/
emoji.js
106 lines (86 loc) 路 2.39 KB
/
emoji.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
import React from 'react'
import data from '../../data'
import {getData, getSanitizedData} from '../utils'
const SHEET_COLUMNS = 41
export default class Emoji extends React.Component {
constructor(props) {
super(props)
this.hasSkinVariations = !!this.getData().skin_variations
}
shouldComponentUpdate(nextProps) {
return (
this.hasSkinVariations && nextProps.skin != this.props.skin ||
nextProps.size != this.props.size ||
nextProps.set != this.props.set
)
}
getPosition() {
var { sheet_x, sheet_y } = this.getData(),
multiply = 100 / (SHEET_COLUMNS - 1)
return `${multiply * sheet_x}% ${multiply * sheet_y}%`
}
getData() {
var { emoji, skin, set } = this.props
return getData(emoji, skin, set)
}
getSanitizedData() {
var { emoji, skin, set } = this.props
return getSanitizedData(emoji, skin, set)
}
handleClick(e) {
var { onClick } = this.props,
emoji = this.getSanitizedData()
onClick(emoji, e)
}
handleOver(e) {
var { onOver } = this.props,
emoji = this.getSanitizedData()
onOver(emoji, e)
}
handleLeave(e) {
var { onLeave } = this.props,
emoji = this.getSanitizedData()
onLeave(emoji, e)
}
render() {
var { set, size, onOver, onLeave } = this.props,
{ unified } = this.getData()
if (!unified) {
return null
}
return <span
onClick={this.handleClick.bind(this)}
onMouseEnter={this.handleOver.bind(this)}
onMouseLeave={this.handleLeave.bind(this)}
className='emoji-mart-emoji'>
<span style={{
width: size,
height: size,
display: 'inline-block',
backgroundImage: `url(https://unpkg.com/emoji-datasource@2.4.4/sheet_${set}_64.png)`,
backgroundSize: `${100 * SHEET_COLUMNS}%`,
backgroundPosition: this.getPosition(),
}}>
</span>
</span>
}
}
Emoji.propTypes = {
onOver: React.PropTypes.func,
onLeave: React.PropTypes.func,
onClick: React.PropTypes.func,
skin: React.PropTypes.oneOf([1, 2, 3, 4, 5, 6]),
set: React.PropTypes.oneOf(['apple', 'google', 'twitter', 'emojione']),
size: React.PropTypes.number.isRequired,
emoji: React.PropTypes.oneOfType([
React.PropTypes.string,
React.PropTypes.object,
]).isRequired,
}
Emoji.defaultProps = {
skin: 1,
set: 'apple',
onOver: (() => {}),
onLeave: (() => {}),
onClick: (() => {}),
}