uxcore-collapse - npm Package Compare versions

Comparing version 1.3.1 to 1.4.0

build/Collapse.js

 'use strict';
 
 Object.defineProperty(exports, "__esModule", {
-    value: true
+  value: true
 });
@@ -19,130 +19,157 @@
 
+var _util = require('./util');
+
+var _util2 = _interopRequireDefault(_util);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return 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 Collapse = (0, _react.createClass)({
-    statics: {
-        Panel: _Panel2["default"]
-    },
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
-    propTypes: {
-        prefixCls: _react.PropTypes.string,
-        className: _react2["default"].PropTypes.string,
-        activeKey: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.arrayOf(_react.PropTypes.string)]),
-        defaultActiveKey: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.arrayOf(_react.PropTypes.string)]),
-        onChange: _react.PropTypes.func,
-        accordion: _react.PropTypes.bool
-    },
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
 
-    getDefaultProps: function getDefaultProps() {
-        return {
-            prefixCls: 'kuma-collapse',
-            onChange: function onChange() {},
-            accordion: false
-        };
-    },
-    getInitialState: function getInitialState() {
-        var _props = this.props,
-            activeKey = _props.activeKey,
-            accordion = _props.accordion;
-        var defaultActiveKey = this.props.defaultActiveKey;
-        // If is not accordion mode, then, defaultActiveKey should be an array
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : _defaults(subClass, superClass); }
 
-        if (!accordion) {
-            defaultActiveKey = defaultActiveKey || [];
-        }
+var Collapse = function (_Component) {
+  _inherits(Collapse, _Component);
 
-        return {
-            activeKey: activeKey || defaultActiveKey
-        };
-    },
-    componentWillReceiveProps: function componentWillReceiveProps(nextProps) {
-        if ('activeKey' in nextProps) {
-            this.setState({
-                activeKey: nextProps.activeKey
-            });
-        }
-    },
-    handleClickItem: function handleClickItem(key) {
-        var _this = this;
+  function Collapse(props) {
+    _classCallCheck(this, Collapse);
 
-        return function () {
-            var activeKey = _this._getActivityKey();
-            if (_this.props.accordion) {
-                _this.setState({
-                    activeKey: key === activeKey ? null : key
-                });
-            } else {
-                var index = activeKey.indexOf(key);
-                var isActive = index > -1;
-                if (isActive) {
-                    // remove active state
-                    activeKey.splice(index, 1);
-                } else {
-                    activeKey.push(key);
-                }
+    var _this = _possibleConstructorReturn(this, _Component.call(this, props));
 
-                _this.setState({ activeKey: activeKey });
-            }
-            _this.props.onChange(key);
-        };
-    },
-    _getActivityKey: function _getActivityKey() {
-        var activeKey = this.state.activeKey;
-        var accordion = this.props.accordion;
+    _this.getItems = _this.getItems.bind(_this);
+    _this.getActivityKey = _this.getActivityKey.bind(_this);
+    _this.handleClickItem = _this.handleClickItem.bind(_this);
 
-        if (accordion && Array.isArray(activeKey)) {
-            activeKey = activeKey[0];
-        }
+    var activeKey = props.activeKey,
+        accordion = props.accordion;
+    var defaultActiveKey = props.defaultActiveKey;
+    // If is not accordion mode, then, defaultActiveKey should be an array
 
-        if (!accordion && !Array.isArray(activeKey)) {
-            activeKey = activeKey ? [activeKey] : [];
-        }
-        return activeKey;
-    },
-    getItems: function getItems() {
-        var _this2 = this;
+    if (!accordion) {
+      defaultActiveKey = defaultActiveKey || [];
+    }
 
-        var activeKey = this._getActivityKey();
-        var _props2 = this.props,
-            prefixCls = _props2.prefixCls,
-            accordion = _props2.accordion;
+    _this.state = {
+      activeKey: activeKey || defaultActiveKey
+    };
+    return _this;
+  }
 
+  Collapse.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
+    if ('activeKey' in nextProps) {
+      this.setState({
+        activeKey: nextProps.activeKey
+      });
+    }
+  };
 
