Skip to content

Commit 2aaa657

Browse files
jdlehmanjdlehman
committedMar 18, 2016
Pass dynamic segment data in as props to the component
1 parent 95be79d commit 2aaa657

File tree

5 files changed

+158
-17
lines changed

5 files changed

+158
-17
lines changed
 

‎dist/switcheroo.min.js

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/Switcher.md

+5-1
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,10 @@ If the `wrapper` prop is defined, the rendered child component will be wrapped i
5555

5656
`basePath` is prepended to all path properties in the components inside `Switcher`. If `basePath` is set to `/base/path` then a component with path, `/home` will match the path `/base/path/home`. The base path may also have [dynamic segments](./dynamic_segments.md). If `basePath` is set to `/base/:id/`, `/home` will match something like `/base/someIdCouldBeAnything/home`.
5757

58-
### preventUpdate (default: a function returning false)
58+
### preventUpdate (default: () => false)
5959

6060
`preventUpdate` is an optional function. When `preventUpdate` returns true, subsequent renders will not occur despite props changing or route changes. This can be useful when animating or doing something in which the presentation of the component is desired to remain static.
61+
62+
### mapDynamicSegments (default: data => data)
63+
64+
`mapDynamicSegments` is an optional function property. When there are [dynamic segments](./dynamic_segments.md) in a path, it passes an object with these values (where the key names are the segment names) to `mapDynamicSegments` and merges the object returned by `mapDynamicSegments` with the props. `mapDynamicSegments` can be used to transform the dynamic segment data before it is merged with props. By default the dynamic segment data object is passed through.

‎docs/dynamic_segments.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# Dynamic Segments
22

