From 086ed6991eb9a47fa2fff153e950b56620e4e496 Mon Sep 17 00:00:00 2001 From: Luis Belloch Date: Tue, 10 Jul 2018 21:53:24 +0200 Subject: [PATCH 1/8] Added font stack to support native emojis in IE11/Edge --- css/emoji-mart.css | 4 ++++ docs/emoji-mart.css | 4 ++++ 2 files changed, 8 insertions(+) diff --git a/css/emoji-mart.css b/css/emoji-mart.css index 93e62d7..3f61082 100644 --- a/css/emoji-mart.css +++ b/css/emoji-mart.css @@ -138,6 +138,10 @@ font-size: 0; } +.emoji-mart-emoji-native { + font-family: "Segoe UI Emoji", "Segoe UI Symbol", "Segoe UI", "Apple Color Emoji"; +} + .emoji-mart-no-results { font-size: 14px; text-align: center; diff --git a/docs/emoji-mart.css b/docs/emoji-mart.css index 93e62d7..3f61082 100644 --- a/docs/emoji-mart.css +++ b/docs/emoji-mart.css @@ -138,6 +138,10 @@ font-size: 0; } +.emoji-mart-emoji-native { + font-family: "Segoe UI Emoji", "Segoe UI Symbol", "Segoe UI", "Apple Color Emoji"; +} + .emoji-mart-no-results { font-size: 14px; text-align: center; From 5e03ee3e16600ffeebb71c9adf48dcbdd5a78453 Mon Sep 17 00:00:00 2001 From: Rena Ryumae Date: Wed, 27 Jun 2018 15:03:44 -0400 Subject: [PATCH 2/8] Adding search icon in search input field Currently, there is no visual indication for when the user is searching for an emoji nor is there an easy way to clear the input field after the user's search Our change proposes to add a small magnifying glass icon to the right hand side of the search input bar which becomes an x delete icon when the user types in the search input bar. The x delete icon is tabbable and will clear the search input field with the return (enter) key, spacebar, and mouse click. The magnifying glass icon is not tabbable. --- css/emoji-mart.css | 14 +++++++++++- src/components/anchors.js | 19 ++-------------- src/components/search.js | 48 ++++++++++++++++++++++++++++++++++----- src/svgs/index.js | 30 ++++++++++++++---------- 4 files changed, 75 insertions(+), 36 deletions(-) diff --git a/css/emoji-mart.css b/css/emoji-mart.css index 93e62d7..255cf44 100644 --- a/css/emoji-mart.css +++ b/css/emoji-mart.css @@ -87,17 +87,29 @@ .emoji-mart-search { margin-top: 6px; padding: 0 6px; + position: relative; } + .emoji-mart-search input { font-size: 16px; display: block; width: 100%; - padding: .2em .6em; + padding: .2em 1.6em .2em .6em; border-radius: 25px; border: 1px solid #d9d9d9; outline: 0; } +.emoji-mart-search-icon { + position: absolute; + top: 5px; + right: 13px; + z-index: 2; + padding: 0; + border: none; + background: none; +} + .emoji-mart-category .emoji-mart-emoji span { z-index: 1; position: relative; diff --git a/src/components/anchors.js b/src/components/anchors.js index e620387..13a484b 100644 --- a/src/components/anchors.js +++ b/src/components/anchors.js @@ -1,7 +1,7 @@ import React from 'react' import PropTypes from 'prop-types' -import SVGs from '../svgs' +import { categories as icons } from '../svgs' export default class Anchors extends React.PureComponent { constructor(props) { @@ -18,21 +18,6 @@ export default class Anchors extends React.PureComponent { this.handleClick = this.handleClick.bind(this) } - getSVG(id) { - this.SVGs || (this.SVGs = {}) - - if (this.SVGs[id]) { - return this.SVGs[id] - } else { - let svg = ` - ${SVGs[id]} - ` - - this.SVGs[id] = svg - return svg - } - } - handleClick(e) { var index = e.currentTarget.getAttribute('data-index') var { categories, onAnchorClick } = this.props @@ -65,7 +50,7 @@ export default class Anchors extends React.PureComponent { }`} style={{ color: isSelected ? color : null }} > -
+
@@ -47,6 +76,13 @@ export default class Search extends React.PureComponent { placeholder={i18n.search} autoFocus={autoFocus} /> +
) } diff --git a/src/svgs/index.js b/src/svgs/index.js index 877ce15..b6a7f74 100644 --- a/src/svgs/index.js +++ b/src/svgs/index.js @@ -1,23 +1,29 @@ -const SVGs = { - activity: ``, +const categories = { + activity: ``, - custom: ``, + custom: ``, - flags: ``, + flags: ``, - foods: ``, + foods: ``, - nature: ``, + nature: ``, - objects: ``, + objects: ``, - people: ``, + people: ``, - places: ``, + places: ``, - recent: ``, + recent: ``, - symbols: ``, + symbols: ``, } -export default SVGs +const search = { + search: ``, + + delete: ``, +} + +export { categories, search } From 8e6d363d8bdd38c1ca41c80560d580e5bc66ad90 Mon Sep 17 00:00:00 2001 From: Rena Ryumae Date: Thu, 21 Jun 2018 11:56:40 -0400 Subject: [PATCH 3/8] Not Found Component for emoji search If a user's search returns no results, the sleuth_or_spy emoji appears. We would instead like for a custom image to appear. We propose creating a NotFound component that uses the the sleuth_or_spy emoji on default when a user's search returns no results but otherwise uses what the user passes through --- .DS_Store | Bin 0 -> 10244 bytes README.md | 12 +++++++++ css/emoji-mart.css | 6 +++++ src/components/category.js | 33 +++++++++++------------ src/components/index.js | 1 + src/components/not-found.js | 35 +++++++++++++++++++++++++ src/components/picker/nimble-picker.js | 2 ++ src/utils/shared-props.js | 2 ++ stories/index.js | 14 +++++++++- 9 files changed, 87 insertions(+), 18 deletions(-) create mode 100644 .DS_Store create mode 100644 src/components/not-found.js diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..ecafee06560319c4ba490223db770d6e71ab8c45 GIT binary patch literal 10244 zcmeHMTWl0n82*r`*acm#&mbmA1A;3Z;nK8?pjI*p`-SncW%Mk?G93GuswQ zO*O&zU@%@1jc7E)7lR2;B*qsL@9}PIyhVM`7axs86QA%uXJ(t-ZFw*;O3a+ioc~<@ z|D6AP^UeHo&H?~-XZ2QqC;%|JxKt`ATOjd%e$7iILCXq~NcP~Ql9rRCnleu}YzPqu z5eN|o5eN|o5x6-JpqR}QTkOj)4-p6v2oab=fWIH2ba5FAW>BbGrsiA0maNTPB1eDI}{AI9vBts zfH7Z&d5A!Wz|@qCdspWWep7L9uCMtaE!HyxZte3(pIrt7t|e2pcgWs7bpXG~^trF=Xw z>P#d&&C9yoTIMLP9niedWKiyR9BZzuB@da##IUlw$FV)lw2h1~Hg$tkjt!c&?o4z$ zSzC9-I0?UlF^NgTiaIsbwz;FdF}k_6ZMrc!)v;}BV|2@w_UUPf)zr7%9X~mC=IqqD z>4%=D)lkCVB?nc0eJ;O9r8y)lcf7}6Vac<(6@HUjp(HO>Y7|vu?bV^*ibfUKA1JV zGqcK)s!F+5y;V}KvST`VvCq-@OuFb%Yt?$jj`H@Nj6u0BoZ8r+%Ka`aLeZEcS{j>V zx&JiXOvNP^xZ|yDvN~XCNyAcfiHWB6t+F~e?jxz}2^u?h$m&qa85^S|y4Bc7&D|MHvaeQE5A*geT{m>bSY52aztaMSx>$=}lPEN*&`g1F zHyoo!B@Jibakv0az(sfkuE14z6W)i9;WPLgzJTxGC-?<^gKO|R`~laIp@fUE0##g( zb+`drumg8u47;!!_uv6Mhzab+KdBbw(jVfyO%|GE}uk#J3cuCX>z0xx37?e#AY?JT3&l2HV+Wzj7i3cqm<98#E#l% zB%*NYFj3u5Pt_7)H{(x+D&G+yO^qp~q8hnVZe>JJWs%=|m)tH9g_SbDw?pn^#8l-L zzjvn`llViXfEZe;kI3|%`rGWg1ef6rcn>}z)_ny(!q4z4{E3L=SdBHf3RmMAT!$O+ zcHD%G*o5u44Yy+_?!Z3Wg}X6M{OiX79K<0!Lj2PO|4huFi&-2e9zKkZ5DOp0#{wQc zLp;2Mmy1{z&+*Nd_*y>e#uFLaa_kXm<1DR&(-g!qFh+SZg%byCI7OugiUSMq@b_F^ z_$!CK5QiSg2`@)TUwFp7 zESyh-$9%h`^j64_zDGZkWF~KQCX6h!Lgb+{e+&r@((1aP7xs~CCcpKPB(shz9p19tO zFNFzZ;y9k9IF6?ZKaLlt8Ppb>V+gw#wR8I!Us8$Ezy4=H(Q#F{{}1>7#k<%4`~Lqg Dz79AO literal 0 HcmV?d00001 diff --git a/README.md b/README.md index 57dc456..54e4341 100644 --- a/README.md +++ b/README.md @@ -50,6 +50,7 @@ import { Picker } from 'emoji-mart' | **defaultSkin** | | `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 | +| **notFound** | | `{notFoundImg = ''}` | [Not Found](#not-found) | #### I18n ```js @@ -234,6 +235,17 @@ const customEmojis = [ ``` +## Not Found +You can provide a custom Not Found object which will allow the appearance of the not found search results to change. In this case, we change the default 'sleuth_or_spy' emoji to Octocat when our search finds no results. + +```js +import { Picker } from 'emoji-mart' + +const notFound = () => + + +``` + ## Headless search The `Picker` doesn’t have to be mounted for you to take advantage of the advanced search results. diff --git a/css/emoji-mart.css b/css/emoji-mart.css index 93e62d7..d9e2a3e 100644 --- a/css/emoji-mart.css +++ b/css/emoji-mart.css @@ -144,6 +144,12 @@ padding-top: 70px; color: #858585; } +.emoji-mart-no-results-img { + display: block; + margin-left: auto; + margin-right: auto; + width: 50%; +} .emoji-mart-no-results .emoji-mart-category-label { display: none; } diff --git a/src/components/category.js b/src/components/category.js index 890fbc5..e16f193 100644 --- a/src/components/category.js +++ b/src/components/category.js @@ -3,7 +3,7 @@ import PropTypes from 'prop-types' import frequently from '../utils/frequently' import { getData } from '../utils' -import { NimbleEmoji } from '.' +import { NimbleEmoji, NotFound } from '.' export default class Category extends React.Component { constructor(props) { @@ -144,7 +144,14 @@ export default class Category extends React.Component { } render() { - var { id, name, hasStickyPosition, emojiProps, i18n } = this.props, + var { + id, + name, + hasStickyPosition, + emojiProps, + i18n, + notFound, + } = this.props, emojis = this.getEmojis(), labelStyles = {}, labelSpanStyles = {}, @@ -191,21 +198,12 @@ export default class Category extends React.Component { {emojis && !emojis.length && ( -
-
- {NimbleEmoji({ - data: this.data, - ...emojiProps, - size: 38, - emoji: 'sleuth_or_spy', - onOver: null, - onLeave: null, - onClick: null, - })} -
- -
{i18n.notfound}
-
+ )}
) @@ -220,6 +218,7 @@ Category.propTypes = { perLine: PropTypes.number.isRequired, emojiProps: PropTypes.object.isRequired, recent: PropTypes.arrayOf(PropTypes.string), + notFound: PropTypes.func, } Category.defaultProps = { diff --git a/src/components/index.js b/src/components/index.js index 2f59995..81faff2 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -1,6 +1,7 @@ export { default as Anchors } from './anchors' export { default as Category } from './category' export { default as Preview } from './preview' +export { default as NotFound } from './not-found' export { default as Search } from './search' export { default as Skins } from './skins' diff --git a/src/components/not-found.js b/src/components/not-found.js new file mode 100644 index 0000000..3880657 --- /dev/null +++ b/src/components/not-found.js @@ -0,0 +1,35 @@ +import React from 'react' +import PropTypes from 'prop-types' +import { NimbleEmoji } from '.' + +export default class NotFound extends React.PureComponent { + render() { + const { data, emojiProps, i18n, notFound } = this.props + + const imageComponent = (notFound && notFound()) || ( +
+ {NimbleEmoji({ + data: data, + ...emojiProps, + size: 38, + emoji: 'sleuth_or_spy', + onOver: null, + onLeave: null, + onClick: null, + })} +
{i18n.notfound}
+
+ ) + + return
{imageComponent}
+ } +} + +NotFound.propTypes = { + notFound: PropTypes.func.isRequired, + emojiProps: PropTypes.object.isRequired, +} + +NotFound.defaultProps = { + notFound: () => {}, +} diff --git a/src/components/picker/nimble-picker.js b/src/components/picker/nimble-picker.js index 20586e1..1bd3fc5 100644 --- a/src/components/picker/nimble-picker.js +++ b/src/components/picker/nimble-picker.js @@ -467,6 +467,7 @@ export default class NimblePicker extends React.PureComponent { exclude, recent, autoFocus, + notFound, } = this.props, { skin } = this.state, width = perLine * (emojiSize + 12) + 12 + 2 + measureScrollbar() @@ -539,6 +540,7 @@ export default class NimblePicker extends React.PureComponent { onLeave: this.handleEmojiLeave, onClick: this.handleEmojiClick, }} + notFound={notFound} /> ) })} diff --git a/src/utils/shared-props.js b/src/utils/shared-props.js index 3bb8083..9509825 100644 --- a/src/utils/shared-props.js +++ b/src/utils/shared-props.js @@ -71,6 +71,7 @@ const PickerPropTypes = { imageUrl: PropTypes.string.isRequired, }), ), + notFound: PropTypes.func, } const PickerDefaultProps = { @@ -96,6 +97,7 @@ const PickerDefaultProps = { emojiTooltip: EmojiDefaultProps.tooltip, autoFocus: false, custom: [], + notFound: () => {}, } export { diff --git a/stories/index.js b/stories/index.js index b0798ec..2250cf9 100644 --- a/stories/index.js +++ b/stories/index.js @@ -41,7 +41,19 @@ storiesOf('Picker', module) showPreview={boolean('Show preview', true)} showSkinTones={boolean('Show skin tones', true)} custom={CUSTOM_EMOJIS} - /> + />)) + .add('with a custom not found image', () => ( + + } + />)) + .add('with a custom not found SVG', () => ( + Jira icon + } + /> )); storiesOf('Emoji', module) From 98af838d60813b6a1eeadd01276b3e39b1330268 Mon Sep 17 00:00:00 2001 From: Etienne Lemay Date: Mon, 30 Jul 2018 16:17:22 -0400 Subject: [PATCH 4/8] Update search input & icon --- css/emoji-mart.css | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/css/emoji-mart.css b/css/emoji-mart.css index 255cf44..4c8451d 100644 --- a/css/emoji-mart.css +++ b/css/emoji-mart.css @@ -94,7 +94,7 @@ font-size: 16px; display: block; width: 100%; - padding: .2em 1.6em .2em .6em; + padding: 5px 25px 6px 10px; border-radius: 25px; border: 1px solid #d9d9d9; outline: 0; @@ -102,8 +102,8 @@ .emoji-mart-search-icon { position: absolute; - top: 5px; - right: 13px; + top: 9px; + right: 16px; z-index: 2; padding: 0; border: none; From 3dc3e2fd954fbf7da4ea9825a103bc42661856e9 Mon Sep 17 00:00:00 2001 From: Etienne Lemay Date: Mon, 30 Jul 2018 16:52:15 -0400 Subject: [PATCH 5/8] =?UTF-8?q?Don=E2=80=99t=20apply=20`emoji-mart-no-resu?= =?UTF-8?q?lts`=20class=20when=20using=20custom=20notFound=20component?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/category.js | 4 +--- src/components/not-found.js | 6 +++--- 2 files changed, 4 insertions(+), 6 deletions(-) diff --git a/src/components/category.js b/src/components/category.js index e16f193..ff5b4f6 100644 --- a/src/components/category.js +++ b/src/components/category.js @@ -176,9 +176,7 @@ export default class Category extends React.Component { return (
+ const component = (notFound && notFound()) || ( +
{NimbleEmoji({ data: data, ...emojiProps, @@ -21,7 +21,7 @@ export default class NotFound extends React.PureComponent {
) - return
{imageComponent}
+ return component } } From 8ddd8725e8506c73272786153e63453d1ad9e1f0 Mon Sep 17 00:00:00 2001 From: Etienne Lemay Date: Mon, 30 Jul 2018 16:52:41 -0400 Subject: [PATCH 6/8] Update README --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 54e4341..8c85c89 100644 --- a/README.md +++ b/README.md @@ -50,7 +50,7 @@ import { Picker } from 'emoji-mart' | **defaultSkin** | | `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 | -| **notFound** | | `{notFoundImg = ''}` | [Not Found](#not-found) | +| **notFound** | | | [Not Found](#not-found) | #### I18n ```js From 4bb41b9796fdd8a36c9ac51aefb8007eb5d1dbc4 Mon Sep 17 00:00:00 2001 From: Etienne Lemay Date: Mon, 30 Jul 2018 17:06:23 -0400 Subject: [PATCH 7/8] Add notFoundEmoji props to Picker --- README.md | 1 + src/components/category.js | 3 +++ src/components/not-found.js | 9 +++------ src/components/picker/nimble-picker.js | 2 ++ src/utils/shared-props.js | 2 ++ stories/index.js | 1 + 6 files changed, 12 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index 8c85c89..16b5f27 100644 --- a/README.md +++ b/README.md @@ -50,6 +50,7 @@ import { Picker } from 'emoji-mart' | **defaultSkin** | | `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 | +| **notFoundEmoji** | | `sleuth_or_spy` | The emoji shown when there are no search results | | **notFound** | | | [Not Found](#not-found) | #### I18n diff --git a/src/components/category.js b/src/components/category.js index ff5b4f6..dccf99e 100644 --- a/src/components/category.js +++ b/src/components/category.js @@ -151,6 +151,7 @@ export default class Category extends React.Component { emojiProps, i18n, notFound, + notFoundEmoji, } = this.props, emojis = this.getEmojis(), labelStyles = {}, @@ -199,6 +200,7 @@ export default class Category extends React.Component { @@ -217,6 +219,7 @@ Category.propTypes = { emojiProps: PropTypes.object.isRequired, recent: PropTypes.arrayOf(PropTypes.string), notFound: PropTypes.func, + notFoundEmoji: PropTypes.string.isRequired, } Category.defaultProps = { diff --git a/src/components/not-found.js b/src/components/not-found.js index 9c51297..7ffda01 100644 --- a/src/components/not-found.js +++ b/src/components/not-found.js @@ -4,7 +4,7 @@ import { NimbleEmoji } from '.' export default class NotFound extends React.PureComponent { render() { - const { data, emojiProps, i18n, notFound } = this.props + const { data, emojiProps, i18n, notFound, notFoundEmoji } = this.props const component = (notFound && notFound()) || (
@@ -12,7 +12,7 @@ export default class NotFound extends React.PureComponent { data: data, ...emojiProps, size: 38, - emoji: 'sleuth_or_spy', + emoji: notFoundEmoji, onOver: null, onLeave: null, onClick: null, @@ -27,9 +27,6 @@ export default class NotFound extends React.PureComponent { NotFound.propTypes = { notFound: PropTypes.func.isRequired, + notFoundString: PropTypes.string.isRequired, emojiProps: PropTypes.object.isRequired, } - -NotFound.defaultProps = { - notFound: () => {}, -} diff --git a/src/components/picker/nimble-picker.js b/src/components/picker/nimble-picker.js index 1bd3fc5..45d6568 100644 --- a/src/components/picker/nimble-picker.js +++ b/src/components/picker/nimble-picker.js @@ -468,6 +468,7 @@ export default class NimblePicker extends React.PureComponent { recent, autoFocus, notFound, + notFoundEmoji, } = this.props, { skin } = this.state, width = perLine * (emojiSize + 12) + 12 + 2 + measureScrollbar() @@ -541,6 +542,7 @@ export default class NimblePicker extends React.PureComponent { onClick: this.handleEmojiClick, }} notFound={notFound} + notFoundEmoji={notFoundEmoji} /> ) })} diff --git a/src/utils/shared-props.js b/src/utils/shared-props.js index 9509825..c2041be 100644 --- a/src/utils/shared-props.js +++ b/src/utils/shared-props.js @@ -72,6 +72,7 @@ const PickerPropTypes = { }), ), notFound: PropTypes.func, + notFoundEmoji: PropTypes.string, } const PickerDefaultProps = { @@ -98,6 +99,7 @@ const PickerDefaultProps = { autoFocus: false, custom: [], notFound: () => {}, + notFoundEmoji: 'sleuth_or_spy', } export { diff --git a/stories/index.js b/stories/index.js index 2250cf9..d51a10a 100644 --- a/stories/index.js +++ b/stories/index.js @@ -36,6 +36,7 @@ storiesOf('Picker', module) perLine={number('Per line', 9)} title={text('Idle text', 'Your Title Here')} emoji={text('Idle emoji', 'department_store')} + notFoundEmoji={text('Not found emoji', 'sleuth_or_spy')} defaultSkin={number('Default skin tone', 1)} color={color('Highlight color', '#ae65c5')} showPreview={boolean('Show preview', true)} From 2cea3df86ab7b20a19902e27dd672bf75bd5b2ae Mon Sep 17 00:00:00 2001 From: Etienne Lemay Date: Tue, 31 Jul 2018 14:02:56 -0400 Subject: [PATCH 8/8] =?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 }} /> ));