Remove “sheetURL” props & add “set” props
- Use sheets from emoji-data repo (from a CDN) - Easier to setup/use - Remove sheets from the reporelease
19
README.md
|
@ -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 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 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
|
||||
|
|
|
@ -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>{<Variable>{this.state.emojiSize}</Variable>} <input type='range' data-key='emojiSize' onChange={this.handleInput.bind(this)} min='16' max='64' value={this.state.emojiSize} />
|
||||
<br /> perLine<Operator>=</Operator>{<Variable>{this.state.perLine}</Variable>} {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>{<Variable>{this.state.skin}</Variable>} <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>{(<Variable>emoji</Variable>) => console.log(<Variable>emoji</Variable>)}
|
||||
<br /><Operator>/></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)}
|
||||
/>
|
||||
}
|
||||
|
|
Before Width: | Height: | Size: 917 KiB |
Before Width: | Height: | Size: 1.3 MiB |
Before Width: | Height: | Size: 2.5 MiB |
Before Width: | Height: | Size: 6.8 MiB |
Before Width: | Height: | Size: 787 KiB |
Before Width: | Height: | Size: 1.0 MiB |
Before Width: | Height: | Size: 1.9 MiB |
Before Width: | Height: | Size: 2.5 MiB |
Before Width: | Height: | Size: 608 KiB |
Before Width: | Height: | Size: 830 KiB |
Before Width: | Height: | Size: 1.5 MiB |
Before Width: | Height: | Size: 3.4 MiB |
Before Width: | Height: | Size: 758 KiB |
Before Width: | Height: | Size: 1015 KiB |
Before Width: | Height: | Size: 1.8 MiB |
Before Width: | Height: | Size: 4.0 MiB |
|
@ -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
|
||||
}
|
||||
|
||||
|
|
|
@ -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: (() => {}),
|
||||
|
|
|
@ -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',
|
||||
}
|
||||
|
|
|
@ -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) {
|
||||
|
|