Add defaultSkin prop to Picker and allow forcing skin tone with `sk…

…in` prop [Ref missive#165]
vcervellera-turbulent · Mar 2, 2018 · af2fdc7 · af2fdc7
1 parent b075376
commit af2fdc7
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 5 deletions.
diff --git 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
@@ -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
@@ -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}