Fix lint issue and Cleanup

moroshko · May 14, 2016 · d79a4cb · d79a4cb
1 parent b5eb590
commit d79a4cb
Show file tree

Hide file tree

Showing 8 changed files with 134 additions and 128 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -2,13 +2,14 @@
   "env": {
     "es6": true,
     "node": true,
-    "browser": true
+    "browser": true,
+    "mocha": true
   },
   "parser": "babel-eslint",
   "plugins": [
     "react"
   ],
-  "extends": "plugin:react/recommended",
+  "extends": ["eslint:recommended", "plugin:react/recommended"],
   "rules": {
     "array-callback-return": 2,
     "brace-style": [2, "1tbs"],
@@ -39,6 +40,7 @@
     "template-curly-spacing": [2, "never"],
 
     "react/jsx-boolean-value": [2, "always"],
-    "react/jsx-space-before-closing": [2, "always"]
+    "react/jsx-space-before-closing": [2, "always"],
+    "react/sort-comp": 2
   }
 }
diff --git a/demo/src/components/App/App.js b/demo/src/components/App/App.js
@@ -9,8 +9,8 @@ import Example3 from 'Example3/Example3';
 import Example4 from 'Example4/Example4';
 import Example5 from 'Example5/Example5';
 import Example6 from 'Example6/Example6';
-import Example6s from 'Example6s/Example6s';
 import Example7 from 'Example7/Example7';
