Lint hard

.circleci/config.yml

@@ -3,9 +3,9 @@ version: 2
 
 jobs:
   build:
-    working_directory: ~/react-collapse
+    working_directory: ~/app
     docker:
-      - image: circleci/node:8
+      - image: circleci/node:8.4.0
       - image: selenium/standalone-firefox:3.4.0
 
     steps:

.eslintrc

@@ -28,6 +28,7 @@
     "babel/semi": 2,
     "jsx-a11y/href-no-hash": 0,
     "jsx-a11y/label-has-for": 0,
+    "jsx-a11y/click-events-have-key-events": 0,
     "react/forbid-prop-types": 0,
     "react/jsx-filename-extension": [2, {"extensions": [".js"]}],
     "react/jsx-closing-bracket-location": [2, {"nonEmpty": "after-props", "selfClosing": "after-props"}],

README.md

@@ -25,7 +25,7 @@ Don't forget to manually install peer dependencies (`react`, `react-motion`) if
 
 ### 1998 Script Tag:
 ```html
-<script src="https://unpkg.com/react/dist/react.js"></script>
+<script src="https://unpkg.com/react/umd/react.production.min.js"></script>
 <script src="https://unpkg.com/react-motion/build/react-motion.js"></script>
 <script src="https://unpkg.com/react-collapse/build/react-collapse.js"></script>
 (Module exposed as `ReactCollapse`)
@@ -309,6 +309,9 @@ yarn lint
 yarn test
 
 # to run end-to-end tests
+# first, run `selenium/standalone-firefox:3.4.0` docker image
+docker run -p 4444:4444 selenium/standalone-firefox:3.4.0
+# then run test
 yarn e2e
 ```
 

example/App/AutoUnmount.js

