Merge cb834c4 into 1a02009

uxcore · Jun 22, 2018 · 6891d09 · 6891d09
2 parents 1a02009 + cb834c4
commit 6891d09
Show file tree

Hide file tree

Showing 7 changed files with 42 additions and 26 deletions.
diff --git a/.gitignore b/.gitignore
@@ -27,4 +27,4 @@ spm_modules
 dist
 build
 assets/**/*.css
-coverage
+coveragepackage-lock.json
diff --git a/HISTORY.md b/HISTORY.md
@@ -2,6 +2,9 @@
 
 ---
 
+## 2.1.2
+* `CHANGED` upgrade to react 16
+
 ## 2.1.1
 
 * `FIXED` arrow color

diff --git a/demo/CollapseDemo.js b/demo/CollapseDemo.js
@@ -18,19 +18,25 @@ export default class Demo extends Component {
 
   constructor(props) {
     super(props);
+
+    this.handleChange = this.handleChange.bind(this);
     this.state = {
+      activeKey: '1',
     };
   }
 
   handleChange(key, activeKey) {
+    // eslint-disable-next-line
     console.log(key, activeKey);
+    this.setState({ activeKey });
   }
 
   render() {
+    const { activeKey } = this.state;
     return (
       <div style={{ padding: '20px' }}>
         <h2>可以同时展开多个面板，这个例子默认展开了第一个。</h2>
-        <Collapse defaultActiveKey={['1']} onChange={this.handleChange}>
+        <Collapse activeKey={activeKey} onChange={this.handleChange}>
           <Panel header={'This is panel header 1'} key="1">
             <p>{text}</p>
           </Panel>
@@ -42,7 +48,7 @@ export default class Demo extends Component {
           </Panel>
         </Collapse>
         <h2>手风琴，每次只打开一个tab。默认打开第一个。</h2>
-        <Collapse accordion onChange={this.handleChange}>
+        <Collapse accordion>
           <Panel header={'This is panel header 1'} key="1">
             <p>{text}</p>
           </Panel>
@@ -54,7 +60,7 @@ export default class Demo extends Component {
           </Panel>
         </Collapse>
         <h2>手风琴嵌套折叠面板</h2>
-        <Collapse onChange={this.handleChange} accordion>
+        <Collapse accordion>
           <Panel header={'This is panel header 1'} key="1">
             <Collapse defaultActiveKey="1">
               <Panel header={'This is panel nest panel'} key="1">

diff --git a/index.html b/index.html
@@ -9,10 +9,9 @@
 <body>
     <div id="UXCoreDemo"></div>
     <script src="./node_modules/console-polyfill/index.js"></script>
-    <script src="./node_modules/es5-shim/es5-shim.min.js"></script>
-    <script src="./node_modules/es5-shim/es5-sham.min.js"></script>
-    <script src="./node_modules/react/dist/react-with-addons.js"></script>
-    <script src="./node_modules/react-dom/dist/react-dom.js"></script>
+    <script src="./node_modules/babel-polyfill/dist/polyfill.min.js"></script>
+    <script src="./node_modules/react/umd/react.development.js"></script>
+    <script src="./node_modules/react-dom/umd/react-dom.development.js"></script>
     <script src="./dist/demo.js"></script>
 </body>
 </html>
diff --git a/package.json b/package.json
@@ -5,7 +5,8 @@
  "repository": "https://github.com/uxcore/uxcore-collapse.git",
  "author": "vicent.bian",
  "maintainers": [
-  "yize.shc<yize.shc@gmail.com>"
+  "yize.shc<yize.shc@gmail.com>",
+  "fengsx<fengsx@msn.com>"
  ],
  "main": "build/index.js",
  "scripts": {
@@ -36,22 +37,23 @@
  "devDependencies": {
   "console-polyfill": "^0.2.2",
   "enzyme": "^3.0.0",
-  "enzyme-adapter-react-15": "^1.0.0",
-  "es5-shim": "^4.5.8",
   "expect.js": "~0.3.1",
   "kuma-base": "1.x",
-  "react": "15.x",
-  "react-dom": "15.x",
-  "react-test-renderer": "15.x",
+  "react": "16.x",
+  "react-dom": "16.x",
+  "react-test-renderer": "16.x",
   "uxcore-kuma": "*",
-  "uxcore-tools": "0.2.x"
+  "uxcore-tools": "^0.3.0",
+  "babel-polyfill": "6.x",
+  "enzyme-adapter-react-16": "1.x"
  },
  "dependencies": {
   "classnames": "^2.2.5",
   "css-animation": "^1.3.2",
   "lodash": "^4.17.5",
   "object-assign": "^4.0.0",
   "prop-types": "15.x",
+  "react-lifecycles-compat": "^3.0.4",
   "uxcore-animate": "^0.2.0"
  },
  "contributors": [],

diff --git a/src/Collapse.js b/src/Collapse.js
@@ -2,10 +2,11 @@ import React, { Component, Children } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import cloneDeep from 'lodash/cloneDeep';
+import { polyfill } from 'react-lifecycles-compat';
 import CollapsePanel from './Panel';
 import util from './util';
 
-export default class Collapse extends Component {
+class Collapse extends Component {
   static displayName = 'Collapse'
 
   static Panel = CollapsePanel
@@ -32,6 +33,16 @@ export default class Collapse extends Component {
     children: PropTypes.any,
   }
 
+  static getDerivedStateFromProps(props) {
+    if ('activeKey' in props) {
+      return {
+        activeKey: props.activeKey,
+      };
+    }
+
+    return null;
+  }
+
   constructor(props) {
     super(props);
 
@@ -51,14 +62,6 @@ export default class Collapse extends Component {
     };
   }
 
-  componentWillReceiveProps(nextProps) {
-    if ('activeKey' in nextProps) {
-      this.setState({
-        activeKey: nextProps.activeKey,
-      });
-    }
-  }
-
   getItems() {
     const activeKey = this.getActivityKey();
     const { prefixCls, accordion } = this.props;
@@ -138,3 +141,6 @@ export default class Collapse extends Component {
   }
 }
 
+polyfill(Collapse);
+
+export default Collapse;
diff --git a/tests/Collapse.spec.js b/tests/Collapse.spec.js
@@ -3,7 +3,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
 import Enzyme, { mount, shallow } from 'enzyme';
-import Adapter from 'enzyme-adapter-react-15';
+import Adapter from 'enzyme-adapter-react-16';
 import Collapse, {Panel} from '../src';
 
 Enzyme.configure({ adapter: new Adapter() });
@@ -61,7 +61,7 @@ describe('Collapse', () => {
 
     it('has correct click', (done) => {
         wrapper.find('.kuma-collapse-header').at(2).simulate('click')
-        expect(wrapper.state('activeKey')).to.be('3')
+        expect(wrapper.state('activeKey')).to.eql(['2'])
         // 因为click后，需要等动画延迟后才会执行util.js中active和end
         setTimeout(() => {
             done()