mirrors
/
emoji-mart-lazyload
mirror of https://github.com/mashirozx/emoji-mart.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Update data and docs

dependabot/npm_and_yarn/websocket-extensions-0.1.4
Thomas Piard 2020-01-26 18:49:09 +01:00 committed by Etienne Lemay
parent cdb74f28c7
commit a253148b86
13 changed files with 229 additions and 773 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
README.md
View File

@ -17,7 +17,7 @@
import 'emoji-mart/css/emoji-mart.css' import 'emoji-mart/css/emoji-mart.css'
import { Picker } from 'emoji-mart' import { Picker } from 'emoji-mart'
<Picker set='emojione' /> <Picker set='apple' />
<Picker onSelect={this.addEmoji} /> <Picker onSelect={this.addEmoji} />
<Picker title='Pick your emoji…' emoji='point_up' /> <Picker title='Pick your emoji…' emoji='point_up' />
<Picker style={{ position: 'absolute', bottom: '20px', right: '20px' }} /> <Picker style={{ position: 'absolute', bottom: '20px', right: '20px' }} />
@ -41,7 +41,7 @@ import { Picker } from 'emoji-mart'
| **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`) | | **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`) |
| **i18n** | | [`{…}`](#i18n) | [An object](#i18n) containing localized strings | | **i18n** | | [`{…}`](#i18n) | [An object](#i18n) containing localized strings |
| **native** | | `false` | Renders the native unicode emoji | | **native** | | `false` | Renders the native unicode emoji |
| **set** | | `apple` | The emoji set: `'apple', 'google', 'twitter', 'emojione', 'messenger', 'facebook'` | | **set** | | `apple` | The emoji set: `'apple', 'google', 'twitter', 'facebook'` |
| **sheetSize** | | `64` | The emoji [sheet size](#sheet-sizes): `16, 20, 32, 64` | | **sheetSize** | | `64` | The emoji [sheet size](#sheet-sizes): `16, 20, 32, 64` |
| **backgroundImageFn** | | ```((set, sheetSize) => …)``` | A Fn that returns that image sheet to use for emojis. Useful for avoiding a request if you have the sheet locally. | | **backgroundImageFn** | | ```((set, sheetSize) => …)``` | A Fn that returns that image sheet to use for emojis. Useful for avoiding a request if you have the sheet locally. |
| **emojisToShowFilter** | | ```((emoji) => true)``` | A Fn to choose whether an emoji should be displayed or not | | **emojisToShowFilter** | | ```((emoji) => true)``` | A Fn to choose whether an emoji should be displayed or not |
@ -66,7 +66,8 @@ skintext: 'Choose your default skin tone',
categories: { categories: {
search: 'Search Results', search: 'Search Results',
recent: 'Frequently Used', recent: 'Frequently Used',
people: 'Smileys & People', smileys: 'Smileys & Emotion',
people: 'People & Body',
nature: 'Animals & Nature', nature: 'Animals & Nature',
foods: 'Food & Drink', foods: 'Food & Drink',
activity: 'Activity', activity: 'Activity',
@ -94,33 +95,29 @@ Sheets are served from [unpkg](https://unpkg.com), a global CDN that serves file
| Set | Size (`sheetSize: 16`) | Size (`sheetSize: 20`) | Size (`sheetSize: 32`) | Size (`sheetSize: 64`) | | Set | Size (`sheetSize: 16`) | Size (`sheetSize: 20`) | Size (`sheetSize: 32`) | Size (`sheetSize: 64`) |
| --------- | ---------------------- | ---------------------- | ---------------------- | ---------------------- | | --------- | ---------------------- | ---------------------- | ---------------------- | ---------------------- |
| apple | 334 KB | 459 KB | 1.08 MB | 2.94 MB | | apple | 407 KB | 561 KB | 1.34 MB | 3.60 MB |
| emojione | 315 KB | 435 KB | 1020 KB | 2.33 MB | | facebook | 416 KB | 579 KB | 1.38 MB | 3.68 MB |
| facebook | 322 KB | 439 KB | 1020 KB | 2.50 MB | | google | 362 KB | 489 KB | 1.12 MB | 2.78 MB |
| google | 301 KB | 409 KB | 907 KB | 2.17 MB | | twitter | 361 KB | 485 KB | 1.05 MB | 2.39 MB |
| messenger | 325 KB | 449 KB | 1.05 MB | 2.69 MB |
| twitter | 288 KB | 389 KB | 839 KB | 1.82 MB |
#### Datasets #### Datasets
While all sets are available by default, you may want to include only a single set data to reduce the size of your bundle. While all sets are available by default, you may want to include only a single set data to reduce the size of your bundle.
| Set | Size (on disk) | | Set | Size (on disk) |
| --------- | -------------- | | --------- | -------------- |
| all | 570 KB | | all | 611 KB |
| apple | 484 KB | | apple | 548 KB |
| emojione | 485 KB | | facebook | 468 KB |
| facebook | 421 KB | | google | 518 KB |
| google | 483 KB | | twitter | 517 KB |
| messenger | 197 KB |
| twitter | 484 KB |
To use these data files (or any other custom data), use the `NimblePicker` component: To use these data files (or any other custom data), use the `NimblePicker` component:
```js ```js
import data from 'emoji-mart/data/messenger.json' import data from 'emoji-mart/data/google.json'
import { NimblePicker } from 'emoji-mart' import { NimblePicker } from 'emoji-mart'
<NimblePicker set='messenger' data={data} /> <NimblePicker set='google' data={data} />
``` ```
#### Examples of `emoji` object: #### Examples of `emoji` object:
@ -166,7 +163,7 @@ import { Emoji } from 'emoji-mart'
<Emoji emoji={{ id: 'santa', skin: 3 }} size={16} /> <Emoji emoji={{ id: 'santa', skin: 3 }} size={16} />
<Emoji emoji=':santa::skin-tone-3:' size={16} /> <Emoji emoji=':santa::skin-tone-3:' size={16} />
<Emoji emoji='santa' set='emojione' size={16} /> <Emoji emoji='santa' set='apple' size={16} />
``` ```
| Prop | Required | Default | Description | | Prop | Required | Default | Description |
@ -178,7 +175,7 @@ import { Emoji } from 'emoji-mart'
| **onLeave** | | | Params: `(emoji, event) => {}` | | **onLeave** | | | Params: `(emoji, event) => {}` |
| **onOver** | | | Params: `(emoji, event) => {}` | | **onOver** | | | Params: `(emoji, event) => {}` |
| [**fallback**](#unsupported-emojis-fallback) | | | Params: `(emoji, props) => {}` | | [**fallback**](#unsupported-emojis-fallback) | | | Params: `(emoji, props) => {}` |
| **set** | | `apple` | The emoji set: `'apple', 'google', 'twitter', 'emojione'` | | **set** | | `apple` | The emoji set: `'apple', 'google', 'twitter'` |
| **sheetSize** | | `64` | The emoji [sheet size](#sheet-sizes): `16, 20, 32, 64` | | **sheetSize** | | `64` | The emoji [sheet size](#sheet-sizes): `16, 20, 32, 64` |
| **backgroundImageFn** | | ```((set, sheetSize) => `https://unpkg.com/emoji-datasource@3.0.0/sheet_${set}_${sheetSize}.png`)``` | A Fn that returns that image sheet to use for emojis. Useful for avoiding a request if you have the sheet locally. | | **backgroundImageFn** | | ```((set, sheetSize) => `https://unpkg.com/emoji-datasource@3.0.0/sheet_${set}_${sheetSize}.png`)``` | A Fn that returns that image sheet to use for emojis. Useful for avoiding a request if you have the sheet locally. |
| **skin** | | `1` | Skin color: `1, 2, 3, 4, 5, 6` | | **skin** | | `1` | Skin color: `1, 2, 3, 4, 5, 6` |
@ -186,13 +183,13 @@ import { Emoji } from 'emoji-mart'
| [**html**](#using-with-dangerouslysetinnerhtml) | | `false` | Returns an HTML string to use with `dangerouslySetInnerHTML` | | [**html**](#using-with-dangerouslysetinnerhtml) | | `false` | Returns an HTML string to use with `dangerouslySetInnerHTML` |
#### Unsupported emojis fallback #### Unsupported emojis fallback
Certain sets don’t support all emojis (i.e. Messenger & Facebook don’t support `:shrug:`). By default the Emoji component will not render anything so that the emojis’ don’t take space in the picker when not available. When using the standalone Emoji component, you can however render anything you want by providing the `fallback` props. Certain sets don’t support all emojis. By default the Emoji component will not render anything so that the emojis’ don’t take space in the picker when not available. When using the standalone Emoji component, you can however render anything you want by providing the `fallback` props.
To have the component render `:shrug:` you would need to: To have the component render `:shrug:` you would need to:
```js ```js
<Emoji <Emoji
set={'messenger'} set={'apple'}
emoji={'shrug'} emoji={'shrug'}
size={24} size={24}
fallback={(emoji, props) => { fallback={(emoji, props) => {
@ -310,7 +307,7 @@ emojiIndex.search('christmas').map((o) => o.native)
### With custom data ### With custom data
```js ```js
import data from 'emoji-mart/datasets/messenger' import data from 'emoji-mart/datasets/apple'
import { NimbleEmojiIndex } from 'emoji-mart' import { NimbleEmojiIndex } from 'emoji-mart'
let emojiIndex = new NimbleEmojiIndex(data) let emojiIndex = new NimbleEmojiIndex(data)
@ -406,7 +403,7 @@ It can however be overwritten as per user preference.
<img width="98" alt="customizable-skin" src="https://user-images.githubusercontent.com/436043/32532883-2c620e7c-c402-11e7-976c-50d32be0566c.png"> <img width="98" alt="customizable-skin" src="https://user-images.githubusercontent.com/436043/32532883-2c620e7c-c402-11e7-976c-50d32be0566c.png">
#### Multiple sets supported #### Multiple sets supported
Apple / Google / Twitter / EmojiOne / Messenger / Facebook Apple / Google / Twitter / Facebook
<img width="214" alt="sets" src="https://user-images.githubusercontent.com/436043/33786868-d4226e60-dc38-11e7-840a-e4cf490f5f4a.png"> <img width="214" alt="sets" src="https://user-images.githubusercontent.com/436043/33786868-d4226e60-dc38-11e7-840a-e4cf490f5f4a.png">

2
data/all.json
View File

File diff suppressed because one or more lines are too long

2
data/apple.json
View File

File diff suppressed because one or more lines are too long

1
data/emojione.json
View File

File diff suppressed because one or more lines are too long

2
data/facebook.json
View File

File diff suppressed because one or more lines are too long

2
data/google.json
View File

File diff suppressed because one or more lines are too long

1
data/messenger.json
View File

File diff suppressed because one or more lines are too long

2
data/twitter.json
View File

File diff suppressed because one or more lines are too long

921
docs/bundle.js
View File

File diff suppressed because one or more lines are too long

2
docs/emoji-mart.css
View File

@ -186,7 +186,7 @@
} }
.emoji-mart-emoji-native { .emoji-mart-emoji-native {
font-family: "Segoe UI Emoji", "Segoe UI Symbol", "Segoe UI", "Apple Color Emoji", "Twemoji Mozilla", "Noto Color Emoji", "EmojiOne Color", "Android Emoji"; font-family: "Segoe UI Emoji", "Segoe UI Symbol", "Segoe UI", "Apple Color Emoji", "Twemoji Mozilla", "Noto Color Emoji", "Android Emoji";
} }
.emoji-mart-no-results { .emoji-mart-no-results {

2
docs/index.js
View File

@ -62,8 +62,6 @@ class Example extends React.Component {
'apple', 'apple',
'google', 'google',
'twitter', 'twitter',
'emojione',
'messenger',
'facebook', 'facebook',
].map((set) => { ].map((set) => {
var props = { var props = {

2
scripts/build.js
View File

@ -6,7 +6,7 @@ var fs = require('fs'),
var { compress } = require('../dist/utils/data') var { compress } = require('../dist/utils/data')
var categories = [ var categories = [
['Smileys & Emotion', 'people'], ['Smileys & Emotion', 'smileys'],
['People & Body', 'people'], ['People & Body', 'people'],
['Animals & Nature', 'nature'], ['Animals & Nature', 'nature'],
['Food & Drink', 'foods'], ['Food & Drink', 'foods'],

2
src/components/picker/nimble-picker.js
View File

@ -23,7 +23,7 @@ const I18N = {
search: 'Search Results', search: 'Search Results',
recent: 'Frequently Used', recent: 'Frequently Used',
smileys: 'Smileys & Emotion', smileys: 'Smileys & Emotion',
people: 'People & People', people: 'People & Body',
nature: 'Animals & Nature', nature: 'Animals & Nature',
foods: 'Food & Drink', foods: 'Food & Drink',
activity: 'Activity', activity: 'Activity',