@@ -34,7 +34,7 @@ export class AutoUnmount extends React.PureComponent {
 
   constructor(props) {
     super(props);
-    this.state = {isOpened: this.props.isOpened, shouldRender: false};
+    this.state = {isOpened: this.props.isOpened};
   }
 
 

example/App/Hooks.js

@@ -12,8 +12,6 @@ export class Hooks extends React.PureComponent {
     this.state = {
       isOpened: false,
       isResting: false,
-      renderHeight: -1,
-      keepContent: false,
       height: -1,
       width: -1,
       paragraphs: 0
@@ -43,7 +41,12 @@ export class Hooks extends React.PureComponent {
   };
 
   render() {
-    const {isOpened, height, width, paragraphs} = this.state;
+    const {
+      isOpened,
+      height,
+      width,
+      paragraphs
+    } = this.state;
 
     return (
       <div>

example/App/Issue163.js

@@ -3,15 +3,11 @@ import {Collapse} from '../../src';
 
 
 export class Issue163 extends React.PureComponent {
-  constructor(props) {
-    super(props);
-    this.state = {
-      isOpened: true,
-      isOverflowOpened: true
-    };
-  }
+  state = {
+    isOpened: true,
+    isOverflowOpened: true
+  };
 
-  onClick = () => this.setState({opened: !this.state.opened});
 
   render() {
     const {isOpened, isOverflowOpened} = this.state;
@@ -41,7 +37,9 @@ export class Issue163 extends React.PureComponent {
                   onChange={({target: {checked}}) => this.setState({isOverflowOpened: checked})} />
               </label>
               {isOverflowOpened && (
-                <div style={{width: 200, height: 200, background: 'black', position: 'absolute'}} />
+                <div style={{
+                  width: 200, height: 200, background: 'black', position: 'absolute'
+                }} />
               )}
             </div>
           </div>

example/App/Issue59.js

@@ -30,10 +30,7 @@ const styles = {
 
 
 export class Issue59 extends React.PureComponent {
-  constructor(props) {
-    super(props);
-    this.state = {opened: 1};
-  }
+  state = {opened: 1, whatever: 'b'};
 
 
   onClick1 = () => {
@@ -42,26 +39,29 @@ export class Issue59 extends React.PureComponent {
 
 
   onClick2 = () => {
-    this.setState({opened: 2}, () => setTimeout(() => this.setState({whatever: 1}), 50));
+    this.setState({opened: 2}, () => setTimeout(() => this.setState({whatever: 'bb'}), 50));
   };
 
 
   render() {
+    const {opened, whatever} = this.state;
     return (
       <div>
         <div style={styles.mb3}>
           <div style={styles.ba} onClick={this.onClick1}>Header 1</div>
-          <Collapse isOpened={this.state.opened === 1}>
+          <Collapse isOpened={opened === 1}>
             <div style={{...styles.ba, ...styles.pa3}}>
               <div style={{...styles.h3, ...styles.w3, ...styles.bgBlack}}>a</div>
             </div>
           </Collapse>
         </div>
         <div style={styles.mb3}>
           <div style={styles.ba} onClick={this.onClick2}>Header 2</div>
-          <Collapse isOpened={this.state.opened === 2}>
+          <Collapse isOpened={opened === 2}>
             <div style={{...styles.ba, ...styles.pa3}}>
-              <div style={{...styles.h3, ...styles.w3, ...styles.bgBlack}}>b</div>
+              <div style={{...styles.h3, ...styles.w3, ...styles.bgBlack}}>
+                {whatever}
+              </div>
             </div>
           </Collapse>
         </div>

example/App/SpringConfig.js

@@ -4,14 +4,13 @@ import {Collapse} from '../../src';
 
 
 export class SpringConfig extends React.PureComponent {
-  constructor(props) {
-    super(props);
-
-    const preset = 'stiff';
-    const {stiffness, damping} = presets[preset];
-
-    this.state = {isOpened: false, height: 100, preset: 'stiff', stiffness, damping};
-  }
+  state = {
+    isOpened: false,
+    height: 100,
+    preset: 'stiff',
+    stiffness: presets.stiff.stiffness,
+    damping: presets.stiff.damping
+  };
 
 
   onChangePreset = ({target: {value: preset}}) => {
@@ -22,7 +21,13 @@ export class SpringConfig extends React.PureComponent {
 
 
   render() {
-    const {isOpened, height, preset, stiffness, damping} = this.state;
+    const {
+      isOpened,
+      height,
+      preset,
+      stiffness,
+      damping
+    } = this.state;
 
     return (
       <div>

scripts/build.js

@@ -2,5 +2,5 @@
 'use strict';
 
 
-require(`./lib`);
-require(`./dist`);
+require('./lib');
+require('./dist');

scripts/dev.js

@@ -2,7 +2,7 @@
 'use strict';
 
 
-const {npm, CWD} = require(`./utils/bash`);
+const {npm, CWD} = require('./utils/bash');
 
 
 npm(`webpack-dev-server --config ${require.resolve(`./utils/webpack/dev.config.js`)}`, {

scripts/dist.js

@@ -2,7 +2,7 @@
 'use strict';
 
 
-const {npm, CWD} = require(`./utils/bash`);
+const {npm, CWD} = require('./utils/bash');
 
 
 npm(`rimraf build`, {cwd: CWD});

scripts/e2e.js

@@ -2,13 +2,13 @@
 'use strict';
 
 
-const path = require(`path`);
-const nightwatch = require(`nightwatch`);
-const finalhandler = require(`finalhandler`);
-const http = require(`http`);
-const serveStatic = require(`serve-static`);
-const {CWD} = require(`./utils/bash`);
-const portfinder = require(`portfinder`);
+const path = require('path');
+const nightwatch = require('nightwatch');
+const finalhandler = require('finalhandler');
+const http = require('http');
+const serveStatic = require('serve-static');
+const {CWD} = require('./utils/bash');
+const portfinder = require('portfinder');
 
 
 const {
@@ -101,7 +101,7 @@ const run = async ({cwd}) => {
 };
 
 
-require(`./pub`);
+require('./pub');
 
 
 run({cwd: CWD});

scripts/ghPages.js

@@ -2,12 +2,12 @@
 'use strict';
 
 
-const path = require(`path`);
-const {publish} = require(`gh-pages`);
-const {CWD} = require(`./utils/bash`);
+const path = require('path');
+const {publish} = require('gh-pages');
+const {CWD} = require('./utils/bash');
 
 
-require(`./pub`);
+require('./pub');
 
 
 const {name} = require(path.join(CWD, `package.json`));

scripts/lib.js

@@ -2,7 +2,7 @@
 'use strict';
 
 
-const {npm, CWD} = require(`./utils/bash`);
+const {npm, CWD} = require('./utils/bash');
 
 
 npm(`rimraf lib`, {cwd: CWD});

scripts/lint.js

@@ -2,7 +2,7 @@
 'use strict';
 
 
-const {npm, CWD} = require(`./utils/bash`);
+const {npm, CWD} = require('./utils/bash');
 
 
 npm(`eslint .`, {cwd: CWD});

scripts/pub.js

@@ -2,7 +2,7 @@
 'use strict';
 
 
-const {npm, CWD} = require(`./utils/bash`);
+const {npm, CWD} = require('./utils/bash');
 
 
 npm(`rimraf lib`, {cwd: CWD});

scripts/test.js

@@ -2,12 +2,12 @@
 'use strict';
 
 
-const path = require(`path`);
-const glob = require(`glob`);
-const {CWD} = require(`./utils/bash`);
+const path = require('path');
+const glob = require('glob');
+const {CWD} = require('./utils/bash');
 
 
-require(`babel-register`)({
+require('babel-register')({
   babelrc: false,
   plugins: [
     `transform-object-rest-spread`,

scripts/utils/bash.js

@@ -1,8 +1,8 @@
 'use strict';
 
 
-const {execSync} = require(`child_process`);
-const {resolve} = require(`path`);
+const {execSync} = require('child_process');
+const {resolve} = require('path');
 
 
 const {NODE_DEBUG = ``} = process.env;
@@ -26,7 +26,8 @@ const bash = (cmd, options = {}) => {
   const result = execSync(cleanCmd, Object.assign(
     {stdio: `inherit`},
     options,
-    {env: Object.assign({}, process.env, options.env)}));
+    {env: Object.assign({}, process.env, options.env)}
+  ));
   const stringResult = result ? result.toString().trim() : ``;
   debug(`<<`, stringResult);
   return stringResult;

scripts/utils/ci.js

@@ -1,7 +1,7 @@
 'use strict';
 
 
-const {CWD: SRC, bash} = require(`./bash`);
+const {CWD: SRC, bash} = require('./bash');
 
 
 const BUILD_HASH = bash(`git rev-parse --short HEAD`, {stdio: `pipe`});

scripts/utils/webpack/common.js

@@ -1,11 +1,11 @@
 'use strict';
 
 
-const webpack = require(`webpack`);
-const HtmlWebpackPlugin = require(`html-webpack-plugin`);
-const HtmlWebpackIncludeAssetsPlugin = require(`html-webpack-include-assets-plugin`);
-const path = require(`path`);
-const BabiliPlugin = require(`babili-webpack-plugin`);
+const webpack = require('webpack');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const HtmlWebpackIncludeAssetsPlugin = require('html-webpack-include-assets-plugin');
+const path = require('path');
+const BabiliPlugin = require('babili-webpack-plugin');
 
 
 const {NODE_ENV = `development`} = process.env;

scripts/utils/webpack/dev.config.js

@@ -7,7 +7,7 @@ const {
   loaders,
   resolve,
   stats
-} = require(`./common`);
+} = require('./common');
 
 
 module.exports = {

scripts/utils/webpack/dist.config.js

@@ -10,7 +10,7 @@ const {
   resolve,
   stats,
   externals
-} = require(`./common`);
+} = require('./common');
 
 
 module.exports = {

scripts/utils/webpack/min.config.js

@@ -10,7 +10,7 @@ const {
   resolve,
   stats,
   externals
-} = require(`./common`);
+} = require('./common');
 
 
 module.exports = {

scripts/utils/webpack/pub.config.js

@@ -1,7 +1,7 @@
 'use strict';
 
 
-const ExtractTextPlugin = require(`extract-text-webpack-plugin`);
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
 
 const {
   pathTo,
@@ -11,7 +11,7 @@ const {
   stats,
   externals,
   INCLUDE_JS
-} = require(`./common`);
+} = require('./common');
 
 
 module.exports = {