Remove lint errors in demo pages

Author: tsuyoshiwada

.eslintrc

@@ -39,6 +39,8 @@
     "react/sort-comp": "off",
     "react/require-default-props": "off",
     "react/no-multi-comp": "off",
+    "jsx-a11y/href-no-hash": "off",
+    "jsx-a11y/label-has-for": "off",
     "jsx-a11y/img-has-alt": "off"
   }
 }

docs/js/components/DemoControl.js

@@ -1,4 +1,5 @@
 /* eslint-disable react/prop-types */
+/* eslint-disable import/no-extraneous-dependencies */
 import React, { Component } from 'react';
 import Slider from 'rc-slider';
 import { easings, transitions } from '../../../src/';

docs/js/components/Header.js

@@ -1,20 +1,19 @@
 /* eslint-disable react/prop-types */
-import React, { Component } from 'react';
+/* eslint-disable import/no-extraneous-dependencies */
+import React from 'react';
 import { IndexLink, Link } from 'react-router';
 
-export default class Header extends Component {
-  render() {
-    return (
-      <header className="header">
-        <h1><img src="./images/logo.png" alt="React Stack Grid" /></h1>
-        <nav>
-          <ul>
-            <li><IndexLink to="/" activeClassName="is-active">Home</IndexLink></li>
-            <li><Link to="/real-world/" activeClassName="is-active">Real World</Link></li>
-            <li><a href="https://github.com/tsuyoshiwada/react-stack-grid">GitHub</a></li>
-          </ul>
-        </nav>
-      </header>
-    );
-  }
-}
+const Header = () => (
+  <header className="header">
+    <h1><img src="./images/logo.png" alt="React Stack Grid" /></h1>
+    <nav>
+      <ul>
+        <li><IndexLink to="/" activeClassName="is-active">Home</IndexLink></li>
+        <li><Link to="/real-world/" activeClassName="is-active">Real World</Link></li>
+        <li><a href="https://github.com/tsuyoshiwada/react-stack-grid">GitHub</a></li>
+      </ul>
+    </nav>
+  </header>
+);
+
+export default Header;

docs/js/pages/Home.js

@@ -1,4 +1,6 @@
+/* eslint-disable class-methods-use-this */
 /* eslint-disable react/prop-types */
+/* eslint-disable jsx-a11y/no-static-element-interactions */
 import React, { Component } from 'react';
 import StackGrid, { transitions, easings } from '../../../src/';
 import DemoControl from '../components/DemoControl';
@@ -21,7 +23,7 @@ export default class Home extends Component {
 
     const items = [];
 
-    for (let i = 0; i < 10; i++) {
+    for (let i = 0; i < 10; i += 1) {
       items.push(this.createItem());
     }
 
@@ -37,7 +39,7 @@ export default class Home extends Component {
 
   createItem() {
     const id = Math.random().toString(36).substr(2, 9);
-    const height = Math.floor(Math.random() * (300 - 80) + 80);
+    const height = Math.floor((Math.random() * (300 - 80)) + 80);
     const modifier = itemModifier[Math.floor(Math.random() * itemModifier.length)];
 
     return { id, height, modifier };
@@ -49,7 +51,7 @@ export default class Home extends Component {
 
     while (i) {
       const j = Math.floor(Math.random() * i);
-      const t = newItems[--i];
+      const t = newItems[--i]; // eslint-disable-line no-plusplus
       newItems[i] = newItems[j];
       newItems[j] = t;
     }
@@ -72,7 +74,7 @@ export default class Home extends Component {
   multipleAppendItem = () => {
     const newItems = [];
 
-    for (let i = 0; i < 5; i++) {
+    for (let i = 0; i < 5; i += 1) {
       newItems.push(this.createItem());
     }
 

docs/js/pages/RealWorld.js

@@ -1,7 +1,8 @@
 /* eslint-disable react/prop-types */
-import React, { Component } from 'react';
+import React from 'react';
 import StackGrid, { transitions, easings } from '../../../src/';
 
+
 const transition = transitions.scaleDown;
 
 const images = [
@@ -30,33 +31,31 @@ const images = [
 ];
 
 
-export default class RealWorld extends Component {
-  render() {
-    return (
-      <StackGrid
-        monitorImagesLoaded
-        columnWidth={300}
-        duration={600}
-        gutterWidth={15}
-        gutterHeight={15}
-        easing={easings.cubicOut}
-        appearDelay={60}
-        appear={transition.appear}
-        appeared={transition.appeared}
-        enter={transition.enter}
-        entered={transition.entered}
-        leaved={transition.leaved}
+const RealWorld = () => (
+  <StackGrid
+    monitorImagesLoaded
+    columnWidth={300}
+    duration={600}
+    gutterWidth={15}
+    gutterHeight={15}
+    easing={easings.cubicOut}
+    appearDelay={60}
+    appear={transition.appear}
+    appeared={transition.appeared}
+    enter={transition.enter}
+    entered={transition.entered}
+    leaved={transition.leaved}
+  >
+    {images.map(obj =>
+      (<figure
+        key={obj.src}
+        className="image"
       >
-        {images.map(obj =>
-          (<figure
-            key={obj.src}
-            className="image"
-          >
-            <img src={obj.src} alt={obj.label} />
-            <figcaption>{obj.label}</figcaption>
-          </figure>)
-        )}
-      </StackGrid>
-    );
-  }
-}
+        <img src={obj.src} alt={obj.label} />
+        <figcaption>{obj.label}</figcaption>
+      </figure>)
+    )}
+  </StackGrid>
+);
+
+export default RealWorld;