Prettier 💄

missive · Oct 7, 2017 · 3021758 · 3021758
1 parent 9ff4c88
commit 3021758
Show file tree

Hide file tree

Showing 25 changed files with 660 additions and 481 deletions.
diff --git a/package.json b/package.json
@@ -51,6 +51,7 @@
     "karma-jasmine": "^1.1.0",
     "karma-webpack": "^2.0.4",
     "mkdirp": "0.5.1",
+    "prettier": "1.7.4",
     "prop-types": "^15.6.0",
     "react": "^16.0.0",
     "react-dom": "^16.0.0",
@@ -75,7 +76,8 @@
     "test": "NODE_ENV=test karma start && size-limit",
     "prepublish": "npm run build",
     "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook"
+    "build-storybook": "build-storybook",
+    "prettier": "prettier --no-semi --single-quote --trailing-comma es5 --write \"src/**/*.js\""
   },
   "size-limit": [
     {

diff --git a/src/components/anchors.js b/src/components/anchors.js
@@ -7,18 +7,18 @@ export default class Anchors extends React.PureComponent {
   constructor(props) {
     super(props)
 
-    const {categories} = props
+    const { categories } = props
 
     const defaultCategory = categories.filter(category => category.first)[0]
 
     this.state = {
-      selected: defaultCategory.name
+      selected: defaultCategory.name,
     }
 
     this.handleClick = this.handleClick.bind(this)
   }
 
-  handleClick (e) {
+  handleClick(e) {
     var index = e.currentTarget.getAttribute('data-index')
     var { categories, onAnchorClick } = this.props
 
@@ -27,32 +27,39 @@ export default class Anchors extends React.PureComponent {
 
   render() {
     var { categories, onAnchorClick, color, i18n } = this.props,
-        { selected } = this.state
+      { selected } = this.state
 
-    return <div className='emoji-mart-anchors'>
-      {categories.map((category, i) => {
-        var { name, anchor } = category,
+    return (
+      <div className="emoji-mart-anchors">
+        {categories.map((category, i) => {
+          var { name, anchor } = category,
             isSelected = name == selected
 
-        if (anchor === false) {
-          return null
-        }
+          if (anchor === false) {
+            return null
+          }
 
-        return (
-          <span
-            key={name}
-            title={i18n.categories[name.toLowerCase()]}
-            data-index={i}
-            onClick={this.handleClick}
-            className={`emoji-mart-anchor ${isSelected ? 'emoji-mart-anchor-selected' : ''}`}
-            style={{ color: isSelected ? color : null }}
-          >
-            <div dangerouslySetInnerHTML={{ __html: SVGs[name] }}></div>
-            <span className='emoji-mart-anchor-bar' style={{ backgroundColor: color }}></span>
-          </span>
-        )
-      })}
-    </div>
+          return (
+            <span
+              key={name}
+              title={i18n.categories[name.toLowerCase()]}
+              data-index={i}
+              onClick={this.handleClick}
+              className={`emoji-mart-anchor ${isSelected
+                ? 'emoji-mart-anchor-selected'
+                : ''}`}
+              style={{ color: isSelected ? color : null }}
+            >
+              <div dangerouslySetInnerHTML={{ __html: SVGs[name] }} />
+              <span
+                className="emoji-mart-anchor-bar"
+                style={{ backgroundColor: color }}
+              />
+            </span>
+          )
+        })}
+      </div>
+    )
   }
 }
 
@@ -63,5 +70,5 @@ Anchors.propTypes = {
 
 Anchors.defaultProps = {
   categories: [],
-  onAnchorClick: (() => {}),
+  onAnchorClick: () => {},
 }
diff --git a/src/components/category.js b/src/components/category.js
@@ -22,11 +22,24 @@ export default class Category extends React.Component {
   }
 
   shouldComponentUpdate(nextProps, nextState) {
-    var { name, perLine, native, hasStickyPosition, emojis, emojiProps } = this.props,
-        { skin, size, set } = emojiProps,
-        { perLine: nextPerLine, native: nextNative, hasStickyPosition: nextHasStickyPosition, emojis: nextEmojis, emojiProps: nextEmojiProps } = nextProps,
-        { skin: nextSkin, size: nextSize, set: nextSet } = nextEmojiProps,
-        shouldUpdate = false
+    var {
+        name,
+        perLine,
+        native,
+        hasStickyPosition,
+        emojis,
+        emojiProps,
+      } = this.props,
+      { skin, size, set } = emojiProps,
+      {
+        perLine: nextPerLine,
+        native: nextNative,
+        hasStickyPosition: nextHasStickyPosition,
+        emojis: nextEmojis,
+        emojiProps: nextEmojiProps,
+      } = nextProps,
+      { skin: nextSkin, size: nextSize, set: nextSet } = nextEmojiProps,
+      shouldUpdate = false
 
     if (name == 'Recent' && perLine != nextPerLine) {
       shouldUpdate = true
@@ -36,7 +49,13 @@ export default class Category extends React.Component {
       shouldUpdate = !(emojis == nextEmojis)
     }
 
-    if (skin != nextSkin || size != nextSize || native != nextNative || set != nextSet || hasStickyPosition != nextHasStickyPosition) {
+    if (
+      skin != nextSkin ||
+      size != nextSize ||
+      native != nextNative ||
+      set != nextSet ||
+      hasStickyPosition != nextHasStickyPosition
+    ) {
       shouldUpdate = true
     }
 
@@ -81,7 +100,7 @@ export default class Category extends React.Component {
       let frequentlyUsed = frequently.get(perLine)
 
       if (frequentlyUsed.length) {
-        emojis = frequentlyUsed.map((id) => {
+        emojis = frequentlyUsed.map(id => {
           const emoji = custom.filter(e => e.id === id)[0]
           if (emoji) {
             return emoji
@@ -119,10 +138,10 @@ export default class Category extends React.Component {
 
   render() {
     var { name, hasStickyPosition, emojiProps, i18n } = this.props,
-        emojis = this.getEmojis(),
-        labelStyles = {},
-        labelSpanStyles = {},
-        containerStyles = {}
+      emojis = this.getEmojis(),
+      labelStyles = {},
+      labelSpanStyles = {},
+      containerStyles = {}
 
     if (!emojis) {
       containerStyles = {
@@ -140,34 +159,45 @@ export default class Category extends React.Component {
       }
     }
 
-    return <div ref={this.setContainerRef} className={`emoji-mart-category ${emojis && !emojis.length ? 'emoji-mart-no-results' : ''}`} style={containerStyles}>
-      <div style={labelStyles} data-name={name} className='emoji-mart-category-label'>
-        <span style={labelSpanStyles} ref={this.setLabelRef}>{i18n.categories[name.toLowerCase()]}</span>
-      </div>
-
-      {emojis && emojis.map((emoji) =>
-        Emoji({ emoji: emoji, ...emojiProps })
-      )}
-
-      {emojis && !emojis.length &&
-        <div>
-          <div>
-            {Emoji({
-              ...emojiProps,
-              size: 38,
-              emoji: 'sleuth_or_spy',
-              onOver: null,
-              onLeave: null,
-              onClick: null,
-            })}
-          </div>
-
-          <div className='emoji-mart-no-results-label'>
-            {i18n.notfound}
-          </div>
+    return (
+      <div
+        ref={this.setContainerRef}
+        className={`emoji-mart-category ${emojis && !emojis.length
+          ? 'emoji-mart-no-results'
+          : ''}`}
+        style={containerStyles}
+      >
+        <div
+          style={labelStyles}
+          data-name={name}
+          className="emoji-mart-category-label"
+        >
+          <span style={labelSpanStyles} ref={this.setLabelRef}>
+            {i18n.categories[name.toLowerCase()]}
+          </span>
         </div>
-      }
-    </div>
+
+        {emojis && emojis.map(emoji => Emoji({ emoji: emoji, ...emojiProps }))}
+
+        {emojis &&
+          !emojis.length && (
+            <div>
+              <div>
+                {Emoji({
+                  ...emojiProps,
+                  size: 38,
+                  emoji: 'sleuth_or_spy',
+                  onOver: null,
+                  onLeave: null,
+                  onClick: null,
+                })}
+              </div>
+
+              <div className="emoji-mart-no-results-label">{i18n.notfound}</div>
+            </div>
+          )}
+      </div>
+    )
   }
 }