\n
\n {name}\n
\n\n {emojis && emojis.map((emoji) =>\n
\n )}\n\n {emojis && !emojis.length &&\n
\n \n\n \n No emoji found\n \n
\n }\n
\n }\n}\n\nCategory.propTypes = {\n emojis: React.PropTypes.array,\n hasStickyPosition: React.PropTypes.bool,\n name: React.PropTypes.string.isRequired,\n emojiProps: React.PropTypes.object.isRequired,\n}\n\nCategory.defaultProps = {\n emojis: [],\n hasStickyPosition: true,\n}\n\n\n\n/** WEBPACK FOOTER **\n ** ./src/components/category.js\n **/","import React from 'react'\nimport data from '../../data'\n\nconst SHEET_SIZE = 2624\nconst EMOJI_SIZE = 64\nconst SKINS = [\n '1F3FA', '1F3FB', '1F3FC',\n '1F3FD', '1F3FE', '1F3FF',\n]\n\nexport default class Emoji extends React.Component {\n constructor(props) {\n super(props)\n\n var emojiData = this.getEmojiData()\n this.hasSkinVariations = !!emojiData.skin_variations\n }\n\n shouldComponentUpdate(nextProps) {\n return (\n this.hasSkinVariations && nextProps.skin != this.props.skin ||\n nextProps.size != this.props.size ||\n nextProps.sheetURL != this.props.sheetURL\n )\n }\n\n getEmojiData() {\n var { emoji, skin, sheetURL } = this.props,\n emojiData = emoji\n\n if (typeof emoji == 'string') {\n emojiData = data.emojis[emoji]\n }\n\n if (this.hasSkinVariations && skin > 1) {\n emojiData = JSON.parse(JSON.stringify(data.emojis[emoji]))\n\n var skinKey = SKINS[skin - 1],\n variationKey = `${emojiData.unified}-${skinKey}`,\n variationData = emojiData.skin_variations[variationKey],\n kitMatches = sheetURL.match(/(apple|google|twitter|emojione)/),\n kit = kitMatches[0]\n\n if (variationData[`has_img_${kit}`]) {\n emojiData.skin_tone = skin\n\n for (let k in variationData) {\n let v = variationData[k]\n emojiData[k] = v\n }\n }\n }\n\n return emojiData\n }\n\n getSheetSize() {\n var { size } = this.props,\n sheetSize = SHEET_SIZE * size / EMOJI_SIZE\n\n return `${sheetSize}px ${sheetSize}px`\n }\n\n getPosition(emojiData) {\n var { size } = this.props,\n { sheet_x, sheet_y } = emojiData,\n x = sheet_x * size,\n y = sheet_y * size\n\n return `-${x}px -${y}px`\n }\n\n getNative(emojiData) {\n var { unified } = emojiData,\n unicodes = unified.split('-'),\n codePoints = unicodes.map((u) => `0x${u}`)\n\n return String.fromCodePoint(...codePoints)\n }\n\n handleClick(emojiData) {\n var { onClick } = this.props,\n { name, short_names, skin_tone, text, texts, unified } = emojiData,\n id = short_names[0],\n colons = `:${id}:`\n\n texts || (texts = [])\n if (text && !texts.length) {\n texts = [text]\n }\n\n if (skin_tone) {\n colons += `:skin-tone-${skin_tone}:`\n }\n\n onClick({\n id,\n name,\n colons,\n skin: skin_tone || 1,\n emoticons: texts,\n native: this.getNative(emojiData),\n })\n }\n\n render() {\n var { sheetURL, size, onOver, onLeave } = this.props,\n emojiData = this.getEmojiData()\n\n return \n
\n {Array(6).fill().map((_, i) => {\n var skinTone = i + 1,\n selected = skinTone == skin\n\n return \n this.handleClick(skinTone)}\n className={`emoji-picker-skin emoji-picker-skin-tone-${skinTone}`}>\n \n \n })}\n
\n
\n }\n}\n\nSkins.propTypes = {\n onChange: React.PropTypes.func,\n skin: React.PropTypes.number.isRequired,\n}\n\nSkins.defaultProps = {\n onChange: (() => {}),\n}\n\n\n\n/** WEBPACK FOOTER **\n ** ./src/components/skins.js\n **/"],"sourceRoot":""}