[changed] Removed histories/added history dep

Also, fixed path matching.

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;