Linting with prettier

.eslintignore

@@ -0,0 +1 @@
+**/__tests__/**/*

.eslintrc

@@ -0,0 +1,9 @@
+{
+  "parser": "babel-eslint",
+  "plugins": [
+    "prettier",
+  ],
+  "rules": {
+    "prettier/prettier": "error"
+  }
+}

package.json

@@ -10,7 +10,8 @@
     "watch": "./node_modules/.bin/watchify --extension=.jsx -d -t [ babelify ] src/*.jsx preview.jsx -o lib/preview.js",
     "example": "open http://localhost:8080/examples && http-server",
     "prepublish": "npm run build",
-    "test": "jest"
+    "test": "jest",
+    "lint": "eslint src --fix"
   },
   "repository": {
     "type": "git",
@@ -39,13 +40,17 @@
   },
   "devDependencies": {
     "babel-cli": "^6.7.5",
+    "babel-eslint": "^7.1.1",
     "babel-preset-es2015": "^6.9.0",
     "babel-preset-react": "^6.5.0",
     "babel-preset-stage-0": "^6.5.0",
     "babelify": "^7.2.0",
     "browserify": "^13.0.0",
+    "eslint": "^3.15.0",
+    "eslint-plugin-prettier": "^2.0.0",
     "http-server": "^0.9.0",
     "jest": "^18.1.0",
+    "prettier": "^0.16.0",
     "react": "^15.4.2",
     "react-addons-perf": "^15.4.2",
     "react-addons-shallow-compare": "^15.0.0",

src/categories.jsx

@@ -1,10 +1,10 @@
-import React, {PropTypes, Component} from 'react';
-import {AutoSizer, List} from 'react-virtualized';
-import findIndex from 'lodash/findIndex';
-import throttle from 'lodash/throttle';
-import CategoryHeader from './category-header';
-import EmojiRow from './emoji-row';
-import Modifiers from './modifiers';
+import React, { PropTypes, Component } from "react";
+import { AutoSizer, List } from "react-virtualized";
+import findIndex from "lodash/findIndex";
+import throttle from "lodash/throttle";
+import CategoryHeader from "./category-header";
+import EmojiRow from "./emoji-row";
+import Modifiers from "./modifiers";
 
 // These height values must be kept in sync with the heights
 // (margin + padding + content height) defined in CSS.
@@ -13,18 +13,20 @@ const EMOJI_ROW_HEIGHT = 32;
 
 export default class Categories extends Component {
   static propTypes = {
-    rows: PropTypes.arrayOf(PropTypes.oneOfType([
-      PropTypes.shape({
-        category: PropTypes.object.isRequired,
-        id: PropTypes.string.isRequired,
-      }),
-      PropTypes.arrayOf(PropTypes.object).isRequired,
-    ])).isRequired,
+    rows: PropTypes.arrayOf(
+      PropTypes.oneOfType([
+        PropTypes.shape({
+          category: PropTypes.object.isRequired,
+          id: PropTypes.string.isRequired
+        }),
+        PropTypes.arrayOf(PropTypes.object).isRequired
+      ])
+    ).isRequired,
     modifier: PropTypes.string.isRequired,
     onActiveCategoryChange: PropTypes.func.isRequired,
     onChange: PropTypes.func.isRequired,
-    onModifierChange: PropTypes.func.isRequired,
-  }
+    onModifierChange: PropTypes.func.isRequired
+  };
 
   constructor(props, context) {
     super(props, context);
@@ -36,52 +38,33 @@ export default class Categories extends Component {
   componentDidUpdate(prevProps) {
     if (
       this.props.rows !== prevProps.rows ||
-      this.props.modifier !== prevProps.modifier
+        this.props.modifier !== prevProps.modifier
     ) {
       this.list.recomputeRowHeights();
     }
   }
 
-  render() {
-    const rowCount = this.props.rows.length;
-
-    return (
-      <AutoSizer>
-        {({height, width}) => (
-          <List
-            height={height}
-            onScroll={this._onScroll}
-            ref={this._setListRef}
-            rowCount={rowCount}
-            rowHeight={this._rowHeight}
-            rowRenderer={this._rowRenderer}
-            scrollToAlignment="start"
-            tabIndex={null}
-            width={width}
-          />
-        )}
-      </AutoSizer>
-    );
-  }
-
-  _onScroll = throttle(({scrollTop}) => {
-    const activeCategory = this._getActiveCategory(scrollTop);
-    if (activeCategory !== this.lastActiveCategory) {
-      this.lastActiveCategory = activeCategory;
-      this.props.onActiveCategoryChange(activeCategory);
-    }
-  }, 100)
+  getActiveCategory = () => {
+    return this._getActiveCategory();
+  };
 
   _setListRef = list => {
     this.list = list;
-  }
-
-  getActiveCategory() {
-    return this._getActiveCategory();
-  }
+  };
+
+  _onScroll = throttle(
+    ({ scrollTop }) => {
+      const activeCategory = this._getActiveCategory(scrollTop);
+      if (activeCategory !== this.lastActiveCategory) {
+        this.lastActiveCategory = activeCategory;
+        this.props.onActiveCategoryChange(activeCategory);
+      }
+    },
+    100
+  );
 
-  _getActiveCategory(scrollTop = 0) {
-    const {rows} = this.props;
+  _getActiveCategory = (scrollTop = 0) => {
+    const { rows } = this.props;
 
     if (scrollTop === 0) {
       if (rows.length === 0) return undefined;
@@ -92,10 +75,12 @@ export default class Categories extends Component {
     let accumulatedScrollTop = 0;
 
     while (accumulatedScrollTop < scrollTop) {
-      accumulatedScrollTop += this._rowHeight({index: firstFullyVisibleRowIndex});
+      accumulatedScrollTop += this._rowHeight({
+        index: firstFullyVisibleRowIndex
+      });
 
       if (accumulatedScrollTop <= scrollTop) {
-        firstFullyVisibleRowIndex +=1;
+        firstFullyVisibleRowIndex += 1;
       }
     }
 
@@ -106,61 +91,73 @@ export default class Categories extends Component {
     }
 
     return currentRow.id;
-  }
+  };
 
-  _rowHeight = ({index}) => {
+  _rowHeight = ({ index }) => {
     const row = this.props.rows[index];
     return Array.isArray(row) ? EMOJI_ROW_HEIGHT : CATEGORY_HEADER_ROW_HEIGHT;
-  }
+  };
 
-  _rowRenderer = ({key, index, style}) => {
+  _rowRenderer = ({ key, index, style }) => {
     const row = this.props.rows[index];
-    const {onChange} = this.props;
+    const { onChange } = this.props;
 
     if (Array.isArray(row)) {
       return (
-        <EmojiRow
-          key={key}
-          onChange={onChange}
-          style={style}
-          emojis={row}
-        />
+        <EmojiRow key={key} onChange={onChange} style={style} emojis={row} />
       );
     }
 
-    const {category, id} = row;
+    const { category, id } = row;
     const attributes = {
       key,
       category,
       onChange,
       ref: this._setCategoryRef(id),
-      style,
+      style
     };
 
     if (index === 0) {
-      const {modifier, onModifierChange} = this.props;
+      const { modifier, onModifierChange } = this.props;
 
       attributes.headingDecoration = (
-        <Modifiers
-          active={modifier}
-          onChange={onModifierChange}
-        />
+        <Modifiers active={modifier} onChange={onModifierChange} />
       );
     }
 
-    return (
-      <CategoryHeader {...attributes} />
-    );
-  }
+    return <CategoryHeader {...attributes} />;
+  };
 
-  _setCategoryRef(id) {
+  _setCategoryRef = id => {
     return category => {
       this.categories[id] = category;
-    }
-  }
+    };
+  };
 
-  jumpToCategory(id) {
+  jumpToCategory = id => {
     const index = findIndex(this.props.rows, category => category.id === id);
     this.list.scrollToRow(index);
+  };
+
+  render() {
+    const rowCount = this.props.rows.length;
+
+    return (
+      <AutoSizer>
+        {({ height, width }) => (
+          <List
+            height={height}
+            onScroll={this._onScroll}
+            ref={this._setListRef}
+            rowCount={rowCount}
+            rowHeight={this._rowHeight}
+            rowRenderer={this._rowRenderer}
+            scrollToAlignment="start"
+            tabIndex={null}
+            width={width}
+          />
+        )}
+      </AutoSizer>
+    );
   }
 }

src/category-header.jsx

@@ -1,22 +1,22 @@
-import React, {PropTypes, Component} from 'react';
-import shallowCompare from 'react-addons-shallow-compare';
+import React, { PropTypes, Component } from "react";
+import shallowCompare from "react-addons-shallow-compare";
 
 export default class CategoryHeader extends Component {
   static propTypes = {
     category: PropTypes.shape({
-      title: PropTypes.string.isRequired,
+      title: PropTypes.string.isRequired
     }).isRequired,
     headingDecoration: PropTypes.node,
     onChange: PropTypes.func.isRequired,
-    style: PropTypes.object,
-  }
+    style: PropTypes.object
+  };
 
   shouldComponentUpdate(nextProps, nextState) {
     return shallowCompare(this, nextProps, nextState);
   }
 
   render() {
-    const {category, emojis, headingDecoration, onChange, style} = this.props;
+    const { category, headingDecoration, style } = this.props;
 
     return (
       <div className="emoji-category-header" style={style}>

src/constants.js

@@ -1,34 +1,34 @@
-export const defaultCategories = {
+export const defaultCategories = { // eslint-disable-line
   people: {
     title: 'People',
-    emoji: 'smile'
+    emoji: 'smile',
   },
   nature: {
     title: 'Nature',
-    emoji: 'hamster'
+    emoji: 'hamster',
   },
   food: {
     title: 'Food & Drink',
-    emoji: 'pizza'
+    emoji: 'pizza',
   },
   activity: {
     title: 'Activity',
-    emoji: 'soccer'
+    emoji: 'soccer',
   },
   travel: {
     title: 'Travel & Places',
-    emoji: 'earth_americas'
+    emoji: 'earth_americas',
   },
   objects: {
     title: 'Objects',
-    emoji: 'bulb'
+    emoji: 'bulb',
   },
   symbols: {
     title: 'Symbols',
-    emoji: 'clock9'
+    emoji: 'clock9',
   },
   flags: {
     title: 'Flags',
-    emoji: 'flag_gb'
-  }
+    emoji: 'flag_gb',
+  },
 };