Remove “sheetURL” props & add “set” props

- Use sheets from emoji-data repo (from a CDN)
- Easier to setup/use
- Remove sheets from the repo

README.md

@@ -11,19 +11,20 @@
 ```jsx
 import { Picker } from 'emoji-mart'
 
-<Picker sheetURL='…' onClick={this.addEmoji} />
+<Picker set='emojione' />
-<Picker sheetURL='…' title='Pick your emoji…' emoji='point_up' />
+<Picker onClick={this.addEmoji} />
-<Picker sheetURL='…' style={{ position: 'absolute', bottom: '20px', right: '20px' }} />
+<Picker title='Pick your emoji…' emoji='point_up' />
+<Picker style={{ position: 'absolute', bottom: '20px', right: '20px' }} />
 ```
 
 | Prop | Required | Default | Description |
 | ---- | :------: | ------- | ----------- |
-| **sheetURL** | ✓ | | The absolute or relative path of the emoji sheet |
 | **color** | | `#ae65c5` | The top bar anchors select and hover color |
 | **emoji** | | `department_store` | The emoji shown when no emojis are hovered |
 | **emojiSize** | | `24` | The emoji width and height |
 | **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`) |
+| **set** | | `apple` | The emoji set: `'apple', 'google', 'twitter', 'emojione'` |
 | **skin** | | `1` | Default skin color (1-6) |
 | **style** | | | Inline styles applied to the root element. Useful for positioning |
 | **title** | | `Emoji Mart™` | The title shown when no emojis are hovered |
@@ -52,26 +53,22 @@ Examples of `emoji` object:
 }
 ```
 