3-
Like many routing solutions, Rails, express, etc. `switcheroo` supports paths with dynamic segments. These are essentially dynamic parts of the route that will match anything. While the `path` property on a `"Switch"`(./Switch.md) takes a regular expression string, it is beneficial to use dynamic segments because it provides `switcheroo` with named data that can be used elsewhere like in the [`onChange`](./Switcher.md#onchange) callback.
3+
Like many routing solutions, Rails, express, etc. `switcheroo` supports paths with dynamic segments. These are essentially dynamic parts of the route that will match anything. While the `path` property on a `"Switch"`(./Switch.md) takes a regular expression string, it is beneficial to use dynamic segments because it provides `switcheroo` with named data that can be used elsewhere like in the [`onChange`](./Switcher.md#onchange) callback. These dynamic segments also get passed into the component as props. The data can be transformed by [`mapDynamicSegments`](./Switcher.md#mapdynamicsegments) function property being set as props.
44

55
## Examples
66

‎src/index.js

+12-4
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,8 @@ export default class Switcher extends Component {
2020
wrapper: PropTypes.any,
2121
location: PropTypes.string,
2222
basePath: PropTypes.string,
23-
preventUpdate: PropTypes.func
23+
preventUpdate: PropTypes.func,
24+
mapDynamicSegments: PropTypes.func
2425
};
2526

2627
static defaultProps = {
@@ -29,7 +30,8 @@ export default class Switcher extends Component {
2930
load: true,
3031
location: 'hash',
3132
basePath: '',
32-
preventUpdate: () => false
33+
preventUpdate: () => false,
34+
mapDynamicSegments: values => values
3335
};
3436

3537
constructor(props) {
@@ -92,14 +94,20 @@ export default class Switcher extends Component {
9294
};
9395

9496
render() {
97+
const {props} = this.state.visibleSwitch || {};
98+
const visibleSwitch = this.state.visibleSwitch && React.cloneElement(
99+
this.state.visibleSwitch,
100+
{...props, ...this.props.mapDynamicSegments(this.state.dynamicValues)}
101+
);
102+
95103
if (this.props.wrapper) {
96104
return React.createElement(
97105
this.props.wrapper,
98106
this.props,
99-
this.state.visibleSwitch
107+
visibleSwitch
100108
);
101109
} else {
102-
return this.state.visibleSwitch;
110+
return visibleSwitch;
103111
}
104112
}
105113
}

‎test/Switcher_test.js

+139-10
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
1-
import React from 'react';
1+
import React, {PropTypes} from 'react';
22
import ReactDOM from 'react-dom';
33
import {assert} from 'chai';
44
import sinon from 'sinon';
55
import Switcher from 'index';
6+
import * as helpers from 'helpers';
67

78
describe('Switcher', function() {
89
describe('#handleRouteChange', function() {
@@ -18,10 +19,11 @@ describe('Switcher', function() {
1819

1920
afterEach(function() {
2021
ReactDOM.unmountComponentAtNode(document.getElementById('app'));
22+
helpers.currentPath.restore();
2123
});
2224

2325
it('sets visibleSwitch state', function() {
24-
window.location.hash = '/';
26+
sinon.stub(helpers, 'currentPath').returns('/');
2527
this.switcher.handleRouteChange();
2628
var visibleSwitch = this.switcher.state.visibleSwitch;
2729
assert.equal(visibleSwitch.props.children, 'Home');
@@ -51,8 +53,9 @@ describe('Switcher', function() {
5153
});
5254

5355
it('onChange handles paths with dynamic segments', function() {
54-
window.location.hash = '/hello/more/123a-b';
56+
sinon.stub(helpers, 'currentPath').returns('/hello/more/123a-b');
5557
this.switcher.handleRouteChange();
58+
helpers.currentPath.restore();
5659
sinon.assert.calledWith(this.handleChange,
5760
true,
5861
'/hello/more/123a-b',
@@ -78,17 +81,18 @@ describe('Switcher', function() {
7881

7982
afterEach(function() {
8083
ReactDOM.unmountComponentAtNode(document.getElementById('app'));
84+
helpers.currentPath.restore();
8185
});
8286

8387
it('renders nothing if no match', function() {
84-
window.location.hash = '/nomatch';
88+
sinon.stub(helpers, 'currentPath').returns('/nomatch');
8589
this.switcher.handleRouteChange();
8690
var node = ReactDOM.findDOMNode(this.switcher);
8791
assert.isNull(node);
8892
});
8993

9094
it('renders matching component', function() {
91-
window.location.hash = '/';
95+
sinon.stub(helpers, 'currentPath').returns('/');
9296
this.switcher.handleRouteChange();
9397
var node = ReactDOM.findDOMNode(this.switcher);
9498
assert.equal(node.innerHTML, 'Home');
@@ -108,24 +112,25 @@ describe('Switcher', function() {
108112

109113
afterEach(function() {
110114
ReactDOM.unmountComponentAtNode(document.getElementById('app'));
115+
helpers.currentPath.restore();
111116
});
112117

113118
it('renders default handler when no match', function() {
114-
window.location.hash = '/nomatch';
119+
sinon.stub(helpers, 'currentPath').returns('/nomatch');
115120
this.switcher.handleRouteChange();
116121
var node = ReactDOM.findDOMNode(this.switcher);
117122
assert.equal(node.innerHTML, 'Default Handler');
118123
});
119124

120125
it('default handle can match /', function() {
121-
window.location.hash = '/';
126+
sinon.stub(helpers, 'currentPath').returns('/');
122127
this.switcher.handleRouteChange();
123128
var node = ReactDOM.findDOMNode(this.switcher);
124129
assert.equal(node.innerHTML, 'Default Handler');
125130
});
126131

127132
it('renders matching component', function() {
128-
window.location.hash = '/home';
133+
sinon.stub(helpers, 'currentPath').returns('/home');
129134
this.switcher.handleRouteChange();
130135
var node = ReactDOM.findDOMNode(this.switcher);
131136
assert.equal(node.innerHTML, 'Home');
@@ -144,24 +149,148 @@ describe('Switcher', function() {
144149

145150
afterEach(function() {
146151
ReactDOM.unmountComponentAtNode(document.getElementById('app'));
152+
helpers.currentPath.restore();
147153
});
148154

149155
it('renders just wrapper when no match', function() {
150-
window.location.hash = '/nomatch';
156+
sinon.stub(helpers, 'currentPath').returns('/nomatch');
151157
this.switcher.handleRouteChange();
152158
var wrapper = ReactDOM.findDOMNode(this.switcher);
153159
assert.equal(wrapper.innerHTML, '');
154160
assert.equal(wrapper.tagName, 'SPAN');
155161
});
156162

157163
it('renders matched component in wrapper', function() {
158-
window.location.hash = '/';
164+
sinon.stub(helpers, 'currentPath').returns('/');
159165
this.switcher.handleRouteChange();
160166
var wrapper = ReactDOM.findDOMNode(this.switcher);
161167
var component = wrapper.children[0];
162168
assert.equal(wrapper.tagName, 'SPAN');
163169
assert.equal(component.innerHTML, 'Home');
164170
});
165171
});
172+
173+
describe('with routes with dynamic segments', function() {
174+
beforeEach(function() {
175+
function MyComp(props) {
176+
return (
177+
<span>{props.id + props.page}</span>
178+
);
179+
}
180+
MyComp.displayName = 'MyComp';
181+
MyComp.propTypes = {
182+
id: PropTypes.string,
183+
page: PropTypes.string
184+
};
185+
this.switcher = ReactDOM.render(
186+
<Switcher>
187+
<MyComp path="/user/:id/information/:page" />
188+
<span path="/user/id/information/page">Static Content</span>
189+
</Switcher>,
190+
document.getElementById('app')
191+
);
192+
});
193+
194+
afterEach(function() {
195+
ReactDOM.unmountComponentAtNode(document.getElementById('app'));
196+
helpers.currentPath.restore();
197+
});
198+
199+
it('renders matched component and sets dynamic segments as props', function() {
200+
sinon.stub(helpers, 'currentPath').returns('/user/123-abc/information/21');
201+
this.switcher.handleRouteChange();
202+
var component = ReactDOM.findDOMNode(this.switcher);
203+
assert.equal(component.innerHTML, '123-abc21');
204+
});
205+
});
206+
});
207+
208+
describe('mapDynamicSegments', function() {
209+
describe('without a wrapper', function() {
210+
beforeEach(function() {
211+
function mapper({id, page}) {
212+
var matches = id.match(/(.+)-(.+)/);
213+
return {
214+
userNum: matches[1],
215+
userLetters: matches[2],
216+
page: parseInt(page, 10) * 2
217+
};
218+
}
219+
function MyComp(props) {
220+
return (
221+
<span>{props.userNum + props.userLetters + props.page}</span>
222+
);
223+
}
224+
MyComp.displayName = 'MyComp';
225+
MyComp.propTypes = {
226+
userNum: PropTypes.string,
227+
userLetters: PropTypes.string,
228+
page: PropTypes.number
229+
};
230+
this.switcher = ReactDOM.render(
231+
<Switcher mapDynamicSegments={mapper}>
232+
<MyComp path="/user/:id/information/:page" />
233+
<div path="/user/id/information/page">Static Path</div>
234+
</Switcher>,
235+
document.getElementById('app')
236+
);
237+
});
238+
239+
afterEach(function() {
240+
ReactDOM.unmountComponentAtNode(document.getElementById('app'));
241+
helpers.currentPath.restore();
242+
});
243+
244+
it('renders matched component and sets dynamic segments as props', function() {
245+
sinon.stub(helpers, 'currentPath').returns('/user/234-cde/information/421');
246+
this.switcher.handleRouteChange();
247+
var component = ReactDOM.findDOMNode(this.switcher);
248+
assert.equal(component.innerHTML, '234cde842');
249+
});
250+
});
251+
252+
describe('with a wrapper', function() {
253+
beforeEach(function() {
254+
function mapper({id, page}) {
255+
var matches = id.match(/(.+)-(.+)/);
256+
return {
257+
userNum: matches[1],
258+
userLetters: matches[2],
259+
page: parseInt(page, 10) * 2
260+
};
261+
}
262+
function MyComp(props) {
263+
return (
264+
<span>{props.userNum + props.userLetters + props.page}</span>
265+
);
266+
}
267+
MyComp.displayName = 'MyComp';
268+
MyComp.propTypes = {
269+
userNum: PropTypes.string,
270+
userLetters: PropTypes.string,
271+
page: PropTypes.number
272+
};
273+
this.switcher = ReactDOM.render(
274+
<Switcher wrapper="div" mapDynamicSegments={mapper}>
275+
<MyComp path="/user/:id/information/:page" />
276+
<div path="/user/id/information/page">Static Path</div>
277+
</Switcher>,
278+
document.getElementById('app')
279+
);
280+
});
281+
282+
afterEach(function() {
283+
ReactDOM.unmountComponentAtNode(document.getElementById('app'));
284+
helpers.currentPath.restore();
285+
});
286+
287+
it('renders matched component and sets dynamic segments as props', function() {
288+
sinon.stub(helpers, 'currentPath').returns('/user/234-cde/information/421');
289+
this.switcher.handleRouteChange();
290+
var wrapper = ReactDOM.findDOMNode(this.switcher);
291+
var component = wrapper.children[0];
292+
assert.equal(component.innerHTML, '234cde842');
293+
});
294+
});
166295
});
167296
});

0 commit comments

Comments
 (0)
Please sign in to comment.