Add backgroundImageFn to allow local image sheets

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

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
     }
 

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: (() => {}),
 }

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,
 }