-You can use [unpkg](https://unpkg.com/emoji-mart@0.2.10/sheets/) with the sheets included in this repo:<br>
-https://unpkg.com/emoji-mart@0.2.10/sheets/sheet_apple_64.png<br>
-https://unpkg.com/emoji-mart@0.2.10/sheets/sheet_emojione_64.png
-
 ### Emoji
 ```jsx
 import { Emoji } from 'emoji-mart'
 
-<Emoji sheetURL='…' emoji={{ id: 'santa', skin: 3 }} />
+<Emoji emoji={{ id: 'santa', skin: 3 }} />
-<Emoji sheetURL='…' emoji='santa' />
+<Emoji set='emojione' emoji='santa' />
 ```
 
 | Prop | Required | Default | Description |
 | ---- | :------: | ------- | ----------- |
 | **emoji** | ✓ | | Either a string or an `emoji` object |
-| **sheetURL** | ✓ | | The absolute or relative path of the emoji sheet |
 | **size** | ✓ | | The emoji width and height. |
 | **onClick** | | | Params: `(emoji, event) => {}` |
 | **onLeave** | | | Params: `(emoji, event) => {}` |
 | **onOver** | | | Params: `(emoji, event) => {}` |
+| **set** | | `apple` | The emoji set: `'apple', 'google', 'twitter', 'emojione'` |
 | **skin** | | `1` | Skin color (1-6) |
 
 ## Headless search

example/index.js

@@ -49,7 +49,7 @@ class Example extends React.Component {
             onClick={() => this.setState({ set: set })}
             {...props}>
             <Emoji
-              sheetURL={`https://unpkg.com/emoji-mart@0.2.10/sheets/sheet_${set}_32.png`}
+              set={set}
               size={24}
               emoji='grinning'
             />
@@ -76,7 +76,7 @@ class Example extends React.Component {
 <br />  emojiSize<Operator>=</Operator>&#123;<Variable>{this.state.emojiSize}</Variable>&#125; <input type='range' data-key='emojiSize' onChange={this.handleInput.bind(this)} min='16' max='64' value={this.state.emojiSize} />
 <br />  perLine<Operator>=</Operator>&#123;<Variable>{this.state.perLine}</Variable>&#125; {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>&#123;<Variable>{this.state.skin}</Variable>&#125;       <input type='range' data-key='skin' onChange={this.handleInput.bind(this)} min='1' max='6' value={this.state.skin} />
-<br />  sheetURL<Operator>=</Operator><String>'sheets/sheet_{this.state.set}_64.png'</String>
+<br />  set<Operator>=</Operator><String>'{this.state.set}'</String>
 <br />  onClick<Operator>=</Operator>&#123;(<Variable>emoji</Variable>) => console.log(<Variable>emoji</Variable>)&#125;
 <br /><Operator>/&gt;</Operator>
       </pre>
@@ -86,7 +86,7 @@ class Example extends React.Component {
           emojiSize={this.state.emojiSize}
           perLine={this.state.perLine}
           skin={this.state.skin}
-          sheetURL={`https://unpkg.com/emoji-mart@0.2.10/sheets/sheet_${this.state.set}_64.png`}
+          set={this.state.set}
           onClick={(emoji) => console.log(emoji)}
         />
       }

src/components/category.js

@@ -30,9 +30,9 @@ export default class Category extends React.Component {
 
   shouldComponentUpdate(nextProps, nextState) {
     var { name, perLine, hasStickyPosition, emojis, emojiProps } = this.props,
-        { skin, size, sheetURL } = emojiProps,
+        { skin, size, set } = emojiProps,
         { perLine: nextPerLine, hasStickyPosition: nextHasStickyPosition, emojis: nextEmojis, emojiProps: nextEmojiProps } = nextProps,
-        { skin: nextSkin, size: nextSize, sheetURL: nextSheetURL } = nextEmojiProps,
+        { skin: nextSkin, size: nextSize, set: nextSet } = nextEmojiProps,
         shouldUpdate = false
 
     if (name == 'Recent' && perLine != nextPerLine) {
@@ -43,7 +43,7 @@ export default class Category extends React.Component {
       shouldUpdate = !(emojis == nextEmojis)
     }
 
-    if (skin != nextSkin || size != nextSize || sheetURL != nextSheetURL || hasStickyPosition != nextHasStickyPosition) {
+    if (skin != nextSkin || size != nextSize || set != nextSet || hasStickyPosition != nextHasStickyPosition) {
       shouldUpdate = true
     }
 

src/components/emoji.js

@@ -16,7 +16,7 @@ export default class Emoji extends React.Component {
     return (
       this.hasSkinVariations && nextProps.skin != this.props.skin ||
       nextProps.size != this.props.size ||
-      nextProps.sheetURL != this.props.sheetURL
+      nextProps.set != this.props.set
     )
   }
 
@@ -28,13 +28,13 @@ export default class Emoji extends React.Component {
   }
 
   getData() {
-    var { emoji, skin, sheetURL } = this.props
+    var { emoji, skin, set } = this.props
-    return getData(emoji, skin, sheetURL)
+    return getData(emoji, skin, set)
   }
 
   getSanitizedData() {
-    var { emoji, skin, sheetURL } = this.props
+    var { emoji, skin, set } = this.props
-    return getSanitizedData(emoji, skin, sheetURL)
+    return getSanitizedData(emoji, skin, set)
   }
 
   handleClick(e) {
@@ -59,7 +59,7 @@ export default class Emoji extends React.Component {
   }
 
   render() {
-    var { sheetURL, size, onOver, onLeave } = this.props,
+    var { set, size, onOver, onLeave } = this.props,
         { unified } = this.getData()
 
     if (!unified) {
@@ -75,7 +75,7 @@ export default class Emoji extends React.Component {
         width: size,
         height: size,
         display: 'inline-block',
-        backgroundImage: `url(${sheetURL})`,
+        backgroundImage: `url(https://unpkg.com/emoji-datasource@2.4.4/sheet_${set}_64.png)`,
         backgroundSize: `${100 * SHEET_COLUMNS}%`,
         backgroundPosition: this.getPosition(),
       }}>
@@ -86,11 +86,11 @@ export default class Emoji extends React.Component {
 
 Emoji.propTypes = {
   skin: React.PropTypes.number,
+  set: React.PropTypes.string,
   onOver: React.PropTypes.func,
   onLeave: React.PropTypes.func,
   onClick: React.PropTypes.func,
   size: React.PropTypes.number.isRequired,
-  sheetURL: React.PropTypes.string.isRequired,
   emoji: React.PropTypes.oneOfType([
     React.PropTypes.string,
     React.PropTypes.object,
@@ -99,6 +99,7 @@ Emoji.propTypes = {
 
 Emoji.defaultProps = {
   skin: 1,
+  set: 'apple',
   onOver: (() => {}),
   onLeave: (() => {}),
   onClick: (() => {}),

src/components/picker.js

@@ -220,7 +220,7 @@ export default class Picker extends React.Component {
   }
 
   render() {
-    var { perLine, emojiSize, sheetURL, style, title, emoji, color } = this.props,
+    var { perLine, emojiSize, set, style, title, emoji, color } = this.props,
         { skin } = this.state,
         width = (perLine * (emojiSize + 12)) + 12 + 2
 
@@ -251,7 +251,7 @@ export default class Picker extends React.Component {
             emojiProps={{
               skin: skin,
               size: emojiSize,
-              sheetURL: sheetURL,
+              set: set,
               onOver: this.handleEmojiOver.bind(this),
               onLeave: this.handleEmojiLeave.bind(this),
               onClick: this.handleEmojiClick.bind(this),
@@ -268,7 +268,7 @@ export default class Picker extends React.Component {
           emojiProps={{
             size: 38,
             skin: skin,
-            sheetURL: sheetURL,
+            set: set,
           }}
           skinsProps={{
             skin: skin,
@@ -289,7 +289,7 @@ Picker.propTypes = {
   title: React.PropTypes.string,
   emoji: React.PropTypes.string,
   color: React.PropTypes.string,
-  sheetURL: React.PropTypes.string.isRequired,
+  set: React.PropTypes.string,
 }
 
 Picker.defaultProps = {
@@ -301,4 +301,5 @@ Picker.defaultProps = {
   title: 'Emoji Mart™',
   emoji: 'department_store',
   color: '#ae65c5',
+  set: 'apple',
 }

src/utils/index.js

@@ -35,7 +35,7 @@ function getSanitizedData() {
   return sanitize(getData(...arguments))
 }
 
-function getData(emoji, skin, sheetURL) {
+function getData(emoji, skin, set) {
   var emojiData = {}
 
   if (typeof emoji == 'string') {
@@ -57,16 +57,14 @@ function getData(emoji, skin, sheetURL) {
     }
   }
 
-  if (emojiData.skin_variations && skin > 1 && sheetURL) {
+  if (emojiData.skin_variations && skin > 1 && set) {
     emojiData = JSON.parse(JSON.stringify(emojiData))
 
     var skinKey = SKINS[skin - 1],
         variationKey = `${emojiData.unified}-${skinKey}`,
-        variationData = emojiData.skin_variations[variationKey],
+        variationData = emojiData.skin_variations[variationKey]
-        kitMatches = sheetURL.match(/(apple|google|twitter|emojione)/),
-        kit = kitMatches[0]
 
-    if (variationData[`has_img_${kit}`]) {
+    if (variationData[`has_img_${set}`]) {
       emojiData.skin_tone = skin
 
       for (let k in variationData) {