-        return _react.Children.map(this.props.children, function (child, index) {
-            // If there is no key provide, use the panel order as default key
-            var key = child.key || index;
-            var header = child.props.header;
-            var isActive = false;
-            if (accordion) {
-                isActive = activeKey === key;
-            } else {
-                isActive = activeKey.indexOf(key) > -1;
-            }
+  Collapse.prototype.getItems = function getItems() {
+    var _this2 = this;
 
-            var props = {
-                key: key,
-                header: header,
-                isActive: isActive,
-                prefixCls: prefixCls,
-                children: child.props.children,
-                onItemClick: _this2.handleClickItem(key).bind(_this2)
-            };
+    var activeKey = this.getActivityKey();
+    var _props = this.props,
+        prefixCls = _props.prefixCls,
+        accordion = _props.accordion;
 
-            return _react2["default"].createElement(_Panel2["default"], props);
-        });
-    },
-    render: function render() {
-        var me = this;
-        var className = (0, _classnames3["default"])(me.props.prefixCls, _defineProperty({}, me.props.className, !!me.props.className));
-        return _react2["default"].createElement(
-            'div',
-            { className: className },
-            me.getItems()
-        );
+
+    return _react.Children.map(this.props.children, function (child, index) {
+      // If there is no key provide, use the panel order as default key
+      var key = child.key || index;
+      var header = child.props.header;
+      var isActive = false;
+      if (accordion) {
+        isActive = activeKey === key;
+      } else {
+        isActive = activeKey.indexOf(key) > -1;
+      }
+
+      var props = {
+        key: key,
+        header: header,
+        isActive: isActive,
+        prefixCls: prefixCls,
+        children: child.props.children,
+        onItemClick: _this2.handleClickItem(key).bind(_this2)
+      };
+
+      return _react2["default"].createElement(_Panel2["default"], props);
+    });
+  };
+
+  Collapse.prototype.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;
+  };
+
+  Collapse.prototype.handleClickItem = function handleClickItem(key) {
+    var _this3 = this;
+
+    return function () {
+      var activeKey = _this3.getActivityKey();
+      if (_this3.props.accordion) {
+        _this3.setState({
+          activeKey: key === activeKey ? null : key
+        });
+      } else {
+        var index = activeKey.indexOf(key);
+        var isActive = index > -1;
+        if (isActive) {
+          // remove active state
+          activeKey.splice(index, 1);
+        } else {
+          activeKey.push(key);
+        }
+
+        _this3.setState({ activeKey: activeKey });
+      }
+      _this3.props.onChange(key);
+    };
+  };
+
+  Collapse.prototype.render = function render() {
+    var me = this;
+
+    var className = (0, _classnames3["default"])(me.props.prefixCls, _defineProperty({}, me.props.className, !!me.props.className));
+
+    return _react2["default"].createElement(
+      'div',
+      { className: className },
+      me.getItems()
+    );
+  };
+
+  return Collapse;
+}(_react.Component);
+
+Collapse.displayName = 'Collapse';
+Collapse.Panel = _Panel2["default"];
+Collapse.defaultProps = {
+  prefixCls: 'kuma-collapse',
+  onChange: _util2["default"].noop,
+  accordion: false
+};
+Collapse.propTypes = {
+  prefixCls: _react.PropTypes.string,
+  className: _react2["default"].PropTypes.string,
+  activeKey: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.arrayOf(_react.PropTypes.string)]),
+  defaultActiveKey: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.arrayOf(_react.PropTypes.string)]),
+  onChange: _react.PropTypes.func,
+  accordion: _react.PropTypes.bool,
+  children: _react.PropTypes.any
+};
 exports["default"] = Collapse;
 module.exports = exports['default'];

build/index.js

 'use strict';
 
