Add skin support to picker

example/index.js

@@ -9,6 +9,7 @@ class Example extends React.Component {
     this.state = {
       emojiSize: 24,
       perLine: 9,
+      skin: 1,
       set: 'apple',
     }
   }
@@ -54,6 +55,7 @@ class Example extends React.Component {
 <br /><Operator>&lt;</Operator><Variable>Picker</Variable>
 <br />  emojiSize<Operator>=</Operator>&#123;<Variable>{this.state.emojiSize}</Variable>&#125; <input type='range' data-key='emojiSize' onChange={this.handleInput.bind(this)} min='16' max='64' value={this.state.emojiSize} />
 <br />  perLine<Operator>=</Operator>&#123;<Variable>{this.state.perLine}</Variable>&#125; {this.state.perLine < 10 ? '  ' : ' '} <input type='range' data-key='perLine' onChange={this.handleInput.bind(this)} min='5' max='16' value={this.state.perLine} />
+<br />  skin<Operator>=</Operator>&#123;<Variable>{this.state.skin}</Variable>&#125;       <input type='range' data-key='skin' onChange={this.handleInput.bind(this)} min='1' max='6' value={this.state.skin} />
 <br />  sheetURL<Operator>=</Operator><String>'images/sheet-{this.state.set}-64.png'</String>
 <br />  onClick<Operator>=</Operator>&#123;(<Variable>emoji</Variable>) => console.log(<Variable>emoji</Variable>)&#125;
 <br /><Operator>/&gt;</Operator>
@@ -62,6 +64,7 @@ class Example extends React.Component {
       <Picker
         emojiSize={this.state.emojiSize}
         perLine={this.state.perLine}
+        skin={this.state.skin}
         sheetURL={`images/sheet-${this.state.set}-64.png`}
         onClick={(emoji) => console.log(emoji)}
       />

src/components/emoji.js

@@ -3,23 +3,52 @@ import data from '../../data'
 
 const SHEET_SIZE = 2624
 const EMOJI_SIZE = 64
+const SKINS = [
+  '1F3FA', '1F3FB', '1F3FC',
+  '1F3FD', '1F3FE', '1F3FF',
+]
 
 export default class Emoji extends React.Component {
+  constructor(props) {
+    super(props)
+
+    var emojiData = this.getEmojiData()
+    this.hasSkinVariations = !!emojiData.skin_variations
+  }
+
   shouldComponentUpdate(nextProps) {
     return (
+      this.hasSkinVariations && nextProps.skin != this.props.skin ||
       nextProps.size != this.props.size ||
       nextProps.sheetURL != this.props.sheetURL
     )
   }
 
   getEmojiData() {
-    var { emoji } = this.props,
+    var { emoji, skin, sheetURL } = this.props,
         emojiData = emoji
 
     if (typeof emoji == 'string') {
       emojiData = data.emojis[emoji]
     }
 
+    if (this.hasSkinVariations && skin > 1) {
+      emojiData = JSON.parse(JSON.stringify(data.emojis[emoji]))
+
+      var skinKey = SKINS[skin - 1],
+          variationKey = `${emojiData.unified}-${skinKey}`,
+          variationData = emojiData.skin_variations[variationKey],
+          kitMatches = sheetURL.match(/(apple|google|twitter|emojione)/),
+          kit = kitMatches[0]
+
+      if (variationData[`has_img_${kit}`]) {
+        for (let k in variationData) {
+          let v = variationData[k]
+          emojiData[k] = v
+        }
+      }
+    }
+
     return emojiData
   }
 
@@ -62,6 +91,7 @@ export default class Emoji extends React.Component {
 }
 
 Emoji.propTypes = {
+  skin: React.PropTypes.number,
   onOver: React.PropTypes.func,
   onLeave: React.PropTypes.func,
   onClick: React.PropTypes.func,
@@ -74,6 +104,7 @@ Emoji.propTypes = {
 }
 
 Emoji.defaultProps = {
+  skin: 1,
   onOver: (() => {}),
   onLeave: (() => {}),
   onClick: (() => {}),

src/components/picker.js

@@ -67,7 +67,7 @@ export default class Picker extends React.Component {
   }
 
   render() {
-    var { perLine, emojiSize, sheetURL } = this.props,
+    var { skin, perLine, emojiSize, sheetURL } = this.props,
         width = (perLine * (emojiSize + 12)) + 12 + 2
 
     return <div style={{width: width}} className='emoji-picker'>
@@ -89,6 +89,7 @@ export default class Picker extends React.Component {
             emojis={category.emojis}
             hasStickyPosition={this.hasStickyPosition}
             emojiProps={{
+              skin: skin,
               size: emojiSize,
               sheetURL: sheetURL,
               onOver: this.handleEmojiOver.bind(this),
@@ -114,6 +115,7 @@ export default class Picker extends React.Component {
 
 Picker.propTypes = {
   onClick: React.PropTypes.func,
+  skin: React.PropTypes.number,
   perLine: React.PropTypes.number,
   emojiSize: React.PropTypes.number,
   sheetURL: React.PropTypes.string.isRequired,
@@ -123,4 +125,5 @@ Picker.defaultProps = {
   onClick: (() => {}),
   emojiSize: 24,
   perLine: 9,
+  skin: 1,
 }