From 324e7b240238c279b530c937e5cd502af4854467 Mon Sep 17 00:00:00 2001 From: "yuuji.yaginuma" Date: Mon, 10 Apr 2017 11:10:26 +0900 Subject: [PATCH 1/3] Migrate from the deprecated React.propTypes to the prop-types package --- package.json | 5 +++-- src/Collapse.jsx | 3 ++- src/Panel.jsx | 3 ++- src/PanelContent.jsx | 3 ++- 4 files changed, 9 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index ce622351..97d95a63 100644 --- a/package.json +++ b/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" } } diff --git a/src/Collapse.jsx b/src/Collapse.jsx index a9e45198..eac72ff1 100644 --- a/src/Collapse.jsx +++ b/src/Collapse.jsx @@ -1,4 +1,5 @@ -import React, { PropTypes, Children }from 'react'; +import React, { Children } from 'react'; +import PropTypes from 'prop-types'; import CollapsePanel from './Panel'; import openAnimationFactory from './openAnimationFactory'; import classNames from 'classnames'; diff --git a/src/Panel.jsx b/src/Panel.jsx index 053e6d6b..927c9475 100644 --- a/src/Panel.jsx +++ b/src/Panel.jsx @@ -1,4 +1,5 @@ -import React, { PropTypes } from 'react'; +import React from 'react'; +import PropTypes from 'prop-types'; import classNames from 'classnames'; import PanelContent from './PanelContent'; import Animate from 'rc-animate'; diff --git a/src/PanelContent.jsx b/src/PanelContent.jsx index c3c87f32..2df4fb5d 100644 --- a/src/PanelContent.jsx +++ b/src/PanelContent.jsx @@ -1,4 +1,5 @@ -import React, { PropTypes } from 'react'; +import React from 'react'; +import PropTypes from 'prop-types'; import classnames from 'classnames'; const PanelContent = React.createClass({ From 75a352328f166a37961db65259921ce5542a55ea Mon Sep 17 00:00:00 2001 From: "yuuji.yaginuma" Date: Mon, 10 Apr 2017 11:28:26 +0900 Subject: [PATCH 2/3] Migrate from the deprecated React.createClass to the create-react-class package --- package.json | 1 + src/Collapse.jsx | 3 ++- src/Panel.jsx | 3 ++- src/PanelContent.jsx | 3 ++- 4 files changed, 7 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index 97d95a63..c4838b75 100644 --- a/package.json +++ b/package.json @@ -55,6 +55,7 @@ ], "dependencies": { "classnames": "2.x", + "create-react-class": "^15.5.1", "css-animation": "1.x", "prop-types": "^15.5.6", "rc-animate": "2.x" diff --git a/src/Collapse.jsx b/src/Collapse.jsx index eac72ff1..43294571 100644 --- a/src/Collapse.jsx +++ b/src/Collapse.jsx @@ -12,7 +12,8 @@ function toArray(activeKey) { return currentActiveKey; } -const Collapse = React.createClass({ +const createReactClass = require('create-react-class'); +const Collapse = createReactClass({ propTypes: { children: PropTypes.any, prefixCls: PropTypes.string, diff --git a/src/Panel.jsx b/src/Panel.jsx index 927c9475..92d95336 100644 --- a/src/Panel.jsx +++ b/src/Panel.jsx @@ -4,7 +4,8 @@ import classNames from 'classnames'; import PanelContent from './PanelContent'; import Animate from 'rc-animate'; -const CollapsePanel = React.createClass({ +const createReactClass = require('create-react-class'); +const CollapsePanel = createReactClass({ propTypes: { className: PropTypes.oneOfType([ PropTypes.string, diff --git a/src/PanelContent.jsx b/src/PanelContent.jsx index 2df4fb5d..52bb4d1d 100644 --- a/src/PanelContent.jsx +++ b/src/PanelContent.jsx @@ -2,7 +2,8 @@ import React from 'react'; import PropTypes from 'prop-types'; import classnames from 'classnames'; -const PanelContent = React.createClass({ +const createReactClass = require('create-react-class'); +const PanelContent = createReactClass({ propTypes: { prefixCls: PropTypes.string, isActive: PropTypes.bool, From 674ffc7040be6f1a3fe828f9718c9d137705b61e Mon Sep 17 00:00:00 2001 From: "yuuji.yaginuma" Date: Tue, 11 Apr 2017 07:33:48 +0900 Subject: [PATCH 3/3] Convert React.createClass to React.Component --- package.json | 1 - src/Collapse.jsx | 81 +++++++++++++++++++++----------------------- src/Panel.jsx | 66 +++++++++++++++++------------------- src/PanelContent.jsx | 23 +++++++------ 4 files changed, 82 insertions(+), 89 deletions(-) diff --git a/package.json b/package.json index c4838b75..97d95a63 100644 --- a/package.json +++ b/package.json @@ -55,7 +55,6 @@ ], "dependencies": { "classnames": "2.x", - "create-react-class": "^15.5.1", "css-animation": "1.x", "prop-types": "^15.5.6", "rc-animate": "2.x" diff --git a/src/Collapse.jsx b/src/Collapse.jsx index 43294571..1f469109 100644 --- a/src/Collapse.jsx +++ b/src/Collapse.jsx @@ -1,4 +1,4 @@ -import React, { Children } from 'react'; +import React, { Component, Children } from 'react'; import PropTypes from 'prop-types'; import CollapsePanel from './Panel'; import openAnimationFactory from './openAnimationFactory'; @@ -12,50 +12,21 @@ function toArray(activeKey) { return currentActiveKey; } -const createReactClass = require('create-react-class'); -const Collapse = createReactClass({ - 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) { @@ -68,7 +39,7 @@ const Collapse = createReactClass({ openAnimation: nextProps.openAnimation, }); } - }, + } onClickItem(key) { return () => { @@ -88,7 +59,7 @@ const Collapse = createReactClass({ } this.setActiveKey(activeKey); }; - }, + } getItems() { const activeKey = this.state.activeKey; @@ -121,14 +92,14 @@ const Collapse = createReactClass({ }); 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; @@ -141,7 +112,33 @@ const Collapse = createReactClass({ {this.getItems()} ); - }, -}); + } +} + +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; diff --git a/src/Panel.jsx b/src/Panel.jsx index 92d95336..406aedb1 100644 --- a/src/Panel.jsx +++ b/src/Panel.jsx @@ -1,42 +1,13 @@ -import React 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 createReactClass = require('create-react-class'); -const CollapsePanel = createReactClass({ - 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; @@ -49,7 +20,7 @@ const CollapsePanel = createReactClass({
@@ -68,7 +39,32 @@ const CollapsePanel = createReactClass({
); - }, -}); + } +} + +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; diff --git a/src/PanelContent.jsx b/src/PanelContent.jsx index 52bb4d1d..0290c717 100644 --- a/src/PanelContent.jsx +++ b/src/PanelContent.jsx @@ -1,17 +1,12 @@ -import React from 'react'; +import React, { Component } from 'react'; import PropTypes from 'prop-types'; import classnames from 'classnames'; -const createReactClass = require('create-react-class'); -const PanelContent = createReactClass({ - 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) { @@ -31,7 +26,13 @@ const PanelContent = createReactClass({
{children}
); - }, -}); + } +} + +PanelContent.propTypes = { + prefixCls: PropTypes.string, + isActive: PropTypes.bool, + children: PropTypes.any, +}; export default PanelContent;