-/**
- * Collapse Component for uxcore
- * @author vicent.bian
- *
- * Copyright 2014-2015, Uxcore Team, Alinw.
- * All rights reserved.
- */
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 
-module.exports = require('./Collapse');
+var _Collapse = require('./Collapse');
+
+var _Collapse2 = _interopRequireDefault(_Collapse);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+exports["default"] = _Collapse2["default"]; /**
+                                       * Collapse Component for uxcore
+                                       * @author vicent.bian
+                                       *
+                                       * Copyright 2014-2015, Uxcore Team, Alinw.
+                                       * All rights reserved.
+                                       */
+
+module.exports = exports['default'];

build/Panel.js

 'use strict';
 
 Object.defineProperty(exports, "__esModule", {
-    value: true
+  value: true
 });
@@ -15,64 +15,129 @@
 
+var _uxcoreAnimate = require('uxcore-animate');
+
+var _uxcoreAnimate2 = _interopRequireDefault(_uxcoreAnimate);
+
+var _util = require('./util');
+
+var _util2 = _interopRequireDefault(_util);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return 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 CollapsePanel = (0, _react.createClass)({
-    propTypes: {
-        prefixCls: _react.PropTypes.string,
-        header: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.number, _react.PropTypes.node]),
-        isActive: _react.PropTypes.bool,
-        onItemClick: _react.PropTypes.func
-    },
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
-    getInitialState: function getInitialState() {
-        return { isActive: this.props.isActive };
-    },
-    getDefaultProps: function getDefaultProps() {
-        return {
-            isActive: false,
-            onItemClick: function onItemClick() {}
-        };
-    },
-    handleItemClick: function handleItemClick(e) {
-        this.props.onItemClick(this.props.isActive, e);
-    },
-    render: function render() {
-        var _classnames;
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
 
-        var _props = this.props,
-            prefixCls = _props.prefixCls,
-            header = _props.header,
-            children = _props.children,
-            isActive = _props.isActive;
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : _defaults(subClass, superClass); }
 
-        var headerCls = prefixCls + '-header fn-text-overflow';
-        var contentCls = (0, _classnames3["default"])((_classnames = {}, _defineProperty(_classnames, prefixCls + '-content', true), _defineProperty(_classnames, prefixCls + '-content-active', isActive), _classnames));
-        var arrowCls = isActive ? "arrow-active" : "arrow";
-        return _react2["default"].createElement(
-            'div',
-            { className: prefixCls + '-item' },
-            _react2["default"].createElement(
-                'div',
-                { className: headerCls, onClick: this.handleItemClick,
-                    role: 'tab', 'aria-expanded': isActive },
-                _react2["default"].createElement('i', { className: arrowCls }),
-                header
-            ),
-            _react2["default"].createElement(
-                'div',
-                { className: contentCls,
-                    'data-active': isActive,
-                    role: 'tabpanel' },
-                _react2["default"].createElement(
-                    'div',
-                    { className: prefixCls + '-content-box' },
-                    children
-                )
-            )
-        );
+var CollapsePanel = function (_Component) {
+  _inherits(CollapsePanel, _Component);
+
+  function CollapsePanel(props) {
+    _classCallCheck(this, CollapsePanel);
+
+    var _this = _possibleConstructorReturn(this, _Component.call(this, props));
+
+    _this.handleItemClick = _this.handleItemClick.bind(_this);
+    _this.renderPanel = _this.renderPanel.bind(_this);
+
+    _this.state = {
+      isActive: props.isActive
+    };
+    return _this;
+  }
+
+  CollapsePanel.prototype.handleItemClick = function handleItemClick(e) {
+    this.props.onItemClick(this.props.isActive, e);
+  };
+
+  CollapsePanel.prototype.renderPanel = function renderPanel() {
+    var _props = this.props,
+        prefixCls = _props.prefixCls,
+        children = _props.children,
+        isActive = _props.isActive;
+
+
+    var contentCls = (0, _classnames3["default"])(_defineProperty({}, prefixCls + '-content', true));
+
+    if (isActive) {
+      return _react2["default"].createElement(
+        'div',
+        {
+          className: contentCls,
+          'data-active': isActive,
+          role: 'tabpanel'
+        },
+        _react2["default"].createElement(
+          'div',
+          { className: prefixCls + '-content-box' },
+          children
+        )
+      );
     }
-});
+    return null;
+  };
 
