Simplify emojis `background-size` and `background-position`

release
Etienne Lemay 2016-07-06 11:25:13 -04:00
parent bcb4e204bc
commit f202a0282e
1 changed files with 5 additions and 15 deletions

View File

@ -1,8 +1,7 @@
import React from 'react'
import data from '../../data'
const SHEET_SIZE = 2624
const EMOJI_SIZE = 64
const SHEET_COLUMNS = 41
const SKINS = [
'1F3FA', '1F3FB', '1F3FC',
'1F3FD', '1F3FE', '1F3FF',
@ -54,20 +53,11 @@ export default class Emoji extends React.Component {
return emojiData
}
getSheetSize() {
var { size } = this.props,
sheetSize = SHEET_SIZE * size / EMOJI_SIZE
return `${sheetSize}px ${sheetSize}px`
}
getPosition(emojiData) {
var { size } = this.props,
{ sheet_x, sheet_y } = emojiData,
x = sheet_x * size,
y = sheet_y * size
var { sheet_x, sheet_y } = emojiData,
multiply = 100 / (SHEET_COLUMNS - 1)
return `-${x}px -${y}px`
return `${multiply * sheet_x}% ${multiply * sheet_y}%`
}
getNative(emojiData) {
@ -117,7 +107,7 @@ export default class Emoji extends React.Component {
height: size,
display: 'inline-block',
backgroundImage: `url(${sheetURL})`,
backgroundSize: this.getSheetSize(),
backgroundSize: `${100 * SHEET_COLUMNS}%`,
backgroundPosition: this.getPosition(emojiData),
}}>
</span>