Add notFoundEmoji props to Picker

release
Etienne Lemay 2018-07-30 17:06:23 -04:00
parent 8ddd8725e8
commit 4bb41b9796
No known key found for this signature in database
GPG Key ID: EE7CF89146BB28E9
6 changed files with 12 additions and 6 deletions

View File

@ -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

View File

@ -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 = {

View File

@ -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: () => {},
}

View File

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

View File

@ -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 {

View File

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