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
-    for (let category of props.categories) {
-      if (category.first) {
-        defaultCategory = category
-        break
-      }
-    }
+    const {categories} = props
+
+    const defaultCategory = categories.filter(category => category.first)[0]
 
     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) {
-            if (emoji.id === id) {
-              return emoji
-            }
+          const emoji = custom.filter(e => e.id === id)[0]
+          if (emoji) {
+            return emoji
           }
 
           return id

src/components/picker.js

@@ -74,15 +74,18 @@ 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 }
 
       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')
-    for (let prefix of ['', '-webkit-', '-ms-', '-moz-', '-o-']) {
-      stickyTestElement.style.position = `${prefix}sticky`
-    }
+    const stickyTestElement = document.createElement('div')
+
+    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) {
-          if (category.anchor === false) { continue }
-
-          activeCategory = category
-          break
-        }
+        activeCategory = this.categories.filter(category => !category.anchor)[0]
       } 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) {
-        if (knownEmoticons.indexOf(emoticon.toLowerCase()) == -1) {
-          knownEmoticons.push(emoticon.toLowerCase())
-          listedEmoticons.push(emoticon)
+      emoticons.forEach(emoticon => {
+        if (knownEmoticons.indexOf(emoticon.toLowerCase()) >= 0) {
+          return
         }
-      }
+
+        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,
-        { opened } = this.state
+    const { skin } = this.props
+    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. */}
-        {[...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>
-        })}
+        {skinToneNodes}
       </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;
+};