Size reduced from 87.35 KB to 79.43 KB

.babelrc

@@ -6,6 +6,18 @@
     "transform-react-remove-prop-types",
     [
       "transform-define", "scripts/define.js"
+    ],
+    [
+      "module-resolver",
+      {
+        "alias": {
+          "babel-runtime/core-js/object/get-prototype-of": "./src/polyfills/objectGetPrototypeOf",
+          "babel-runtime/helpers/extends": "./src/polyfills/extends",
+          "babel-runtime/helpers/inherits": "./src/polyfills/inherits",
+          "babel-runtime/helpers/createClass": "./src/polyfills/createClass",
+          "babel-runtime/helpers/possibleConstructorReturn": "./src/polyfills/possibleConstructorReturn"
+        }
+      }
     ]
   ]
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "emoji-mart",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "Customizable Slack-like emoji picker for React",
   "main": "dist/index.js",
   "repository": {
@@ -28,6 +28,7 @@
     "babel-cli": "^6.26.0",
     "babel-core": "6.7.2",
     "babel-loader": "6.2.4",
+    "babel-plugin-module-resolver": "2.7.1",
     "babel-plugin-transform-define": "^1.3.0",
     "babel-plugin-transform-es2015-destructuring": "6.9.0",
     "babel-plugin-transform-object-rest-spread": "6.8.0",
@@ -63,6 +64,7 @@
     "build": "npm run build:data && npm run build:example && npm run build:dist",
     "watch": "babel src --watch --out-dir dist --copy-files --ignore webpack.config.js",
     "start": "npm run watch",
+    "stats": "webpack --config ./example/webpack.config.js  --json > stats.json",
     "react:clean": "rimraf node_modules/{react,react-dom,react-addons-test-utils}",
     "react:14": "npm run react:clean && npm i react@^0.14 react-dom@^0.14 react-addons-test-utils@^0.14 --save-dev",
     "react:15": "npm run react:clean && npm i react@^15 react-dom@^15 react-addons-test-utils@^15 --save-dev",
@@ -72,7 +74,7 @@
   "size-limit": [
     {
       "path": "dist/index.js",
-      "limit": "88 KB"
+      "limit": "80 KB"
     }
   ]
 }

src/components/anchors.js

