From a9c7b66a0fac818c01ba8a5d1751bafd1521c686 Mon Sep 17 00:00:00 2001 From: Toru Kobayashi Date: Mon, 10 Apr 2017 15:22:54 +0900 Subject: [PATCH] Convert React.createClass to React.Component --- docs/api/ReactWrapper/matchesElement.md | 10 ++-- docs/api/ReactWrapper/setContext.md | 12 ++--- docs/api/ShallowWrapper/matchesElement.md | 10 ++-- docs/api/ShallowWrapper/prop.md | 4 +- docs/api/ShallowWrapper/props.md | 4 +- docs/api/ShallowWrapper/setContext.md | 12 ++--- docs/api/render.md | 12 ++--- src/ReactWrapperComponent.jsx | 62 +++++++++-------------- 8 files changed, 61 insertions(+), 65 deletions(-) diff --git a/docs/api/ReactWrapper/matchesElement.md b/docs/api/ReactWrapper/matchesElement.md index fcbbf0bf4..6a7a87db9 100644 --- a/docs/api/ReactWrapper/matchesElement.md +++ b/docs/api/ReactWrapper/matchesElement.md @@ -21,16 +21,20 @@ render tree. ```jsx -const MyComponent = React.createClass({ +class MyComponent extends React.Component { + constructor(props) { + super(props); + this.handleClick = this.handleClick.bind(this); + } handleClick() { ... - }, + } render() { return (
Hello
); } -}); +} const wrapper = mount(); expect(wrapper.matchesElement( diff --git a/docs/api/ReactWrapper/setContext.md b/docs/api/ReactWrapper/setContext.md index 4f82c4af0..57cf3620d 100644 --- a/docs/api/ReactWrapper/setContext.md +++ b/docs/api/ReactWrapper/setContext.md @@ -21,14 +21,14 @@ NOTE: can only be called on a wrapper instance that is also the root instance. #### Example ```jsx -const SimpleComponent = React.createClass({ - contextTypes: { - name: React.PropTypes.string, - }, +class SimpleComponent extends React.Component { render() { return
{this.context.name}
; - }, -}); + } +} +SimpleComponent.contextTypes = { + name: React.PropTypes.string, +}; ``` ```jsx const context = { name: 'foo' }; diff --git a/docs/api/ShallowWrapper/matchesElement.md b/docs/api/ShallowWrapper/matchesElement.md index cc4db7d1f..95deea070 100644 --- a/docs/api/ShallowWrapper/matchesElement.md +++ b/docs/api/ShallowWrapper/matchesElement.md @@ -21,16 +21,20 @@ render tree. ```jsx -const MyComponent = React.createClass({ +class MyComponent extends React.Component { + constructor(props) { + super(props); + this.handleClick = this.handleClick.bind(this); + } handleClick() { ... - }, + } render() { return (
Hello
); } -}); +} const wrapper = shallow(); expect(wrapper.matchesElement( diff --git a/docs/api/ShallowWrapper/prop.md b/docs/api/ShallowWrapper/prop.md index 9ab4c6c87..9c24a62c5 100644 --- a/docs/api/ShallowWrapper/prop.md +++ b/docs/api/ShallowWrapper/prop.md @@ -19,13 +19,13 @@ of the root node of the component. ```jsx -const MyComponent = React.createClass({ +class MyComponent extends React.Component { render() { return (
Hello
) } -}) +} const wrapper = shallow(); expect(wrapper.prop('includedProp')).to.equal("Success!"); diff --git a/docs/api/ShallowWrapper/props.md b/docs/api/ShallowWrapper/props.md index 6fa070932..bbdd73ea1 100644 --- a/docs/api/ShallowWrapper/props.md +++ b/docs/api/ShallowWrapper/props.md @@ -13,13 +13,13 @@ See [`.instance() => ReactComponent`](instance.md) ```jsx -const MyComponent = React.createClass({ +class MyComponent extends React.Component { render() { return (
Hello
) } -}) +} const wrapper = shallow(); expect(wrapper.props().includedProp).to.equal("Success!"); diff --git a/docs/api/ShallowWrapper/setContext.md b/docs/api/ShallowWrapper/setContext.md index 4a7f2179e..fa4e0eca3 100644 --- a/docs/api/ShallowWrapper/setContext.md +++ b/docs/api/ShallowWrapper/setContext.md @@ -21,14 +21,14 @@ NOTE: can only be called on a wrapper instance that is also the root instance. #### Example ```jsx -const SimpleComponent = React.createClass({ - contextTypes: { - name: React.PropTypes.string, - }, +class SimpleComponent extends React.Component { render() { return
{this.context.name}
; - }, -}); + } +} +SimpleComponent.contextTypes = { + name: React.PropTypes.string, +}; ``` ```jsx const context = { name: 'foo' }; diff --git a/docs/api/render.md b/docs/api/render.md index 3123b25c3..2d487b79f 100644 --- a/docs/api/render.md +++ b/docs/api/render.md @@ -30,14 +30,14 @@ describe('', () => { }); it('can pass in context', () => { - const SimpleComponent = React.createClass({ - contextTypes: { - name: React.PropTypes.string, - }, + class SimpleComponent extends React.Component { render() { return
{this.context.name}
; - }, - }); + } + } + SimpleComponent.contextTypes = { + name: React.PropTypes.string, + }; const context = { name: 'foo' }; const wrapper = render(, { context }); diff --git a/src/ReactWrapperComponent.jsx b/src/ReactWrapperComponent.jsx index 9d46e67d8..4bba0d081 100644 --- a/src/ReactWrapperComponent.jsx +++ b/src/ReactWrapperComponent.jsx @@ -12,37 +12,19 @@ import objectAssign from 'object.assign'; * pass new props in. */ export default function createWrapperComponent(node, options = {}) { - const spec = { - - propTypes: { - Component: PropTypes.oneOfType([PropTypes.func, PropTypes.string]).isRequired, - props: PropTypes.object.isRequired, - context: PropTypes.object, - }, - - getDefaultProps() { - return { - context: null, - }; - }, - - getInitialState() { - return { + class WrapperComponent extends React.Component { + constructor(...args) { + super(...args); + this.state = { mount: true, props: this.props.props, context: this.props.context, }; - }, - + } setChildProps(newProps, callback = undefined) { const props = objectAssign({}, this.state.props, newProps); this.setState({ props }, callback); - }, - - setChildContext(context) { - return new Promise(resolve => this.setState({ context }, resolve)); - }, - + } getInstance() { const component = this._reactInternalInstance._renderedComponent; const inst = component.getPublicInstance(); @@ -50,8 +32,7 @@ export default function createWrapperComponent(node, options = {}) { return component._instance; } return inst; - }, - + } getWrappedComponent() { const component = this._reactInternalInstance._renderedComponent; const inst = component.getPublicInstance(); @@ -59,8 +40,10 @@ export default function createWrapperComponent(node, options = {}) { return component._instance; } return inst; - }, - + } + setChildContext(context) { + return new Promise(resolve => this.setState({ context }, resolve)); + } render() { const { Component } = this.props; const { mount, props } = this.state; @@ -68,7 +51,15 @@ export default function createWrapperComponent(node, options = {}) { return ( ); - }, + } + } + WrapperComponent.propTypes = { + Component: PropTypes.oneOfType([PropTypes.func, PropTypes.string]).isRequired, + props: PropTypes.object.isRequired, + context: PropTypes.object, + }; + WrapperComponent.defaultProps = { + context: null, }; if (options.context && (node.type.contextTypes || options.childContextTypes)) { @@ -81,13 +72,10 @@ export default function createWrapperComponent(node, options = {}) { if (options.childContextTypes) { objectAssign(childContextTypes, options.childContextTypes); } - objectAssign(spec, { - childContextTypes, - getChildContext() { - return this.state.context; - }, - }); + WrapperComponent.prototype.getChildContext = function getChildContext() { + return this.state.context; + }; + WrapperComponent.childContextTypes = childContextTypes; } - - return React.createClass(spec); + return WrapperComponent; }