Add `onSkinChange` prop to Picker [Close #165]
parent
fed9a89c78
commit
b0753769fb
|
@ -33,6 +33,7 @@ import { Picker } from 'emoji-mart'
|
||||||
| **recent** | | | Pass your own frequently used emojis as array of string IDs |
|
| **recent** | | | Pass your own frequently used emojis as array of string IDs |
|
||||||
| **emojiSize** | | `24` | The emoji width and height |
|
| **emojiSize** | | `24` | The emoji width and height |
|
||||||
| **onClick** | | | Params: `(emoji, event) => {}` |
|
| **onClick** | | | Params: `(emoji, event) => {}` |
|
||||||
|
| **onSkinChange** | | | Params: `(skin) => {}` |
|
||||||
| **perLine** | | `9` | Number of emojis per line. While there’s no minimum or maximum, this will affect the picker’s width. This will set *Frequently Used* length as well (`perLine * 4`) |
|
| **perLine** | | `9` | Number of emojis per line. While there’s no minimum or maximum, this will affect the picker’s width. This will set *Frequently Used* length as well (`perLine * 4`) |
|
||||||
| **i18n** | | [`{…}`](#i18n) | [An object](#i18n) containing localized strings |
|
| **i18n** | | [`{…}`](#i18n) | [An object](#i18n) containing localized strings |
|
||||||
| **native** | | `false` | Renders the native unicode emoji |
|
| **native** | | `false` | Renders the native unicode emoji |
|
||||||
|
|
|
@ -357,10 +357,13 @@ export default class Picker extends React.PureComponent {
|
||||||
}
|
}
|
||||||
|
|
||||||
handleSkinChange(skin) {
|
handleSkinChange(skin) {
|
||||||
var newState = { skin: skin }
|
var newState = { skin: skin },
|
||||||
|
{ onSkinChange } = this.props
|
||||||
|
|
||||||
this.setState(newState)
|
this.setState(newState)
|
||||||
store.update(newState)
|
store.update(newState)
|
||||||
|
|
||||||
|
onSkinChange(skin)
|
||||||
}
|
}
|
||||||
|
|
||||||
updateCategoriesSize() {
|
updateCategoriesSize() {
|
||||||
|
@ -521,6 +524,7 @@ export default class Picker extends React.PureComponent {
|
||||||
|
|
||||||
Picker.propTypes = {
|
Picker.propTypes = {
|
||||||
onClick: PropTypes.func,
|
onClick: PropTypes.func,
|
||||||
|
onSkinChange: PropTypes.func,
|
||||||
perLine: PropTypes.number,
|
perLine: PropTypes.number,
|
||||||
emojiSize: PropTypes.number,
|
emojiSize: PropTypes.number,
|
||||||
i18n: PropTypes.object,
|
i18n: PropTypes.object,
|
||||||
|
@ -553,6 +557,7 @@ Picker.propTypes = {
|
||||||
|
|
||||||
Picker.defaultProps = {
|
Picker.defaultProps = {
|
||||||
onClick: () => {},
|
onClick: () => {},
|
||||||
|
onSkinChange: () => {},
|
||||||
emojiSize: 24,
|
emojiSize: 24,
|
||||||
perLine: 9,
|
perLine: 9,
|
||||||
i18n: {},
|
i18n: {},
|
||||||
|
|
|
@ -13,7 +13,7 @@ export default class Skins extends React.PureComponent {
|
||||||
}
|
}
|
||||||
|
|
||||||
handleClick(e) {
|
handleClick(e) {
|
||||||
var skin = e.currentTarget.getAttribute('data-skin')
|
var skin = parseInt(e.currentTarget.getAttribute('data-skin'))
|
||||||
var { onChange } = this.props
|
var { onChange } = this.props
|
||||||
|
|
||||||
if (!this.state.opened) {
|
if (!this.state.opened) {
|
||||||
|
|
|
@ -28,6 +28,7 @@ storiesOf('Picker', module)
|
||||||
.add('default', () => (
|
.add('default', () => (
|
||||||
<Picker
|
<Picker
|
||||||
onClick={action('clicked')}
|
onClick={action('clicked')}
|
||||||
|
onSkinChange={action('skin changed')}
|
||||||
native={boolean('Unicode', true)}
|
native={boolean('Unicode', true)}
|
||||||
set={select('Emoji pack', SETS, SETS[0])}
|
set={select('Emoji pack', SETS, SETS[0])}
|
||||||
emojiSize={number('Emoji size', 24)}
|
emojiSize={number('Emoji size', 24)}
|
||||||
|
|
Loading…
Reference in New Issue