@@ -7,13 +7,9 @@ export default class Anchors extends React.Component {
   constructor(props) {
     super(props)
 
-    let defaultCategory = null
+    const {categories} = props
-    for (let category of props.categories) {
+
-      if (category.first) {
+    const defaultCategory = categories.filter(category => category.first)[0]
-        defaultCategory = category
-        break
-      }
-    }
 
     this.state = {
       selected: defaultCategory.name

src/components/category.js

@@ -77,10 +77,9 @@ export default class Category extends React.Component {
 
       if (frequentlyUsed.length) {
         emojis = frequentlyUsed.map((id) => {
-          for (let emoji of custom) {
+          const emoji = custom.filter(e => e.id === id)[0]
-            if (emoji.id === id) {
+          if (emoji) {
-              return emoji
+            return emoji
-            }
           }
 
           return id

src/components/picker.js

@@ -74,7 +74,8 @@ export default class Picker extends React.Component {
       })
     }
 
-    for (let category of allCategories) {
+    for (let categoryIndex = 0; categoryIndex < allCategories.length; categoryIndex++) {
+      const category = allCategories[categoryIndex]
       let isIncluded = props.include && props.include.length ? props.include.indexOf(category.name.toLowerCase()) > -1 : true
       let isExcluded = props.exclude && props.exclude.length ? props.exclude.indexOf(category.name.toLowerCase()) > -1 : false
       if (!isIncluded || isExcluded) { continue }
@@ -82,7 +83,9 @@ export default class Picker extends React.Component {
       if (props.emojisToShowFilter) {
         let newEmojis = []
 
-        for (let emoji of category.emojis) {
+        const {emojis} = category
+        for (let emojiIndex = 0; emojiIndex < emojis.length; emojiIndex++) {
+          const emoji = emojis[emojiIndex]
           if (props.emojisToShowFilter(data.emojis[emoji] || emoji)) {
             newEmojis.push(emoji)
           }
@@ -143,10 +146,11 @@ export default class Picker extends React.Component {
   }
 
   testStickyPosition() {
-    var stickyTestElement = document.createElement('div')
+    const stickyTestElement = document.createElement('div')
-    for (let prefix of ['', '-webkit-', '-ms-', '-moz-', '-o-']) {
+
-      stickyTestElement.style.position = `${prefix}sticky`
+    const prefixes = ['', '-webkit-', '-ms-', '-moz-', '-o-']
-    }
+
+    prefixes.forEach(prefix => stickyTestElement.style.position = `${prefix}sticky`)
 
     this.hasStickyPosition = !!stickyTestElement.style.position.length
   }
@@ -155,7 +159,12 @@ export default class Picker extends React.Component {
     var { preview } = this.refs
     // Use Array.prototype.find() when it is more widely supported.
     const emojiData = CUSTOM_CATEGORY.emojis.filter(customEmoji => customEmoji.id === emoji.id)[0]
-    preview.setState({ emoji: Object.assign(emoji, emojiData) })
+    for (let key in emojiData) {
+      if (emojiData.hasOwnProperty(key)) {
+          emoji[key] = emojiData[key]
+      }
+    }
+    preview.setState({ emoji })
     clearTimeout(this.leaveTimeout)
   }
 
@@ -234,12 +243,7 @@ export default class Picker extends React.Component {
       }
 
       if (scrollTop < minTop) {
-        for (let category of this.categories) {
+        activeCategory = this.categories.filter(category => !category.anchor)[0]
-          if (category.anchor === false) { continue }
-
-          activeCategory = category
-          break
-        }
       } else if (scrollTop + this.clientHeight >= this.scrollHeight) {
         activeCategory = this.categories[this.categories.length - 1]
       }

src/components/preview.js

@@ -16,16 +16,18 @@ export default class Preview extends React.Component {
 
     if (emoji) {
       var emojiData = getData(emoji),
-          { emoticons } = emojiData,
+          { emoticons = [] } = emojiData,
           knownEmoticons = [],
           listedEmoticons = []
 
-      for (let emoticon of emoticons) {
+      emoticons.forEach(emoticon => {
-        if (knownEmoticons.indexOf(emoticon.toLowerCase()) == -1) {
+        if (knownEmoticons.indexOf(emoticon.toLowerCase()) >= 0) {
-          knownEmoticons.push(emoticon.toLowerCase())
+          return
-          listedEmoticons.push(emoticon)
         }
-      }
+
+        knownEmoticons.push(emoticon.toLowerCase())
+        listedEmoticons.push(emoticon)
+      })
 
       return <div className='emoji-mart-preview'>
         <div className='emoji-mart-preview-emoji'>

src/components/skins.js

@@ -24,23 +24,31 @@ export default class Skins extends React.Component {
   }
 
   render() {
-    var { skin } = this.props,
+    const { skin } = this.props
-        { opened } = this.state
+    const { opened } = this.state
+
+    const skinToneNodes = []
+
+    for (let i = 0; i < 6; i++) {
+      const skinTone = i + 1
+      const selected = skinTone == skin
+
+      skinToneNodes.push(
+        <span
+          key={`skin-tone-${skinTone}`}
+          className={`emoji-mart-skin-swatch ${selected ? 'emoji-mart-skin-swatch-selected' : ''}`}
+        >
+          <span
+            onClick={() => this.handleClick(skinTone)}
+            className={`emoji-mart-skin emoji-mart-skin-tone-${skinTone}`}>
+          </span>
+        </span>
+      )
+    }
 
     return <div>
       <div className={`emoji-mart-skin-swatches ${opened ? 'emoji-mart-skin-swatches-opened' : ''}`}>
-        {/* Use Array.prototype.fill() when it is more widely supported. */}
+        {skinToneNodes}
-        {[...Array(6)].map((_, i) => {
-          var skinTone = i + 1,
-              selected = skinTone == skin
-
-          return <span key={`skin-tone-${skinTone}`} className={`emoji-mart-skin-swatch ${selected ? 'emoji-mart-skin-swatch-selected' : ''}`}>
-            <span
-              onClick={() => this.handleClick(skinTone)}
-              className={`emoji-mart-skin emoji-mart-skin-tone-${skinTone}`}>
-            </span>
-          </span>
-        })}
       </div>
     </div>
   }

src/polyfills/createClass.js

@@ -0,0 +1,19 @@
+const _Object = Object
+
+module.exports = function createClass() {
+  function defineProperties(target, props) {
+    for (var i = 0; i < props.length; i++) {
+      var descriptor = props[i];
+      descriptor.enumerable = descriptor.enumerable || false;
+      descriptor.configurable = true;
+      if ("value" in descriptor) descriptor.writable = true;
+      _Object.defineProperty(target, descriptor.key, descriptor);
+    }
+  }
+
+  return function (Constructor, protoProps, staticProps) {
+    if (protoProps) defineProperties(Constructor.prototype, protoProps);
+    if (staticProps) defineProperties(Constructor, staticProps);
+    return Constructor;
+  };
+}();

src/polyfills/extends.js

@@ -0,0 +1,15 @@
+const _Object = Object
+
+module.exports = _Object.assign || function (target) {
+  for (var i = 1; i < arguments.length; i++) {
+    var source = arguments[i];
+
+    for (var key in source) {
+      if (Object.prototype.hasOwnProperty.call(source, key)) {
+        target[key] = source[key];
+      }
+    }
+  }
+
+  return target;
+};

src/polyfills/inherits.js

@@ -0,0 +1,19 @@
+const _Object = Object
+
+module.exports = function inherits(subClass, superClass) {
+  if (typeof superClass !== "function" && superClass !== null) {
+    throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);
+  }
+
+  subClass.prototype = _Object.create(superClass && superClass.prototype, {
+    constructor: {
+      value: subClass,
+      enumerable: false,
+      writable: true,
+      configurable: true
+    }
+  });
+  if (superClass) {
+    _Object.setPrototypeOf ? _Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
+  }
+};

src/polyfills/objectGetPrototypeOf.js

@@ -0,0 +1,11 @@
+const _Object = Object
+
+module.exports = _Object.getPrototypeOf || function (O) {
+  O = Object(O)
+
+  if (typeof O.constructor === 'function' && O instanceof O.constructor) {
+    return O.constructor.prototype
+  }
+
+  return O instanceof Object ? Object.prototype : null
+};

src/polyfills/possibleConstructorReturn.js

@@ -0,0 +1,7 @@
+module.exports = function possibleConstructorReturn(self, call) {
+  if (!self) {
+    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+  }
+
+  return call && (typeof call === "object" || typeof call === "function") ? call : self;
+};

src/polyfills/stringFromCodePoint.js

@@ -0,0 +1,39 @@
+const _String = String
+
+module.exports = _String.fromCodePoint || function stringFromCodePoint() {
+  var MAX_SIZE = 0x4000;
+  var codeUnits = [];
+  var highSurrogate;
+  var lowSurrogate;
+  var index = -1;
+  var length = arguments.length;
+  if (!length) {
+    return '';
+  }
+  var result = '';
+  while (++index < length) {
+    var codePoint = Number(arguments[index]);
+    if (
+      !isFinite(codePoint) ||       // `NaN`, `+Infinity`, or `-Infinity`
+      codePoint < 0 ||              // not a valid Unicode code point
+      codePoint > 0x10FFFF ||       // not a valid Unicode code point
+      Math.floor(codePoint) != codePoint // not an integer
+    ) {
+      throw RangeError('Invalid code point: ' + codePoint);
+    }
+    if (codePoint <= 0xFFFF) { // BMP code point
+      codeUnits.push(codePoint);
+    } else { // Astral code point; split in surrogate halves
+      // http://mathiasbynens.be/notes/javascript-encoding#surrogate-formulae
+      codePoint -= 0x10000;
+      highSurrogate = (codePoint >> 10) + 0xD800;
+      lowSurrogate = (codePoint % 0x400) + 0xDC00;
+      codeUnits.push(highSurrogate, lowSurrogate);
+    }
+    if (index + 1 === length || codeUnits.length > MAX_SIZE) {
+      result += String.fromCharCode.apply(null, codeUnits);
+      codeUnits.length = 0;
+    }
+  }
+  return result;
+};

src/utils/emoji-index.js

@@ -1,5 +1,5 @@
 import data from '../../data'
-import { getData, getSanitizedData, intersect } from '.'
+import { getData, getSanitizedData, uniq } from '.'
 
 var index = {}
 var emojisList = {}
@@ -12,10 +12,14 @@ for (let emoji in data.emojis) {
       { short_names, emoticons } = emojiData,
       id = short_names[0]
 
-  for (let emoticon of (emoticons || [])) {
+  if (emoticons) {
-    if (!emoticonsList[emoticon]) {
+    emoticons.forEach(emoticon => {
+      if (emoticonsList[emoticon]) {
+        return
+      }
+
       emoticonsList[emoticon] = id
-    }
+    })
   }
 
   emojisList[id] = getSanitizedData(id)
@@ -26,12 +30,12 @@ function search(value, { emojisToShowFilter, maxResults, include, exclude, custo
   include || (include = [])
   exclude || (exclude = [])
 
-  if (custom.length) {
+  custom.forEach(emoji => {
-    for (const emoji of custom) {
+    data.emojis[emoji.id] = getData(emoji)
-      data.emojis[emoji.id] = getData(emoji)
+    emojisList[emoji.id] = getSanitizedData(emoji)
-      emojisList[emoji.id] = getSanitizedData(emoji)
+  })
-    }
 
+  if (custom.length) {
     data.categories.push({
       name: 'Custom',
       emojis: custom.map(emoji => emoji.id)
@@ -62,15 +66,15 @@ function search(value, { emojisToShowFilter, maxResults, include, exclude, custo
         index = {}
       }
 
-      for (let category of data.categories) {
+      data.categories.forEach(category => {
         let isIncluded = include && include.length ? include.indexOf(category.name.toLowerCase()) > -1 : true
         let isExcluded = exclude && exclude.length ? exclude.indexOf(category.name.toLowerCase()) > -1 : false
-        if (!isIncluded || isExcluded) { continue }
+        if (!isIncluded || isExcluded) {
-
+          return
-        for (let emojiId of category.emojis) {
-          pool[emojiId] = data.emojis[emojiId]
         }
-      }
+
+        category.emojis.forEach(emojiId => pool[emojiId] = data.emojis[emojiId])
+      })
     } else if (previousInclude.length || previousExclude.length) {
       index = {}
     }
@@ -80,7 +84,8 @@ function search(value, { emojisToShowFilter, maxResults, include, exclude, custo
           aIndex = index,
           length = 0
 
-      for (let char of value.split('')) {
+      for (let charIndex = 0; charIndex < value.length; charIndex++) {
+        const char = value[charIndex]
         length++
 
         aIndex[char] || (aIndex[char] = {})
@@ -124,7 +129,7 @@ function search(value, { emojisToShowFilter, maxResults, include, exclude, custo
     }).filter(a => a)
 
     if (allResults.length > 1) {
-      results = intersect(...allResults)
+      results = uniq(allResults)
     } else if (allResults.length) {
       results = allResults[0]
     } else {

src/utils/frequently.js

@@ -37,17 +37,29 @@ function get(perLine) {
   if (!frequently) {
     defaults = {}
 
-    // Use Array.prototype.fill() when it is more widely supported.
+    const result = []
-    return [...Array(perLine)].map((_, i) => {
+
+    for (let i = 0; i < perLine; i++) {
       defaults[DEFAULTS[i]] = perLine - i
-      return DEFAULTS[i]
+      result.push(DEFAULTS[i])
-    })
+    }
+
+    return result
   }
 
-  var quantity = perLine * 4,
+  const quantity = perLine * 4
-      sorted = Object.keys(frequently).sort((a, b) => frequently[a] - frequently[b]).reverse(),
+  const frequentlyKeys = []
-      sliced = sorted.slice(0, quantity),
+
-      last = store.get('last')
+  for (let key in frequently) {
+    if (frequently.hasOwnProperty(key)) {
+      frequentlyKeys.push(key);
+    }
+  }
+
+  const sorted = frequentlyKeys.sort((a, b) => frequently[a] - frequently[b]).reverse()
+  const sliced = sorted.slice(0, quantity)
+
+  const last = store.get('last')
 
   if (last && sliced.indexOf(last) == -1) {
     sliced.pop()

src/utils/index.js

@@ -1,5 +1,8 @@
 import buildSearch from './build-search'
 import data from '../../data'
+import stringFromCodePoint from '../polyfills/stringFromCodePoint'
+
+const _JSON = JSON
 
 const COLONS_REGEX = /^(?:\:([^\:]+)\:)(?:\:skin-tone-(\d)\:)?$/
 const SKINS = [
@@ -11,7 +14,7 @@ function unifiedToNative(unified) {
   var unicodes = unified.split('-'),
       codePoints = unicodes.map((u) => `0x${u}`)
 
-  return String.fromCodePoint(...codePoints)
+  return stringFromCodePoint.apply(null, codePoints)
 }
 
 function sanitize(emoji) {
@@ -96,7 +99,7 @@ function getData(emoji, skin, set) {
   emojiData.variations || (emojiData.variations = [])
 
   if (emojiData.skin_variations && skin > 1 && set) {
-    emojiData = JSON.parse(JSON.stringify(emojiData))
+    emojiData = JSON.parse(_JSON.stringify(emojiData))
 
     var skinKey = SKINS[skin - 1],
         variationData = emojiData.skin_variations[skinKey]
@@ -116,23 +119,27 @@ function getData(emoji, skin, set) {
   }
 
   if (emojiData.variations && emojiData.variations.length) {
-    emojiData = JSON.parse(JSON.stringify(emojiData))
+    emojiData = JSON.parse(_JSON.stringify(emojiData))
     emojiData.unified = emojiData.variations.shift()
   }
 
   return emojiData
 }
 
+function uniq(arr) {
+  return arr.reduce((acc, item) => {
+    if (acc.indexOf(item) === -1) {
+      acc.push(item)
+    }
+    return acc
+  }, [])
+}
+
 function intersect(a, b) {
-  var aSet = new Set(a),
+  const uniqA = uniq(a)
-      bSet = new Set(b),
+  const uniqB = uniq(b)
-      intersection = null
 
-  intersection = new Set(
+  return uniqA.filter(item => uniqB.indexOf(item) >= 0)
-    [...aSet].filter(x => bSet.has(x))
-  )
-
-  return Array.from(intersection)
 }
 
 function deepMerge(a, b) {
@@ -156,4 +163,11 @@ function deepMerge(a, b) {
   return o
 }
 
-export { getData, getSanitizedData, intersect, deepMerge, unifiedToNative }
+export {
+  getData,
+  getSanitizedData,
+  uniq,
+  intersect,
+  deepMerge,
+  unifiedToNative
+}

src/utils/store.js

@@ -1,5 +1,7 @@
 var NAMESPACE = 'emoji-mart'
 
+const _JSON = JSON
+
 var isLocalStorageSupported = typeof window !== 'undefined' &&
                               'localStorage' in window
 
@@ -13,7 +15,7 @@ function update(state) {
 function set(key, value) {
   if (!isLocalStorageSupported) return
   try {
-    window.localStorage[`${NAMESPACE}.${key}`] = JSON.stringify(value)
+    window.localStorage[`${NAMESPACE}.${key}`] = _JSON.stringify(value)
   } catch (e) {
   }
 }