diff --git a/README.md b/README.md
index ff1b619a3..4cbb5e0e1 100644
--- a/README.md
+++ b/README.md
@@ -11,19 +11,20 @@
```jsx
import { Picker } from 'emoji-mart'
-
-
-
+
+
+
+
```
| 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:
-https://unpkg.com/emoji-mart@0.2.10/sheets/sheet_apple_64.png
-https://unpkg.com/emoji-mart@0.2.10/sheets/sheet_emojione_64.png
-
### Emoji
```jsx
import { Emoji } from 'emoji-mart'
-
-
+
+
```
| 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
diff --git a/example/index.js b/example/index.js
index 7536f9e13..dd5b5cbe8 100644
--- a/example/index.js
+++ b/example/index.js
@@ -49,7 +49,7 @@ class Example extends React.Component {
onClick={() => this.setState({ set: set })}
{...props}>
@@ -76,7 +76,7 @@ class Example extends React.Component {
emojiSize={{this.state.emojiSize}}
perLine={{this.state.perLine}} {this.state.perLine < 10 ? ' ' : ' '}
skin={{this.state.skin}}
-
sheetURL='sheets/sheet_{this.state.set}_64.png'
+
set='{this.state.set}'
onClick={(emoji) => console.log(emoji)}
/>
@@ -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)}
/>
}
diff --git a/sheets/sheet_apple_16.png b/sheets/sheet_apple_16.png
deleted file mode 100644
index 6394059a9..000000000
Binary files a/sheets/sheet_apple_16.png and /dev/null differ
diff --git a/sheets/sheet_apple_20.png b/sheets/sheet_apple_20.png
deleted file mode 100644
index 7c01cb85f..000000000
Binary files a/sheets/sheet_apple_20.png and /dev/null differ
diff --git a/sheets/sheet_apple_32.png b/sheets/sheet_apple_32.png
deleted file mode 100644
index 971b2ea89..000000000
Binary files a/sheets/sheet_apple_32.png and /dev/null differ
diff --git a/sheets/sheet_apple_64.png b/sheets/sheet_apple_64.png
deleted file mode 100644
index 68428ecb5..000000000
Binary files a/sheets/sheet_apple_64.png and /dev/null differ
diff --git a/sheets/sheet_emojione_16.png b/sheets/sheet_emojione_16.png
deleted file mode 100644
index 4d15fb0e1..000000000
Binary files a/sheets/sheet_emojione_16.png and /dev/null differ
diff --git a/sheets/sheet_emojione_20.png b/sheets/sheet_emojione_20.png
deleted file mode 100644
index 38be663ba..000000000
Binary files a/sheets/sheet_emojione_20.png and /dev/null differ
diff --git a/sheets/sheet_emojione_32.png b/sheets/sheet_emojione_32.png
deleted file mode 100644
index a3b33b32e..000000000
Binary files a/sheets/sheet_emojione_32.png and /dev/null differ
diff --git a/sheets/sheet_emojione_64.png b/sheets/sheet_emojione_64.png
deleted file mode 100644
index b71462761..000000000
Binary files a/sheets/sheet_emojione_64.png and /dev/null differ
diff --git a/sheets/sheet_google_16.png b/sheets/sheet_google_16.png
deleted file mode 100644
index ffb99ffb6..000000000
Binary files a/sheets/sheet_google_16.png and /dev/null differ
diff --git a/sheets/sheet_google_20.png b/sheets/sheet_google_20.png
deleted file mode 100644
index 15899816c..000000000
Binary files a/sheets/sheet_google_20.png and /dev/null differ
diff --git a/sheets/sheet_google_32.png b/sheets/sheet_google_32.png
deleted file mode 100644
index 882adfae7..000000000
Binary files a/sheets/sheet_google_32.png and /dev/null differ
diff --git a/sheets/sheet_google_64.png b/sheets/sheet_google_64.png
deleted file mode 100644
index 758b0e1ea..000000000
Binary files a/sheets/sheet_google_64.png and /dev/null differ
diff --git a/sheets/sheet_twitter_16.png b/sheets/sheet_twitter_16.png
deleted file mode 100644
index 4d74bce1d..000000000
Binary files a/sheets/sheet_twitter_16.png and /dev/null differ
diff --git a/sheets/sheet_twitter_20.png b/sheets/sheet_twitter_20.png
deleted file mode 100644
index db4c2fa2a..000000000
Binary files a/sheets/sheet_twitter_20.png and /dev/null differ
diff --git a/sheets/sheet_twitter_32.png b/sheets/sheet_twitter_32.png
deleted file mode 100644
index cf5652cde..000000000
Binary files a/sheets/sheet_twitter_32.png and /dev/null differ
diff --git a/sheets/sheet_twitter_64.png b/sheets/sheet_twitter_64.png
deleted file mode 100644
index adc60b09a..000000000
Binary files a/sheets/sheet_twitter_64.png and /dev/null differ
diff --git a/src/components/category.js b/src/components/category.js
index cdc9a3c4e..bbd8160b0 100644
--- a/src/components/category.js
+++ b/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
}
diff --git a/src/components/emoji.js b/src/components/emoji.js
index 6414da8f5..329f081d1 100644
--- a/src/components/emoji.js
+++ b/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
- return getData(emoji, skin, sheetURL)
+ var { emoji, skin, set } = this.props
+ return getData(emoji, skin, set)
}
getSanitizedData() {
- var { emoji, skin, sheetURL } = this.props
- return getSanitizedData(emoji, skin, sheetURL)
+ var { emoji, skin, set } = this.props
+ 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: (() => {}),
diff --git a/src/components/picker.js b/src/components/picker.js
index c4f8de834..44029a200 100644
--- a/src/components/picker.js
+++ b/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',
}
diff --git a/src/utils/index.js b/src/utils/index.js
index aa7ffe7a8..2107c1043 100644
--- a/src/utils/index.js
+++ b/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],
- kitMatches = sheetURL.match(/(apple|google|twitter|emojione)/),
- kit = kitMatches[0]
+ variationData = emojiData.skin_variations[variationKey]
- if (variationData[`has_img_${kit}`]) {
+ if (variationData[`has_img_${set}`]) {
emojiData.skin_tone = skin
for (let k in variationData) {