[changed] Removed histories/added history dep

Also, fixed path matching.

Author: mjackson

examples/animations/app.js

@@ -1,9 +1,11 @@
-import React, { cloneElement } from 'react/addons';
-import { history } from 'react-router/lib/HashHistory';
+import React from 'react/addons';
+import createHistory from 'history/lib/createHashHistory';
 import { Router, Route, Link } from 'react-router';
 
 var { CSSTransitionGroup } = React.addons;
 
+var history = createHistory();
+
 var App = React.createClass({
   render() {
     var key = this.props.location.pathname;
@@ -15,7 +17,7 @@ var App = React.createClass({
           <li><Link to="/page2">Page 2</Link></li>
         </ul>
         <CSSTransitionGroup component="div" transitionName="example">
-          {cloneElement(this.props.children || <div/>, { key: key })}
+          {React.cloneElement(this.props.children || <div/>, { key: key })}
         </CSSTransitionGroup>
       </div>
     );
@@ -44,7 +46,6 @@ var Page2 = React.createClass({
   }
 });
 
-
 React.render((
   <Router history={history}>
     <Route path="/" component={App}>

examples/auth-flow/app.js

@@ -1,8 +1,9 @@
 import React, { findDOMNode } from 'react';
+import createHistory from 'history/lib/createHashHistory';
 import { Router, Route, Link, Navigation } from 'react-router';
-import HashHistory from 'react-router/lib/HashHistory';
 import auth from './auth';
-var history = new HashHistory({ queryKey: true });
+
+var history = createHistory();
 
 var App = React.createClass({
   getInitialState() {
@@ -11,14 +12,14 @@ var App = React.createClass({
     };
   },
 
-  setStateOnAuth(loggedIn) {
+  updateAuth(loggedIn) {
     this.setState({
-      loggedIn: loggedIn
+      loggedIn: !!loggedIn
     });
   },
 
   componentWillMount() {
-    auth.onChange = this.setStateOnAuth;
+    auth.onChange = this.updateAuth;
     auth.login();
   },
 
@@ -45,6 +46,7 @@ var App = React.createClass({
 var Dashboard = React.createClass({
   render() {
     var token = auth.getToken();
+
     return (
       <div>
         <h1>Dashboard</h1>
@@ -56,7 +58,6 @@ var Dashboard = React.createClass({
 });
 
 var Login = React.createClass({
-
   mixins: [ Navigation ],
 
   getInitialState() {
@@ -115,9 +116,9 @@ var Logout = React.createClass({
   }
 });
 
-function requireAuth(nextState, transition) {
+function requireAuth(nextState, redirectTo) {
   if (!auth.loggedIn())
-    transition.to('/login', null, { nextPathname: nextState.location.pathname });
+    redirectTo('/login', null, { nextPathname: nextState.location.pathname });
 }
 
 React.render((

examples/dynamic-segments/app.js

@@ -1,7 +1,9 @@
 import React from 'react';
-import { history } from 'react-router/lib/HashHistory';
+import createHistory from 'history/lib/createHashHistory';
 import { Router, Route, Link, Redirect } from 'react-router';
 
+var history = createHistory();
+
 var App = React.createClass({
   render() {
     return (
@@ -50,8 +52,8 @@ React.render((
   <Router history={history}>
     <Route path="/" component={App}>
       <Route path="user/:userID" component={User}>
-        <Route path="tasks/:taskID" component={Task}/>
-        <Redirect from="todos/:taskID" to="task"/>
+        <Route path="tasks/:taskID" component={Task} />
+        <Redirect from="todos/:taskID" to="/user/:userID/tasks/:taskID" />
       </Route>
     </Route>
   </Router>

examples/transitions/app.js

@@ -1,6 +1,8 @@
-import React, { findDOMNode } from 'react';
-import { Router, Route, Link, Navigation, TransitionHook } from 'react-router';
-import { history } from 'react-router/lib/HashHistory';
+import React from 'react';
+import createHistory from 'history/lib/createHashHistory';
+import { Router, Route, Link, Navigation } from 'react-router';
+
+var history = createHistory();
 
 var App = React.createClass({
   render() {
@@ -29,26 +31,51 @@ var Dashboard = React.createClass({
 });
 
 var Form = React.createClass({
-  mixins: [ Navigation, TransitionHook ],
+  mixins: [ Navigation ],
+
+  getInitialState() {
+    return {
+      textValue: 'ohai'
+    };
+  },
 
-  routerWillLeave(nextState, transition) {
-    if (findDOMNode(this.refs.userInput).value !== '')
-      if (!confirm('You have unsaved information, are you sure you want to leave this page?'))
-        transition.abort();
+  transitionHook() {
+    if (this.state.textValue)
+      return 'You have unsaved information, are you sure you want to leave this page?';
+  },
+
+  componentDidMount() {
+    history.registerTransitionHook(this.transitionHook);
+  },
+
+  componentWillUnmount() {
+    history.unregisterTransitionHook(this.transitionHook);
+  },
+
+  handleChange(event) {
+    var { value } = event.target;
+
+    this.setState({
+      textValue: value
+    });
   },
 
   handleSubmit(event) {
     event.preventDefault();
-    findDOMNode(this.refs.userInput).value = '';
-    this.transitionTo('/');
+
+    this.setState({
+      textValue: ''
+    }, () => {
+      this.transitionTo('/');
+    });
   },
 
   render() {
     return (
       <div>
         <form onSubmit={this.handleSubmit}>
           <p>Click the dashboard link with text in the input.</p>
-          <input type="text" ref="userInput" defaultValue="ohai" />
+          <input type="text" ref="userInput" value={this.state.textValue} onChange={this.handleChange} />
           <button type="submit">Go</button>
         </form>
       </div>

modules/ActiveMixin.js

@@ -0,0 +1,69 @@
+import { matchPattern } from './PatternUtils';
+
+/**
+ * Returns true if a route and params that match the given
+ * pathname are currently active.
+ */
+function pathnameIsActive(pathname, activePathname, activeRoutes, activeParams) {
+  if (pathname === activePathname || activePathname.indexOf(pathname + '/') === 0)
+    return true;
+
+  var route, pattern, basename;
+  for (var i = 0, len = activeRoutes.length; i < len; ++i) {
+    route = activeRoutes[i];
+    pattern = route.path || '';
+
+    if (pattern.indexOf('/') !== 0)
+      pattern = basename.replace(/\/*$/, '/') + pattern; // Relative paths build on the parent's path.
+
+    var { remainingPathname, paramNames, paramValues } = matchPattern(pattern, pathname);
+
+    if (remainingPathname === '') {
+      return paramNames.every(function (paramName, index) {
+        return String(paramValues[index]) === String(activeParams[paramName]);
+      });
+    }
+
+    basename = pattern;
+  }
+
+  return false;
+}
+
+/**
+ * Returns true if all key/value pairs in the given query are
+ * currently active.
+ */
+function queryIsActive(query, activeQuery) {
+  if (activeQuery == null)
+    return query == null;
+
+  if (query == null)
+    return true;
+
+  for (var p in query)
+    if (query.hasOwnProperty(p) && String(query[p]) !== String(activeQuery[p]))
+      return false;
+
+  return true;
+}
+
+var ActiveMixin = {
+
+  /**
+   * Returns true if a <Link> to the given pathname/query combination is
+   * currently active.
+   */
+  isActive(pathname, query) {
+    var { location, routes, params } = this.state;
+
+    if (location == null)
+      return false;
+
+    return pathnameIsActive(pathname, location.pathname, routes, params) &&
+      queryIsActive(query, location.query);
+  }
+
+};
+
+export default ActiveMixin;