Skip to content

Commit

Permalink
[added] <Routes fixedPath>
Browse files Browse the repository at this point in the history
  • Loading branch information
mjackson committed Oct 3, 2014
1 parent f0d599a commit 637c0ac
Show file tree
Hide file tree
Showing 14 changed files with 125 additions and 169 deletions.
5 changes: 4 additions & 1 deletion examples/data-flow/app.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,9 @@ var Routes = Router.Routes;
var Link = Router.Link;

var App = React.createClass({

mixins: [ Router.Transitions ],

getInitialState: function() {
return {
tacos: [
Expand All @@ -28,7 +31,7 @@ var App = React.createClass({
return taco.name != removedTaco;
});
this.setState({tacos: tacos});
Router.transitionTo('/');
this.transitionTo('/');
},

render: function() {
Expand Down
12 changes: 9 additions & 3 deletions examples/master-detail/app.js
Original file line number Diff line number Diff line change
Expand Up @@ -132,6 +132,9 @@ var Index = React.createClass({
});

var Contact = React.createClass({

mixins: [ Router.Transitions ],

getStateFromStore: function(props) {
props = props || this.props;
return {
Expand Down Expand Up @@ -164,7 +167,7 @@ var Contact = React.createClass({

destroy: function() {
ContactStore.removeContact(this.props.params.id);
Router.transitionTo('/');
this.transitionTo('/');
},

render: function() {
Expand All @@ -182,14 +185,17 @@ var Contact = React.createClass({
});

var NewContact = React.createClass({

mixins: [ Router.Transitions ],

createContact: function(event) {
event.preventDefault();
ContactStore.addContact({
first: this.refs.first.getDOMNode().value,
last: this.refs.last.getDOMNode().value
}, function(contact) {
Router.transitionTo('contact', { id: contact.id });
});
this.transitionTo('contact', { id: contact.id });
}.bind(this));
},

render: function() {
Expand Down
5 changes: 4 additions & 1 deletion examples/transitions/app.js
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,9 @@ var Dashboard = React.createClass({
});

var Form = React.createClass({

mixins: [ Router.Transitions ],

statics: {
willTransitionFrom: function(transition, component) {
if (component.refs.userInput.getDOMNode().value !== '') {
Expand All @@ -39,7 +42,7 @@ var Form = React.createClass({
handleSubmit: function(event) {
event.preventDefault();
this.refs.userInput.getDOMNode().value = '';
Router.transitionTo('/');
this.transitionTo('/');
},

render: function() {
Expand Down
42 changes: 22 additions & 20 deletions modules/locations/HashLocation.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,31 +5,35 @@ var LocationDispatcher = require('../dispatchers/LocationDispatcher');
var getWindowPath = require('../utils/getWindowPath');

function getHashPath() {
return window.location.hash.substr(1) || '/';
return window.location.hash.substr(1);
}

var _actionType;

function ensureSlash() {
var path = getHashPath();

if (path.charAt(0) === '/')
return true;

HashLocation.replace('/' + path, _actionSender);
HashLocation.replace('/' + path);

return false;
}

var _actionType, _actionSender;

function onHashChange() {
if (ensureSlash()) {
var path = getHashPath();

LocationDispatcher.handleViewAction({
type: _actionType,
path: getHashPath(),
sender: _actionSender || window
// If we don't have an _actionType then all we know is the hash
// changed. It was probably caused by the user clicking the Back
// button, but may have also been the Forward button.
type: _actionType || LocationActions.POP,
path: getHashPath()
});

_actionSender = null;
_actionType = null;
}
}

Expand All @@ -49,18 +53,19 @@ var HashLocation = {
'You cannot use HashLocation in an environment with no DOM'
);

ensureSlash();

LocationDispatcher.handleViewAction({
type: LocationActions.SETUP,
path: getHashPath()
});

if (window.addEventListener) {
window.addEventListener('hashchange', onHashChange, false);
} else {
window.attachEvent('onhashchange', onHashChange);
}

LocationDispatcher.handleViewAction({
type: LocationActions.SETUP,
path: getHashPath(),
sender: window
});

_isSetup = true;
},

Expand All @@ -74,21 +79,18 @@ var HashLocation = {
_isSetup = false;
},

push: function (path, sender) {
push: function (path) {
_actionType = LocationActions.PUSH;
_actionSender = sender;
window.location.hash = path;
},

replace: function (path, sender) {
replace: function (path) {
_actionType = LocationActions.REPLACE;
_actionSender = sender;
window.location.replace(getWindowPath() + '#' + path);
},

pop: function (sender) {
pop: function () {
_actionType = LocationActions.POP;
_actionSender = sender;
window.history.back();
},

Expand Down
31 changes: 11 additions & 20 deletions modules/locations/HistoryLocation.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,16 +4,11 @@ var LocationActions = require('../actions/LocationActions');
var LocationDispatcher = require('../dispatchers/LocationDispatcher');
var getWindowPath = require('../utils/getWindowPath');

var _actionSender;

function onPopState() {
LocationDispatcher.handleViewAction({
type: LocationActions.POP,
path: getWindowPath(),
sender: _actionSender || window
path: getWindowPath()
});

_actionSender = null;
}

var _isSetup = false;
Expand All @@ -32,18 +27,17 @@ var HistoryLocation = {
'You cannot use HistoryLocation in an environment with no DOM'
);

LocationDispatcher.handleViewAction({
type: LocationActions.SETUP,
path: getWindowPath()
});

if (window.addEventListener) {
window.addEventListener('popstate', onPopState, false);
} else {
window.attachEvent('popstate', onPopState);
}

LocationDispatcher.handleViewAction({
type: LocationActions.SETUP,
path: getWindowPath(),
sender: window
});

_isSetup = true;
},

Expand All @@ -57,28 +51,25 @@ var HistoryLocation = {
_isSetup = false;
},

push: function (path, sender) {
push: function (path) {
window.history.pushState({ path: path }, '', path);

LocationDispatcher.handleViewAction({
type: LocationActions.PUSH,
path: getWindowPath(),
sender: sender
path: getWindowPath()
});
},

replace: function (path, sender) {
replace: function (path) {
window.history.replaceState({ path: path }, '', path);

LocationDispatcher.handleViewAction({
type: LocationActions.REPLACE,
path: getWindowPath(),
sender: sender
path: getWindowPath()
});
},

pop: function (sender) {
_actionSender = sender;
pop: function () {
window.history.back();
},

Expand Down
67 changes: 0 additions & 67 deletions modules/locations/MemoryLocation.js

This file was deleted.

3 changes: 1 addition & 2 deletions modules/locations/RefreshLocation.js
Original file line number Diff line number Diff line change
Expand Up @@ -19,8 +19,7 @@ var RefreshLocation = {

LocationDispatcher.handleViewAction({
type: LocationActions.SETUP,
path: getWindowPath(),
sender: window
path: getWindowPath()
});
},

Expand Down
29 changes: 13 additions & 16 deletions modules/mixins/PathDelegate.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ var React = require('react');
var invariant = require('react/lib/invariant');
var PathState = require('./PathState');
var RouteContainer = require('./RouteContainer');
var LocationActions = require('../actions/LocationActions');
var HashLocation = require('../locations/HashLocation');
var Path = require('../utils/Path');

Expand Down Expand Up @@ -62,52 +63,48 @@ var PathDelegate = {
* Transitions to the URL specified in the arguments by pushing
* a new URL onto the history stack.
*/
transitionTo: function (to, params, query, sender) {
sender = sender || this;

transitionTo: function (to, params, query) {
var path = this.makePath(to, params, query);
var location = this.getLocation();

// If we have a location, route the transition through it.
// If we have a location, route the transition
// through it so the URL is updated as well.
if (location) {
location.push(path, this);
location.push(path);
} else if (this.updatePath) {
this.updatePath(path, this);
this.updatePath(path, LocationActions.PUSH);
}
},

/**
* Transitions to the URL specified in the arguments by replacing
* the current URL in the history stack.
*/
replaceWith: function (to, params, query, sender) {
sender = sender || this;

replaceWith: function (to, params, query) {
var path = this.makePath(to, params, query);
var location = this.getLocation();

// If we have a location, route the transition through it.
// If we have a location, route the transition
// through it so the URL is updated as well.
if (location) {
location.replace(path, sender);
location.replace(path);
} else if (this.updatePath) {
this.updatePath(path, sender);
this.updatePath(path, LocationActions.REPLACE);
}
},

/**
* Transitions to the previous URL.
*/
goBack: function (sender) {
sender = sender || this;

goBack: function () {
var location = this.getLocation();

invariant(
location,
'You cannot goBack without a location'
);

location.pop(sender);
location.pop();
}

};
Expand Down
Loading

0 comments on commit 637c0ac

Please sign in to comment.