+  CollapsePanel.prototype.render = function render() {
+    var _props2 = this.props,
+        prefixCls = _props2.prefixCls,
+        header = _props2.header,
+        isActive = _props2.isActive;
+
+
+    var headerCls = prefixCls + '-header fn-text-overflow';
+
+    var arrowCls = isActive ? 'arrow-active' : 'arrow';
+
+    return _react2["default"].createElement(
+      'div',
+      { className: prefixCls + '-item' },
+      _react2["default"].createElement(
+        'div',
+        {
+          className: headerCls,
+          onClick: this.handleItemClick,
+          role: 'tab',
+          'aria-expanded': isActive
+        },
+        _react2["default"].createElement('i', { className: arrowCls }),
+        header
+      ),
+      _react2["default"].createElement(
+        _uxcoreAnimate2["default"],
+        {
+          component: '',
+          animation: {
+            enter: function enter(node, done) {
+              _util2["default"].toggleHeightAnim(node, true, done);
+            },
+            leave: function leave(node, done) {
+              _util2["default"].toggleHeightAnim(node, false, done);
+            }
+          }
+        },
+        this.renderPanel()
+      )
+    );
+  };
+
+  return CollapsePanel;
+}(_react.Component);
+
+CollapsePanel.displayName = 'CollapsePanel';
+CollapsePanel.propTypes = {
+  prefixCls: _react.PropTypes.string,
+  header: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.number, _react.PropTypes.node]),
+  isActive: _react.PropTypes.bool,
+  onItemClick: _react.PropTypes.func,
+  children: _react.PropTypes.any
+};
+CollapsePanel.defaultProps = {
+  isActive: false,
+  onItemClick: _util2["default"].noop
+};
 exports["default"] = CollapsePanel;
 module.exports = exports['default'];

demo/CollapseDemo.js

@@ -8,9 +8,6 @@ /**
  */
-let Collapse = require('../src');
-let Panel = Collapse.Panel;
+import React, { Component } from 'react';
+import Collapse, { Panel } from '../src';
 
-function callback(key){
-    console.log(key);
-}
-var text = `
+let text = `
   A dog is a type of domesticated animal.
@@ -21,58 +18,60 @@ Known for its loyalty and faithfulness,
 
