Add notFoundEmoji props to Picker

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

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 {
             <NotFound
               i18n={i18n}
               notFound={notFound}
+              notFoundEmoji={notFoundEmoji}
               data={this.data}
               emojiProps={emojiProps}
             />
@@ -217,6 +219,7 @@ Category.propTypes = {
   emojiProps: PropTypes.object.isRequired,
   recent: PropTypes.arrayOf(PropTypes.string),
   notFound: PropTypes.func,
+  notFoundEmoji: PropTypes.string.isRequired,
 }
 
 Category.defaultProps = {

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()) || (
       <div className="emoji-mart-no-results">
@@ -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: () => {},
-}

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}
               />
             )
           })}

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 {

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)}