Call fallback when emoji name isn’t recognized [Fix #199]

nolan/hinaloe-test
Etienne Lemay 2018-07-31 14:02:56 -04:00
parent 767b2fdcc6
commit 2cea3df86a
No known key found for this signature in database
GPG Key ID: EE7CF89146BB28E9
3 changed files with 16 additions and 8 deletions

View File

@ -160,7 +160,7 @@ import { Emoji } from 'emoji-mart'
| **onClick** | | | Params: `(emoji, event) => {}` | | **onClick** | | | Params: `(emoji, event) => {}` |
| **onLeave** | | | Params: `(emoji, event) => {}` | | **onLeave** | | | Params: `(emoji, event) => {}` |
| **onOver** | | | Params: `(emoji, event) => {}` | | **onOver** | | | Params: `(emoji, event) => {}` |
| [**fallback**](#unsupported-emojis-fallback) | | | Params: `(emoji) => {}` | | [**fallback**](#unsupported-emojis-fallback) | | | Params: `(emoji, props) => {}` |
| **set** | | `apple` | The emoji set: `'apple', 'google', 'twitter', 'emojione'` | | **set** | | `apple` | The emoji set: `'apple', 'google', 'twitter', 'emojione'` |
| **sheetSize** | | `64` | The emoji [sheet size](#sheet-sizes): `16, 20, 32, 64` | | **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. | | **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. |
@ -178,8 +178,8 @@ To have the component render `:shrug:` you would need to:
set={'messenger'} set={'messenger'}
emoji={'shrug'} emoji={'shrug'}
size={24} size={24}
fallback={(emoji) => { fallback={(emoji, props) => {
return `:${emoji.short_names[0]}:` return emoji ? `:${emoji.short_names[0]}:` : props.emoji
}} }}
/> />
``` ```

View File

@ -87,8 +87,12 @@ const NimbleEmoji = (props) => {
let data = _getData(props) let data = _getData(props)
if (!data) { if (!data) {
if (props.fallback) {
return props.fallback(null, props)
} else {
return null return null
} }
}
let { unified, custom, short_names, imageUrl } = data, let { unified, custom, short_names, imageUrl } = data,
style = {}, style = {},
@ -97,8 +101,12 @@ const NimbleEmoji = (props) => {
title = null title = null
if (!unified && !custom) { if (!unified && !custom) {
if (props.fallback) {
return props.fallback(data, props)
} else {
return null return null
} }
}
if (props.tooltip) { if (props.tooltip) {
title = short_names[0] title = short_names[0]
@ -129,7 +137,7 @@ const NimbleEmoji = (props) => {
if (!setHasEmoji) { if (!setHasEmoji) {
if (props.fallback) { if (props.fallback) {
return props.fallback(data) return props.fallback(data, props)
} else { } else {
return null return null
} }

View File

@ -67,8 +67,8 @@ storiesOf('Emoji', module)
size={number('Emoji size', 64)} size={number('Emoji size', 64)}
skin={number('Skin tone', 1)} skin={number('Skin tone', 1)}
html={boolean('HTML', false)} html={boolean('HTML', false)}
fallback={(emoji) => { fallback={(emoji, props) => {
return `:${emoji.short_names[0]}:` return emoji ? `:${emoji.short_names[0]}:` : props.emoji
}} }}
/> />
)); ));