diff --git a/README.md b/README.md index af284b3..5fdfe1b 100644 --- a/README.md +++ b/README.md @@ -39,6 +39,7 @@ import { Picker } from 'emoji-mart' | **sheetSize** | | `64` | The emoji [sheet size](#sheet-sizes): `16, 20, 32, 64` | | **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 | | **skin** | | `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 7c8b588..dd65d48 100644 --- a/src/components/picker.js +++ b/src/components/picker.js @@ -157,6 +157,8 @@ export default class Picker extends React.Component { handleEmojiOver(emoji) { var { preview } = this + if (!preview) { return } + // Use Array.prototype.find() when it is more widely supported. const emojiData = CUSTOM_CATEGORY.emojis.filter(customEmoji => customEmoji.id === emoji.id)[0] for (let key in emojiData) { @@ -164,13 +166,16 @@ export default class Picker extends React.Component { emoji[key] = emojiData[key] } } + preview.setState({ emoji }) clearTimeout(this.leaveTimeout) } handleEmojiLeave(emoji) { + var { preview } = this + if (!preview) { return } + this.leaveTimeout = setTimeout(() => { - var { preview } = this preview.setState({ emoji: null }) }, 16) } @@ -356,7 +361,7 @@ export default class Picker extends React.Component { } render() { - var { perLine, emojiSize, set, sheetSize, style, title, emoji, color, native, backgroundImageFn, emojisToShowFilter, include, exclude, autoFocus } = this.props, + var { perLine, emojiSize, set, sheetSize, style, title, emoji, color, native, backgroundImageFn, emojisToShowFilter, showPreview, include, exclude, autoFocus } = this.props, { skin } = this.state, width = (perLine * (emojiSize + 12)) + 12 + 2 + measureScrollbar() @@ -410,7 +415,7 @@ export default class Picker extends React.Component { })} -
+ {showPreview &&
-
+
} } } @@ -448,6 +453,7 @@ Picker.propTypes = { backgroundImageFn: Emoji.propTypes.backgroundImageFn, sheetSize: Emoji.propTypes.sheetSize, emojisToShowFilter: PropTypes.func, + showPreview: PropTypes.bool, include: PropTypes.arrayOf(PropTypes.string), exclude: PropTypes.arrayOf(PropTypes.string), autoFocus: PropTypes.bool, @@ -475,6 +481,7 @@ Picker.defaultProps = { sheetSize: Emoji.defaultProps.sheetSize, backgroundImageFn: Emoji.defaultProps.backgroundImageFn, emojisToShowFilter: null, + showPreview: true, autoFocus: false, custom: [], } diff --git a/stories/index.js b/stories/index.js index 04b8ced..4d3eca5 100644 --- a/stories/index.js +++ b/stories/index.js @@ -22,6 +22,7 @@ storiesOf('Picker', module) emoji={text('Idle emoji', 'department_store')} skin={number('Skin tone', 1)} color={color('Highlight color', '#ae65c5')} + showPreview={boolean('Show preview', true)} /> ));