From af2fdc71a1c725622e6cdc24bc4e9ef59f627407 Mon Sep 17 00:00:00 2001
From: Etienne Lemay <etienne@heliom.ca>
Date: Fri, 2 Mar 2018 13:45:33 -0500
Subject: [PATCH] Add `defaultSkin` prop to Picker and allow forcing skin tone
 with `skin` prop [Ref #165]

---
 README.md                | 3 ++-
 src/components/picker.js | 9 ++++++---
 stories/index.js         | 2 +-
 3 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/README.md b/README.md
index 3b95d09..f471116 100644
--- a/README.md
+++ b/README.md
@@ -43,7 +43,8 @@ import { Picker } from 'emoji-mart'
 | **emojisToShowFilter** | | ```((emoji) => true)``` | A Fn to choose whether an emoji should be displayed or not |
 | **showPreview** | | `true` | Display preview section |
 | **emojiTooltip** | | `false` | Show emojis short name when hovering (title) |
-| **skin** | | `1` | Default skin color: `1, 2, 3, 4, 5, 6` |
+| **skin** | | | Forces skin color: `1, 2, 3, 4, 5, 6` |
+| **defaultSkin** | | `1` | Default skin color: `1, 2, 3, 4, 5, 6` |
 | **style** | | | Inline styles applied to the root element. Useful for positioning |
 | **title** | | `Emoji Mart™` | The title shown when no emojis are hovered |
 
diff --git a/src/components/picker.js b/src/components/picker.js
index 47ed9b0..99e4c31 100644
--- a/src/components/picker.js
+++ b/src/components/picker.js
@@ -43,7 +43,7 @@ export default class Picker extends React.PureComponent {
 
     this.i18n = deepMerge(I18N, props.i18n)
     this.state = {
-      skin: store.get('skin') || props.skin,
+      skin: props.skin || store.get('skin') || props.defaultSkin,
       firstRender: true,
     }
 
@@ -152,8 +152,10 @@ export default class Picker extends React.PureComponent {
   }
 
   componentWillReceiveProps(props) {
-    if (props.skin && !store.get('skin')) {
+    if (props.skin) {
       this.setState({ skin: props.skin })
+    } else if (props.defaultSkin && !store.get('skin')) {
+      this.setState({ skin: props.defaultSkin })
     }
   }
 
@@ -566,7 +568,8 @@ Picker.defaultProps = {
   emoji: 'department_store',
   color: '#ae65c5',
   set: Emoji.defaultProps.set,
-  skin: Emoji.defaultProps.skin,
+  skin: null,
+  defaultSkin: Emoji.defaultProps.skin,
   native: Emoji.defaultProps.native,
   sheetSize: Emoji.defaultProps.sheetSize,
   backgroundImageFn: Emoji.defaultProps.backgroundImageFn,
diff --git a/stories/index.js b/stories/index.js
index 10b2244..b32926b 100644
--- a/stories/index.js
+++ b/stories/index.js
@@ -35,7 +35,7 @@ storiesOf('Picker', module)
       perLine={number('Per line', 9)}
       title={text('Idle text', 'Your Title Here')}
       emoji={text('Idle emoji', 'department_store')}
-      skin={number('Skin tone', 1)}
+      defaultSkin={number('Default skin tone', 1)}
       color={color('Highlight color', '#ae65c5')}
       showPreview={boolean('Show preview', true)}
       custom={CUSTOM_EMOJIS}