treehouse
/
emoji-mart-lazyload
20
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add `defaultSkin` prop to Picker and allow forcing skin tone with `skin` prop [Ref #165]

release
Etienne Lemay 2018-03-02 13:45:33 -05:00
parent b0753769fb
commit af2fdc71a1
No known key found for this signature in database
GPG Key ID: EE7CF89146BB28E9
3 changed files with 9 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
README.md
View File

@ -43,7 +43,8 @@ import { Picker } from 'emoji-mart'
| **emojisToShowFilter** | | ```((emoji) => true)``` | A Fn to choose whether an emoji should be displayed or not | | **emojisToShowFilter** | | ```((emoji) => true)``` | A Fn to choose whether an emoji should be displayed or not |
| **showPreview** | | `true` | Display preview section | | **showPreview** | | `true` | Display preview section |
| **emojiTooltip** | | `false` | Show emojis short name when hovering (title) | | **emojiTooltip** | | `false` | Show emojis short name when hovering (title) |
| **skin** | | `1` | Default skin color: `1, 2, 3, 4, 5, 6` | | **skin** | | | Forces skin color: `1, 2, 3, 4, 5, 6` |
| **defaultSkin** | | `1` | Default skin color: `1, 2, 3, 4, 5, 6` |
| **style** | | | Inline styles applied to the root element. Useful for positioning | | **style** | | | Inline styles applied to the root element. Useful for positioning |
| **title** | | `Emoji Mart™` | The title shown when no emojis are hovered | | **title** | | `Emoji Mart™` | The title shown when no emojis are hovered |

9
src/components/picker.js
View File

@ -43,7 +43,7 @@ export default class Picker extends React.PureComponent {
this.i18n = deepMerge(I18N, props.i18n) this.i18n = deepMerge(I18N, props.i18n)
this.state = { this.state = {
skin: store.get('skin') || props.skin, skin: props.skin || store.get('skin') || props.defaultSkin,
firstRender: true, firstRender: true,
} }
@ -152,8 +152,10 @@ export default class Picker extends React.PureComponent {
} }
componentWillReceiveProps(props) { componentWillReceiveProps(props) {
if (props.skin && !store.get('skin')) { if (props.skin) {
this.setState({ skin: props.skin }) this.setState({ skin: props.skin })
} else if (props.defaultSkin && !store.get('skin')) {
this.setState({ skin: props.defaultSkin })
} }
} }
@ -566,7 +568,8 @@ Picker.defaultProps = {
emoji: 'department_store', emoji: 'department_store',
color: '#ae65c5', color: '#ae65c5',
set: Emoji.defaultProps.set, set: Emoji.defaultProps.set,
skin: Emoji.defaultProps.skin, skin: null,
defaultSkin: Emoji.defaultProps.skin,
native: Emoji.defaultProps.native, native: Emoji.defaultProps.native,
sheetSize: Emoji.defaultProps.sheetSize, sheetSize: Emoji.defaultProps.sheetSize,
backgroundImageFn: Emoji.defaultProps.backgroundImageFn, backgroundImageFn: Emoji.defaultProps.backgroundImageFn,

2
stories/index.js
View File

@ -35,7 +35,7 @@ storiesOf('Picker', module)
perLine={number('Per line', 9)} perLine={number('Per line', 9)}
title={text('Idle text', 'Your Title Here')} title={text('Idle text', 'Your Title Here')}
emoji={text('Idle emoji', 'department_store')} emoji={text('Idle emoji', 'department_store')}
skin={number('Skin tone', 1)} defaultSkin={number('Default skin tone', 1)}
color={color('Highlight color', '#ae65c5')} color={color('Highlight color', '#ae65c5')}
showPreview={boolean('Show preview', true)} showPreview={boolean('Show preview', true)}
custom={CUSTOM_EMOJIS} custom={CUSTOM_EMOJIS}