From 2cea3df86ab7b20a19902e27dd672bf75bd5b2ae Mon Sep 17 00:00:00 2001
From: Etienne Lemay <etienne@heliom.ca>
Date: Tue, 31 Jul 2018 14:02:56 -0400
Subject: [PATCH] =?UTF-8?q?Call=20fallback=20when=20emoji=20name=20isn?=
 =?UTF-8?q?=E2=80=99t=20recognized=20[Fix=20#199]?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md                            |  6 +++---
 src/components/emoji/nimble-emoji.js | 14 +++++++++++---
 stories/index.js                     |  4 ++--
 3 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/README.md b/README.md
index 16b5f27..64dae25 100644
--- a/README.md
+++ b/README.md
@@ -160,7 +160,7 @@ import { Emoji } from 'emoji-mart'
 | **onClick** | | | Params: `(emoji, event) => {}` |
 | **onLeave** | | | 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'` |
 | **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. |
@@ -178,8 +178,8 @@ To have the component render `:shrug:` you would need to:
   set={'messenger'}
   emoji={'shrug'}
   size={24}
-  fallback={(emoji) => {
-    return `:${emoji.short_names[0]}:`
+  fallback={(emoji, props) => {
+    return emoji ? `:${emoji.short_names[0]}:` : props.emoji
   }}
 />
 ```
diff --git a/src/components/emoji/nimble-emoji.js b/src/components/emoji/nimble-emoji.js
index 2cc2652..135e735 100644
--- a/src/components/emoji/nimble-emoji.js
+++ b/src/components/emoji/nimble-emoji.js
@@ -87,7 +87,11 @@ const NimbleEmoji = (props) => {
 
   let data = _getData(props)
   if (!data) {
-    return null
+    if (props.fallback) {
+      return props.fallback(null, props)
+    } else {
+      return null
+    }
   }
 
   let { unified, custom, short_names, imageUrl } = data,
@@ -97,7 +101,11 @@ const NimbleEmoji = (props) => {
     title = null
 
   if (!unified && !custom) {
-    return null
+    if (props.fallback) {
+      return props.fallback(data, props)
+    } else {
+      return null
+    }
   }
 
   if (props.tooltip) {
@@ -129,7 +137,7 @@ const NimbleEmoji = (props) => {
 
     if (!setHasEmoji) {
       if (props.fallback) {
-        return props.fallback(data)
+        return props.fallback(data, props)
       } else {
         return null
       }
diff --git a/stories/index.js b/stories/index.js
index d51a10a..d639b61 100644
--- a/stories/index.js
+++ b/stories/index.js
@@ -67,8 +67,8 @@ storiesOf('Emoji', module)
       size={number('Emoji size', 64)}
       skin={number('Skin tone', 1)}
       html={boolean('HTML', false)}
-      fallback={(emoji) => {
-        return `:${emoji.short_names[0]}:`
+      fallback={(emoji, props) => {
+        return emoji ? `:${emoji.short_names[0]}:` : props.emoji
       }}
     />
   ));