rc-collapse - npm Package Compare versions

Comparing version 1.5.0 to 1.6.0

HISTORY.md

@@ -0,1 +1,8 @@
+# History
+----
+
+## 1.6.0
+
+- lazy render/controllable
+
 ## 1.4.0
@@ -2,0 +9,0 @@

lib/Collapse.js

 'use strict';
 
-Object.defineProperty(exports, '__esModule', {
+Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
-
 var _react = require('react');
@@ -21,3 +19,17 @@
 
-var Collapse = (0, _react.createClass)({
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
+
+function toArray(activeKey) {
+  var currentActiveKey = activeKey;
+  if (!Array.isArray(currentActiveKey)) {
+    currentActiveKey = currentActiveKey ? [currentActiveKey] : [];
+  }
+  return currentActiveKey;
+}
+
+var Collapse = _react2["default"].createClass({
+  displayName: 'Collapse',
+
   propTypes: {
@@ -34,3 +46,3 @@ children: _react.PropTypes.any,
   statics: {
-    Panel: _Panel2['default']
+    Panel: _Panel2["default"]
   },
@@ -42,27 +54,24 @@
       onChange: function onChange() {},
+
       accordion: false
     };
   },
-
   getInitialState: function getInitialState() {
     var _props = this.props;
     var activeKey = _props.activeKey;
-    var accordion = _props.accordion;
-    var defaultActiveKey = this.props.defaultActiveKey;
+    var defaultActiveKey = _props.defaultActiveKey;
 
-    // If is not accordion mode, then, defaultActiveKey should be an array
-    if (!accordion) {
-      defaultActiveKey = defaultActiveKey || [];
+    var currentActiveKey = defaultActiveKey;
+    if ('activeKey' in this.props) {
+      currentActiveKey = activeKey;
     }
-
     return {
-      openAnimation: this.props.openAnimation || (0, _openAnimationFactory2['default'])(this.props.prefixCls),
-      activeKey: activeKey || defaultActiveKey
+      openAnimation: this.props.openAnimation || (0, _openAnimationFactory2["default"])(this.props.prefixCls),
+      activeKey: toArray(currentActiveKey)
     };
   },
-
   componentWillReceiveProps: function componentWillReceiveProps(nextProps) {
     if ('activeKey' in nextProps) {
       this.setState({
-        activeKey: nextProps.activeKey
+        activeKey: toArray(nextProps.activeKey)
       });
@@ -76,3 +85,2 @@ }
   },
-
   onClickItem: function onClickItem(key) {
@@ -82,8 +90,7 @@ var _this = this;
     return function () {
-      var activeKey = _this.getActivityKey();
+      var activeKey = _this.state.activeKey;
       if (_this.props.accordion) {
-        _this.setState({
-          activeKey: key === activeKey ? null : key
-        });
+        activeKey = activeKey[0] === key ? [] : [key];
       } else {
+        activeKey = [].concat(_toConsumableArray(activeKey));
         var index = activeKey.indexOf(key);
@@ -97,27 +104,10 @@ var isActive = index > -1;
         }
-
-        _this.setState({ activeKey: activeKey });
       }
-      _this.props.onChange(key);
+      _this.setActiveKey(activeKey);
     };
   },
-
-  getActivityKey: function getActivityKey() {
-    var activeKey = this.state.activeKey;
-    var accordion = this.props.accordion;
-
-    if (accordion && Array.isArray(activeKey)) {
-      activeKey = activeKey[0];
-    }
-
-    if (!accordion && !Array.isArray(activeKey)) {
-      activeKey = activeKey ? [activeKey] : [];
-    }
-    return activeKey;
-  },
-
   getItems: function getItems() {
     var _this2 = this;
 
-    var activeKey = this.getActivityKey();
+    var activeKey = this.state.activeKey;
     var _props2 = this.props;
@@ -133,3 +123,3 @@ var prefixCls = _props2.prefixCls;
       if (accordion) {
-        isActive = activeKey === key;
+        isActive = activeKey[0] === key;
       } else {
@@ -149,9 +139,16 @@ isActive = activeKey.indexOf(key) > -1;
 
-      return _react2['default'].createElement(_Panel2['default'], props);
+      return _react2["default"].createElement(_Panel2["default"], props);
     });
   },
-
+  setActiveKey: function setActiveKey(activeKey) {
+    if (!('activeKey' in this.props)) {
+      this.setState({
+        activeKey: activeKey
+      });
+    }
+    this.props.onChange(this.props.accordion ? activeKey[0] : activeKey);
+  },
   render: function render() {
     var prefixCls = this.props.prefixCls;
-    return _react2['default'].createElement(
+    return _react2["default"].createElement(
       'div',
@@ -164,3 +161,3 @@ { className: prefixCls },
 
-exports['default'] = Collapse;
+exports["default"] = Collapse;
 module.exports = exports['default'];

lib/index.js

 'use strict';
 
-Object.defineProperty(exports, '__esModule', {
+Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
-
 var _Collapse = require('./Collapse');
@@ -13,3 +11,5 @@
 
-exports['default'] = _Collapse2['default'];
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+exports["default"] = _Collapse2["default"];
 module.exports = exports['default'];

lib/openAnimationFactory.js

 'use strict';
 
-Object.defineProperty(exports, '__esModule', {
+Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
-
 var _cssAnimation = require('css-animation');
@@ -13,5 +11,7 @@
 
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
 function animate(node, show, transitionName, done) {
-  var height = undefined;
-  return (0, _cssAnimation2['default'])(node, transitionName, {
+  var height = void 0;
+  return (0, _cssAnimation2["default"])(node, transitionName, {
     start: function start() {
@@ -46,3 +46,3 @@ if (!show) {
 
-exports['default'] = animation;
+exports["default"] = animation;
 module.exports = exports['default'];

lib/Panel.js

 'use strict';
 
-Object.defineProperty(exports, '__esModule', {
+Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
-
 var _react = require('react');
@@ -21,3 +19,7 @@
 
-var CollapsePanel = (0, _react.createClass)({
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var CollapsePanel = _react2["default"].createClass({
+  displayName: 'CollapsePanel',
+
   propTypes: {
@@ -38,11 +40,8 @@ children: _react.PropTypes.any,
   },
-
-  getInitialState: function getInitialState() {
-    return { isActive: this.props.isActive };
+  shouldComponentUpdate: function shouldComponentUpdate(nextProps) {
+    return this.props.isActive || nextProps.isActive;
   },
-
   handleItemClick: function handleItemClick() {
     this.props.onItemClick();
   },
-
   render: function render() {
@@ -56,14 +55,18 @@ var _props = this.props;
     var headerCls = prefixCls + '-header';
-    return _react2['default'].createElement(
+    return _react2["default"].createElement(
       'div',
       { className: prefixCls + '-item' },
-      _react2['default'].createElement(
+      _react2["default"].createElement(
         'div',
-        { className: headerCls, onClick: this.handleItemClick,
-          role: 'tab', 'aria-expanded': isActive },
-        _react2['default'].createElement('i', { className: 'arrow' }),
+        {
+          className: headerCls,
+          onClick: this.handleItemClick,
+          role: 'tab',
+          'aria-expanded': isActive
+        },
+        _react2["default"].createElement('i', { className: 'arrow' }),
         header
       ),
-      _react2['default'].createElement(
-        _rcAnimate2['default'],
+      _react2["default"].createElement(
+        _rcAnimate2["default"],
         {
@@ -75,4 +78,4 @@ showProp: 'isActive',
         },
-        _react2['default'].createElement(
-          _PanelContent2['default'],
+        _react2["default"].createElement(
+          _PanelContent2["default"],
           { prefixCls: prefixCls, isActive: isActive },
@@ -86,3 +89,3 @@ children
 
-exports['default'] = CollapsePanel;
+exports["default"] = CollapsePanel;
 module.exports = exports['default'];

lib/PanelContent.js

 'use strict';
 
-Object.defineProperty(exports, '__esModule', {
+Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
 var _react = require('react');
@@ -19,3 +15,7 @@
 
-var PanelContent = _react2['default'].createClass({
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var PanelContent = _react2["default"].createClass({
   displayName: 'PanelContent',
@@ -31,2 +31,6 @@
 
+    this._isActived = this._isActived || this.props.isActive;
+    if (!this._isActived) {
+      return null;
+    }
     var _props = this.props;
@@ -37,4 +41,4 @@ var prefixCls = _props.prefixCls;
 
-    var contentCls = (0, _classnames3['default'])((_classnames = {}, _defineProperty(_classnames, prefixCls + '-content', true), _defineProperty(_classnames, prefixCls + '-content-active', isActive), _defineProperty(_classnames, prefixCls + '-content-inactive', !isActive), _classnames));
-    return _react2['default'].createElement(
+    var contentCls = (0, _classnames3["default"])((_classnames = {}, _defineProperty(_classnames, prefixCls + '-content', true), _defineProperty(_classnames, prefixCls + '-content-active', isActive), _defineProperty(_classnames, prefixCls + '-content-inactive', !isActive), _classnames));
+    return _react2["default"].createElement(
       'div',
@@ -45,3 +49,3 @@ {
       },
-      _react2['default'].createElement(
+      _react2["default"].createElement(
         'div',
@@ -55,3 +59,3 @@ { className: prefixCls + '-content-box' },
 
-exports['default'] = PanelContent;
+exports["default"] = PanelContent;
 module.exports = exports['default'];

package.json

 {
   "name": "rc-collapse",
-  "version": "1.5.0",
+  "version": "1.6.0",
   "description": "rc-collapse ui component for react",
@@ -34,3 +34,3 @@ "keywords": [
     "gh-pages": "rc-tools run gh-pages",
-    "start": "rc-server",
+    "start": "rc-tools run server",
     "pub": "rc-tools run pub",
@@ -40,14 +40,14 @@ "lint": "rc-tools run lint",
     "saucelabs": "rc-tools run saucelabs",
-    "browser-test": "rc-tools run browser-test",
-    "browser-test-cover": "rc-tools run browser-test-cover"
+    "test": "rc-tools run test",
+    "chrome-test": "rc-tools run chrome-test",
+    "coverage": "rc-tools run coverage"
   },
   "devDependencies": {
     "expect.js": "0.3.x",
-    "jquery": "~1.11.3",
+    "jquery": "1.x",
     "pre-commit": "1.x",
-    "rc-server": "3.x",
-    "rc-tools": "4.x",
-    "react": "0.14.x",
-    "react-dom": "0.14.x",
-    "react-addons-test-utils": "0.14.x",
+    "rc-tools": "5.x",
+    "react": "15.x",
+    "react-dom": "15.x",
+    "react-addons-test-utils": "15.x",
     "string.prototype.repeat": "^0.2.0"
@@ -54,0 +54,0 @@ },

README.md

@@ -10,4 +10,2 @@ # rc-collapse
 [![npm download][download-image]][download-url]
-[![Sauce Test Status](https://saucelabs.com/buildstatus/rc-collapse)](https://saucelabs.com/u/rc-collapse)
-[![Sauce Test Status](https://saucelabs.com/browser-matrix/rc-collapse.svg)](https://saucelabs.com/u/rc-collapse)
 
@@ -141,10 +139,17 @@ [npm-image]: http://img.shields.io/npm/v/rc-collapse.svg?style=flat-square
 
-http://localhost:8000/tests/runner.html?coverage
+```
+npm test
+npm run chrome-test
+```
 
 ## Coverage
 
-http://localhost:8000/node_modules/rc-server/node_modules/node-jscover/lib/front-end/jscoverage.html?w=http://localhost:8000/tests/runner.html?coverage
+```
+npm run coverage
+```
 
+open coverage/ dir
+
 ## License
 
 rc-collapse is released under the MIT license.

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

16799

increased by1.2%

Dev dependency count

8

decreased by-11.11%

Lines of code

350

increased by3.86%

Number of lines in readme file

154

increased by3.36%

No dependency changes