Merge pull request #321 from pederjohnsen/return_skin_emoji_on_search

Return skin emoji on search

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

@@ -0,0 +1,24 @@
+import NimbleEmojiIndex from '../nimble-emoji-index.js'
+import store from '../../store'
+
+import data from '../../../../data/all'
+
+const nimbleEmojiIndex = new NimbleEmojiIndex(data);
+
+function getEmojiData(skinTone) {
+  store.update({skin: skinTone})
+
+  return nimbleEmojiIndex.search('thumbsup')[0]
+}
+
+test('should return emojis with skin tone 1', () => {
+  const skinTone = 1
+  const emoji = getEmojiData(skinTone)
+  expect(emoji.skin).toEqual(skinTone)
+})
+
+test('should return emojis with skin tone 6', () => {
+  const skinTone = 6
+  const emoji = getEmojiData(skinTone)
+  expect(emoji.skin).toEqual(skinTone)
+})

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, 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

@@ -104,7 +104,7 @@ function getData(emoji, skin, set, data) {
   emojiData.emoticons || (emojiData.emoticons = [])
   emojiData.variations || (emojiData.variations = [])
 
-  if (emojiData.skin_variations && skin > 1 && set) {
+  if (emojiData.skin_variations && skin > 1) {
     emojiData = JSON.parse(_JSON.stringify(emojiData))
 
     var skinKey = SKINS[skin - 1],
@@ -115,8 +115,9 @@ function getData(emoji, skin, set, data) {
     }
 
     if (
+      (set &&
       variationData[`has_img_${set}`] == undefined ||
-      variationData[`has_img_${set}`]
+      variationData[`has_img_${set}`]) || !set
     ) {
       emojiData.skin_tone = skin
 

stories/index.js

@@ -11,7 +11,8 @@ import {
   color,
 } from '@storybook/addon-knobs'
 
-import { Picker, Emoji, emojiIndex } from '../dist'
+import { Picker, Emoji, emojiIndex, NimbleEmojiIndex } from '../dist'
+import data from '../data/all.json'
 import '../css/emoji-mart.css'
 
 const SETS = ['apple', 'google', 'twitter', 'emojione', 'messenger', 'facebook']
@@ -214,3 +215,30 @@ storiesOf('Headless Search', module)
       </div>
     )
   })
+
+  .add('With skin tone from store', () => {
+    const nimbleEmojiIndex = new NimbleEmojiIndex(data)
+    let results = nimbleEmojiIndex.search(text('Search', 'thumbs'), {
+      custom: CUSTOM_EMOJIS,
+    })
+    if (!results) {
+      return null
+    }
+
+    return (
+      <div>
+        {results.map((emoji) => {
+          return (
+            <span key={emoji.id} style={{ marginLeft: '1.4em' }}>
+              <Emoji
+                native={true}
+                emoji={emoji}
+                skin={emoji.skin || 1}
+                size={48}
+              />
+            </span>
+          )
+        })}
+      </div>
+    )
+  })