-class Demo extends React.Component {
+export default class Demo extends Component {
 
-    constructor(props) {
-        super(props);
-        this.state = {
-        };
-    }
+  constructor(props) {
+    super(props);
+    this.state = {
+    };
+  }
 
-    render() {
-        return (
-            <div style={{padding: '20px'}}>
-                <h2>可以同时展开多个面板，这个例子默认展开了第一个。</h2>
-                <Collapse defaultActiveKey={["1"]} onChange={callback}>
-                    <Panel header={`This is panel header 1`} key="1">
-                        <p>{text}</p>
-                    </Panel>
-                    <Panel header={`This is panel header 2`} key="2">
-                        <p>{text}</p>
-                    </Panel>
-                    <Panel header={`This is panel header 3`} key="3">
-                        <p>{text}</p>
-                    </Panel>
-                </Collapse>
-                <h2>手风琴，每次只打开一个tab。默认打开第一个。</h2>
-                <Collapse accordion={true}>
-                    <Panel header={`This is panel header 1`} key="1">
-                        <p>{text}</p>
-                    </Panel>
-                    <Panel header={`This is panel header 2`} key="2">
-                        <p>{text}</p>
-                    </Panel>
-                    <Panel header={`This is panel header 3`} key="3">
-                        <p>{text}</p>
-                    </Panel>
-                </Collapse>
-                <h2>手风琴嵌套折叠面板</h2>
-                <Collapse onChange={callback} accordion={true}>
-                    <Panel header={`This is panel header 1`} key="1">
-                        <Collapse defaultActiveKey="1">
-                            <Panel header={`This is panel nest panel`} key="1">
-                                <p>{text}</p>
-                            </Panel>
-                        </Collapse>
-                    </Panel>
-                    <Panel header={`This is panel header 2`} key="2">
-                        <p>{text}</p>
-                    </Panel>
-                    <Panel header={`This is panel header 3`} key="3">
-                        <p>{text}</p>
-                    </Panel>
-                </Collapse>
-            </div>
-        );
-    }
+  handleChange(key) {
+    console.log(key);
+  }
+
+  render() {
+    return (
+      <div style={{ padding: '20px' }}>
+        <h2>可以同时展开多个面板，这个例子默认展开了第一个。</h2>
+        <Collapse defaultActiveKey={['1']} onChange={this.handleChange}>
+          <Panel header={'This is panel header 1'} key="1">
+            <p>{text}</p>
+          </Panel>
+          <Panel header={'This is panel header 2'} key="2">
+            <p>{text}</p>
+          </Panel>
+          <Panel header={'This is panel header 3'} key="3">
+            <p>{text}</p>
+          </Panel>
+        </Collapse>
+        <h2>手风琴，每次只打开一个tab。默认打开第一个。</h2>
+        <Collapse accordion>
+          <Panel header={'This is panel header 1'} key="1">
+            <p>{text}</p>
+          </Panel>
+          <Panel header={'This is panel header 2'} key="2">
+            <p>{text}</p>
+          </Panel>
+          <Panel header={'This is panel header 3'} key="3">
+            <p>{text}</p>
+          </Panel>
+        </Collapse>
+        <h2>手风琴嵌套折叠面板</h2>
+        <Collapse onChange={this.handleChange} accordion>
+          <Panel header={'This is panel header 1'} key="1">
+            <Collapse defaultActiveKey="1">
+              <Panel header={'This is panel nest panel'} key="1">
+                <p>{text}</p>
+              </Panel>
+            </Collapse>
+          </Panel>
+          <Panel header={'This is panel header 2'} key="2">
+            <p>{text}</p>
+          </Panel>
+          <Panel header={'This is panel header 3'} key="3">
+            <p>{text}</p>
+          </Panel>
+        </Collapse>
+      </div>
+    );
+  }
 }
-
-module.exports = Demo;

demo/index.js

@@ -8,4 +8,6 @@ /**
  */
+import React from 'react';
+import ReactDOM from 'react-dom';
+import Demo from './CollapseDemo';
 
- var Demo = require('./CollapseDemo');
- ReactDOM.render(<Demo/>, document.getElementById('UXCoreDemo'));
+ReactDOM.render(<Demo />, document.getElementById('UXCoreDemo'));

HISTORY.md

 # History
 
 ---
+## 1.4.0
+`CHANGED` rewrite and lint uxcore-collapse by ES6+
 
+`CHANGED` add animation while toggling a panel component
+
+
 ## 1.3.1
@@ -6,0 +11,0 @@

package.json

 {
  "name": "uxcore-collapse",
- "version": "1.3.1",
+ "version": "1.4.0",
  "description": "uxcore-collapse component for uxcore.",
@@ -48,3 +48,5 @@ "repository": "https://github.com/uxcore/uxcore-collapse.git",
   "classnames": "^2.2.5",
-  "object-assign": "^4.0.0"
+  "css-animation": "^1.3.2",
+  "object-assign": "^4.0.0",
+  "uxcore-animate": "^0.2.0"
  },
@@ -51,0 +53,0 @@ "contributors": [],

src/Collapse.js

@@ -1,132 +0,139 @@
-import React, {PropTypes, createClass, Children} from 'react';
+import React, { PropTypes, Component, Children } from 'react';
 import classnames from 'classnames';
 import CollapsePanel from './Panel';
+import util from './util';
 
-const Collapse = createClass({
-    statics: {
-        Panel: CollapsePanel
-    },
+export default class Collapse extends Component {
 
-    propTypes: {
-        prefixCls: PropTypes.string,
-        className: React.PropTypes.string,
-        activeKey: PropTypes.oneOfType([
-            PropTypes.string,
-            PropTypes.arrayOf(PropTypes.string),
-        ]),
-        defaultActiveKey: PropTypes.oneOfType([
-            PropTypes.string,
-            PropTypes.arrayOf(PropTypes.string),
-        ]),
-        onChange: PropTypes.func,
-        accordion: PropTypes.bool,
-    },
+  static displayName = 'Collapse'
 
-    getDefaultProps() {
-        return {
-            prefixCls: 'kuma-collapse',
-            onChange: () => {
-            },
-            accordion: false,
-        };
-    },
+  static Panel = CollapsePanel
 
-    getInitialState() {
-        const {activeKey, accordion} = this.props;
-        let {defaultActiveKey} = this.props;
-        // If is not accordion mode, then, defaultActiveKey should be an array
-        if (!accordion) {
-            defaultActiveKey = defaultActiveKey || [];
-        }
+  static defaultProps = {
+    prefixCls: 'kuma-collapse',
+    onChange: util.noop,
+    accordion: false,
+  }
 
-        return {
-            activeKey: activeKey || defaultActiveKey,
-        };
-    },
+  static propTypes = {
+    prefixCls: PropTypes.string,
+    className: React.PropTypes.string,
+    activeKey: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.arrayOf(PropTypes.string),
+    ]),
+    defaultActiveKey: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.arrayOf(PropTypes.string),
+    ]),
+    onChange: PropTypes.func,
+    accordion: PropTypes.bool,
+    children: PropTypes.any,
+  }
 
