Merge pull request #250 from pederjohnsen/get_emoji_data_from_native
Get emoji data from nativenolan/issue-325
commit
7d8e2458d9
30
README.md
30
README.md
|
@ -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'
|
||||
|
|
|
@ -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'
|
||||
|
|
|
@ -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)
|
||||
})
|
|
@ -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,
|
||||
|
|
|
@ -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>
|
||||
)
|
||||
})
|
||||
|
|
Loading…
Reference in New Issue