Merge remote-tracking branch 'emojimart/master' into get_emoji_data_from_native

.editorconfig

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

.gitignore

@@ -5,3 +5,4 @@ dist-es/
 dist-modern/
 stats.json
 report.html
+package-lock.json

.travis.yml

@@ -0,0 +1,10 @@
+language: node_js
+node_js:
+- 10
+sudo: false
+script: yarn test
+before_script:
+- yarn prettier:check
+branches:
+  only:
+  - master

README.md

@@ -1,6 +1,7 @@
 <div align="center">
   <br><b>Emoji Mart</b> is a Slack-like customizable<br>emoji picker component for React
   <br><a href="https://missive.github.io/emoji-mart">Demo</a> • <a href="https://github.com/missive/emoji-mart/releases">Changelog</a>
+  <br><a href="https://travis-ci.org/nolanlawson/emoji-mart"><img src="https://travis-ci.org/nolanlawson/emoji-mart.svg?branch=master" alt="Build Status"></a>
   <br><br><img width="338" alt="picker" src="https://user-images.githubusercontent.com/436043/43481399-d9b60acc-94d3-11e8-9b3b-e5f2db8f0bd1.png">
   <br><br><a title="Team email, team chat, team tasks, one app" href="https://missiveapp.com"><img width="30" alt="Missive | Team email, team chat, team tasks, one app" src="https://user-images.githubusercontent.com/436043/32532559-0d15ddfc-c400-11e7-8a24-64d0157d0cb0.png"></a>
   <br>Brought to you by the <a title="Team email, team chat, team tasks, one app" href="https://missiveapp.com">Missive</a> team
@@ -405,6 +406,13 @@ Apple / Google / Twitter / EmojiOne / Messenger / Facebook
 ## Not opinionated
 **Emoji Mart** doesn’t automatically insert anything into a text input, nor does it show or hide itself. It simply returns an `emoji` object. It’s up to the developer to mount/unmount (it’s fast!) and position the picker. You can use the returned object as props for the `EmojiMart.Emoji` component. You could also use `emoji.colons` to insert text into a textarea or `emoji.native` to use the emoji.
 
+## Usage outside React
+
+**Emoji Mart** can be used with React alternatives such as [Preact](https://preactjs.com/), [Inferno](https://www.infernojs.org/), and [react-lite](https://github.com/Lucifier129/react-lite).
+
+Furthermore, you can use it as a [custom element](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements) using [remount](https://github.com/rstacruz/remount), meaning that you can use it within any JavaScript framework (or vanilla JS).
+
+For an end-to-end example of how to do this, see [emoji-mart-outside-react](https://github.com/nolanlawson/emoji-mart-outside-react).
 
 ## Optimizing for production
 

package.json

@@ -49,7 +49,7 @@
     "inflection": "1.10.0",
     "jest": "^23.0.0",
     "mkdirp": "0.5.1",
-    "prettier": "1.11.1",
+    "prettier": "^1.16.4",
     "react": "^16.0.0",
     "react-dom": "^16.0.0",
     "react-test-renderer": "^16.8.4",
@@ -76,6 +76,7 @@
     "storybook": "start-storybook -p 6006",
     "build-storybook": "build-storybook",
     "prettier": "prettier --write \"{src,scripts}/**/*.js\"",
+    "prettier:check": "prettier --check \"{src,scripts}/**/*.js\"",
     "prepare": "npm run build:dist"
   },
   "size-limit": [

src/components/category.js

@@ -210,16 +210,15 @@ export default class Category extends React.Component {
             ))}
         </ul>
 
-        {emojis &&
+        {emojis && !emojis.length && (
-          !emojis.length && (
+          <NotFound
-            <NotFound
+            i18n={i18n}
-              i18n={i18n}
+            notFound={notFound}
-              notFound={notFound}
+            notFoundEmoji={notFoundEmoji}
-              notFoundEmoji={notFoundEmoji}
+            data={this.data}
-              data={this.data}
+            emojiProps={emojiProps}
-              emojiProps={emojiProps}
+          />
-            />
+        )}
-          )}
       </section>
     )
   }

