From a4be90aa6e6d56f4e7d4eacc40aed4429a217ed2 Mon Sep 17 00:00:00 2001 From: Marco Munizaga Date: Wed, 30 Nov 2016 11:21:40 -0800 Subject: [PATCH 1/3] Add backgroundImageFn to allow local image sheets --- README.md | 2 ++ src/components/category.js | 6 +++--- src/components/emoji.js | 6 ++++-- src/components/picker.js | 6 +++++- 4 files changed, 14 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index ba9a28b..a64ebba 100644 --- a/README.md +++ b/README.md @@ -28,6 +28,7 @@ import { Picker } from 'emoji-mart' | **i18n** | | [`{…}`](#i18n) | [An object](#i18n) containing localized strings | | **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. | | **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 | @@ -114,6 +115,7 @@ import { Emoji } from 'emoji-mart' | **onOver** | | | Params: `(emoji, event) => {}` | | **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. | | **skin** | | `1` | Skin color: `1, 2, 3, 4, 5, 6` | ## Headless search diff --git a/src/components/category.js b/src/components/category.js index b71d6e2..b5b1761 100644 --- a/src/components/category.js +++ b/src/components/category.js @@ -17,9 +17,9 @@ export default class Category extends React.Component { shouldComponentUpdate(nextProps, nextState) { var { name, perLine, hasStickyPosition, emojis, emojiProps } = this.props, - { skin, size, set } = emojiProps, + { skin, size, set, backgroundImageFn } = emojiProps, { perLine: nextPerLine, hasStickyPosition: nextHasStickyPosition, emojis: nextEmojis, emojiProps: nextEmojiProps } = nextProps, - { skin: nextSkin, size: nextSize, set: nextSet } = nextEmojiProps, + { skin: nextSkin, size: nextSize, set: nextSet, backgroundImageFn: nextBackgroundImageFn } = nextEmojiProps, shouldUpdate = false if (name == 'Recent' && perLine != nextPerLine) { @@ -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 || set != nextSet || hasStickyPosition != nextHasStickyPosition || backgroundImageFn != nextBackgroundImageFn) { shouldUpdate = true } diff --git a/src/components/emoji.js b/src/components/emoji.js index 2575876..43eef11 100644 --- a/src/components/emoji.js +++ b/src/components/emoji.js @@ -59,7 +59,7 @@ export default class Emoji extends React.Component { } render() { - var { set, size, sheetSize, native, onOver, onLeave } = this.props, + var { set, size, sheetSize, native, onOver, onLeave, backgroundImageFn } = this.props, { unified } = this.getData(), style = {}, children = null @@ -76,7 +76,7 @@ export default class Emoji extends React.Component { width: size, height: size, display: 'inline-block', - backgroundImage: `url(https://unpkg.com/emoji-datasource@2.4.4/sheet_${set}_${sheetSize}.png)`, + backgroundImage: `url(${backgroundImageFn(set, sheetSize)})`, backgroundSize: `${100 * SHEET_COLUMNS}%`, backgroundPosition: this.getPosition(), } @@ -96,6 +96,7 @@ Emoji.propTypes = { onOver: React.PropTypes.func, onLeave: React.PropTypes.func, onClick: React.PropTypes.func, + backgroundImageFn: React.PropTypes.func, native: React.PropTypes.bool, skin: React.PropTypes.oneOf([1, 2, 3, 4, 5, 6]), sheetSize: React.PropTypes.oneOf([16, 20, 32, 64]), @@ -113,6 +114,7 @@ Emoji.defaultProps = { sheetSize: 64, native: false, onOver: (() => {}), + backgroundImageFn: ((set, sheetSize) => `https://unpkg.com/emoji-datasource@2.4.4/sheet_${set}_${sheetSize}.png`), onLeave: (() => {}), onClick: (() => {}), } diff --git a/src/components/picker.js b/src/components/picker.js index 93f8c30..a42fdea 100644 --- a/src/components/picker.js +++ b/src/components/picker.js @@ -238,7 +238,7 @@ export default class Picker extends React.Component { } render() { - var { perLine, emojiSize, set, sheetSize, style, title, emoji, color } = this.props, + var { perLine, emojiSize, set, sheetSize, style, title, emoji, color, backgroundImageFn } = this.props, { skin } = this.state, width = (perLine * (emojiSize + 12)) + 12 + 2 @@ -274,6 +274,7 @@ export default class Picker extends React.Component { size: emojiSize, set: set, sheetSize: sheetSize, + backgroundImageFn: backgroundImageFn, onOver: this.handleEmojiOver.bind(this), onLeave: this.handleEmojiLeave.bind(this), onClick: this.handleEmojiClick.bind(this), @@ -292,6 +293,7 @@ export default class Picker extends React.Component { skin: skin, set: set, sheetSize: sheetSize, + backgroundImageFn: backgroundImageFn, }} skinsProps={{ skin: skin, @@ -313,6 +315,7 @@ Picker.propTypes = { emoji: React.PropTypes.string, color: React.PropTypes.string, set: Emoji.propTypes.set, + backgroundImageFn: Emoji.propTypes.backgroundImageFn, skin: Emoji.propTypes.skin, sheetSize: Emoji.propTypes.sheetSize, } @@ -329,4 +332,5 @@ Picker.defaultProps = { set: Emoji.defaultProps.set, skin: Emoji.defaultProps.skin, sheetSize: Emoji.defaultProps.sheetSize, + backgroundImageFn: Emoji.defaultProps.backgroundImageFn, } From 38049bba9f62f8bf3de27d2e60ab78e7c4ae83a5 Mon Sep 17 00:00:00 2001 From: Marco Munizaga Date: Wed, 30 Nov 2016 14:59:31 -0800 Subject: [PATCH 2/3] Don't use a github commit for emoji-datasource --- package.json | 2 +- scripts/build-data.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index 9db9a59..433bb15 100644 --- a/package.json +++ b/package.json @@ -29,7 +29,7 @@ "babel-plugin-transform-object-rest-spread": "6.8.0", "babel-preset-es2015": "6.6.0", "babel-preset-react": "6.5.0", - "emoji-data": "git://github.com/iamcal/emoji-data.git#6daffc10d8e8fd06b80ec24c9bdcb65218f71563", + "emoji-datasource": "2.4.4", "emojilib": "2.0.2", "inflection": "1.10.0", "mkdirp": "0.5.1", diff --git a/scripts/build-data.js b/scripts/build-data.js index 0e5ffcb..92c75a4 100644 --- a/scripts/build-data.js +++ b/scripts/build-data.js @@ -1,5 +1,5 @@ var fs = require('fs'), - emojiData = require('emoji-data'), + emojiData = require('emoji-datasource'), emojiLib = require('emojilib'), inflection = require('inflection'), mkdirp = require('mkdirp') From 1d0795ffa015f6293ed99d7d8bac9032d4298f71 Mon Sep 17 00:00:00 2001 From: Marco Munizaga Date: Wed, 30 Nov 2016 11:31:35 -0800 Subject: [PATCH 3/3] Bump version --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 433bb15..0d6741f 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "emoji-mart", - "version": "0.3.3", + "version": "0.3.4", "description": "Customizable Slack-like emoji picker for React", "main": "dist/emoji-mart.js", "repository": {