From 8e6d363d8bdd38c1ca41c80560d580e5bc66ad90 Mon Sep 17 00:00:00 2001 From: Rena Ryumae Date: Thu, 21 Jun 2018 11:56:40 -0400 Subject: [PATCH 1/4] 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 3dc3e2fd954fbf7da4ea9825a103bc42661856e9 Mon Sep 17 00:00:00 2001 From: Etienne Lemay Date: Mon, 30 Jul 2018 16:52:15 -0400 Subject: [PATCH 2/4] =?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 3/4] 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 4/4] 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)}