Merge pull request nkbt#209 from nkbt/refresh

Refresh
cichelero · Jan 10, 2018 · a095198 · a095198
2 parents 4fc100a + 12cc271
commit a095198
Show file tree

Hide file tree

Showing 26 changed files with 1,469 additions and 453 deletions.
diff --git a/.circleci/config.yml b/.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:

diff --git a/.eslintrc b/.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"}],

diff --git a/README.md b/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
 ```
 

diff --git a/example/App/AutoUnmount.js b/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};
   }
 
 

diff --git a/example/App/Hooks.js b/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>

diff --git a/example/App/Issue163.js b/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>

diff --git a/example/App/Issue59.js b/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>

diff --git a/example/App/SpringConfig.js b/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>

diff --git a/package.json b/package.json
@@ -9,7 +9,12 @@
       "react": "React",
       "react-dom": "ReactDOM",
       "react-motion": "ReactMotion"
-    }
+    },
+    "include": [
+      "https://unpkg.com/react/umd/react.production.min.js",
+      "https://unpkg.com/react-dom/umd/react-dom.production.min.js",
+      "https://unpkg.com/react-motion/build/react-motion.js"
+    ]
   },
   "scripts": {
     "build": "scripts/build.js",
@@ -48,43 +53,44 @@
     "react-motion": "^0.4 || ^0.5"
   },
   "dependencies": {
-    "prop-types": "^15.5.8"
+    "prop-types": "^15.6.0"
   },
   "devDependencies": {
-    "babel-cli": "^6.24.1",
-    "babel-eslint": "^7.2.3",
-    "babel-loader": "^7.1.1",
+    "babel-cli": "^6.26.0",
+    "babel-eslint": "^8.2.1",
+    "babel-loader": "^7.1.2",
     "babel-plugin-transform-class-properties": "^6.24.1",
-    "babel-plugin-transform-object-rest-spread": "^6.23.0",
-    "babel-plugin-transform-react-remove-prop-types": "^0.4.8",
-    "babel-preset-env": "^1.6.0",
+    "babel-plugin-transform-object-rest-spread": "^6.26.0",
+    "babel-plugin-transform-react-remove-prop-types": "^0.4.12",
+    "babel-preset-env": "^1.6.1",
     "babel-preset-es2015": "^6.24.1",
     "babel-preset-react": "^6.24.1",
-    "babel-register": "^6.24.1",
-    "css-loader": "^0.28.4",
-    "eslint": "^4.4.0",
-    "eslint-config-airbnb": "^15.1.0",
+    "babel-register": "^6.26.0",
+    "babili-webpack-plugin": "^0.1.2",
+    "css-loader": "^0.28.8",
+    "eslint": "^4.15.0",
+    "eslint-config-airbnb": "^16.1.0",
     "eslint-plugin-babel": "^4.1.2",
-    "eslint-plugin-import": "^2.7.0",
-    "eslint-plugin-jsx-a11y": "^6.0.2",
-    "eslint-plugin-react": "^7.1.0",
-    "extract-text-webpack-plugin": "^3.0.0",
-    "finalhandler": "^1.0.4",
-    "gh-pages": "^1.0.0",
+    "eslint-plugin-import": "^2.8.0",
+    "eslint-plugin-jsx-a11y": "^6.0.3",
+    "eslint-plugin-react": "^7.5.1",
+    "extract-text-webpack-plugin": "^3.0.2",
+    "finalhandler": "^1.1.0",
+    "gh-pages": "^1.1.0",
     "glob": "^7.1.2",
-    "html-webpack-include-assets-plugin": "^0.0.7",
+    "html-webpack-include-assets-plugin": "^1.0.2",
     "html-webpack-plugin": "^2.30.1",
-    "nightwatch": "^0.9.16",
+    "nightwatch": "^0.9.19",
     "portfinder": "^1.0.13",
-    "react": "^15.6.1",
-    "react-dom": "^15.6.1",
-    "react-motion": "^0.5.0",
-    "rimraf": "^2.6.1",
-    "serve-static": "^1.12.3",
-    "style-loader": "^0.18.2",
+    "react": "^16.2.0",
+    "react-dom": "^16.2.0",
+    "react-motion": "^0.5.2",
+    "rimraf": "^2.6.2",
+    "serve-static": "^1.13.1",
+    "style-loader": "^0.19.1",
     "tape": "^4.8.0",
-    "webpack": "^3.4.1",
-    "webpack-dev-server": "^2.6.1"
+    "webpack": "^3.10.0",
+    "webpack-dev-server": "^2.10.1"
   },
   "files": [
     "build",

diff --git a/scripts/build.js b/scripts/build.js
@@ -2,5 +2,5 @@
 'use strict';
 
 
-require(`./lib`);
-require(`./dist`);
+require('./lib');
+require('./dist');
diff --git a/scripts/dev.js b/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`)}`, {

diff --git a/scripts/dist.js b/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});

diff --git a/scripts/e2e.js b/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});
diff --git a/scripts/ghPages.js b/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`));

diff --git a/scripts/lib.js b/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});

diff --git a/scripts/lint.js b/scripts/lint.js
@@ -2,7 +2,7 @@
 'use strict';
 
 
-const {npm, CWD} = require(`./utils/bash`);
+const {npm, CWD} = require('./utils/bash');
 
 
-npm(`eslint --fix .`, {cwd: CWD});
+npm(`eslint .`, {cwd: CWD});
diff --git a/scripts/pub.js b/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});

diff --git a/scripts/test.js b/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`,