-    componentWillReceiveProps(nextProps) {
-        if ('activeKey' in nextProps) {
-            this.setState({
-                activeKey: nextProps.activeKey,
-            });
-        }
-    },
+  constructor(props) {
+    super(props);
 
-    handleClickItem(key) {
-        return () => {
-            const activeKey = this._getActivityKey();
-            if (this.props.accordion) {
-                this.setState({
-                    activeKey: key === activeKey ? null : key,
-                });
-            } else {
-                const index = activeKey.indexOf(key);
-                const isActive = index > -1;
-                if (isActive) {
-                    // remove active state
-                    activeKey.splice(index, 1);
-                } else {
-                    activeKey.push(key);
-                }
+    this.getItems = this.getItems.bind(this);
+    this.getActivityKey = this.getActivityKey.bind(this);
+    this.handleClickItem = this.handleClickItem.bind(this);
 
-                this.setState({activeKey: activeKey});
-            }
-            this.props.onChange(key);
-        };
-    },
+    const { activeKey, accordion } = props;
+    let { defaultActiveKey } = props;
+    // If is not accordion mode, then, defaultActiveKey should be an array
+    if (!accordion) {
+      defaultActiveKey = defaultActiveKey || [];
+    }
 
-    _getActivityKey() {
-        let activeKey = this.state.activeKey;
-        const {accordion} = this.props;
-        if (accordion && Array.isArray(activeKey)) {
-            activeKey = activeKey[0];
-        }
+    this.state = {
+      activeKey: activeKey || defaultActiveKey,
+    };
+  }
 
-        if (!accordion && !Array.isArray(activeKey)) {
-            activeKey = activeKey ? [activeKey] : [];
-        }
-        return activeKey;
-    },
+  componentWillReceiveProps(nextProps) {
+    if ('activeKey' in nextProps) {
+      this.setState({
+        activeKey: nextProps.activeKey,
+      });
+    }
+  }
 
-    getItems() {
-        const activeKey = this._getActivityKey();
-        const {prefixCls, accordion} = this.props;
+  getItems() {
+    const activeKey = this.getActivityKey();
+    const { prefixCls, accordion } = this.props;
 
-        return Children.map(this.props.children, (child, index) => {
-            // If there is no key provide, use the panel order as default key
-            const key = child.key || index;
-            const header = child.props.header;
-            let isActive = false;
-            if (accordion) {
-                isActive = activeKey === key;
-            } else {
-                isActive = activeKey.indexOf(key) > -1;
-            }
+    return Children.map(this.props.children, (child, index) => {
+      // If there is no key provide, use the panel order as default key
+      const key = child.key || index;
+      const header = child.props.header;
+      let isActive = false;
+      if (accordion) {
+        isActive = activeKey === key;
+      } else {
+        isActive = activeKey.indexOf(key) > -1;
+      }
 
-            const props = {
-                key,
-                header,
-                isActive,
-                prefixCls,
-                children: child.props.children,
-                onItemClick: this.handleClickItem(key).bind(this),
-            };
+      const props = {
+        key,
+        header,
+        isActive,
+        prefixCls,
+        children: child.props.children,
+        onItemClick: this.handleClickItem(key).bind(this),
+      };
 
-            return <CollapsePanel {...props} />;
-        });
-    },
+      return <CollapsePanel {...props} />;
+    });
+  }
 
