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..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', () => (
+
+ }
+ />
));
storiesOf('Emoji', module)