Add `onSkinChange` prop to Picker [Close #165]

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 |

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: {},

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) {

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)}