-    render() {
-        const me = this;
-        const className = classnames(me.props.prefixCls, {
-            [me.props.className]: !!me.props.className,
-        });
-        return (
-            <div className={className}>
-                {me.getItems()}
-            </div>
-        );
+  getActivityKey() {
+    let activeKey = this.state.activeKey;
+    const { accordion } = this.props;
+    if (accordion && Array.isArray(activeKey)) {
+      activeKey = activeKey[0];
     }
-});
 
-export default Collapse;
+    if (!accordion && !Array.isArray(activeKey)) {
+      activeKey = activeKey ? [activeKey] : [];
+    }
+    return activeKey;
+  }
+
+  handleClickItem(key) {
+    return () => {
+      const activeKey = this.getActivityKey();
+      if (this.props.accordion) {
+        this.setState({
+          activeKey: key === activeKey ? null : key,
+        });
+      } else {
+        const index = activeKey.indexOf(key);
+        const isActive = index > -1;
+        if (isActive) {
+          // remove active state
+          activeKey.splice(index, 1);
+        } else {
+          activeKey.push(key);
+        }
+
+        this.setState({ activeKey });
+      }
+      this.props.onChange(key);
+    };
+  }
+
+  render() {
+    const me = this;
+
+    const className = classnames(me.props.prefixCls, {
+      [me.props.className]: !!me.props.className,
+    });
+
+    return (
+      <div className={className}>
+        {me.getItems()}
+      </div>
+    );
+  }
+}
+

src/index.js

