diff --git a/README.md b/README.md index bc3099a..1c289f3 100644 --- a/README.md +++ b/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` | diff --git a/src/components/picker.js b/src/components/picker.js index 99e4c31..c86e4b6 100644 --- a/src/components/picker.js +++ b/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: [], diff --git a/src/components/preview.js b/src/components/preview.js index c4a4158..5d6169c 100644 --- a/src/components/preview.js +++ b/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 { {title} -
- -
+ {showSkinTones && ( +
+ +
+ )} ) } @@ -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: () => {}, +} diff --git a/stories/index.js b/stories/index.js index b32926b..2561a6b 100644 --- a/stories/index.js +++ b/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} /> ));