+import Example8 from 'Example8/Example8';
 
 export default class App extends Component {
   render() {
@@ -47,10 +47,10 @@ export default class App extends Component {
             <Example6 />
           </div>
           <div className={styles.exampleContainer}>
-            <Example6s />
+            <Example7 />
           </div>
           <div className={styles.exampleContainer}>
-            <Example7 />
+            <Example8 />
           </div>
         </div>
         <ForkMeOnGitHub user="moroshko" repo="react-autowhatever" />

diff --git a/demo/src/components/App/components/Example7/Example7.js b/demo/src/components/App/components/Example7/Example7.js
@@ -10,44 +10,27 @@ const exampleId = '7';
 const file = `demo/src/components/App/components/Example${exampleId}/Example${exampleId}.js`;
 
 const items = [{
-  title: 'A',
-  items: [{
-    text: 'Apple'
-  }, {
-    text: 'Apricot'
-  }]
+  text: 'Apple cake'
 }, {
-  title: 'B',
-  items: [{
-    text: 'Banana'
-  }]
+  text: 'Apple pie'
 }, {
-  title: 'C',
-  items: [{
-    text: 'Cherry'
-  }]
+  text: 'Banana cake'
+}, {
+  text: 'Banana pie'
+}, {
+  text: 'Cherry cake'
+}, {
+  text: 'Cherry pie'
+}, {
+  text: 'Grapefruit cake'
+}, {
+  text: 'Grapefruit pie'
+}, {
+  text: 'Lemon cake'
+}, {
+  text: 'Lemon pie'
 }];
 
-function shouldRenderSection(section) {
-  return section.items.length > 0;
-}
-
-function renderSectionTitle(section) {
-  return (
-    <strong>{section.title}</strong>
-  );
-}
-
-function getSectionItems(section) {
-  return section.items;
-}
-
-function renderItem(item) {
-  return (
-    <span>{item.text}</span>
-  );
-}
-
 function mapStateToProps(state) {
   return {
     value: state[exampleId].value,
@@ -61,22 +44,21 @@ function mapDispatchToProps(dispatch) {
     onChange: event => {
       dispatch(updateInputValue(exampleId, event.target.value));
     },
-    onKeyDown: (event, { focusedSectionIndex, focusedItemIndex, newFocusedSectionIndex, newFocusedItemIndex }) => {
-      switch (event.key) {
-        case 'ArrowDown':
-        case 'ArrowUp':
-          event.preventDefault();
-          dispatch(updateFocusedItem(exampleId, newFocusedSectionIndex, newFocusedItemIndex));
-          break;
-
-        case 'Enter':
-          dispatch(updateInputValue(exampleId, items[focusedSectionIndex].items[focusedItemIndex].text + ' selected'));
-          break;
+    onKeyDown: (event, { newFocusedSectionIndex, newFocusedItemIndex }) => {
+      if (typeof newFocusedItemIndex !== 'undefined') {
+        event.preventDefault();
+        dispatch(updateFocusedItem(exampleId, newFocusedSectionIndex, newFocusedItemIndex));
       }
     }
   };
 }
 
+function renderItem(item) {
+  return (
+    <span>{item.text}</span>
+  );
+}
+
 class Example extends Component {
   static propTypes = {
     value: PropTypes.string.isRequired,
@@ -94,11 +76,7 @@ class Example extends Component {
     return (
       <div>
         <Autowhatever id={exampleId}
-                      multiSection={true}
                       items={items}
-                      shouldRenderSection={shouldRenderSection}
-                      renderSectionTitle={renderSectionTitle}
-                      getSectionItems={getSectionItems}
                       renderItem={renderItem}
                       inputProps={inputProps}
                       focusedSectionIndex={focusedSectionIndex}

diff --git a/...nts/App/components/Example6s/Example6s.js → ...nents/App/components/Example8/Example8.js b/...nts/App/components/Example6s/Example6s.js → ...nents/App/components/Example8/Example8.js
@@ -6,28 +6,46 @@ import { updateInputValue, updateFocusedItem } from 'actions/app';
 import Autowhatever from 'Autowhatever';
 import SourceCodeLink from 'SourceCodeLink/SourceCodeLink';
 
-const exampleId = '6s';
+const exampleId = '7';
 const file = `demo/src/components/App/components/Example${exampleId}/Example${exampleId}.js`;
 
-const items0 = [{
-  text: 'Apple'
+const items = [{
+  title: 'A',
+  items: [{
+    text: 'Apple'
+  }, {
+    text: 'Apricot'
+  }]
 }, {
-  text: 'Banana'
+  title: 'B',
+  items: [{
+    text: 'Banana'
+  }]
 }, {
-  text: 'Cherry'
-}, {
-  text: 'Grapefruit'
-}, {
-  text: 'Lemon'
+  title: 'C',
+  items: [{
+    text: 'Cherry'
+  }]
 }];
 
-// Make list longer!
-const items = [];
+function shouldRenderSection(section) {
+  return section.items.length > 0;
+}
 
-for (let { text } of items0) {
-  for (let w of ['cake', 'pie', 'soup', 'tart']) {
-    items.push({ text: `${text} ${w}` });
-  }
+function renderSectionTitle(section) {
+  return (
+    <strong>{section.title}</strong>
+  );
+}
+
+function getSectionItems(section) {
+  return section.items;
+}
+
+function renderItem(item) {
+  return (
+    <span>{item.text}</span>
+  );
 }
 
 function mapStateToProps(state) {
@@ -43,21 +61,22 @@ function mapDispatchToProps(dispatch) {
     onChange: event => {
       dispatch(updateInputValue(exampleId, event.target.value));
     },
-    onKeyDown: (event, { newFocusedSectionIndex, newFocusedItemIndex }) => {
-      if (typeof newFocusedItemIndex !== 'undefined') {
-        event.preventDefault();
-        dispatch(updateFocusedItem(exampleId, newFocusedSectionIndex, newFocusedItemIndex));
+    onKeyDown: (event, { focusedSectionIndex, focusedItemIndex, newFocusedSectionIndex, newFocusedItemIndex }) => {
+      switch (event.key) {
+        case 'ArrowDown':
+        case 'ArrowUp':
+          event.preventDefault();
+          dispatch(updateFocusedItem(exampleId, newFocusedSectionIndex, newFocusedItemIndex));
+          break;
+
+        case 'Enter':
+          dispatch(updateInputValue(exampleId, items[focusedSectionIndex].items[focusedItemIndex].text + ' selected'));
+          break;
       }
     }
   };
 }
 
-function renderItem(item) {
-  return (
-    <span>{item.text}</span>
-  );
-}
-
 class Example extends Component {
   static propTypes = {
     value: PropTypes.string.isRequired,
@@ -75,7 +94,11 @@ class Example extends Component {
     return (
       <div>
         <Autowhatever id={exampleId}
+                      multiSection={true}
                       items={items}
+                      shouldRenderSection={shouldRenderSection}
+                      renderSectionTitle={renderSectionTitle}
+                      getSectionItems={getSectionItems}
                       renderItem={renderItem}
                       inputProps={inputProps}
                       focusedSectionIndex={focusedSectionIndex}

diff --git a/demo/src/components/App/components/theme.less b/demo/src/components/App/components/theme.less
@@ -1,5 +1,4 @@
 @font-size: 16px;
-@line-height: 1.25;
 @border-color: #aaa;
 @border-radius: 4px;
 
@@ -35,12 +34,11 @@
   border: 1px solid @border-color;
   background-color: #fff;
   font-size: @font-size;
-  line-height: @line-height;
+  line-height: 1.25;
   border-bottom-left-radius: @border-radius;
   border-bottom-right-radius: @border-radius;
   z-index: 2;
-
-  max-height: 400px;
+  max-height: 260px;
   overflow-y: auto;
 }
 

diff --git a/demo/src/components/reducers/app.js b/demo/src/components/reducers/app.js
@@ -26,12 +26,12 @@ const initialState = {
     focusedSectionIndex: null,
     focusedItemIndex: null
   },
-  '6s': {
-    value: 'Up/Down (Scrolling)',
+  7: {
+    value: 'Up/Down (with scrollbar)',
     focusedSectionIndex: null,
-    focusedItemIndex: 11
+    focusedItemIndex: 7
   },
-  7: {
+  8: {
     value: 'Multi section - Up/Down/Enter',
     focusedSectionIndex: null,
     focusedItemIndex: null

diff --git a/package.json b/package.json
@@ -31,28 +31,28 @@
   },
   "devDependencies": {
     "autoprefixer": "^6.3.6",
-    "babel-cli": "^6.7.7",
-    "babel-core": "^6.7.7",
-    "babel-eslint": "^6.0.3",
+    "babel-cli": "^6.8.0",
+    "babel-core": "^6.8.0",
+    "babel-eslint": "^6.0.4",
     "babel-loader": "^6.2.4",
     "babel-preset-es2015": "^6.6.0",
     "babel-preset-react": "^6.5.0",
     "babel-preset-stage-0": "^6.5.0",
-    "babel-register": "^6.7.2",
+    "babel-register": "^6.8.0",
     "chai": "^3.5.0",
     "css-loader": "^0.23.1",
-    "eslint": "^2.8.0",
-    "eslint-plugin-react": "^5.0.1",
+    "eslint": "2.8.0",
+    "eslint-plugin-react": "^5.1.1",
     "extract-text-webpack-plugin": "^1.0.1",
-    "less": "^2.6.1",
+    "less": "^2.7.1",
     "less-loader": "^2.2.3",
     "mocha": "^2.4.5",
-    "postcss-loader": "^0.8.2",
+    "postcss-loader": "^0.9.1",
     "react": "^15.0.1",
     "react-dom": "^15.0.1",
     "react-hot-loader": "^1.3.0",
     "react-redux": "^4.4.5",
-    "redux": "^3.5.1",
+    "redux": "^3.5.2",
     "style-loader": "^0.13.1",
     "webpack": "^1.13.0",
     "webpack-dev-server": "^1.14.1"