Return skin emojis in search. Refactor getEmojiDataFromNative

src/components/picker/nimble-picker.js

@@ -495,6 +495,7 @@ export default class NimblePicker extends React.PureComponent {
         skinEmoji,
         notFound,
         notFoundEmoji,
+        set,
       } = this.props,
       { skin } = this.state,
       width = perLine * (emojiSize + 12) + 12 + 2 + measureScrollbar()
@@ -522,6 +523,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/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

@@ -136,37 +136,46 @@ function getData(emoji, skin, set, data) {
 }
 
 function getEmojiDataFromNative(nativeString, set, data) {
-    if (data.compressed) {
-        uncompress(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()
     }
 
-    const skinTones = ['', '🏻', '🏼', '🏽', '🏾', '🏿']
-
-    let skin
-    let baseNativeString = nativeString
-
-    skinTones.forEach((skinTone) => {
-        baseNativeString = baseNativeString.replace(skinTone, '')
-        if (nativeString.indexOf(skinTone) > 0) {
-            skin = skinTones.indexOf(skinTone) + 1
-        }
-    })
-
-    const emojiData = Object.values(data.emojis).find((emoji) => {
-        if (emoji.variations && emoji.variations.length) {
-            emoji.unifed = emoji.variations.shift()
-        }
-
-        return unifiedToNative(emoji.unified) === baseNativeString
-    })
-
-    if (!emojiData) {
-        return null
+    if (skin && emoji.skin_variations && emoji.skin_variations[skinCode]) {
+      emoji.unified = emoji.skin_variations[skinCode].unified
     }
 
-    emojiData.id = emojiData.short_names[0]
+    return unifiedToNative(emoji.unified) === baseNativeString
+  })
 
-    return getSanitizedData(emojiData, skin, set, data)
+  if (!emojiData) {
+    return null
+  }
+
+  emojiData.id = emojiData.short_names[0]
+
+  return getSanitizedData(emojiData, skin, set, data)
 }
 
 function uniq(arr) {