Fix deprecation warnings for react >= 15.5.0

package.json

@@ -55,7 +55,8 @@
   ],
   "dependencies": {
     "classnames": "2.x",
-    "rc-animate": "2.x",
-    "css-animation": "1.x"
+    "css-animation": "1.x",
+    "prop-types": "^15.5.6",
+    "rc-animate": "2.x"
   }
 }

src/Collapse.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes, Children }from 'react';
+import React, { Component, Children } from 'react';
+import PropTypes from 'prop-types';
 import CollapsePanel from './Panel';
 import openAnimationFactory from './openAnimationFactory';
 import classNames from 'classnames';
@@ -11,49 +12,21 @@ function toArray(activeKey) {
   return currentActiveKey;
 }
 
-const Collapse = React.createClass({
-  propTypes: {
-    children: PropTypes.any,
-    prefixCls: PropTypes.string,
-    activeKey: PropTypes.oneOfType([
-      PropTypes.string,
-      PropTypes.arrayOf(PropTypes.string),
-    ]),
-    defaultActiveKey: PropTypes.oneOfType([
-      PropTypes.string,
-      PropTypes.arrayOf(PropTypes.string),
-    ]),
-    openAnimation: PropTypes.object,
-    onChange: PropTypes.func,
-    accordion: PropTypes.bool,
-    className: PropTypes.string,
-    style: PropTypes.object,
-  },
-
-  statics: {
-    Panel: CollapsePanel,
-  },
-
-  getDefaultProps() {
-    return {
-      prefixCls: 'rc-collapse',
-      onChange() {
-      },
-      accordion: false,
-    };
-  },
+class Collapse extends Component {
+  constructor(props) {
+    super(props);
 
-  getInitialState() {
     const { activeKey, defaultActiveKey } = this.props;
     let currentActiveKey = defaultActiveKey;
     if ('activeKey' in this.props) {
       currentActiveKey = activeKey;
     }
-    return {
+
+    this.state = {
       openAnimation: this.props.openAnimation || openAnimationFactory(this.props.prefixCls),
       activeKey: toArray(currentActiveKey),
     };
-  },
+  }
 
   componentWillReceiveProps(nextProps) {
     if ('activeKey' in nextProps) {
@@ -66,7 +39,7 @@ const Collapse = React.createClass({
         openAnimation: nextProps.openAnimation,
       });
     }
-  },
+  }
 
   onClickItem(key) {
     return () => {
@@ -86,7 +59,7 @@ const Collapse = React.createClass({
       }
       this.setActiveKey(activeKey);
     };
-  },
+  }
 
   getItems() {
     const activeKey = this.state.activeKey;
@@ -119,14 +92,14 @@ const Collapse = React.createClass({
     });
 
     return newChildren;
-  },
+  }
 
   setActiveKey(activeKey) {
     if (!('activeKey' in this.props)) {
       this.setState({ activeKey });
     }
     this.props.onChange(this.props.accordion ? activeKey[0] : activeKey);
-  },
+  }
 
   render() {
     const { prefixCls, className, style } = this.props;
@@ -139,7 +112,33 @@ const Collapse = React.createClass({
         {this.getItems()}
       </div>
     );
-  },
-});
+  }
+}
+
+Collapse.propTypes = {
+  children: PropTypes.any,
+  prefixCls: PropTypes.string,
+  activeKey: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.arrayOf(PropTypes.string),
+  ]),
+  defaultActiveKey: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.arrayOf(PropTypes.string),
+  ]),
+  openAnimation: PropTypes.object,
+  onChange: PropTypes.func,
+  accordion: PropTypes.bool,
+  className: PropTypes.string,
+  style: PropTypes.object,
+};
+
+Collapse.defaultProps = {
+  prefixCls: 'rc-collapse',
+  onChange() {},
+  accordion: false,
+};
+
+Collapse.Panel = CollapsePanel;
 
 export default Collapse;

src/Panel.jsx

@@ -1,40 +1,13 @@
-import React, { PropTypes } from 'react';
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import PanelContent from './PanelContent';
 import Animate from 'rc-animate';
 
-const CollapsePanel = React.createClass({
-  propTypes: {
-    className: PropTypes.oneOfType([
-      PropTypes.string,
-      PropTypes.object,
-    ]),
-    children: PropTypes.any,
-    openAnimation: PropTypes.object,
-    prefixCls: PropTypes.string,
-    header: PropTypes.oneOfType([
-      PropTypes.string,
-      PropTypes.number,
-      PropTypes.node,
-    ]),
-    showArrow: PropTypes.bool,
-    isActive: PropTypes.bool,
-    onItemClick: PropTypes.func,
-    style: PropTypes.object,
-  },
-
-  getDefaultProps() {
-    return {
-      showArrow: true,
-      isActive: false,
-      onItemClick() {
-      },
-    };
-  },
-
+class CollapsePanel extends Component {
   handleItemClick() {
     this.props.onItemClick();
-  },
+  }
 
   render() {
     const { className, style, prefixCls, header, children, isActive, showArrow } = this.props;
@@ -47,7 +20,7 @@ const CollapsePanel = React.createClass({
       <div className={itemCls} style={style}>
         <div
           className={headerCls}
-          onClick={this.handleItemClick}
+          onClick={this.handleItemClick.bind(this)}
           role="tab"
           aria-expanded={isActive}
         >
@@ -66,7 +39,32 @@ const CollapsePanel = React.createClass({
         </Animate>
       </div>
     );
-  },
-});
+  }
+}
+
+CollapsePanel.propTypes = {
+  className: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.object,
+  ]),
+  children: PropTypes.any,
+  openAnimation: PropTypes.object,
+  prefixCls: PropTypes.string,
+  header: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.number,
+    PropTypes.node,
+  ]),
+  showArrow: PropTypes.bool,
+  isActive: PropTypes.bool,
+  onItemClick: PropTypes.func,
+  style: PropTypes.object,
+};
+
+CollapsePanel.defaultProps = {
+  showArrow: true,
+  isActive: false,
+  onItemClick() {},
+};
 
 export default CollapsePanel;

src/PanelContent.jsx

@@ -1,15 +1,12 @@
-import React, { PropTypes } from 'react';
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import classnames from 'classnames';
 
-const PanelContent = React.createClass({
-  propTypes: {
-    prefixCls: PropTypes.string,
-    isActive: PropTypes.bool,
-    children: PropTypes.any,
-  },
+class PanelContent extends Component {
   shouldComponentUpdate(nextProps) {
     return this.props.isActive || nextProps.isActive;
-  },
+  }
+
   render() {
     this._isActived = this._isActived || this.props.isActive;
     if (!this._isActived) {
@@ -29,7 +26,13 @@ const PanelContent = React.createClass({
         <div className={`${prefixCls}-content-box`}>{children}</div>
       </div>
     );
-  },
-});
+  }
+}
+
+PanelContent.propTypes = {
+  prefixCls: PropTypes.string,
+  isActive: PropTypes.bool,
+  children: PropTypes.any,
+};
 
 export default PanelContent;