Merge branch 'feature-unicode-12'

2020-03-16 09:12:25 -04:00 · 2020-03-16 09:12:25 -04:00 · 5c083a8026
parent 113b07abcf f8ce5a6814
commit 5c083a8026
21 changed files with 280 additions and 807 deletions
--- a/README.md
+++ b/README.md
@ -17,7 +17,7 @@
 import 'emoji-mart/css/emoji-mart.css'
 import { Picker } from 'emoji-mart'

-<Picker set='emojione' />
+<Picker set='apple' />
 <Picker onSelect={this.addEmoji} />
 <Picker title='Pick your emoji…' emoji='point_up' />
 <Picker style={{ position: 'absolute', bottom: '20px', right: '20px' }} />
@ -41,7 +41,7 @@ import { Picker } from 'emoji-mart'
 | **perLine** | | `9` | Number of emojis per line. While there’s no minimum or maximum, this will affect the picker’s width. This will set *Frequently Used* length as well (`perLine * 4`) |
 | **i18n** | | [`{…}`](#i18n) | [An object](#i18n) containing localized strings |
 | **native** | | `false` | Renders the native unicode emoji |
-| **set** | | `apple` | The emoji set: `'apple', 'google', 'twitter', 'emojione', 'messenger', 'facebook'` |
+| **set** | | `apple` | The emoji set: `'apple', 'google', 'twitter', 'facebook'` |
 | **sheetSize** | | `64` | The emoji [sheet size](#sheet-sizes): `16, 20, 32, 64` |
 | **backgroundImageFn** | | ```((set, sheetSize) => …)``` | A Fn that returns that image sheet to use for emojis. Useful for avoiding a request if you have the sheet locally. |
 | **emojisToShowFilter** | | ```((emoji) => true)``` | A Fn to choose whether an emoji should be displayed or not |
@ -66,7 +66,8 @@ skintext: 'Choose your default skin tone',
 categories: {
  search: 'Search Results',
  recent: 'Frequently Used',
-  people: 'Smileys & People',
+  smileys: 'Smileys & Emotion',
+  people: 'People & Body',
  nature: 'Animals & Nature',
  foods: 'Food & Drink',
  activity: 'Activity',
@ -94,33 +95,29 @@ Sheets are served from [unpkg](https://unpkg.com), a global CDN that serves file

 | Set       | Size (`sheetSize: 16`) | Size (`sheetSize: 20`) | Size (`sheetSize: 32`) | Size (`sheetSize: 64`) |
 | --------- | ---------------------- | ---------------------- | ---------------------- | ---------------------- |
-| apple     | 334 KB                 | 459 KB                 | 1.08 MB                | 2.94 MB                |
-| emojione  | 315 KB                 | 435 KB                 | 1020 KB                | 2.33 MB                |
-| facebook  | 322 KB                 | 439 KB                 | 1020 KB                | 2.50 MB                |
-| google    | 301 KB                 | 409 KB                 |  907 KB                | 2.17 MB                |
-| messenger | 325 KB                 | 449 KB                 | 1.05 MB                | 2.69 MB                |
-| twitter   | 288 KB                 | 389 KB                 |  839 KB                | 1.82 MB                |
+| apple     | 407 KB                 | 561 KB                 | 1.34 MB                | 3.60 MB                |
+| facebook  | 416 KB                 | 579 KB                 | 1.38 MB                | 3.68 MB                |
+| google    | 362 KB                 | 489 KB                 | 1.12 MB                | 2.78 MB                |
+| twitter   | 361 KB                 | 485 KB                 | 1.05 MB                | 2.39 MB                |

 #### Datasets
 While all sets are available by default, you may want to include only a single set data to reduce the size of your bundle.

 | Set       | Size (on disk) |
 | --------- | -------------- |
-| all       | 570 KB         |
-| apple     | 484 KB         |
-| emojione  | 485 KB         |
-| facebook  | 421 KB         |
-| google    | 483 KB         |
-| messenger | 197 KB         |
-| twitter   | 484 KB         |
+| all       | 611 KB         |
+| apple     | 548 KB         |
+| facebook  | 468 KB         |
+| google    | 518 KB         |
+| twitter   | 517 KB         |

 To use these data files (or any other custom data), use the `NimblePicker` component:

 ```js
-import data from 'emoji-mart/data/messenger.json'
+import data from 'emoji-mart/data/google.json'
 import { NimblePicker } from 'emoji-mart'

-<NimblePicker set='messenger' data={data} />
+<NimblePicker set='google' data={data} />
 ```

 #### Examples of `emoji` object:
@ -166,7 +163,7 @@ import { Emoji } from 'emoji-mart'

 <Emoji emoji={{ id: 'santa', skin: 3 }} size={16} />
 <Emoji emoji=':santa::skin-tone-3:' size={16} />
-<Emoji emoji='santa' set='emojione' size={16} />
+<Emoji emoji='santa' set='apple' size={16} />
 ```

 | Prop | Required | Default | Description |
@ -178,7 +175,7 @@ import { Emoji } from 'emoji-mart'
 | **onLeave** | | | Params: `(emoji, event) => {}` |
 | **onOver** | | | Params: `(emoji, event) => {}` |
 | [**fallback**](#unsupported-emojis-fallback) | | | Params: `(emoji, props) => {}` |
-| **set** | | `apple` | The emoji set: `'apple', 'google', 'twitter', 'emojione'` |
+| **set** | | `apple` | The emoji set: `'apple', 'google', 'twitter'` |
 | **sheetSize** | | `64` | The emoji [sheet size](#sheet-sizes): `16, 20, 32, 64` |
 | **backgroundImageFn** | | ```((set, sheetSize) => `https://unpkg.com/emoji-datasource@3.0.0/sheet_${set}_${sheetSize}.png`)``` | A Fn that returns that image sheet to use for emojis. Useful for avoiding a request if you have the sheet locally. |
 | **skin** | | `1` | Skin color: `1, 2, 3, 4, 5, 6` |
@ -186,13 +183,13 @@ import { Emoji } from 'emoji-mart'
 | [**html**](#using-with-dangerouslysetinnerhtml) | | `false` | Returns an HTML string to use with `dangerouslySetInnerHTML` |

 #### Unsupported emojis fallback
-Certain sets don’t support all emojis (i.e. Messenger & Facebook don’t support `:shrug:`). By default the Emoji component will not render anything so that the emojis’ don’t take space in the picker when not available. When using the standalone Emoji component, you can however render anything you want by providing the `fallback` props.
+Certain sets don’t support all emojis. By default the Emoji component will not render anything so that the emojis’ don’t take space in the picker when not available. When using the standalone Emoji component, you can however render anything you want by providing the `fallback` props.

 To have the component render `:shrug:` you would need to:

 ```js
 <Emoji
-  set={'messenger'}
+  set={'apple'}
  emoji={'shrug'}
  size={24}
  fallback={(emoji, props) => {
@ -310,7 +307,7 @@ emojiIndex.search('christmas').map((o) => o.native)

 ### With custom data
 ```js
-import data from 'emoji-mart/datasets/messenger'
+import data from 'emoji-mart/datasets/apple'
 import { NimbleEmojiIndex } from 'emoji-mart'

 let emojiIndex = new NimbleEmojiIndex(data)
@ -406,7 +403,7 @@ It can however be overwritten as per user preference.
 <img width="98" alt="customizable-skin" src="https://user-images.githubusercontent.com/436043/32532883-2c620e7c-c402-11e7-976c-50d32be0566c.png">

 #### Multiple sets supported
-Apple / Google / Twitter / EmojiOne / Messenger / Facebook
+Apple / Google / Twitter / Facebook

 <img width="214" alt="sets" src="https://user-images.githubusercontent.com/436043/33786868-d4226e60-dc38-11e7-840a-e4cf490f5f4a.png">

--- a/css/emoji-mart.css
+++ b/css/emoji-mart.css
@ -186,7 +186,7 @@
 }

 .emoji-mart-emoji-native {
-  font-family: "Segoe UI Emoji", "Segoe UI Symbol", "Segoe UI", "Apple Color Emoji", "Twemoji Mozilla", "Noto Color Emoji", "EmojiOne Color", "Android Emoji";
+  font-family: "Segoe UI Emoji", "Segoe UI Symbol", "Segoe UI", "Apple Color Emoji", "Twemoji Mozilla", "Noto Color Emoji", "Android Emoji";
 }

 .emoji-mart-no-results {
--- a/data/all.json
+++ b/data/all.json
--- a/data/apple.json
+++ b/data/apple.json
--- a/data/emojione.json
+++ b/data/emojione.json
--- a/data/facebook.json
+++ b/data/facebook.json
--- a/data/google.json
+++ b/data/google.json
--- a/data/messenger.json
+++ b/data/messenger.json
--- a/data/twitter.json
+++ b/data/twitter.json
--- a/docs/bundle.js
+++ b/docs/bundle.js
--- a/docs/emoji-mart.css
+++ b/docs/emoji-mart.css
@ -186,7 +186,7 @@
 }

 .emoji-mart-emoji-native {
-  font-family: "Segoe UI Emoji", "Segoe UI Symbol", "Segoe UI", "Apple Color Emoji", "Twemoji Mozilla", "Noto Color Emoji", "EmojiOne Color", "Android Emoji";
+  font-family: "Segoe UI Emoji", "Segoe UI Symbol", "Segoe UI", "Apple Color Emoji", "Twemoji Mozilla", "Noto Color Emoji", "Android Emoji";
 }

 .emoji-mart-no-results {
--- a/docs/index.js
+++ b/docs/index.js
@ -62,8 +62,6 @@ class Example extends React.Component {
            'apple',
            'google',
            'twitter',
-            'emojione',
-            'messenger',
            'facebook',
          ].map((set) => {
            var props = {
--- a/package.json
+++ b/package.json
@ -41,7 +41,7 @@
    "babel-jest": "^24.9.0",
    "babel-loader": "^8.0.0",
    "babel-plugin-transform-define": "^2.0.0",
-    "emoji-datasource": "4.0.4",
+    "emoji-datasource": "5.0.1",
    "emojilib": "^2.2.1",
    "enzyme": "^3.9.0",
    "enzyme-adapter-react-16": "^1.11.2",
@ -84,7 +84,7 @@
  "size-limit": [
    {
      "path": "dist-es/index.js",
-      "limit": "80 KB"
+      "limit": "82 KB"
    }
  ]
 }
--- a/scripts/build-data.js
+++ b/scripts/build-data.js
@ -1,5 +1,5 @@
 const build = require('./build')
-const sets = ['apple', 'emojione', 'facebook', 'google', 'messenger', 'twitter']
+const sets = ['apple', 'facebook', 'google', 'twitter']

 build({ output: 'data/all.json' })

--- a/scripts/build.js
+++ b/scripts/build.js
@ -6,7 +6,8 @@ var fs = require('fs'),
 var { compress } = require('../dist/utils/data')

 var categories = [
-  ['Smileys & People', 'people'],
+  ['Smileys & Emotion', 'smileys'],
+  ['People & Body', 'people'],
  ['Animals & Nature', 'nature'],
  ['Food & Drink', 'foods'],
  ['Activities', 'activity'],
@ -16,7 +17,7 @@ var categories = [
  ['Flags', 'flags'],
 ]

-var sets = ['apple', 'emojione', 'facebook', 'google', 'messenger', 'twitter']
+var sets = ['apple', 'facebook', 'google', 'twitter']

 module.exports = (options) => {
  delete require.cache[require.resolve('emoji-datasource')]
@ -118,6 +119,18 @@ module.exports = (options) => {
    })
    .sort()

+  // Merge “Smileys & Emotion” and “People & Body” into a single category
+  let smileys = data.categories[0]
+  let people = data.categories[1]
+  let smileysAndPeople = { id: 'people', name: 'Smileys & People' }
+  smileysAndPeople.emojis = []
+    .concat(smileys.emojis.slice(0, 114))
+    .concat(people.emojis)
+    .concat(smileys.emojis.slice(114))
+
+  data.categories.unshift(smileysAndPeople)
+  data.categories.splice(1, 2)
+
  fs.writeFile(options.output, JSON.stringify(data), (err) => {
    if (err) throw err
  })
--- a/src/utils/data.js
+++ b/src/utils/data.js
@ -5,9 +5,7 @@ const mapping = {
  has_img_apple: 'd',
  has_img_google: 'e',
  has_img_twitter: 'f',
-  has_img_emojione: 'g',
  has_img_facebook: 'h',
-  has_img_messenger: 'i',
  keywords: 'j',
  sheet: 'k',
  emoticons: 'l',
--- a/src/utils/index.js
+++ b/src/utils/index.js
@ -112,21 +112,23 @@ function getData(emoji, skin, set, data) {
    var skinKey = SKINS[skin - 1],
      variationData = emojiData.skin_variations[skinKey]

-    if (!variationData.variations && emojiData.variations) {
-      delete emojiData.variations
-    }
+    if (variationData) {
+      if (!variationData.variations && emojiData.variations) {
+        delete emojiData.variations
+      }

-    if (
-      (set &&
-        (variationData[`has_img_${set}`] == undefined ||
-          variationData[`has_img_${set}`])) ||
-      !set
-    ) {
-      emojiData.skin_tone = skin
+      if (
+        (set &&
+          (variationData[`has_img_${set}`] == undefined ||
+            variationData[`has_img_${set}`])) ||
+        !set
+      ) {
+        emojiData.skin_tone = skin

-      for (let k in variationData) {
-        let v = variationData[k]
-        emojiData[k] = v
+        for (let k in variationData) {
+          let v = variationData[k]
+          emojiData[k] = v
+        }
      }
    }
  }
--- a/src/utils/shared-default-props.js
+++ b/src/utils/shared-default-props.js
@ -2,8 +2,8 @@ const EmojiDefaultProps = {
  skin: 1,
  set: 'apple',
  sheetSize: 64,
-  sheetColumns: 52,
-  sheetRows: 52,
+  sheetColumns: 57,
+  sheetRows: 57,
  native: false,
  forceSize: false,
  tooltip: false,
--- a/src/utils/shared-props.js
+++ b/src/utils/shared-props.js
@ -14,14 +14,7 @@ const EmojiPropTypes = {
  sheetSize: PropTypes.oneOf([16, 20, 32, 64]),
  sheetColumns: PropTypes.number,
  sheetRows: PropTypes.number,
-  set: PropTypes.oneOf([
-    'apple',
-    'google',
-    'twitter',
-    'emojione',
-    'messenger',
-    'facebook',
-  ]),
+  set: PropTypes.oneOf(['apple', 'google', 'twitter', 'facebook']),
  size: PropTypes.number.isRequired,
  emoji: PropTypes.oneOfType([PropTypes.string, PropTypes.object]).isRequired,
 }
--- a/stories/index.js
+++ b/stories/index.js
@ -15,7 +15,7 @@ import { Picker, Emoji, emojiIndex, NimbleEmojiIndex, getEmojiDataFromNative } f
 import data from '../data/all.json'
 import '../css/emoji-mart.css'

-const SETS = ['apple', 'google', 'twitter', 'emojione', 'messenger', 'facebook']
+const SETS = ['apple', 'google', 'twitter', 'facebook']
 const CUSTOM_EMOJIS = [
  {
    name: 'Octocat',
@ -93,6 +93,17 @@ storiesOf('Picker', module)
              <path d="M2.204 14.049c-.06.276-.091.56-.091.847 0 3.443 4.402 6.249 9.814 6.249 5.41 0 9.812-2.804 9.812-6.249 0-.274-.029-.546-.082-.809l-.015-.032c-.021-.055-.029-.11-.029-.165-.302-1.175-1.117-2.241-2.296-3.103-.045-.016-.088-.039-.126-.07-.026-.02-.045-.042-.067-.064-1.792-1.234-4.356-2.008-7.196-2.008-2.815 0-5.354.759-7.146 1.971-.014.018-.029.033-.049.049-.039.033-.084.06-.13.075-1.206.862-2.042 1.937-2.354 3.123 0 .058-.014.114-.037.171l-.008.015zm9.773 5.441c-1.794 0-3.057-.389-3.863-1.197-.173-.174-.173-.457 0-.632.176-.165.46-.165.635 0 .63.629 1.685.943 3.228.943 1.542 0 2.591-.3 3.219-.929.165-.164.45-.164.629 0 .165.18.165.465 0 .645-.809.808-2.065 1.198-3.862 1.198l.014-.028zm-3.606-7.573c-.914 0-1.677.765-1.677 1.677 0 .91.763 1.65 1.677 1.65s1.651-.74 1.651-1.65c0-.912-.739-1.677-1.651-1.677zm7.233 0c-.914 0-1.678.765-1.678 1.677 0 .91.764 1.65 1.678 1.65s1.651-.74 1.651-1.65c0-.912-.739-1.677-1.651-1.677zm4.548-1.595c1.037.833 1.8 1.821 2.189 2.904.45-.336.719-.864.719-1.449 0-1.002-.815-1.816-1.818-1.816-.399 0-.778.129-1.09.363v-.002zM2.711 9.963c-1.003 0-1.817.816-1.817 1.818 0 .543.239 1.048.644 1.389.401-1.079 1.172-2.053 2.213-2.876-.302-.21-.663-.329-1.039-.329v-.002zm9.217 12.079c-5.906 0-10.709-3.205-10.709-7.142 0-.275.023-.544.068-.809C.494 13.598 0 12.729 0 11.777c0-1.496 1.227-2.713 2.725-2.713.674 0 1.303.246 1.797.682 1.856-1.191 4.357-1.941 7.112-1.992l1.812-5.524.404.095s.016 0 .016.002l4.223.993c.344-.798 1.138-1.36 2.065-1.36 1.229 0 2.231 1.004 2.231 2.234 0 1.232-1.003 2.234-2.231 2.234s-2.23-1.004-2.23-2.23l-3.851-.912-1.467 4.477c2.65.105 5.047.854 6.844 2.021.494-.464 1.144-.719 1.833-.719 1.498 0 2.718 1.213 2.718 2.711 0 .987-.54 1.886-1.378 2.365.029.255.059.494.059.749-.015 3.938-4.806 7.143-10.72 7.143l-.034.009zm8.179-19.187c-.74 0-1.34.599-1.34 1.338 0 .738.6 1.34 1.34 1.34.732 0 1.33-.6 1.33-1.334 0-.733-.598-1.332-1.347-1.332l.017-.012z" />
            </svg>
          ),
+          people: () => (
+            <svg
+              aria-labelledby="simpleicons-reddit-icon"
+              role="img"
+              viewBox="0 0 24 24"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <title id="simpleicons-reddit-icon">Reddit icon</title>
+              <path d="M2.204 14.049c-.06.276-.091.56-.091.847 0 3.443 4.402 6.249 9.814 6.249 5.41 0 9.812-2.804 9.812-6.249 0-.274-.029-.546-.082-.809l-.015-.032c-.021-.055-.029-.11-.029-.165-.302-1.175-1.117-2.241-2.296-3.103-.045-.016-.088-.039-.126-.07-.026-.02-.045-.042-.067-.064-1.792-1.234-4.356-2.008-7.196-2.008-2.815 0-5.354.759-7.146 1.971-.014.018-.029.033-.049.049-.039.033-.084.06-.13.075-1.206.862-2.042 1.937-2.354 3.123 0 .058-.014.114-.037.171l-.008.015zm9.773 5.441c-1.794 0-3.057-.389-3.863-1.197-.173-.174-.173-.457 0-.632.176-.165.46-.165.635 0 .63.629 1.685.943 3.228.943 1.542 0 2.591-.3 3.219-.929.165-.164.45-.164.629 0 .165.18.165.465 0 .645-.809.808-2.065 1.198-3.862 1.198l.014-.028zm-3.606-7.573c-.914 0-1.677.765-1.677 1.677 0 .91.763 1.65 1.677 1.65s1.651-.74 1.651-1.65c0-.912-.739-1.677-1.651-1.677zm7.233 0c-.914 0-1.678.765-1.678 1.677 0 .91.764 1.65 1.678 1.65s1.651-.74 1.651-1.65c0-.912-.739-1.677-1.651-1.677zm4.548-1.595c1.037.833 1.8 1.821 2.189 2.904.45-.336.719-.864.719-1.449 0-1.002-.815-1.816-1.818-1.816-.399 0-.778.129-1.09.363v-.002zM2.711 9.963c-1.003 0-1.817.816-1.817 1.818 0 .543.239 1.048.644 1.389.401-1.079 1.172-2.053 2.213-2.876-.302-.21-.663-.329-1.039-.329v-.002zm9.217 12.079c-5.906 0-10.709-3.205-10.709-7.142 0-.275.023-.544.068-.809C.494 13.598 0 12.729 0 11.777c0-1.496 1.227-2.713 2.725-2.713.674 0 1.303.246 1.797.682 1.856-1.191 4.357-1.941 7.112-1.992l1.812-5.524.404.095s.016 0 .016.002l4.223.993c.344-.798 1.138-1.36 2.065-1.36 1.229 0 2.231 1.004 2.231 2.234 0 1.232-1.003 2.234-2.231 2.234s-2.23-1.004-2.23-2.23l-3.851-.912-1.467 4.477c2.65.105 5.047.854 6.844 2.021.494-.464 1.144-.719 1.833-.719 1.498 0 2.718 1.213 2.718 2.711 0 .987-.54 1.886-1.378 2.365.029.255.059.494.059.749-.015 3.938-4.806 7.143-10.72 7.143l-.034.009zm8.179-19.187c-.74 0-1.34.599-1.34 1.338 0 .738.6 1.34 1.34 1.34.732 0 1.33-.6 1.33-1.334 0-.733-.598-1.332-1.347-1.332l.017-.012z" />
+            </svg>
+          ),
          nature: () => (
            <svg
              version="1.1"
--- a/yarn.lock
+++ b/yarn.lock
@ -4012,10 +4012,10 @@ elliptic@^6.0.0:
    minimalistic-assert "^1.0.0"
    minimalistic-crypto-utils "^1.0.0"

-emoji-datasource@4.0.4:
-  version "4.0.4"
-  resolved "https://registry.yarnpkg.com/emoji-datasource/-/emoji-datasource-4.0.4.tgz#516b9ab2f34569e468e4e3753a34a47a0b2b5aa3"
-  integrity sha1-UWuasvNFaeRo5ON1OjSkegsrWqM=
+emoji-datasource@5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/emoji-datasource/-/emoji-datasource-5.0.1.tgz#31eaaff7caa6640929327b4f4ff66f2bf313df0a"
+  integrity sha512-RXokuCv4o8RFLiigN1skAdZwJuJWqtBvcK3GVKpvAL/7BeH95enmKsli7cG8YZ85RTjyEe3+GAdpJJOV43KLKQ==

 emoji-regex@^7.0.1:
  version "7.0.3"