diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000..ecafee0 Binary files /dev/null and b/.DS_Store differ diff --git a/README.md b/README.md index 57dc456..16b5f27 100644 --- a/README.md +++ b/README.md @@ -50,6 +50,8 @@ 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 ```js @@ -234,6 +236,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 d2bcb70..aba92a5 100644 --- a/css/emoji-mart.css +++ b/css/emoji-mart.css @@ -160,6 +160,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..dccf99e 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,15 @@ export default class Category extends React.Component { } render() { - var { id, name, hasStickyPosition, emojiProps, i18n } = this.props, + var { + id, + name, + hasStickyPosition, + emojiProps, + i18n, + notFound, + notFoundEmoji, + } = this.props, emojis = this.getEmojis(), labelStyles = {}, labelSpanStyles = {}, @@ -169,9 +177,7 @@ export default class Category extends React.Component { return (
-
- {NimbleEmoji({ - data: this.data, - ...emojiProps, - size: 38, - emoji: 'sleuth_or_spy', - onOver: null, - onLeave: null, - onClick: null, - })} -
- -
{i18n.notfound}
-
+ )}
) @@ -220,6 +218,8 @@ Category.propTypes = { perLine: PropTypes.number.isRequired, emojiProps: PropTypes.object.isRequired, recent: PropTypes.arrayOf(PropTypes.string), + notFound: PropTypes.func, + notFoundEmoji: PropTypes.string.isRequired, } 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..7ffda01 --- /dev/null +++ b/src/components/not-found.js @@ -0,0 +1,32 @@ +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, notFoundEmoji } = this.props + + const component = (notFound && notFound()) || ( +
+ {NimbleEmoji({ + data: data, + ...emojiProps, + size: 38, + emoji: notFoundEmoji, + onOver: null, + onLeave: null, + onClick: null, + })} +
{i18n.notfound}
+
+ ) + + return component + } +} + +NotFound.propTypes = { + notFound: PropTypes.func.isRequired, + notFoundString: PropTypes.string.isRequired, + emojiProps: PropTypes.object.isRequired, +} diff --git a/src/components/picker/nimble-picker.js b/src/components/picker/nimble-picker.js index 20586e1..45d6568 100644 --- a/src/components/picker/nimble-picker.js +++ b/src/components/picker/nimble-picker.js @@ -467,6 +467,8 @@ export default class NimblePicker extends React.PureComponent { exclude, recent, autoFocus, + notFound, + notFoundEmoji, } = this.props, { skin } = this.state, width = perLine * (emojiSize + 12) + 12 + 2 + measureScrollbar() @@ -539,6 +541,8 @@ export default class NimblePicker extends React.PureComponent { onLeave: this.handleEmojiLeave, onClick: this.handleEmojiClick, }} + notFound={notFound} + notFoundEmoji={notFoundEmoji} /> ) })} diff --git a/src/utils/shared-props.js b/src/utils/shared-props.js index 3bb8083..c2041be 100644 --- a/src/utils/shared-props.js +++ b/src/utils/shared-props.js @@ -71,6 +71,8 @@ const PickerPropTypes = { imageUrl: PropTypes.string.isRequired, }), ), + notFound: PropTypes.func, + notFoundEmoji: PropTypes.string, } const PickerDefaultProps = { @@ -96,6 +98,8 @@ const PickerDefaultProps = { emojiTooltip: EmojiDefaultProps.tooltip, autoFocus: false, custom: [], + notFound: () => {}, + notFoundEmoji: 'sleuth_or_spy', } export { diff --git a/stories/index.js b/stories/index.js index b0798ec..d51a10a 100644 --- a/stories/index.js +++ b/stories/index.js @@ -36,12 +36,25 @@ 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)} 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)