Remove “sheetURL” props & add “set” props

- Use sheets from emoji-data repo (from a CDN)
- Easier to setup/use
- Remove sheets from the repo
release
Etienne Lemay 2016-10-18 21:21:10 -04:00
parent 1b832414c5
commit 4f2b204c0e
22 changed files with 32 additions and 35 deletions

View File

@ -11,19 +11,20 @@
```jsx
import { Picker } from 'emoji-mart'
<Picker sheetURL='…' onClick={this.addEmoji} />
<Picker sheetURL='…' title='Pick your emoji…' emoji='point_up' />
<Picker sheetURL='…' style={{ position: 'absolute', bottom: '20px', right: '20px' }} />
<Picker set='emojione' />
<Picker onClick={this.addEmoji} />
<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 theres no minimum or maximum, this will affect the pickers 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 sheetURL='…' emoji='santa' />
<Emoji emoji={{ id: 'santa', skin: 3 }} />
<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

View File

@ -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)}
/>
}

Binary file not shown.

Before

Width:  |  Height:  |  Size: 917 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.3 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.5 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 6.8 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 787 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.0 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.9 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.5 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 608 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 830 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.5 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.4 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 758 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1015 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.8 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.0 MiB

View File

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

View File

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

View File

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

View File

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