Add tooltip (title) props to both Picker & Emoji

release
Etienne Lemay 2017-10-06 23:34:06 -04:00
parent 5f2ffcc0be
commit bb874f4517
3 changed files with 16 additions and 3 deletions

View File

@ -40,6 +40,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 |
| **emojiTooltip** | | `false` | Show emojis short name when hovering (title) |
| **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 |
@ -143,6 +144,7 @@ import { Emoji } from 'emoji-mart'
| **sheetSize** | | `64` | The emoji [sheet size](#sheet-sizes): `16, 20, 32, 64` |
| **backgroundImageFn** | | ```((set, sheetSize) => `https://unpkg.com/emoji-datasource@3.0.0/sheet_${set}_${sheetSize}.png`)``` | A Fn that returns that image sheet to use for emojis. Useful for avoiding a request if you have the sheet locally. |
| **skin** | | `1` | Skin color: `1, 2, 3, 4, 5, 6` |
| **tooltip** | | `false` | Show emoji short name when hovering (title) |
## Custom emojis
You can provide custom emojis which will show up in their own category.

View File

@ -54,15 +54,20 @@ const Emoji = (props) => {
}
}
var { unified, custom, imageUrl } = _getData(props),
var { unified, custom, short_names, imageUrl } = _getData(props),
style = {},
children = props.children,
className = 'emoji-mart-emoji'
className = 'emoji-mart-emoji',
title = null
if (!unified && !custom) {
return null
}
if (props.tooltip) {
title = short_names[0]
}
if (props.native && unified) {
className += ' emoji-mart-emoji-native'
style = { fontSize: props.size }
@ -104,6 +109,7 @@ const Emoji = (props) => {
onClick={(e) => _handleClick(e, props)}
onMouseEnter={(e) => _handleOver(e, props)}
onMouseLeave={(e) => _handleLeave(e, props)}
title={title}
className={className}>
<span style={style}>{children}</span>
</span>
@ -116,6 +122,7 @@ Emoji.propTypes = {
backgroundImageFn: PropTypes.func,
native: PropTypes.bool,
forceSize: PropTypes.bool,
tooltip: PropTypes.bool,
skin: PropTypes.oneOf([1, 2, 3, 4, 5, 6]),
sheetSize: PropTypes.oneOf([16, 20, 32, 64]),
set: PropTypes.oneOf(['apple', 'google', 'twitter', 'emojione', 'messenger', 'facebook']),
@ -132,6 +139,7 @@ Emoji.defaultProps = {
sheetSize: 64,
native: false,
forceSize: false,
tooltip: false,
backgroundImageFn: ((set, sheetSize) => `https://unpkg.com/emoji-datasource-${set}@${EMOJI_DATASOURCE_VERSION}/img/${set}/sheets/${sheetSize}.png`),
onOver: (() => {}),
onLeave: (() => {}),

View File

@ -374,7 +374,7 @@ export default class Picker extends React.PureComponent {
}
render() {
var { perLine, emojiSize, set, sheetSize, style, title, emoji, color, native, backgroundImageFn, emojisToShowFilter, showPreview, include, exclude, autoFocus } = this.props,
var { perLine, emojiSize, set, sheetSize, style, title, emoji, color, native, backgroundImageFn, emojisToShowFilter, showPreview, emojiTooltip, include, exclude, autoFocus } = this.props,
{ skin } = this.state,
width = (perLine * (emojiSize + 12)) + 12 + 2 + measureScrollbar()
@ -419,6 +419,7 @@ export default class Picker extends React.PureComponent {
set: set,
sheetSize: sheetSize,
forceSize: native,
tooltip: emojiTooltip,
backgroundImageFn: backgroundImageFn,
onOver: this.handleEmojiOver,
onLeave: this.handleEmojiLeave,
@ -467,6 +468,7 @@ Picker.propTypes = {
sheetSize: Emoji.propTypes.sheetSize,
emojisToShowFilter: PropTypes.func,
showPreview: PropTypes.bool,
emojiTooltip: Emoji.propTypes.tooltip,
include: PropTypes.arrayOf(PropTypes.string),
exclude: PropTypes.arrayOf(PropTypes.string),
autoFocus: PropTypes.bool,
@ -495,6 +497,7 @@ Picker.defaultProps = {
backgroundImageFn: Emoji.defaultProps.backgroundImageFn,
emojisToShowFilter: null,
showPreview: true,
emojiTooltip: Emoji.defaultProps.tooltip,
autoFocus: false,
custom: [],
}