Skip to content

Commit

Permalink
Remove defaultHandler and defaultHandlerProps
Browse files Browse the repository at this point in the history
- using `path="/.*"` as the last `Switch` does the same thing
  • Loading branch information
jdlehman committed Oct 20, 2015
1 parent 45cb2eb commit 38e843e
Show file tree
Hide file tree
Showing 4 changed files with 11 additions and 37 deletions.
9 changes: 1 addition & 8 deletions docs/components/Switcher.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ The `Switcher` is a container component that holds a list of React components. I
<div path="/">Hello World</div>
<AboutComponent path="/about" />
<AnotherComponent path="/another" anotherProp={myProp} />
<DefaultComponent path="/.*" />
</Switcher>
```

Expand Down Expand Up @@ -38,14 +39,6 @@ When true, `Switcher` listens to the `load` event and looks for path changes on

By default `window.location.hash` is used to match paths. If `location` is set to 'pathname', then `window.location.pathname` is used instead. Under the hood, it is using `window.location[this.props.location]`, so you can use `search` or any other valid property on `window.location`.

### defaultHandler

The `defaultHandler` is the handler that is used when there are no child elements with matching paths. If a default handler is not provided by the user, the component will render nothing when there isn't a match.

### defaultHandlerProps

`defaultHandlerProps` is passed directly as props to the `defaultHandler`.

### onChange

`onChange` enables a hook to call the provided function whenever the path changes. The function is provided 2 arguments, the first being a boolean of whether the path had a match, and the second being the path as a string.
Expand Down
7 changes: 2 additions & 5 deletions examples/basic/components/LeftContent.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,6 @@ import React, {Component} from 'react';
import {Switcher} from 'switcheroo';
import Panel from './Panel';

function defaultView() {
return <div>Default Content: No matching route</div>;
}

export default class LeftContent extends Component {
render() {
var panelItems = [
Expand All @@ -17,13 +13,14 @@ export default class LeftContent extends Component {
return (
<div className="content-left">
<h2>Left Content</h2>
<Switcher defaultHandler={defaultView}>
<Switcher>
<div path="/route1">Route 1 rules!</div>
<div path="/route2">Route 2 for life</div>
<Panel
path="/route3"
name="Stuff"
items={panelItems} />
<div path="/.*">Default content: No matching route</div>
</Switcher>
</div>
);
Expand Down
7 changes: 2 additions & 5 deletions src/components/Switcher.js
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,6 @@ export default class Switcher extends Component {
pushState: React.PropTypes.bool,
hashChange: React.PropTypes.bool,
load: React.PropTypes.bool,
defaultHandler: React.PropTypes.func,
defaultHandlerProps: React.PropTypes.object,
onChange: React.PropTypes.func,
wrapper: React.PropTypes.any,
location: React.PropTypes.string,
Expand All @@ -30,7 +28,6 @@ export default class Switcher extends Component {

constructor(props) {
super(props);
this.defaultSwitch = props.defaultHandler ? React.createElement(props.defaultHandler, props.defaultHandlerProps) : null;

var currentPath = this.getLocation();
var switchElement = this.getSwitch(currentPath);
Expand Down Expand Up @@ -111,10 +108,10 @@ export default class Switcher extends Component {
return React.createElement(
this.props.wrapper,
this.props,
this.state.visibleSwitch || this.defaultSwitch
this.state.visibleSwitch
);
} else {
return this.state.visibleSwitch || this.defaultSwitch;
return this.state.visibleSwitch;
}
}
}
25 changes: 6 additions & 19 deletions test/components/Switcher_test.js
Original file line number Diff line number Diff line change
@@ -1,21 +1,10 @@
import React, {Component, PropTypes} from 'react';
import React from 'react';
import ReactDOM from 'react-dom';
import {assert} from 'chai';
import sinon from 'sinon';
import window from 'window';
import Switcher from 'components/Switcher';

class Handler extends Component {
static displayName = 'Handler';
static propTypes = {
text: PropTypes.string
};

render() {
return <div>{this.props.text}</div>;
}
}

describe('Switcher', function() {
describe('#getLocation', function() {
describe('using location.hash', function() {
Expand Down Expand Up @@ -252,12 +241,10 @@ describe('Switcher', function() {

describe('with default handler', function() {
beforeEach(function() {
var props = {text: 'Hello'};
this.switcher = ReactDOM.render(
<Switcher
defaultHandler={Handler}
defaultHandlerProps={props}>
<div path="/">Home</div>
<Switcher>
<div path="/home">Home</div>
<div path="/.*">Default Handler</div>
</Switcher>,
document.body
);
Expand All @@ -271,11 +258,11 @@ describe('Switcher', function() {
window.location.hash = '/nomatch';
this.switcher.handleRouteChange();
var node = ReactDOM.findDOMNode(this.switcher);
assert.equal(node.innerHTML, 'Hello');
assert.equal(node.innerHTML, 'Default Handler');
});

it('renders matching component', function() {
window.location.hash = '/';
window.location.hash = '/home';
this.switcher.handleRouteChange();
var node = ReactDOM.findDOMNode(this.switcher);
assert.equal(node.innerHTML, 'Home');
Expand Down

0 comments on commit 38e843e

Please sign in to comment.