From 82759ecd00b581d6ca3af9dd68ae74dff2bafdf8 Mon Sep 17 00:00:00 2001 From: Etienne Lemay Date: Fri, 17 Feb 2017 09:58:42 -0500 Subject: [PATCH 1/8] Update README --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 045065e..fd89f00 100644 --- a/README.md +++ b/README.md @@ -29,6 +29,7 @@ import { Picker } from 'emoji-mart' | **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 | From 8e6c393ab759da800d488a464acf23ba36c95e6c Mon Sep 17 00:00:00 2001 From: Thomas Osugi Date: Thu, 26 Jan 2017 11:33:17 -0700 Subject: [PATCH 2/8] [#138343455] Allow picker to display emoji natively rather than from spritesheet Signed-off-by: Eric Dattore --- package.json | 3 +-- scripts/{watch-example.js => watch.js} | 2 +- src/components/picker.js | 6 +++++- yarn.lock | 2 +- 4 files changed, 8 insertions(+), 5 deletions(-) rename scripts/{watch-example.js => watch.js} (90%) 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/picker.js b/src/components/picker.js index beac126..725dfb2 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, backgroundImageFn, emojisToShowFilter, displayNative } = this.props, { skin } = this.state, width = (perLine * (emojiSize + 12)) + 12 + 2 @@ -294,6 +294,7 @@ export default class Picker extends React.Component { hasStickyPosition={this.hasStickyPosition} i18n={this.i18n} emojiProps={{ + native: displayNative, skin: skin, size: emojiSize, set: set, @@ -313,6 +314,7 @@ export default class Picker extends React.Component { title={title} emoji={emoji} emojiProps={{ + native: displayNative, size: 38, skin: skin, set: set, @@ -343,6 +345,7 @@ Picker.propTypes = { skin: Emoji.propTypes.skin, sheetSize: Emoji.propTypes.sheetSize, emojisToShowFilter: React.PropTypes.func, + displayNative: React.PropTypes.bool, } Picker.defaultProps = { @@ -359,4 +362,5 @@ Picker.defaultProps = { sheetSize: Emoji.defaultProps.sheetSize, backgroundImageFn: Emoji.defaultProps.backgroundImageFn, emojisToShowFilter: (codePoint) => true, + displayNative: false, } 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" From 6c2d1e4bf1e9c3663e5bb19c9919bf013811fe74 Mon Sep 17 00:00:00 2001 From: Thomas Osugi Date: Wed, 1 Feb 2017 12:01:14 -0700 Subject: [PATCH 3/8] Honor perLine with for real Signed-off-by: Chad Wagner --- src/components/picker.js | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/src/components/picker.js b/src/components/picker.js index 725dfb2..c19c7a0 100644 --- a/src/components/picker.js +++ b/src/components/picker.js @@ -262,8 +262,15 @@ export default class Picker extends React.Component { render() { var { perLine, emojiSize, set, sheetSize, style, title, emoji, color, backgroundImageFn, emojisToShowFilter, displayNative } = this.props, - { skin } = this.state, - width = (perLine * (emojiSize + 12)) + 12 + 2 + { skin } = this.state + + let width; + + if (displayNative) { + width = (perLine * (emojiSize + 15)) + 17; + } else { + width = (perLine * (emojiSize + 12)) + 12 + 2; + } return
From d8f094e4550b66acb569f0e3d716b1a778101614 Mon Sep 17 00:00:00 2001 From: Etienne Lemay Date: Fri, 17 Feb 2017 10:13:59 -0500 Subject: [PATCH 4/8] =?UTF-8?q?Rename=20=E2=80=9CdisplayNative=E2=80=9D=20?= =?UTF-8?q?=3D>=20=E2=80=9Cnative=E2=80=9D=20for=20consistency=20w/=20Emoj?= =?UTF-8?q?i=20props?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/picker.js | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/components/picker.js b/src/components/picker.js index c19c7a0..4bdf323 100644 --- a/src/components/picker.js +++ b/src/components/picker.js @@ -261,12 +261,12 @@ export default class Picker extends React.Component { } render() { - var { perLine, emojiSize, set, sheetSize, style, title, emoji, color, backgroundImageFn, emojisToShowFilter, displayNative } = this.props, + var { perLine, emojiSize, set, sheetSize, style, title, emoji, color, native, backgroundImageFn, emojisToShowFilter } = this.props, { skin } = this.state let width; - if (displayNative) { + if (native) { width = (perLine * (emojiSize + 15)) + 17; } else { width = (perLine * (emojiSize + 12)) + 12 + 2; @@ -301,7 +301,7 @@ export default class Picker extends React.Component { hasStickyPosition={this.hasStickyPosition} i18n={this.i18n} emojiProps={{ - native: displayNative, + native: native, skin: skin, size: emojiSize, set: set, @@ -321,7 +321,7 @@ export default class Picker extends React.Component { title={title} emoji={emoji} emojiProps={{ - native: displayNative, + native: native, size: 38, skin: skin, set: set, @@ -348,11 +348,11 @@ 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, - displayNative: React.PropTypes.bool, } Picker.defaultProps = { @@ -366,8 +366,8 @@ 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, - displayNative: false, } From c78ece2bc37fe7e25175ee48ebd86b0091944353 Mon Sep 17 00:00:00 2001 From: Etienne Lemay Date: Fri, 17 Feb 2017 10:15:12 -0500 Subject: [PATCH 5/8] Update README --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index fd89f00..601f688 100644 --- a/README.md +++ b/README.md @@ -26,6 +26,7 @@ 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. | From fc14f939c14985bc93726287245bfd14c2e3f656 Mon Sep 17 00:00:00 2001 From: Etienne Lemay Date: Fri, 17 Feb 2017 10:36:50 -0500 Subject: [PATCH 6/8] Fix native emojis size --- css/emoji-mart.css | 2 ++ src/components/emoji.js | 10 +++++++++- src/components/picker.js | 12 +++--------- 3 files changed, 14 insertions(+), 10 deletions(-) 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/src/components/emoji.js b/src/components/emoji.js index 1df3a0f..5419059 100644 --- a/src/components/emoji.js +++ b/src/components/emoji.js @@ -60,7 +60,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 +72,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 +105,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 +121,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 4bdf323..0993ac6 100644 --- a/src/components/picker.js +++ b/src/components/picker.js @@ -262,15 +262,8 @@ export default class Picker extends React.Component { render() { var { perLine, emojiSize, set, sheetSize, style, title, emoji, color, native, backgroundImageFn, emojisToShowFilter } = this.props, - { skin } = this.state - - let width; - - if (native) { - width = (perLine * (emojiSize + 15)) + 17; - } else { - width = (perLine * (emojiSize + 12)) + 12 + 2; - } + { skin } = this.state, + width = (perLine * (emojiSize + 12)) + 12 + 2 return
@@ -306,6 +299,7 @@ export default class Picker extends React.Component { size: emojiSize, set: set, sheetSize: sheetSize, + forceSize: native, backgroundImageFn: backgroundImageFn, onOver: this.handleEmojiOver.bind(this), onLeave: this.handleEmojiLeave.bind(this), From 1f88be1e8b0cf9e91948ba8d7e8cef96b3d16c89 Mon Sep 17 00:00:00 2001 From: Etienne Lemay Date: Fri, 17 Feb 2017 10:48:57 -0500 Subject: [PATCH 7/8] Handle native change in shouldComponentUpdate --- src/components/category.js | 7 ++++--- src/components/emoji.js | 1 + src/components/picker.js | 1 + 3 files changed, 6 insertions(+), 3 deletions(-) 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 5419059..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 ) diff --git a/src/components/picker.js b/src/components/picker.js index 0993ac6..c878483 100644 --- a/src/components/picker.js +++ b/src/components/picker.js @@ -291,6 +291,7 @@ export default class Picker extends React.Component { name={category.name} emojis={category.emojis} perLine={perLine} + native={native} hasStickyPosition={this.hasStickyPosition} i18n={this.i18n} emojiProps={{ From dfbe5d0400f83d0405f72870eea0fcf726f525e2 Mon Sep 17 00:00:00 2001 From: Etienne Lemay Date: Fri, 17 Feb 2017 10:49:12 -0500 Subject: [PATCH 8/8] Add native checkbox to example --- example/index.js | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) 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)} />