diff --git a/README.md b/README.md index 045065e..601f688 100644 --- a/README.md +++ b/README.md @@ -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 | diff --git a/css/emoji-mart.css b/css/emoji-mart.css index fc0e621..83e970c 100644 --- a/css/emoji-mart.css +++ b/css/emoji-mart.css @@ -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 { diff --git a/example/index.js b/example/index.js index 04b4dd3..d3e25cc 100644 --- a/example/index.js +++ b/example/index.js @@ -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 = {} - state[key] = parseInt(value) + if (type == 'checkbox') { + state[key] = checked + } else { + state[key] = parseInt(value) + } + this.setState(state) } @@ -76,6 +82,7 @@ class Example extends React.Component {
emojiSize={{this.state.emojiSize}}
perLine={{this.state.perLine}} {this.state.perLine < 10 ? ' ' : ' '}
skin={{this.state.skin}} +
native={{this.state.native ? 'true' : 'false'}}{this.state.native ? ' ' : ''}
set='{this.state.set}'
onClick={(emoji) => console.log(emoji)}
/> @@ -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)} /> diff --git a/package.json b/package.json index 26a7427..4279815 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/scripts/watch-example.js b/scripts/watch.js similarity index 90% rename from scripts/watch-example.js rename to scripts/watch.js index 0b07f58..7dfc702 100644 --- a/scripts/watch-example.js +++ b/scripts/watch.js @@ -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) => { diff --git a/src/components/category.js b/src/components/category.js index 457bc7a..672af32 100644 --- a/src/components/category.js +++ b/src/components/category.js @@ -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, } diff --git a/src/components/emoji.js b/src/components/emoji.js index 1df3a0f..ae1ab25 100644 --- a/src/components/emoji.js +++ b/src/components/emoji.js @@ -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: (() => {}), diff --git a/src/components/picker.js b/src/components/picker.js index beac126..c878483 100644 --- a/src/components/picker.js +++ b/src/components/picker.js @@ -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, diff --git a/yarn.lock b/yarn.lock index fe363ab..3776243 100644 --- a/yarn.lock +++ b/yarn.lock @@ -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"