Merge pull request #250 from pederjohnsen/get_emoji_data_from_native

Get emoji data from native
nolan/issue-325
Nolan Lawson 2019-03-23 15:04:59 -07:00 committed by GitHub
commit 7d8e2458d9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 139 additions and 1 deletions

View File

@ -301,6 +301,36 @@ emojiIndex.search('christmas').map((o) => o.native)
// => [🎄, 🎅🏼, 🔔, 🎁, ⛄️, ❄️]
```
## Get emoji data from Native
You can get emoji data from native emoji unicode using the `getEmojiDataFromNative` util function.
```js
import { getEmojiDataFromNative, Emoji } from 'emoji-mart'
import data from 'emoji-mart/data/all.json'
const emojiData = getEmojiDataFromNative('🏊🏽‍♀️', 'apple', data)
<Emoji
emoji={emojiData}
set={'apple'}
skin={emojiData.skin || 1}
size={48}
/>
```
#### Example of `emojiData` object:
```js
emojiData: {
"id": "woman-swimming",
"name": "Woman Swimming",
"colons": ":woman-swimming::skin-tone-4:",
"emoticons": [],
"unified": "1f3ca-1f3fd-200d-2640-fe0f",
"skin": 4,
"native": "🏊🏽‍♀️"
}
```
### With custom data
```js
import data from 'emoji-mart/datasets/messenger'

View File

@ -4,6 +4,7 @@ export {
} from './utils/emoji-index/nimble-emoji-index'
export { default as store } from './utils/store'
export { default as frequently } from './utils/frequently'
export { getEmojiDataFromNative } from './utils'
export { default as Picker } from './components/picker/picker'
export { default as NimblePicker } from './components/picker/nimble-picker'

View File

@ -0,0 +1,27 @@
import React from 'react'
import { getEmojiDataFromNative } from '..'
import data from '../../../data/apple'
test('will find man lifting weights with skin tone 6', () => {
const emojiData = getEmojiDataFromNative('🏋🏿‍♂️', 'apple', data)
expect(emojiData.id).toEqual('man-lifting-weights')
expect(emojiData.skin).toEqual(6)
})
test('will find woman swimming with skin tone 4', () => {
const emojiData = getEmojiDataFromNative('🏊🏽‍♀️', 'apple', data)
expect(emojiData.id).toEqual('woman-swimming')
expect(emojiData.skin).toEqual(4)
})
test('will find person in lotus positions', () => {
const emojiData = getEmojiDataFromNative('🧘', 'apple', data)
expect(emojiData.id).toEqual('person_in_lotus_position')
expect(emojiData.skin).toEqual(1)
})
test('returns null if no match', () => {
const emojiData = getEmojiDataFromNative('', 'apple', data)
expect(emojiData).toEqual(null)
})

View File

@ -1,5 +1,6 @@
import { buildSearch } from './data'
import stringFromCodePoint from '../polyfills/stringFromCodePoint'
import { uncompress } from './data'
const _JSON = JSON
@ -137,6 +138,52 @@ function getData(emoji, skin, set, data) {
return emojiData
}
function getEmojiDataFromNative(nativeString, set, data) {
if (data.compressed) {
uncompress(data)
}
const skinTones = ['🏻', '🏼', '🏽', '🏾', '🏿']
const skinCodes = ['1F3FB', '1F3FC', '1F3FD', '1F3FE', '1F3FF']
let skin
let skinCode
let baseNativeString = nativeString
skinTones.forEach((skinTone, skinToneIndex) => {
if (nativeString.indexOf(skinTone) > 0) {
skin = skinToneIndex + 2
skinCode = skinCodes[skinToneIndex]
}
})
let emojiData
for (let id in data.emojis) {
let emoji = data.emojis[id]
let emojiUnified = emoji.unified
if (emoji.variations && emoji.variations.length) {
emojiUnified = emoji.variations.shift()
}
if (skin && emoji.skin_variations && emoji.skin_variations[skinCode]) {
emojiUnified = emoji.skin_variations[skinCode].unified
}
if (unifiedToNative(emojiUnified) === baseNativeString) emojiData = emoji
}
if (!emojiData) {
return null
}
emojiData.id = emojiData.short_names[0]
return getSanitizedData(emojiData, skin, set, data)
}
function uniq(arr) {
return arr.reduce((acc, item) => {
if (acc.indexOf(item) === -1) {
@ -214,6 +261,7 @@ function throttleIdleTask(func) {
export {
getData,
getEmojiDataFromNative,
getSanitizedData,
uniq,
intersect,

View File

@ -11,7 +11,7 @@ import {
color,
} from '@storybook/addon-knobs'
import { Picker, Emoji, emojiIndex, NimbleEmojiIndex } from '../dist'
import { Picker, Emoji, emojiIndex, NimbleEmojiIndex, getEmojiDataFromNative } from '../dist'
import data from '../data/all.json'
import '../css/emoji-mart.css'
@ -242,3 +242,35 @@ storiesOf('Headless Search', module)
</div>
)
})
storiesOf('Get emoji data from Native', module)
.addDecorator(withKnobs)
.add('Default', () => {
const emojiData = getEmojiDataFromNative(
text('Unicode', '🏋🏿‍♂️'),
select('Emoji pack', SETS, SETS[0]),
data
)
if (!emojiData) {
return (
<div>
Couldn`t find any emoji data from native...
</div>
)
}
return (
<div>
<Emoji
emoji={emojiData}
set={select('Emoji pack', SETS, SETS[0])}
skin={emojiData.skin || 1}
size={48}
/>
<pre>
emojiData: {JSON.stringify(emojiData, null, 2)}
</pre>
</div>
)
})