@@ -9,2 +9,4 @@ /**
 
-module.exports = require('./Collapse');
+import Collapse from './Collapse';
+
+export default Collapse;

src/Panel.js

@@ -1,57 +0,93 @@
-import React, {PropTypes, createClass} from 'react';
+import React, { PropTypes, Component } from 'react';
 import classnames from 'classnames';
+import Animate from 'uxcore-animate';
+import util from './util';
 
-const CollapsePanel = createClass({
-    propTypes: {
-        prefixCls: PropTypes.string,
-        header: PropTypes.oneOfType([
-            PropTypes.string,
-            PropTypes.number,
-            PropTypes.node,
-        ]),
-        isActive: PropTypes.bool,
-        onItemClick: PropTypes.func,
-    },
+export default class CollapsePanel extends Component {
+  static displayName = 'CollapsePanel'
 
-    getInitialState() {
-        return {isActive: this.props.isActive};
-    },
+  static propTypes = {
+    prefixCls: PropTypes.string,
+    header: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.number,
+      PropTypes.node,
+    ]),
+    isActive: PropTypes.bool,
+    onItemClick: PropTypes.func,
+    children: PropTypes.any,
+  }
 
-    getDefaultProps() {
-        return {
-            isActive: false,
-            onItemClick() {
-            },
-        };
-    },
+  static defaultProps = {
+    isActive: false,
+    onItemClick: util.noop,
+  }
 
-    handleItemClick(e) {
-        this.props.onItemClick(this.props.isActive, e);
-    },
+  constructor(props) {
+    super(props);
 
-    render() {
-        const {prefixCls, header, children, isActive} = this.props;
-        const headerCls = `${prefixCls}-header fn-text-overflow`;
-        const contentCls = classnames({
-            [`${prefixCls}-content`]: true,
-            [`${prefixCls}-content-active`]: isActive,
-        });
-        const arrowCls = isActive? "arrow-active": "arrow";
-        return (
-            <div className={`${prefixCls}-item`}>
-                <div className={headerCls} onClick={this.handleItemClick}
-                     role="tab" aria-expanded={isActive}>
-                    <i className={arrowCls}></i>
-                    {header}
-                </div>
-                <div className={contentCls}
-                     data-active={isActive}
-                     role="tabpanel">
-                    <div className={`${prefixCls}-content-box`}>{children}</div>
-                </div>
-            </div>
-        );
-    },
-});
+    this.handleItemClick = this.handleItemClick.bind(this);
+    this.renderPanel = this.renderPanel.bind(this);
 
-export default CollapsePanel;
+    this.state = {
+      isActive: props.isActive,
+    };
+  }
+
+  handleItemClick(e) {
+    this.props.onItemClick(this.props.isActive, e);
+  }
+
+  renderPanel() {
+    const { prefixCls, children, isActive } = this.props;
+
+    const contentCls = classnames({
+      [`${prefixCls}-content`]: true,
+    });
+
+    if (isActive) {
+      return (
+        <div
+          className={contentCls}
+          data-active={isActive}
+          role="tabpanel"
+        >
+          <div className={`${prefixCls}-content-box`}>{children}</div>
+        </div>
+      );
+    }
+    return null;
+  }
+
+  render() {
+    const { prefixCls, header, isActive } = this.props;
+
+    const headerCls = `${prefixCls}-header fn-text-overflow`;
+
+    const arrowCls = isActive ? 'arrow-active' : 'arrow';
+
+    return (
+      <div className={`${prefixCls}-item`}>
+        <div
+          className={headerCls}
+          onClick={this.handleItemClick}
+          role="tab"
+          aria-expanded={isActive}
+        >
+          <i className={arrowCls}></i>
+          {header}
+        </div>
+        <Animate
+          component=""
+          animation={{
+            enter: (node, done) => { util.toggleHeightAnim(node, true, done); },
+            leave: (node, done) => { util.toggleHeightAnim(node, false, done); },
+          }}
+        >
+          {this.renderPanel()}
+        </Animate>
+
+      </div>
+    );
+  }
+}

tests/Collapse.spec.js

 import expect from 'expect.js';
 import React from 'react';
 import ReactDOM from 'react-dom';
-import TestUtils, {Simulate} from 'react-addons-test-utils';
+import TestUtils, { Simulate } from 'react-addons-test-utils';
 import Collapse from '../src';
@@ -9,2 +9,2 @@
 
-});
+});

tests/index.js

@@ -6,2 +6,2 @@ /**
 const req = require.context('.', false, /\.spec\.js$/);
-req.keys().forEach(req);
+req.keys().forEach(req);

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

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

30071

increased by26.11%

Number of package files

22

increased by15.79%

Lines of code

650

increased by41.92%

Worsened metrics

Dependency count

4

increased by100%

Number of medium supply chain risk alerts

2

increased byInfinity%

Dependency changes

• + Addedcss-animation@^1.3.2

• + Addeduxcore-animate@^0.2.0

• + Addedadd-dom-event-listener@1.1.0(transitive)

• + Addedbabel-runtime@6.26.0(transitive)

• + Addedcomponent-classes@1.2.6(transitive)

• + Addedcomponent-indexof@0.0.3(transitive)

• + Addedcore-js@2.6.12(transitive)

• + Addedcss-animation@1.6.1(transitive)

• + Addedjs-tokens@4.0.0(transitive)

• + Addedloose-envify@1.4.0(transitive)

• + Addedperformance-now@2.1.0(transitive)

• + Addedprop-types@15.8.1(transitive)

• + Addedraf@3.4.1(transitive)

• + Addedrc-animate@2.11.1(transitive)

• + Addedrc-util@4.21.1(transitive)

• + Addedreact-is@16.13.1(transitive)

• + Addedreact-lifecycles-compat@3.0.4(transitive)

• + Addedregenerator-runtime@0.11.1(transitive)

• + Addedshallowequal@1.1.0(transitive)

• + Addeduxcore-animate@0.2.3(transitive)