Add `showSkinTones` prop to Picker [Ref #165]

README.md

@@ -42,6 +42,7 @@ import { Picker } from 'emoji-mart'
 | **backgroundImageFn** | | ```((set, sheetSize) => …)``` | A Fn that returns that image sheet to use for emojis. Useful for avoiding a request if you have the sheet locally. |
 | **emojisToShowFilter** | | ```((emoji) => true)``` | A Fn to choose whether an emoji should be displayed or not |
 | **showPreview** | | `true` | Display preview section |
+| **showSkinTones** | | `true` | Display skin tones picker |
 | **emojiTooltip** | | `false` | Show emojis short name when hovering (title) |
 | **skin** | | | Forces skin color: `1, 2, 3, 4, 5, 6` |
 | **defaultSkin** | | `1` | Default skin color: `1, 2, 3, 4, 5, 6` |

src/components/picker.js

@@ -425,6 +425,7 @@ export default class Picker extends React.PureComponent {
         backgroundImageFn,
         emojisToShowFilter,
         showPreview,
+        showSkinTones,
         emojiTooltip,
         include,
         exclude,
@@ -504,6 +505,7 @@ export default class Picker extends React.PureComponent {
               ref={this.setPreviewRef}
               title={title}
               emoji={emoji}
+              showSkinTones={showSkinTones}
               emojiProps={{
                 native: native,
                 size: 38,
@@ -541,6 +543,7 @@ Picker.propTypes = {
   sheetSize: Emoji.propTypes.sheetSize,
   emojisToShowFilter: PropTypes.func,
   showPreview: PropTypes.bool,
+  showSkinTones: PropTypes.bool,
   emojiTooltip: Emoji.propTypes.tooltip,
   include: PropTypes.arrayOf(PropTypes.string),
   exclude: PropTypes.arrayOf(PropTypes.string),
@@ -575,6 +578,7 @@ Picker.defaultProps = {
   backgroundImageFn: Emoji.defaultProps.backgroundImageFn,
   emojisToShowFilter: null,
   showPreview: true,
+  showSkinTones: true,
   emojiTooltip: Emoji.defaultProps.tooltip,
   autoFocus: false,
   custom: [],

src/components/preview.js

@@ -12,7 +12,7 @@ export default class Preview extends React.PureComponent {
 
   render() {
     var { emoji } = this.state,
-      { emojiProps, skinsProps, title, emoji: idleEmoji } = this.props
+      { emojiProps, skinsProps, showSkinTones, title, emoji: idleEmoji } = this.props
 
     if (emoji) {
       var emojiData = getData(emoji),
@@ -67,9 +67,11 @@ export default class Preview extends React.PureComponent {
             <span className="emoji-mart-title-label">{title}</span>
           </div>
 
-          <div className="emoji-mart-preview-skins">
-            <Skins {...skinsProps} />
-          </div>
+          {showSkinTones && (
+            <div className="emoji-mart-preview-skins">
+              <Skins {...skinsProps} />
+            </div>
+          )}
         </div>
       )
     }
@@ -77,8 +79,14 @@ export default class Preview extends React.PureComponent {
 }
 
 Preview.propTypes = {
+  showSkinTones: PropTypes.bool,
   title: PropTypes.string.isRequired,
   emoji: PropTypes.string.isRequired,
   emojiProps: PropTypes.object.isRequired,
   skinsProps: PropTypes.object.isRequired,
 }
+
+Preview.defaultProps = {
+  showSkinTones: true,
+  onChange: () => {},
+}

stories/index.js

@@ -38,6 +38,7 @@ storiesOf('Picker', module)
       defaultSkin={number('Default skin tone', 1)}
       color={color('Highlight color', '#ae65c5')}
       showPreview={boolean('Show preview', true)}
+      showSkinTones={boolean('Show skin tones', true)}
       custom={CUSTOM_EMOJIS}
     />
   ));