diff --git a/src/addons/transitions/ReactCSSTransitionGroup.js b/src/addons/transitions/ReactCSSTransitionGroup.js index 6d61c2884aa8a..150d56ade4657 100644 --- a/src/addons/transitions/ReactCSSTransitionGroup.js +++ b/src/addons/transitions/ReactCSSTransitionGroup.js @@ -46,10 +46,10 @@ function createTransitionTimeoutPropValidator(transitionType) { * enters or leaves the DOM. * See https://facebook.github.io/react/docs/animation.html#high-level-api-reactcsstransitiongroup */ -var ReactCSSTransitionGroup = React.createClass({ - displayName: 'ReactCSSTransitionGroup', +class ReactCSSTransitionGroup extends React.Component { + static displayName = 'ReactCSSTransitionGroup'; - propTypes: { + static propTypes = { transitionName: ReactCSSTransitionGroupChild.propTypes.name, transitionAppear: React.PropTypes.bool, @@ -58,17 +58,15 @@ var ReactCSSTransitionGroup = React.createClass({ transitionAppearTimeout: createTransitionTimeoutPropValidator('Appear'), transitionEnterTimeout: createTransitionTimeoutPropValidator('Enter'), transitionLeaveTimeout: createTransitionTimeoutPropValidator('Leave'), - }, + }; - getDefaultProps: function() { - return { - transitionAppear: false, - transitionEnter: true, - transitionLeave: true, - }; - }, + static defaultProps = { + transitionAppear: false, + transitionEnter: true, + transitionLeave: true, + }; - _wrapChild: function(child) { + _wrapChild = (child) => { // We need to provide this childFactory so that // ReactCSSTransitionGroupChild can receive updates to name, enter, and // leave while it is leaving. @@ -85,14 +83,14 @@ var ReactCSSTransitionGroup = React.createClass({ }, child ); - }, + }; - render: function() { + render() { return React.createElement( ReactTransitionGroup, Object.assign({}, this.props, {childFactory: this._wrapChild}) ); - }, -}); + } +} module.exports = ReactCSSTransitionGroup; diff --git a/src/addons/transitions/ReactTransitionGroup.js b/src/addons/transitions/ReactTransitionGroup.js index 23121a334ac41..001b06fb9d0e0 100644 --- a/src/addons/transitions/ReactTransitionGroup.js +++ b/src/addons/transitions/ReactTransitionGroup.js @@ -22,44 +22,40 @@ var emptyFunction = require('emptyFunction'); * special lifecycle hooks are called. * See https://facebook.github.io/react/docs/animation.html#low-level-api-reacttransitiongroup */ -var ReactTransitionGroup = React.createClass({ - displayName: 'ReactTransitionGroup', +class ReactTransitionGroup extends React.Component { + static displayName = 'ReactTransitionGroup'; - propTypes: { + static propTypes = { component: React.PropTypes.any, childFactory: React.PropTypes.func, - }, - - getDefaultProps: function() { - return { - component: 'span', - childFactory: emptyFunction.thatReturnsArgument, - }; - }, - - getInitialState: function() { - return { - // TODO: can we get useful debug information to show at this point? - children: ReactTransitionChildMapping.getChildMapping(this.props.children), - }; - }, - - componentWillMount: function() { + }; + + static defaultProps = { + component: 'span', + childFactory: emptyFunction.thatReturnsArgument, + }; + + state = { + // TODO: can we get useful debug information to show at this point? + children: ReactTransitionChildMapping.getChildMapping(this.props.children), + }; + + componentWillMount() { this.currentlyTransitioningKeys = {}; this.keysToEnter = []; this.keysToLeave = []; - }, + } - componentDidMount: function() { + componentDidMount() { var initialChildMapping = this.state.children; for (var key in initialChildMapping) { if (initialChildMapping[key]) { this.performAppear(key); } } - }, + } - componentWillReceiveProps: function(nextProps) { + componentWillReceiveProps(nextProps) { var nextChildMapping; if (__DEV__) { nextChildMapping = ReactTransitionChildMapping.getChildMapping( @@ -99,9 +95,9 @@ var ReactTransitionGroup = React.createClass({ } // If we want to someday check for reordering, we could do it here. - }, + } - componentDidUpdate: function() { + componentDidUpdate() { var keysToEnter = this.keysToEnter; this.keysToEnter = []; keysToEnter.forEach(this.performEnter); @@ -109,9 +105,9 @@ var ReactTransitionGroup = React.createClass({ var keysToLeave = this.keysToLeave; this.keysToLeave = []; keysToLeave.forEach(this.performLeave); - }, + } - performAppear: function(key) { + performAppear = (key) => { this.currentlyTransitioningKeys[key] = true; var component = this.refs[key]; @@ -123,9 +119,9 @@ var ReactTransitionGroup = React.createClass({ } else { this._handleDoneAppearing(key); } - }, + }; - _handleDoneAppearing: function(key) { + _handleDoneAppearing = (key) => { var component = this.refs[key]; if (component.componentDidAppear) { component.componentDidAppear(); @@ -149,9 +145,9 @@ var ReactTransitionGroup = React.createClass({ // This was removed before it had fully appeared. Remove it. this.performLeave(key); } - }, + }; - performEnter: function(key) { + performEnter = (key) => { this.currentlyTransitioningKeys[key] = true; var component = this.refs[key]; @@ -163,9 +159,9 @@ var ReactTransitionGroup = React.createClass({ } else { this._handleDoneEntering(key); } - }, + }; - _handleDoneEntering: function(key) { + _handleDoneEntering = (key) => { var component = this.refs[key]; if (component.componentDidEnter) { component.componentDidEnter(); @@ -189,9 +185,9 @@ var ReactTransitionGroup = React.createClass({ // This was removed before it had fully entered. Remove it. this.performLeave(key); } - }, + }; - performLeave: function(key) { + performLeave = (key) => { this.currentlyTransitioningKeys[key] = true; var component = this.refs[key]; @@ -203,9 +199,9 @@ var ReactTransitionGroup = React.createClass({ // is done. this._handleDoneLeaving(key); } - }, + }; - _handleDoneLeaving: function(key) { + _handleDoneLeaving = (key) => { var component = this.refs[key]; if (component.componentDidLeave) { @@ -236,9 +232,9 @@ var ReactTransitionGroup = React.createClass({ return {children: newChildren}; }); } - }, + }; - render: function() { + render() { // TODO: we could get rid of the need for the wrapper node // by cloning a single child var childrenToRender = []; @@ -274,7 +270,7 @@ var ReactTransitionGroup = React.createClass({ props, childrenToRender ); - }, -}); + } +} module.exports = ReactTransitionGroup; diff --git a/src/renderers/dom/client/wrappers/__tests__/ReactDOMInput-test.js b/src/renderers/dom/client/wrappers/__tests__/ReactDOMInput-test.js index 1b878d992c545..541f0671af852 100644 --- a/src/renderers/dom/client/wrappers/__tests__/ReactDOMInput-test.js +++ b/src/renderers/dom/client/wrappers/__tests__/ReactDOMInput-test.js @@ -859,15 +859,14 @@ describe('ReactDOMInput', () => { }); it('does not raise a validation warning when it switches types', () => { - var Input = React.createClass({ - getInitialState() { - return { type: 'number', value: 1000 }; - }, + class Input extends React.Component { + state = { type: 'number', value: 1000 }; + render() { var { value, type } = this.state; return ( {}} type={type} value={value} />); - }, - }); + } + } var input = ReactTestUtils.renderIntoDocument(); var node = ReactDOM.findDOMNode(input);