From b0753769fbf0c6e7bce1114086557d4d551927ca Mon Sep 17 00:00:00 2001
From: Etienne Lemay <etienne@heliom.ca>
Date: Fri, 2 Mar 2018 13:33:14 -0500
Subject: [PATCH] Add `onSkinChange` prop to Picker [Close #165]

---
 README.md                | 1 +
 src/components/picker.js | 7 ++++++-
 src/components/skins.js  | 2 +-
 stories/index.js         | 1 +
 4 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index a079ee3..3b95d09 100644
--- a/README.md
+++ b/README.md
@@ -33,6 +33,7 @@ import { Picker } from 'emoji-mart'
 | **recent** | | | Pass your own frequently used emojis as array of string IDs |
 | **emojiSize** | | `24` | The emoji width and height |
 | **onClick** | | | Params: `(emoji, event) => {}` |
+| **onSkinChange** | | | Params: `(skin) => {}` |
 | **perLine** | | `9` | Number of emojis per line. While there’s no minimum or maximum, this will affect the picker’s width. This will set *Frequently Used* length as well (`perLine * 4`) |
 | **i18n** | | [`{…}`](#i18n) | [An object](#i18n) containing localized strings |
 | **native** | | `false` | Renders the native unicode emoji |
diff --git a/src/components/picker.js b/src/components/picker.js
index 1f45c37..47ed9b0 100644
--- a/src/components/picker.js
+++ b/src/components/picker.js
@@ -357,10 +357,13 @@ export default class Picker extends React.PureComponent {
   }
 
   handleSkinChange(skin) {
-    var newState = { skin: skin }
+    var newState = { skin: skin },
+      { onSkinChange } = this.props
 
     this.setState(newState)
     store.update(newState)
+
+    onSkinChange(skin)
   }
 
   updateCategoriesSize() {
@@ -521,6 +524,7 @@ export default class Picker extends React.PureComponent {
 
 Picker.propTypes = {
   onClick: PropTypes.func,
+  onSkinChange: PropTypes.func,
   perLine: PropTypes.number,
   emojiSize: PropTypes.number,
   i18n: PropTypes.object,
@@ -553,6 +557,7 @@ Picker.propTypes = {
 
 Picker.defaultProps = {
   onClick: () => {},
+  onSkinChange: () => {},
   emojiSize: 24,
   perLine: 9,
   i18n: {},
diff --git a/src/components/skins.js b/src/components/skins.js
index e3dcbb8..b05a4a8 100644
--- a/src/components/skins.js
+++ b/src/components/skins.js
@@ -13,7 +13,7 @@ export default class Skins extends React.PureComponent {
   }
 
   handleClick(e) {
-    var skin = e.currentTarget.getAttribute('data-skin')
+    var skin = parseInt(e.currentTarget.getAttribute('data-skin'))
     var { onChange } = this.props
 
     if (!this.state.opened) {
diff --git a/stories/index.js b/stories/index.js
index fffc4ad..10b2244 100644
--- a/stories/index.js
+++ b/stories/index.js
@@ -28,6 +28,7 @@ storiesOf('Picker', module)
   .add('default', () => (
     <Picker
       onClick={action('clicked')}
+      onSkinChange={action('skin changed')}
       native={boolean('Unicode', true)}
       set={select('Emoji pack', SETS, SETS[0])}
       emojiSize={number('Emoji size', 24)}