src/components/search.js

@@ -94,9 +94,9 @@ export default class Search extends React.PureComponent {
           autoFocus={autoFocus}
         />
         {/*
-          * Use a <label> in addition to the placeholder for accessibility, but place it off-screen
+         * Use a <label> in addition to the placeholder for accessibility, but place it off-screen
-          * http://www.maxability.co.in/2016/01/placeholder-attribute-and-why-it-is-not-accessible/
+         * http://www.maxability.co.in/2016/01/placeholder-attribute-and-why-it-is-not-accessible/
-          */}
+         */}
         <label className="emoji-mart-sr-only" htmlFor={inputId}>
           {i18n.search}
         </label>

src/polyfills/stringFromCodePoint.js

@@ -30,7 +30,7 @@ export default _String.fromCodePoint ||
         // http://mathiasbynens.be/notes/javascript-encoding#surrogate-formulae
         codePoint -= 0x10000
         highSurrogate = (codePoint >> 10) + 0xd800
-        lowSurrogate = codePoint % 0x400 + 0xdc00
+        lowSurrogate = (codePoint % 0x400) + 0xdc00
         codeUnits.push(highSurrogate, lowSurrogate)
       }
       if (index + 1 === length || codeUnits.length > MAX_SIZE) {

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,21 @@ 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 +86,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 +97,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 +166,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

@@ -32,6 +32,7 @@ function sanitize(emoji) {
     return {
       id,
       name,
+      short_names,
       colons,
       emoticons,
       custom,
@@ -104,7 +105,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 +116,10 @@ function getData(emoji, skin, set, data) {
     }
 
     if (
-      variationData[`has_img_${set}`] == undefined ||
+      (set &&
-      variationData[`has_img_${set}`]
+        (variationData[`has_img_${set}`] == undefined ||
+          variationData[`has_img_${set}`])) ||
+      !set
     ) {
       emojiData.skin_tone = skin
 

stories/index.js

@@ -11,7 +11,7 @@ import {
   color,
 } from '@storybook/addon-knobs'
 
-import { Picker, Emoji, emojiIndex, getEmojiDataFromNative } from '../dist'
+import { Picker, Emoji, emojiIndex, NimbleEmojiIndex, getEmojiDataFromNative } from '../dist'
 import data from '../data/all.json'
 import '../css/emoji-mart.css'
 
@@ -216,6 +216,33 @@ storiesOf('Headless Search', module)
     )
   })
 
+  .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>
+    )
+  })
+
 storiesOf('Get emoji data from Native', module)
   .addDecorator(withKnobs)
   .add('Default', () => {

yarn.lock

@@ -6805,10 +6805,10 @@ preserve@^0.2.0:
   resolved "https://registry.yarnpkg.com/preserve/-/preserve-0.2.0.tgz#815ed1f6ebc65926f865b310c0713bcb3315ce4b"
   integrity sha1-gV7R9uvGWSb4ZbMQwHE7yzMVzks=
 
-prettier@1.11.1:
+prettier@^1.16.4:
-  version "1.11.1"
+  version "1.16.4"
-  resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.11.1.tgz#61e43fc4cd44e68f2b0dfc2c38cd4bb0fccdcc75"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.16.4.tgz#73e37e73e018ad2db9c76742e2647e21790c9717"
-  integrity sha512-T/KD65Ot0PB97xTrG8afQ46x3oiVhnfGjGESSI9NWYcG92+OUPZKkwHqGWXH2t9jK1crnQjubECW0FuOth+hxw==
+  integrity sha512-ZzWuos7TI5CKUeQAtFd6Zhm2s6EpAD/ZLApIhsF9pRvRtM1RFo61dM/4MSRUA0SuLugA/zgrZD8m0BaY46Og7g==
 
 pretty-error@^2.0.2:
   version "2.1.1"