uxcore-collapse - npm Package Compare versions

Comparing version 2.1.1 to 2.1.2

build/Collapse.js

@@ -23,2 +23,4 @@ 'use strict';
 
+var _reactLifecyclesCompat = require('react-lifecycles-compat');
+
 var _Panel = require('./Panel');
@@ -47,2 +49,12 @@
 
+  Collapse.getDerivedStateFromProps = function getDerivedStateFromProps(props) {
+    if ('activeKey' in props) {
+      return {
+        activeKey: props.activeKey
+      };
+    }
+
+    return null;
+  };
+
   function Collapse(props) {
@@ -72,10 +84,2 @@ _classCallCheck(this, Collapse);
 
-  Collapse.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
-    if ('activeKey' in nextProps) {
-      this.setState({
-        activeKey: nextProps.activeKey
-      });
-    }
-  };
-
   Collapse.prototype.getItems = function getItems() {
@@ -184,3 +188,7 @@ var _this2 = this;
 };
+
+
+(0, _reactLifecyclesCompat.polyfill)(Collapse);
+
 exports["default"] = Collapse;
 module.exports = exports['default'];

demo/CollapseDemo.js

@@ -21,3 +21,6 @@ /**
     super(props);
+
+    this.handleChange = this.handleChange.bind(this);
     this.state = {
+      activeKey: '1',
     };
@@ -27,10 +30,13 @@ }
   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">
@@ -47,3 +53,3 @@ <p>{text}</p>
         <h2>手风琴，每次只打开一个tab。默认打开第一个。</h2>
-        <Collapse accordion onChange={this.handleChange}>
+        <Collapse accordion>
           <Panel header={'This is panel header 1'} key="1">
@@ -60,3 +66,3 @@ <p>{text}</p>
         <h2>手风琴嵌套折叠面板</h2>
-        <Collapse onChange={this.handleChange} accordion>
+        <Collapse accordion>
           <Panel header={'This is panel header 1'} key="1">
@@ -63,0 +69,0 @@ <Collapse defaultActiveKey="1">

HISTORY.md

@@ -5,2 +5,9 @@ # History
 
+## 2.1.2
+* `CHANGED` upgrade to react 16
+
+## 2.1.1
+
+* `FIXED` arrow color
+
 ## 2.1.0
@@ -7,0 +14,0 @@

package.json

 {
- "name": "uxcore-collapse",
- "version": "2.1.1",
- "description": "uxcore-collapse component for uxcore.",
- "repository": "https://github.com/uxcore/uxcore-collapse.git",
- "author": "vicent.bian",
- "maintainers": [
-  "yize.shc<[e-mail]>"
- ],
- "main": "build/index.js",
- "scripts": {
-  "start": "uxcore-tools run start",
-  "server": "uxcore-tools run server",
-  "lint": "uxcore-tools run lint",
-  "build": "uxcore-tools run build",
-  "test": "uxcore-tools run test",
-  "coverage": "uxcore-tools run coverage",
-  "pub": "uxcore-tools run pub",
-  "dep": "uxcore-tools run dep",
-  "tnpm-dep": "uxcore-tools run tnpm-dep",
-  "chrome": "uxcore-tools run chrome",
-  "browsers": "uxcore-tools run browsers",
-  "saucelabs": "uxcore-tools run saucelabs",
-  "update": "uxcore-tools run update",
-  "tnpm-update": "uxcore-tools run tnpm-update"
- },
- "bugs": {
-  "url": "http://github.com/uxcore/uxcore-collapse/issues"
- },
- "keywords": [
-  "react",
-  "react-component",
-  "uxcore-collapse",
-  "Collapse"
- ],
- "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",
-  "uxcore-kuma": "*",
-  "uxcore-tools": "0.2.x"
- },
- "dependencies": {
-  "classnames": "^2.2.5",
-  "css-animation": "^1.3.2",
-  "lodash": "^4.17.5",
-  "object-assign": "^4.0.0",
-  "prop-types": "15.x",
-  "uxcore-animate": "^0.2.0"
- },
- "contributors": [],
- "license": "MIT"
+  "name": "uxcore-collapse",
+  "version": "2.1.2",
+  "description": "uxcore-collapse component for uxcore.",
+  "repository": "https://github.com/uxcore/uxcore-collapse.git",
+  "author": "vicent.bian",
+  "maintainers": [
+    "yize.shc<[e-mail]>",
+    "fengsx<[e-mail]>"
+  ],
+  "main": "build/index.js",
+  "scripts": {
+    "start": "uxcore-tools run start",
+    "server": "uxcore-tools run server",
+    "lint": "uxcore-tools run lint",
+    "build": "uxcore-tools run build",
+    "test": "uxcore-tools run test",
+    "coverage": "uxcore-tools run coverage",
+    "pub": "uxcore-tools run pub",
+    "dep": "uxcore-tools run dep",
+    "tnpm-dep": "uxcore-tools run tnpm-dep",
+    "chrome": "uxcore-tools run chrome",
+    "browsers": "uxcore-tools run browsers",
+    "saucelabs": "uxcore-tools run saucelabs",
+    "update": "uxcore-tools run update",
+    "tnpm-update": "uxcore-tools run tnpm-update"
+  },
+  "bugs": {
+    "url": "http://github.com/uxcore/uxcore-collapse/issues"
+  },
+  "keywords": [
+    "react",
+    "react-component",
+    "uxcore-collapse",
+    "Collapse"
+  ],
+  "devDependencies": {
+    "console-polyfill": "^0.2.2",
+    "enzyme": "^3.0.0",
+    "expect.js": "~0.3.1",
+    "kuma-base": "1.x",
+    "react": "16.x",
+    "react-dom": "16.x",
+    "react-test-renderer": "16.x",
+    "uxcore-kuma": "*",
+    "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": [],
+  "license": "MIT"
 }

src/Collapse.js

@@ -5,6 +5,7 @@ import React, { Component, Children } from 'react';
 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'
@@ -36,2 +37,12 @@
 
+  static getDerivedStateFromProps(props) {
+    if ('activeKey' in props) {
+      return {
+        activeKey: props.activeKey,
+      };
+    }
+
+    return null;
+  }
+
   constructor(props) {
@@ -56,10 +67,2 @@ super(props);
 
-  componentWillReceiveProps(nextProps) {
-    if ('activeKey' in nextProps) {
-      this.setState({
-        activeKey: nextProps.activeKey,
-      });
-    }
-  }
-
   getItems() {
@@ -144,1 +147,4 @@ const activeKey = this.getActivityKey();
 
+polyfill(Collapse);
+
+export default Collapse;

tests/Collapse.spec.js

@@ -6,3 +6,3 @@ import expect from 'expect.js';
 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';
@@ -65,3 +65,3 @@
         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
@@ -68,0 +68,0 @@ setTimeout(() => {

New alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

35470

increased by7.03%

Number of package files

22

increased by4.76%

Lines of code

725

increased by1.68%

Worsened metrics

Dependency count

7

increased by16.67%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Addedreact-lifecycles-compat@^3.0.4