💄 Add prettier.config.js

package.json

@@ -51,7 +51,7 @@
     "karma-jasmine": "^1.1.0",
     "karma-webpack": "^2.0.4",
     "mkdirp": "0.5.1",
-    "prettier": "1.7.4",
+    "prettier": "1.11.1",
     "prop-types": "^15.6.0",
     "react": "^16.0.0",
     "react-dom": "^16.0.0",
@@ -77,7 +77,7 @@
     "prepublishOnly": "npm run build",
     "storybook": "start-storybook -p 6006",
     "build-storybook": "build-storybook",
-    "prettier": "prettier --no-semi --single-quote --trailing-comma es5 --write \"{src,spec}/**/*.js\""
+    "prettier": "prettier --write \"{src,spec}/**/*.js\""
   },
   "size-limit": [
     {

prettier.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  semi: false,
+  singleQuote: true,
+  trailingComma: 'all',
+  arrowParens: 'always',
+}

spec/emoji-index-spec.js

@@ -17,11 +17,11 @@ describe('#emojiIndex', () => {
     })
 
     it('should filter only emojis we care about, exclude pineapple', () => {
-      let emojisToShowFilter = data => {
+      let emojisToShowFilter = (data) => {
         data.unified !== '1F34D'
       }
       expect(
-        emojiIndex.search('apple', { emojisToShowFilter }).map(obj => obj.id)
+        emojiIndex.search('apple', { emojisToShowFilter }).map((obj) => obj.id),
       ).not.toContain('pineapple')
     })
 
@@ -30,13 +30,13 @@ describe('#emojiIndex', () => {
     })
 
     it('can search for thinking_face', () => {
-      expect(emojiIndex.search('thinking_fac').map(x => x.id)).toEqual([
+      expect(emojiIndex.search('thinking_fac').map((x) => x.id)).toEqual([
         'thinking_face',
       ])
     })
 
     it('can search for woman-facepalming', () => {
-      expect(emojiIndex.search('woman-facep').map(x => x.id)).toEqual([
+      expect(emojiIndex.search('woman-facep').map((x) => x.id)).toEqual([
         'woman-facepalming',
       ])
     })

spec/picker-spec.js

@@ -30,14 +30,14 @@ describe('Picker', () => {
     })
 
     it('will not show some based upon our filter', () => {
-      subject = render({ emojisToShowFilter: unified => false })
+      subject = render({ emojisToShowFilter: (unified) => false })
       expect(subject.categories.length).toEqual(2)
     })
 
     it('maintains category ids after it is filtered', () => {
-      subject = render({ emojisToShowFilter: emoji => true })
+      subject = render({ emojisToShowFilter: (emoji) => true })
       const categoriesWithIds = subject.categories.filter(
-        category => category.id
+        (category) => category.id,
       )
       expect(categoriesWithIds.length).toEqual(10)
     })

src/components/anchors.js

@@ -7,7 +7,9 @@ export default class Anchors extends React.PureComponent {
   constructor(props) {
     super(props)
 
-    let defaultCategory = props.categories.filter(category => category.first)[0]
+    let defaultCategory = props.categories.filter(
+      (category) => category.first,
+    )[0]
 
     this.state = {
       selected: defaultCategory.name,
@@ -58,9 +60,9 @@ export default class Anchors extends React.PureComponent {
               title={i18n.categories[id]}
               data-index={i}
               onClick={this.handleClick}
-              className={`emoji-mart-anchor ${isSelected
-                ? 'emoji-mart-anchor-selected'
-                : ''}`}
+              className={`emoji-mart-anchor ${
+                isSelected ? 'emoji-mart-anchor-selected' : ''
+              }`}
               style={{ color: isSelected ? color : null }}
             >
               <div dangerouslySetInnerHTML={{ __html: this.getSVG(id) }} />

src/components/category.js

@@ -101,15 +101,15 @@ export default class Category extends React.Component {
 
       if (frequentlyUsed.length) {
         emojis = frequentlyUsed
-          .map(id => {
-            const emoji = custom.filter(e => e.id === id)[0]
+          .map((id) => {
+            const emoji = custom.filter((e) => e.id === id)[0]
             if (emoji) {
               return emoji
             }
 
             return id
           })
-          .filter(id => !!getData(id))
+          .filter((id) => !!getData(id))
       }
 
       if (emojis.length === 0 && frequentlyUsed.length > 0) {
@@ -168,9 +168,9 @@ export default class Category extends React.Component {
     return (
       <div
         ref={this.setContainerRef}
-        className={`emoji-mart-category ${emojis && !emojis.length
-          ? 'emoji-mart-no-results'
-          : ''}`}
+        className={`emoji-mart-category ${
+          emojis && !emojis.length ? 'emoji-mart-no-results' : ''
+        }`}
         style={containerStyles}
       >
         <div
@@ -183,7 +183,8 @@ export default class Category extends React.Component {
           </span>
         </div>
 
-        {emojis && emojis.map(emoji => Emoji({ emoji: emoji, ...emojiProps }))}
+        {emojis &&
+          emojis.map((emoji) => Emoji({ emoji: emoji, ...emojiProps }))}
 
         {emojis &&
           !emojis.length && (

src/components/emoji.js

@@ -6,19 +6,19 @@ import { getData, getSanitizedData, unifiedToNative } from '../utils'
 
 const SHEET_COLUMNS = 52
 
-const _getPosition = props => {
+const _getPosition = (props) => {
   var { sheet_x, sheet_y } = _getData(props),
     multiply = 100 / (SHEET_COLUMNS - 1)
 
   return `${multiply * sheet_x}% ${multiply * sheet_y}%`
 }
 
-const _getData = props => {
+const _getData = (props) => {
   var { emoji, skin, set } = props
   return getData(emoji, skin, set)
 }
 
-const _getSanitizedData = props => {
+const _getSanitizedData = (props) => {
   var { emoji, skin, set } = props
   return getSanitizedData(emoji, skin, set)
 }
@@ -53,11 +53,11 @@ const _handleLeave = (e, props) => {
   onLeave(emoji, e)
 }
 
-const _isNumeric = value => {
+const _isNumeric = (value) => {
   return !isNaN(value - parseFloat(value))
 }
 
-const _convertStyleToCSS = style => {
+const _convertStyleToCSS = (style) => {
   let div = document.createElement('div')
 
   for (let key in style) {
@@ -73,7 +73,7 @@ const _convertStyleToCSS = style => {
   return div.getAttribute('style')
 }
 
-const Emoji = props => {
+const Emoji = (props) => {
   for (let k in Emoji.defaultProps) {
     if (props[k] == undefined && Emoji.defaultProps[k] != undefined) {
       props[k] = Emoji.defaultProps[k]
@@ -134,7 +134,7 @@ const Emoji = props => {
         display: 'inline-block',
         backgroundImage: `url(${props.backgroundImageFn(
           props.set,
-          props.sheetSize
+          props.sheetSize,
         )})`,
         backgroundSize: `${100 * SHEET_COLUMNS}%`,
         backgroundPosition: _getPosition(props),
@@ -144,16 +144,16 @@ const Emoji = props => {
 
   if (props.html) {
     style = _convertStyleToCSS(style)
-    return `<span style='${style}' ${title
-      ? `title='${title}'`
-      : ''} class='${className}'>${children || ''}</span>`
+    return `<span style='${style}' ${
+      title ? `title='${title}'` : ''
+    } class='${className}'>${children || ''}</span>`
   } else {
     return (
       <span
         key={props.emoji.id || props.emoji}
-        onClick={e => _handleClick(e, props)}
-        onMouseEnter={e => _handleOver(e, props)}
-        onMouseLeave={e => _handleLeave(e, props)}
+        onClick={(e) => _handleClick(e, props)}
+        onMouseEnter={(e) => _handleOver(e, props)}
+        onMouseLeave={(e) => _handleLeave(e, props)}
         title={title}
         className={className}
       >

src/components/picker.js

@@ -51,7 +51,7 @@ export default class Picker extends React.PureComponent {
     let allCategories = [].concat(data.categories)
 
     if (props.custom.length > 0) {
-      this.CUSTOM_CATEGORY.emojis = props.custom.map(emoji => {
+      this.CUSTOM_CATEGORY.emojis = props.custom.map((emoji) => {
         return {
           ...emoji,
           // `<Category />` expects emoji to have an `id`.
@@ -188,7 +188,7 @@ export default class Picker extends React.PureComponent {
     const prefixes = ['', '-webkit-', '-ms-', '-moz-', '-o-']
 
     prefixes.forEach(
-      prefix => (stickyTestElement.style.position = `${prefix}sticky`)
+      (prefix) => (stickyTestElement.style.position = `${prefix}sticky`),
     )
 
     this.hasStickyPosition = !!stickyTestElement.style.position.length
@@ -202,7 +202,7 @@ export default class Picker extends React.PureComponent {
 
     // Use Array.prototype.find() when it is more widely supported.
     const emojiData = this.CUSTOM_CATEGORY.emojis.filter(
-      customEmoji => customEmoji.id === emoji.id
+      (customEmoji) => customEmoji.id === emoji.id,
     )[0]
     for (let key in emojiData) {
       if (emojiData.hasOwnProperty(key)) {
@@ -300,7 +300,7 @@ export default class Picker extends React.PureComponent {
 
       if (scrollTop < minTop) {
         activeCategory = this.categories.filter(
-          category => !(category.anchor === false)
+          (category) => !(category.anchor === false),
         )[0]
       } else if (scrollTop + this.clientHeight >= this.scrollHeight) {
         activeCategory = this.categories[this.categories.length - 1]
@@ -382,12 +382,15 @@ export default class Picker extends React.PureComponent {
       case 13:
         let emoji
 
-        if (this.SEARCH_CATEGORY.emojis && (emoji = this.SEARCH_CATEGORY.emojis[0])) {
+        if (
+          this.SEARCH_CATEGORY.emojis &&
+          (emoji = this.SEARCH_CATEGORY.emojis[0])
+        ) {
           this.handleEmojiSelect(emoji)
         }
 
         handled = true
-        break;
+        break
     }
 
     if (handled) {
@@ -463,7 +466,11 @@ export default class Picker extends React.PureComponent {
       width = perLine * (emojiSize + 12) + 12 + 2 + measureScrollbar()
 
     return (
-      <div style={{ width: width, ...style }} className="emoji-mart" onKeyDown={this.handleKeyDown}>
+      <div
+        style={{ width: width, ...style }}
+        className="emoji-mart"
+        onKeyDown={this.handleKeyDown}
+      >
         <div className="emoji-mart-bar">
           <Anchors
             ref={this.setAnchorsRef}
@@ -586,7 +593,7 @@ Picker.propTypes = {
       emoticons: PropTypes.arrayOf(PropTypes.string),
       keywords: PropTypes.arrayOf(PropTypes.string),
       imageUrl: PropTypes.string.isRequired,
-    })
+    }),
   ),
 }
 

src/components/preview.js

@@ -26,7 +26,7 @@ export default class Preview extends React.PureComponent {
         knownEmoticons = [],
         listedEmoticons = []
 
-      emoticons.forEach(emoticon => {
+      emoticons.forEach((emoticon) => {
         if (knownEmoticons.indexOf(emoticon.toLowerCase()) >= 0) {
           return
         }
@@ -44,14 +44,14 @@ export default class Preview extends React.PureComponent {
           <div className="emoji-mart-preview-data">
             <div className="emoji-mart-preview-name">{emoji.name}</div>
             <div className="emoji-mart-preview-shortnames">
-              {emojiData.short_names.map(short_name => (
+              {emojiData.short_names.map((short_name) => (
                 <span key={short_name} className="emoji-mart-preview-shortname">
                   :{short_name}:
                 </span>
               ))}
             </div>
             <div className="emoji-mart-preview-emoticons">
-              {listedEmoticons.map(emoticon => (
+              {listedEmoticons.map((emoticon) => (
                 <span key={emoticon} className="emoji-mart-preview-emoticon">
                   {emoticon}
                 </span>

src/components/search.js

@@ -20,7 +20,7 @@ export default class Search extends React.PureComponent {
         include: this.props.include,
         exclude: this.props.exclude,
         custom: this.props.custom,
-      })
+      }),
     )
   }
 

src/components/skins.js

@@ -39,25 +39,25 @@ export default class Skins extends React.PureComponent {
       skinToneNodes.push(
         <span
           key={`skin-tone-${skinTone}`}
-          className={`emoji-mart-skin-swatch ${selected
-            ? 'emoji-mart-skin-swatch-selected'
-            : ''}`}
+          className={`emoji-mart-skin-swatch ${
+            selected ? 'emoji-mart-skin-swatch-selected' : ''
+          }`}
         >
           <span
             onClick={this.handleClick}
             data-skin={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'
-            : ''}`}
+          className={`emoji-mart-skin-swatches ${
+            opened ? 'emoji-mart-skin-swatches-opened' : ''
+          }`}
         >
           {skinToneNodes}
         </div>

src/polyfills/inherits.js

@@ -4,7 +4,7 @@ export default 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
+        typeof superClass,
     )
   }
 

src/polyfills/possibleConstructorReturn.js

@@ -1,7 +1,7 @@
 export default function possibleConstructorReturn(self, call) {
   if (!self) {
     throw new ReferenceError(
-      "this hasn't been initialised - super() hasn't been called"
+      "this hasn't been initialised - super() hasn't been called",
     )
   }
 

src/utils/build-search.js

@@ -1,13 +1,13 @@
-export default data => {
+export default (data) => {
   const search = []
 
   var addToSearch = (strings, split) => {
     if (!strings) {
       return
     }
 
-    ;(Array.isArray(strings) ? strings : [strings]).forEach(string => {
-      ;(split ? string.split(/[-|_|\s]+/) : [string]).forEach(s => {
+    ;(Array.isArray(strings) ? strings : [strings]).forEach((string) => {
+      ;(split ? string.split(/[-|_|\s]+/) : [string]).forEach((s) => {
         s = s.toLowerCase()
 
         if (search.indexOf(s) == -1) {