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) {