diff --git a/README.md b/README.md index 9ccd2bb..8cab778 100644 --- a/README.md +++ b/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) + + +``` + +#### 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' diff --git a/src/index.js b/src/index.js index 57d4bfb..6563e64 100644 --- a/src/index.js +++ b/src/index.js @@ -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' diff --git a/src/utils/__tests__/get-emoji-data-from-native.test.js b/src/utils/__tests__/get-emoji-data-from-native.test.js new file mode 100644 index 0000000..72efc30 --- /dev/null +++ b/src/utils/__tests__/get-emoji-data-from-native.test.js @@ -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) +}) diff --git a/src/utils/index.js b/src/utils/index.js index f208be5..6862779 100644 --- a/src/utils/index.js +++ b/src/utils/index.js @@ -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, diff --git a/stories/index.js b/stories/index.js index 919122d..5246092 100644 --- a/stories/index.js +++ b/stories/index.js @@ -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) ) }) + +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 ( +
+ Couldn`t find any emoji data from native... +
+ ) + } + + return ( +
+ + +
+          emojiData: {JSON.stringify(emojiData, null, 2)}
+        
+
+ ) + })