Reimplement getEmojiDataFromNative [Close #673]

README.md

@@ -11,6 +11,7 @@
 - [🏪 Picker](#-picker)
 - [🙃 Emoji component](#-emoji-component)
 - [🕵️‍♀️ Headless search](#%EF%B8%8F%EF%B8%8F-headless-search)
+- [🔬 Get emoji data from native](#-get-emoji-data-from-native)
 - [🗺 Internationalization](#-internationalization)
 - [📚 Examples](#-examples)
 - [🤓 Built for modern browsers](#-built-for-modern-browsers)
@@ -214,7 +215,7 @@ Then you can use the emoji component in your HTML / JSX.
 | **skin** | `1` | The emoji skin tone: `1`, `2`, `3`, `4`, `5`, `6` |
 
 ## 🕵️‍♀️ Headless search
-You can search without the Picker. Just like the emoji component, `data` needs to be initialized first in order to use the search index. It can also be used to return emoji data when providing a native emoji.
+You can search without the Picker. Just like the emoji component, `data` needs to be initialized first in order to use the search index.
 
 ```js
 import data from '@emoji-mart/data'
@@ -232,7 +233,27 @@ async function search(value) {
 }
 
 search('christmas') // => ['🎄', '🇨🇽', '🧑‍🎄', '🔔', '🤶', '🎁', '☃️', '❄️', '🎅', '⛄']
-search('🤞🏼') // => ['🤞']
+```
+
+## 🔬 Get emoji data from native
+You can get emoji data from a native emoji. This is useful if you want to get the emoji ID from a native emoji. Just like the emoji component, `data` needs to be initialized first in order to retrieve the emoji data.
+
+```js
+import data from '@emoji-mart/data'
+import { init, getEmojiDataFromNative } from 'emoji-mart'
+
+init({ data })
+
+getEmojiDataFromNative('🤞🏿').then(console.log)
+/* {
+  aliases: ['hand_with_index_and_middle_fingers_crossed'],
+  id: 'crossed_fingers',
+  keywords: ['hand', 'with', 'index', 'and', 'middle', 'good', 'lucky'],
+  name: 'Crossed Fingers',
+  native: '🤞🏿',
+  shortcodes: ':crossed_fingers::skin-tone-6:',
+  unified: '1f91e-1f3ff',
+} */
 ```
 
 ## 🗺 Internationalization

packages/emoji-mart/README.md

@@ -11,6 +11,7 @@
 - [🏪 Picker](#-picker)
 - [🙃 Emoji component](#-emoji-component)
 - [🕵️‍♀️ Headless search](#%EF%B8%8F%EF%B8%8F-headless-search)
+- [🔬 Get emoji data from native](#-get-emoji-data-from-native)
 - [🗺 Internationalization](#-internationalization)
 - [📚 Examples](#-examples)
 - [🤓 Built for modern browsers](#-built-for-modern-browsers)
@@ -25,7 +26,7 @@ Data required for the picker to work has been completely decoupled from the libr
 - **Cons:** Slower initial page load (bigger file to load)
 
 ```sh
-yarn install @emoji-mart/data
+yarn add @emoji-mart/data
 ```
 
 ```js
@@ -214,7 +215,7 @@ Then you can use the emoji component in your HTML / JSX.
 | **skin** | `1` | The emoji skin tone: `1`, `2`, `3`, `4`, `5`, `6` |
 
 ## 🕵️‍♀️ Headless search
-You can search without the Picker. Just like the emoji component, `data` needs to be initialized first in order to use the search index. It can also be used to return emoji data when providing a native emoji.
+You can search without the Picker. Just like the emoji component, `data` needs to be initialized first in order to use the search index.
 
 ```js
 import data from '@emoji-mart/data'
@@ -232,7 +233,27 @@ async function search(value) {
 }
 
 search('christmas') // => ['🎄', '🇨🇽', '🧑‍🎄', '🔔', '🤶', '🎁', '☃️', '❄️', '🎅', '⛄']
-search('🤞🏼') // => ['🤞']
+```
+
+## 🔬 Get emoji data from native
+You can get emoji data from a native emoji. This is useful if you want to get the emoji ID from a native emoji. Just like the emoji component, `data` needs to be initialized first in order to retrieve the emoji data.
+
+```js
+import data from '@emoji-mart/data'
+import { init, getEmojiDataFromNative } from 'emoji-mart'
+
+init({ data })
+
+getEmojiDataFromNative('🤞🏿').then(console.log)
+/* {
+  aliases: ['hand_with_index_and_middle_fingers_crossed'],
+  id: 'crossed_fingers',
+  keywords: ['hand', 'with', 'index', 'and', 'middle', 'good', 'lucky'],
+  name: 'Crossed Fingers',
+  native: '🤞🏿',
+  shortcodes: ':crossed_fingers::skin-tone-6:',
+  unified: '1f91e-1f3ff',
+} */
 ```
 
 ## 🗺 Internationalization

packages/emoji-mart/src/components/Picker/Picker.js

@@ -1,6 +1,6 @@
 import { Component, createRef } from 'preact'
 
-import { deepEqual, sleep } from '../../utils'
+import { deepEqual, sleep, getEmojiData } from '../../utils'
 import { Data, I18n, init } from '../../config'
 import { SearchIndex, Store, FrequentlyUsed } from '../../helpers'
 import Icons from '../../icons'
@@ -586,27 +586,7 @@ export default class Picker extends Component {
     }
 
     if (emoji) {
-      const skin = emoji.skins[this.state.skin - 1] || emoji.skins[0]
-      const emojiData = {
-        id: emoji.id,
-        name: emoji.name,
-        native: skin.native,
-        unified: skin.unified,
-        keywords: emoji.keywords,
-        shortcodes: skin.shortcodes || emoji.shortcodes,
-      }
-
-      if (skin.src) {
-        emojiData.src = skin.src
-      }
-
-      if (emoji.aliases && emoji.aliases.length) {
-        emojiData.aliases = emoji.aliases
-      }
-
-      if (emoji.emoticons && emoji.emoticons.length) {
-        emojiData.emoticons = emoji.emoticons
-      }
+      const emojiData = getEmojiData(emoji, { skinIndex: this.state.skin - 1 })
 
       if (this.props.maxFrequentRows) {
         FrequentlyUsed.add(emojiData, this.props)

packages/emoji-mart/src/index.js

@@ -4,3 +4,5 @@ export { EmojiElement as Emoji } from './components/Emoji'
 export { SearchIndex, FrequentlyUsed } from './helpers'
 
 export { init, Data, I18n } from './config'
+
+export { getEmojiDataFromNative } from './utils'

packages/emoji-mart/src/utils.js

@@ -1,3 +1,5 @@
+import { SearchIndex } from './helpers'
+
 export function deepEqual(a, b) {
   return (
     Array.isArray(a) &&
@@ -12,3 +14,50 @@ export async function sleep(frames = 1) {
     await new Promise(requestAnimationFrame)
   }
 }
+
+export function getEmojiData(emoji, { skinIndex } = {}) {
+  const skin = emoji.skins[skinIndex] || emoji.skins[0]
+  const emojiData = {
+    id: emoji.id,
+    name: emoji.name,
+    native: skin.native,
+    unified: skin.unified,
+    keywords: emoji.keywords,
+    shortcodes: skin.shortcodes || emoji.shortcodes,
+  }
+
+  if (skin.src) {
+    emojiData.src = skin.src
+  }
+
+  if (emoji.aliases && emoji.aliases.length) {
+    emojiData.aliases = emoji.aliases
+  }
+
+  if (emoji.emoticons && emoji.emoticons.length) {
+    emojiData.emoticons = emoji.emoticons
+  }
+
+  return emojiData
+}
+
+export async function getEmojiDataFromNative(nativeString) {
+  const results = await SearchIndex.search(nativeString, {
+    maxResults: 1,
+    caller: 'getEmojiDataFromNative',
+  })
+  if (!results || !results.length) return null
+
+  const emoji = results[0]
+  let skinIndex = 0
+
+  for (let skin of emoji.skins) {
+    if (skin.native == nativeString) {
+      break
+    }
+
+    skinIndex++
+  }
+
+  return getEmojiData(emoji, { skinIndex })
+}