Get emoji data from native

.editorconfig

@@ -0,0 +1,2 @@
+[*]
+indent_size = 2

README.md

@@ -300,6 +300,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'
+
+let emojiData = getEmojiDataFromNative('🏊🏽‍♀️', 'apple', data)
+
+<Emoji
+  skin={emojiData.skin || 0}
+  set={select('Emoji pack', SETS, SETS[0])}
+  emoji={emojiData}
+  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'

src/components/picker/nimble-picker.js

@@ -522,6 +522,7 @@ export default class NimblePicker extends React.PureComponent {
           ref={this.setSearchRef}
           onSearch={this.handleSearch}
           data={this.data}
+          set={set}
           i18n={this.i18n}
           emojisToShowFilter={emojisToShowFilter}
           include={include}

src/components/search.js

@@ -17,7 +17,7 @@ export default class Search extends React.PureComponent {
     }
 
     this.data = props.data
-    this.emojiIndex = new NimbleEmojiIndex(this.data)
+    this.emojiIndex = new NimbleEmojiIndex(this.data, props.set)
     this.setRef = this.setRef.bind(this)
     this.clear = this.clear.bind(this)
     this.handleKeyUp = this.handleKeyUp.bind(this)

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'

src/utils/emoji-index/nimble-emoji-index.js

@@ -1,13 +1,15 @@
 import { getData, getSanitizedData, intersect } from '..'
 import { uncompress } from '../data'
+import store from '../store'
 
 export default class NimbleEmojiIndex {
-  constructor(data) {
+  constructor(data, set) {
     if (data.compressed) {
       uncompress(data)
     }
 
     this.data = data || {}
+    this.set = set || null
     this.originalPool = {}
     this.index = {}
     this.emojis = {}
@@ -20,7 +22,7 @@ export default class NimbleEmojiIndex {
   buildIndex() {
     for (let emoji in this.data.emojis) {
       let emojiData = this.data.emojis[emoji],
-        { short_names, emoticons } = emojiData,
+        { short_names, emoticons, skin_variations } = emojiData,
         id = short_names[0]
 
       if (emoticons) {
@@ -33,7 +35,16 @@ export default class NimbleEmojiIndex {
         })
       }
 
-      this.emojis[id] = getSanitizedData(id, null, null, this.data)
+      // If skin variations include them
+      if (skin_variations) {
+        this.emojis[id] = {}
+        for (let skinTone = 1; skinTone <= 6; skinTone++) {
+          this.emojis[id][skinTone] = getSanitizedData({id: id, skin: skinTone}, skinTone, this.set, this.data)
+        }
+      } else {
+        this.emojis[id] = getSanitizedData(id, null, this.set, this.data)
+      }
+
       this.originalPool[id] = emojiData
     }
   }
@@ -70,6 +81,8 @@ export default class NimbleEmojiIndex {
     if (this.customEmojisList != custom)
       this.addCustomToPool(custom, this.originalPool)
 
+    const skinTone = store.get('skin') || 1;
+
     maxResults || (maxResults = 75)
     include || (include = [])
     exclude || (exclude = [])
@@ -79,7 +92,7 @@ export default class NimbleEmojiIndex {
 
     if (value.length) {
       if (value == '-' || value == '-1') {
-        return [this.emojis['-1']]
+        return [this.emojis['-1'][skinTone]]
       }
 
       var values = value.toLowerCase().split(/[\s|,|\-|_]+/),
@@ -148,7 +161,11 @@ export default class NimbleEmojiIndex {
                   let score = subIndex + 1
                   if (sub == id) score = 0
 
-                  aIndex.results.push(this.emojis[id])
+                  if (this.emojis[id] && this.emojis[id][skinTone]) {
+                    aIndex.results.push(this.emojis[id][skinTone])
+                  } else {
+                    aIndex.results.push(this.emojis[id])
+                  }
                   aIndex.pool[id] = emoji
 
                   scores[id] = score

src/utils/index.js

@@ -1,5 +1,6 @@
 import { buildSearch } from './data'
 import stringFromCodePoint from '../polyfills/stringFromCodePoint'
+import { uncompress } from './data'
 
 const _JSON = JSON
 
@@ -134,6 +135,49 @@ 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) => {
+    if (nativeString.indexOf(skinTone) > 0) {
+      const skinToneIndex = skinTones.indexOf(skinTone)
+      skin = skinToneIndex + 1
+      skinCode = skinCodes[skinToneIndex]
+    }
+  })
+
+  const emojiData = Object.values(data.emojis).find((emoji) => {
+    emoji = JSON.parse(_JSON.stringify(emoji))
+
+    if (emoji.variations && emoji.variations.length) {
+        emoji.unified = emoji.variations.shift()
+    }
+
+    if (skin && emoji.skin_variations && emoji.skin_variations[skinCode]) {
+      emoji.unified = emoji.skin_variations[skinCode].unified
+    }
+
+    return unifiedToNative(emoji.unified) === baseNativeString
+  })
+
+  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) {
@@ -211,6 +255,7 @@ function throttleIdleTask(func) {
 
 export {
   getData,
+  getEmojiDataFromNative,
   getSanitizedData,
   uniq,
   intersect,

stories/index.js

@@ -11,7 +11,8 @@ import {
   color,
 } from '@storybook/addon-knobs'
 
-import { Picker, Emoji, emojiIndex } from '../dist'
+import { Picker, Emoji, emojiIndex, getEmojiDataFromNative } from '../dist'
+import data from '../data/all.json'
 import '../css/emoji-mart.css'
 
 const SETS = ['apple', 'google', 'twitter', 'emojione', 'messenger', 'facebook']
@@ -214,3 +215,35 @@ storiesOf('Headless Search', module)
       </div>
     )
   })
+
+storiesOf('Get emoji data from Native', module)
+  .addDecorator(withKnobs)
+  .add('Default', () => {
+    let emojiData = getEmojiDataFromNative(
+      text('Unicode', '🏊🏽‍♀️'),
+      select('Emoji pack', SETS, SETS[0]),
+      data
+    )
+    if (!emojiData) {
+      return (
+        <div>
+          Couldn`t find any emoji data...
+        </div>
+      )
+    }
+
+    return (
+      <div>
+        <Emoji
+          skin={emojiData.skin || 0}
+          set={select('Emoji pack', SETS, SETS[0])}
+          emoji={emojiData}
+          size={48}
+        />
+
+        <pre>
+          emojiData: {JSON.stringify(emojiData, null, 2)}
+        </pre>
+      </div>
+    )
+  })