Merge pull request #40 from pivotaltracker/native-emoji-picker-option
Allow picker to display emoji nativelynolan/hinaloe-test
commit
da5cdcf5d3
|
@ -26,9 +26,11 @@ import { Picker } from 'emoji-mart'
|
|||
| **onClick** | | | Params: `(emoji, event) => {}` |
|
||||
| **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 |
|
||||
| **native** | | `false` | Renders the native unicode emoji |
|
||||
| **set** | | `apple` | The emoji set: `'apple', 'google', 'twitter', 'emojione'` |
|
||||
| **sheetSize** | | `64` | The emoji [sheet size](#sheet-sizes): `16, 20, 32, 64` |
|
||||
| **backgroundImageFn** | | ```((set, sheetSize) => `https://unpkg.com/emoji-datasource@2.4.4/sheet_${set}_${sheetSize}.png`)``` | A Fn that returns that image sheet to use for emojis. Useful for avoiding a request if you have the sheet locally. |
|
||||
| **emojisToShowFilter** | | ```((unicode) => true)``` | A Fn to choose whether an emoji should be displayed or not based on its unicode |
|
||||
| **skin** | | `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 |
|
||||
|
|
|
@ -91,6 +91,8 @@
|
|||
.emoji-mart-category .emoji-mart-emoji span {
|
||||
z-index: 1;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.emoji-mart-category .emoji-mart-emoji:hover:before {
|
||||
|
|
|
@ -10,6 +10,7 @@ class Example extends React.Component {
|
|||
emojiSize: 24,
|
||||
perLine: 9,
|
||||
skin: 1,
|
||||
native: false,
|
||||
set: 'apple',
|
||||
hidden: false,
|
||||
}
|
||||
|
@ -17,11 +18,16 @@ class Example extends React.Component {
|
|||
|
||||
handleInput(e) {
|
||||
var { currentTarget } = e,
|
||||
{ value } = currentTarget,
|
||||
{ value, type, checked } = currentTarget,
|
||||
key = currentTarget.getAttribute('data-key'),
|
||||
state = {}
|
||||
|
||||
if (type == 'checkbox') {
|
||||
state[key] = checked
|
||||
} else {
|
||||
state[key] = parseInt(value)
|
||||
}
|
||||
|
||||
this.setState(state)
|
||||
}
|
||||
|
||||
|
@ -76,6 +82,7 @@ class Example extends React.Component {
|
|||
<br /> emojiSize<Operator>=</Operator>{<Variable>{this.state.emojiSize}</Variable>} <input type='range' data-key='emojiSize' onChange={this.handleInput.bind(this)} min='16' max='64' value={this.state.emojiSize} />
|
||||
<br /> perLine<Operator>=</Operator>{<Variable>{this.state.perLine}</Variable>} {this.state.perLine < 10 ? ' ' : ' '} <input type='range' data-key='perLine' onChange={this.handleInput.bind(this)} min='7' max='16' value={this.state.perLine} />
|
||||
<br /> skin<Operator>=</Operator>{<Variable>{this.state.skin}</Variable>} <input type='range' data-key='skin' onChange={this.handleInput.bind(this)} min='1' max='6' value={this.state.skin} />
|
||||
<br /> native<Operator>=</Operator>{<Variable>{this.state.native ? 'true' : 'false'}</Variable>}{this.state.native ? ' ' : ''} <input type='checkbox' data-key='native' onChange={this.handleInput.bind(this)} value={this.state.native} />
|
||||
<br /> set<Operator>=</Operator><String>'{this.state.set}'</String>
|
||||
<br /> onClick<Operator>=</Operator>{(<Variable>emoji</Variable>) => console.log(<Variable>emoji</Variable>)}
|
||||
<br /><Operator>/></Operator>
|
||||
|
@ -86,6 +93,7 @@ class Example extends React.Component {
|
|||
emojiSize={this.state.emojiSize}
|
||||
perLine={this.state.perLine}
|
||||
skin={this.state.skin}
|
||||
native={this.state.native}
|
||||
set={this.state.set}
|
||||
onClick={(emoji) => console.log(emoji)}
|
||||
/>
|
||||
|
|
|
@ -53,8 +53,7 @@
|
|||
"build:example": "node scripts/build-example",
|
||||
"build:dist": "node scripts/build-dist",
|
||||
"build": "npm run build:data && npm run build:example && npm run build:dist",
|
||||
"watch:example": "node scripts/watch-example",
|
||||
"watch": "npm run watch:example",
|
||||
"watch": "node scripts/watch",
|
||||
"react:clean": "rimraf node_modules/{react,react-dom,react-addons-test-utils}",
|
||||
"react:14": "npm run react:clean && npm i react@^0.14 react-dom@^0.14 react-addons-test-utils@^0.14 --save-dev",
|
||||
"react:15": "npm run react:clean && npm i react@^15 react-dom@^15 react-addons-test-utils@^15 --save-dev",
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
var path = require('path')
|
||||
var webpack = require('webpack')
|
||||
|
||||
var config = require('../example/webpack.config.js'),
|
||||
var config = require('../src/webpack.config.js'),
|
||||
compiler = webpack(config)
|
||||
|
||||
compiler.watch({}, (err, stats) => {
|
|
@ -16,9 +16,9 @@ export default class Category extends React.Component {
|
|||
}
|
||||
|
||||
shouldComponentUpdate(nextProps, nextState) {
|
||||
var { name, perLine, hasStickyPosition, emojis, emojiProps } = this.props,
|
||||
var { name, perLine, native, hasStickyPosition, emojis, emojiProps } = this.props,
|
||||
{ skin, size, set } = emojiProps,
|
||||
{ perLine: nextPerLine, hasStickyPosition: nextHasStickyPosition, emojis: nextEmojis, emojiProps: nextEmojiProps } = nextProps,
|
||||
{ perLine: nextPerLine, native: nextNative, hasStickyPosition: nextHasStickyPosition, emojis: nextEmojis, emojiProps: nextEmojiProps } = nextProps,
|
||||
{ skin: nextSkin, size: nextSize, set: nextSet } = nextEmojiProps,
|
||||
shouldUpdate = false
|
||||
|
||||
|
@ -30,7 +30,7 @@ export default class Category extends React.Component {
|
|||
shouldUpdate = !(emojis == nextEmojis)
|
||||
}
|
||||
|
||||
if (skin != nextSkin || size != nextSize || set != nextSet || hasStickyPosition != nextHasStickyPosition) {
|
||||
if (skin != nextSkin || size != nextSize || native != nextNative || set != nextSet || hasStickyPosition != nextHasStickyPosition) {
|
||||
shouldUpdate = true
|
||||
}
|
||||
|
||||
|
@ -152,6 +152,7 @@ Category.propTypes = {
|
|||
emojis: React.PropTypes.array,
|
||||
hasStickyPosition: React.PropTypes.bool,
|
||||
name: React.PropTypes.string.isRequired,
|
||||
native: React.PropTypes.bool.isRequired,
|
||||
perLine: React.PropTypes.number.isRequired,
|
||||
emojiProps: React.PropTypes.object.isRequired,
|
||||
}
|
||||
|
|
|
@ -16,6 +16,7 @@ export default class Emoji extends React.Component {
|
|||
return (
|
||||
this.hasSkinVariations && nextProps.skin != this.props.skin ||
|
||||
nextProps.size != this.props.size ||
|
||||
nextProps.native != this.props.native ||
|
||||
nextProps.set != this.props.set ||
|
||||
nextProps.emoji != this.props.emoji
|
||||
)
|
||||
|
@ -60,7 +61,7 @@ export default class Emoji extends React.Component {
|
|||
}
|
||||
|
||||
render() {
|
||||
var { set, size, sheetSize, native, onOver, onLeave, backgroundImageFn } = this.props,
|
||||
var { set, size, sheetSize, native, forceSize, onOver, onLeave, backgroundImageFn } = this.props,
|
||||
{ unified } = this.getData(),
|
||||
style = {},
|
||||
children = this.props.children
|
||||
|
@ -72,6 +73,12 @@ export default class Emoji extends React.Component {
|
|||
if (native && unified) {
|
||||
style = { fontSize: size }
|
||||
children = unifiedToNative(unified)
|
||||
|
||||
if (forceSize) {
|
||||
style.display = 'inline-block'
|
||||
style.width = size
|
||||
style.height = size
|
||||
}
|
||||
} else {
|
||||
style = {
|
||||
width: size,
|
||||
|
@ -99,6 +106,7 @@ Emoji.propTypes = {
|
|||
onClick: React.PropTypes.func,
|
||||
backgroundImageFn: React.PropTypes.func,
|
||||
native: React.PropTypes.bool,
|
||||
forceSize: React.PropTypes.bool,
|
||||
skin: React.PropTypes.oneOf([1, 2, 3, 4, 5, 6]),
|
||||
sheetSize: React.PropTypes.oneOf([16, 20, 32, 64]),
|
||||
set: React.PropTypes.oneOf(['apple', 'google', 'twitter', 'emojione']),
|
||||
|
@ -114,6 +122,7 @@ Emoji.defaultProps = {
|
|||
set: 'apple',
|
||||
sheetSize: 64,
|
||||
native: false,
|
||||
forceSize: false,
|
||||
backgroundImageFn: ((set, sheetSize) => `https://unpkg.com/emoji-datasource@${EMOJI_DATASOURCE_VERSION}/sheet_${set}_${sheetSize}.png`),
|
||||
onOver: (() => {}),
|
||||
onLeave: (() => {}),
|
||||
|
|
|
@ -261,7 +261,7 @@ export default class Picker extends React.Component {
|
|||
}
|
||||
|
||||
render() {
|
||||
var { perLine, emojiSize, set, sheetSize, style, title, emoji, color, backgroundImageFn, emojisToShowFilter } = this.props,
|
||||
var { perLine, emojiSize, set, sheetSize, style, title, emoji, color, native, backgroundImageFn, emojisToShowFilter } = this.props,
|
||||
{ skin } = this.state,
|
||||
width = (perLine * (emojiSize + 12)) + 12 + 2
|
||||
|
||||
|
@ -291,13 +291,16 @@ export default class Picker extends React.Component {
|
|||
name={category.name}
|
||||
emojis={category.emojis}
|
||||
perLine={perLine}
|
||||
native={native}
|
||||
hasStickyPosition={this.hasStickyPosition}
|
||||
i18n={this.i18n}
|
||||
emojiProps={{
|
||||
native: native,
|
||||
skin: skin,
|
||||
size: emojiSize,
|
||||
set: set,
|
||||
sheetSize: sheetSize,
|
||||
forceSize: native,
|
||||
backgroundImageFn: backgroundImageFn,
|
||||
onOver: this.handleEmojiOver.bind(this),
|
||||
onLeave: this.handleEmojiLeave.bind(this),
|
||||
|
@ -313,6 +316,7 @@ export default class Picker extends React.Component {
|
|||
title={title}
|
||||
emoji={emoji}
|
||||
emojiProps={{
|
||||
native: native,
|
||||
size: 38,
|
||||
skin: skin,
|
||||
set: set,
|
||||
|
@ -339,8 +343,9 @@ Picker.propTypes = {
|
|||
emoji: React.PropTypes.string,
|
||||
color: React.PropTypes.string,
|
||||
set: Emoji.propTypes.set,
|
||||
backgroundImageFn: Emoji.propTypes.backgroundImageFn,
|
||||
skin: Emoji.propTypes.skin,
|
||||
native: React.PropTypes.bool,
|
||||
backgroundImageFn: Emoji.propTypes.backgroundImageFn,
|
||||
sheetSize: Emoji.propTypes.sheetSize,
|
||||
emojisToShowFilter: React.PropTypes.func,
|
||||
}
|
||||
|
@ -356,6 +361,7 @@ Picker.defaultProps = {
|
|||
color: '#ae65c5',
|
||||
set: Emoji.defaultProps.set,
|
||||
skin: Emoji.defaultProps.skin,
|
||||
native: Emoji.defaultProps.native,
|
||||
sheetSize: Emoji.defaultProps.sheetSize,
|
||||
backgroundImageFn: Emoji.defaultProps.backgroundImageFn,
|
||||
emojisToShowFilter: (codePoint) => true,
|
||||
|
|
|
@ -2155,7 +2155,7 @@ regenerator-transform@0.9.8:
|
|||
|
||||
regex-cache@^0.4.2:
|
||||
version "0.4.3"
|
||||
resolved "https://registry.yarnpkg.com/regex-cache/-/regex-cache-0.4.3.tgz#9b1a6c35d4d0dfcef5711ae651e8e9d3d7114145"
|
||||
resolved "http://registry.npmjs.org/regex-cache/-/regex-cache-0.4.3.tgz#9b1a6c35d4d0dfcef5711ae651e8e9d3d7114145"
|
||||
dependencies:
|
||||
is-equal-shallow "^0.1.3"
|
||||
is-primitive "^2.0.0"
|
||||
|
|
Loading…
Reference in New Issue