diff --git a/examples/animations/app.js b/examples/animations/app.js index 48f28c3f..9ef1952d 100644 --- a/examples/animations/app.js +++ b/examples/animations/app.js @@ -1,14 +1,16 @@ -// TODO: animations aren't happening, not sure what the problem is var React = require('react'); var TransitionGroup = require('react/lib/ReactCSSTransitionGroup'); var Router = require('react-router'); var { Route, RouteHandler, Link } = Router; var App = React.createClass({ - mixins: [ Router.State ], + + contextTypes: { + router: React.PropTypes.func.isRequired + }, render: function () { - var name = this.getRoutes().slice(0).reverse()[0].name; + var name = this.context.router.getCurrentRoutes().slice(0).reverse()[0].name; return (
@@ -48,8 +50,8 @@ var Page2 = React.createClass({ var routes = ( - - + + ); diff --git a/examples/auth-flow/app.js b/examples/auth-flow/app.js index 75491f54..b4922bf1 100644 --- a/examples/auth-flow/app.js +++ b/examples/auth-flow/app.js @@ -1,6 +1,6 @@ var React = require('react'); var Router = require('react-router'); -var { Route, RouteHandler, Link, State } = Router; +var { Route, RouteHandler, Link } = Router; var App = React.createClass({ getInitialState: function () { @@ -65,7 +65,10 @@ var Dashboard = React.createClass({ }); var Login = React.createClass({ - mixins: [ Router.Navigation, State], + + contextTypes: { + router: React.PropTypes.func.isRequired + }, getInitialState: function () { return { @@ -75,7 +78,8 @@ var Login = React.createClass({ handleSubmit: function (event) { event.preventDefault(); - var nextPath = this.getQuery().nextPath; + var { router } = this.context; + var nextPath = router.getCurrentQuery().nextPath; var email = this.refs.email.getDOMNode().value; var pass = this.refs.pass.getDOMNode().value; auth.login(email, pass, function (loggedIn) { @@ -83,9 +87,9 @@ var Login = React.createClass({ return this.setState({ error: true }); if (nextPath) { - this.replaceWith(nextPath); + router.replaceWith(nextPath); } else { - this.replaceWith('/about'); + router.replaceWith('/about'); } }.bind(this)); }, @@ -164,7 +168,7 @@ function pretendRequest(email, pass, cb) { if (email === 'joe@example.com' && pass === 'password1') { cb({ authenticated: true, - token: Math.random().toString(36).substring(7), + token: Math.random().toString(36).substring(7) }); } else { cb({authenticated: false}); diff --git a/examples/data-flow/app.js b/examples/data-flow/app.js index d6fdb688..c75ee167 100644 --- a/examples/data-flow/app.js +++ b/examples/data-flow/app.js @@ -4,7 +4,9 @@ var { Route, RouteHandler, Link } = Router; var App = React.createClass({ - mixins: [ Router.Navigation ], + contextTypes: { + router: React.PropTypes.func.isRequired + }, getInitialState: function () { return { @@ -28,7 +30,7 @@ var App = React.createClass({ return taco.name != removedTaco; }); this.setState({tacos: tacos}); - this.transitionTo('/'); + this.context.router.transitionTo('/'); }, render: function () { @@ -54,16 +56,19 @@ var App = React.createClass({ }); var Taco = React.createClass({ - mixins: [ Router.State ], + + contextTypes: { + router: React.PropTypes.func.isRequired + }, remove: function () { - this.props.onRemoveTaco(this.getParams().name); + this.props.onRemoveTaco(this.context.router.getCurrentParams().name); }, render: function () { return (
-

{this.getParams().name}

+

{this.context.router.getCurrentParams().name}

); diff --git a/examples/dynamic-segments/app.js b/examples/dynamic-segments/app.js index 44022f9f..1ae0453f 100644 --- a/examples/dynamic-segments/app.js +++ b/examples/dynamic-segments/app.js @@ -17,10 +17,13 @@ var App = React.createClass({ }); var User = React.createClass({ - mixins: [ Router.State ], + + contextTypes: { + router: React.PropTypes.func.isRequired + }, render () { - var { userId } = this.getParams(); + var { userId } = this.context.router.getCurrentParams(); return (

User id: {userId}

@@ -36,10 +39,13 @@ var User = React.createClass({ var Task = React.createClass({ - mixins: [ Router.State ], + + contextTypes: { + router: React.PropTypes.func.isRequired + }, render () { - var { userId, taskId } = this.getParams(); + var { userId, taskId } = this.context.router.getCurrentParams(); return (

User id: {userId}

diff --git a/examples/master-detail/app.js b/examples/master-detail/app.js index 1846ae46..1b84b8fe 100644 --- a/examples/master-detail/app.js +++ b/examples/master-detail/app.js @@ -68,10 +68,12 @@ var Index = React.createClass({ var Contact = React.createClass({ - mixins: [ Router.Navigation, Router.State ], + contextTypes: { + router: React.PropTypes.func.isRequired + }, getStateFromStore: function () { - var id = this.getParams().id; + var id = this.context.router.getCurrentParams().id; return { contact: ContactStore.getContact(id) }; @@ -101,9 +103,10 @@ var Contact = React.createClass({ }, destroy: function () { - var id = this.getParams().id; + var { router } = this.context; + var id = router.getCurrentParams().id; ContactStore.removeContact(id); - this.transitionTo('/'); + router.transitionTo('/'); }, render: function () { @@ -122,7 +125,9 @@ var Contact = React.createClass({ var NewContact = React.createClass({ - mixins: [ Router.Navigation ], + contextTypes: { + router: React.PropTypes.func.isRequired + }, createContact: function (event) { event.preventDefault(); @@ -130,7 +135,7 @@ var NewContact = React.createClass({ first: this.refs.first.getDOMNode().value, last: this.refs.last.getDOMNode().value }, function (contact) { - this.transitionTo('contact', { id: contact.id }); + this.context.router.transitionTo('contact', { id: contact.id }); }.bind(this)); }, diff --git a/examples/query-params/app.js b/examples/query-params/app.js index 4667ddd4..8a14d042 100644 --- a/examples/query-params/app.js +++ b/examples/query-params/app.js @@ -18,11 +18,15 @@ var App = React.createClass({ }); var User = React.createClass({ - mixins: [ Router.State ], + + contextTypes: { + router: React.PropTypes.func.isRequired + }, render: function () { - var age = this.getQuery().showAge ? '33' : ''; - var userID = this.getParams().userID; + var { router } = this.context; + var age = router.getCurrentQuery().showAge ? '33' : ''; + var userID = router.getCurrentParams().userID; return (

User id: {userID}

diff --git a/examples/rx/app.js b/examples/rx/app.js index 1fcd158c..18456966 100644 --- a/examples/rx/app.js +++ b/examples/rx/app.js @@ -18,10 +18,13 @@ var App = React.createClass({ }); var User = React.createClass({ - mixins: [ Router.State ], + + contextTypes: { + router: React.PropTypes.func.isRequired + }, render () { - var { userId } = this.getParams(); + var { userId } = this.context.router.getCurrentParams(); return (

User id: {userId}

diff --git a/examples/sidebar/app.js b/examples/sidebar/app.js index 7d6baedc..ea42bff4 100644 --- a/examples/sidebar/app.js +++ b/examples/sidebar/app.js @@ -73,10 +73,13 @@ var Sidebar = React.createClass({ }); var App = React.createClass({ - mixins: [ Router.State ], + + contextTypes: { + router: React.PropTypes.func.isRequired + }, render: function () { - var activeCategory = this.getParams().category; + var activeCategory = this.context.router.getCurrentParams().category; return (
@@ -89,10 +92,13 @@ var App = React.createClass({ }); var Item = React.createClass({ - mixins: [ Router.State ], + + contextTypes: { + router: React.PropTypes.func.isRequired + }, render: function () { - var params = this.getParams(); + var params = this.context.router.getCurrentParams(); var category = data.lookupCategory(params.category); var item = data.lookupItem(params.category, params.name); return ( diff --git a/examples/simple-master-detail/app.js b/examples/simple-master-detail/app.js index 5b4f4b13..d9d0dc61 100644 --- a/examples/simple-master-detail/app.js +++ b/examples/simple-master-detail/app.js @@ -38,14 +38,17 @@ var Index = React.createClass({ }); var State = React.createClass({ - mixins: [ Router.State ], + + contextTypes: { + router: React.PropTypes.func.isRequired + }, imageUrl: function (name) { return "http://www.50states.com/maps/" + underscore(name) + ".gif"; }, render: function () { - var unitedState = findState(this.getParams().abbr); + var unitedState = findState(this.context.router.getCurrentParams().abbr); return (

{unitedState.name}

diff --git a/examples/transitions/app.js b/examples/transitions/app.js index b1f42fe0..67550d8c 100644 --- a/examples/transitions/app.js +++ b/examples/transitions/app.js @@ -30,7 +30,9 @@ var Dashboard = React.createClass({ var Form = React.createClass({ - mixins: [ Router.Navigation ], + contextTypes: { + router: React.PropTypes.func.isRequired + }, statics: { willTransitionFrom: function (transition, element) { @@ -45,7 +47,7 @@ var Form = React.createClass({ handleSubmit: function (event) { event.preventDefault(); this.refs.userInput.getDOMNode().value = ''; - this.transitionTo('/'); + this.context.router.transitionTo('/'); }, render: function () { diff --git a/examples/webpack.config.js b/examples/webpack.config.js index 044b3cd4..b59a3740 100644 --- a/examples/webpack.config.js +++ b/examples/webpack.config.js @@ -28,7 +28,7 @@ module.exports = { module: { loaders: [ - { test: /\.js$/, loader: 'babel-loader' } + { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader' } ] },