@ryancole/scenic
Advanced tools
Comparing version 0.0.2 to 0.0.3
{ | ||
"name": "@ryancole/scenic", | ||
"main": "build/index.js", | ||
"version": "0.0.2", | ||
"version": "0.0.3", | ||
"description": "A simple router for react.", | ||
"repository": { | ||
"url": "https://github.com/ryancole/scenic.git", | ||
"url": "git+https://github.com/ryancole/scenic.git", | ||
"type": "git" | ||
@@ -9,0 +9,0 @@ }, |
@@ -95,10 +95,1 @@ Two simple concepts: `<Scene>` and `<View>` | ||
``` | ||
# Notice | ||
I have no idea if this approach is solid or not. I'm shooting for something that | ||
works well on both the server and client. I'm also shooting for something that | ||
does not require multiple renders on the server. I'm also shooting for something | ||
that "just works". | ||
That's a lot of shooting. |
@@ -7,3 +7,4 @@ import React from "react"; | ||
to: React.PropTypes.string.isRequired, | ||
children: React.PropTypes.node.isRequired | ||
children: React.PropTypes.node.isRequired, | ||
className: React.PropTypes.string | ||
} | ||
@@ -22,3 +23,3 @@ | ||
return ( | ||
<a href={this.props.to} onClick={this.onClick}> | ||
<a href={this.props.to} onClick={this.onClick} className={this.props.className}> | ||
{this.props.children} | ||
@@ -25,0 +26,0 @@ </a> |
import React from "react"; | ||
import {pathOrPathsToRegex, maybeWrapWithDiv, mapPropsToChildren, matchPathsToLocation, flattenSegementArray} from "../utility"; | ||
import * as Utility from "../utility"; | ||
@@ -23,4 +23,15 @@ export default class View extends React.Component { | ||
constructor(props, context) { | ||
super(props, context); | ||
const {history} = context; | ||
this.state = { | ||
pathname: history.location.pathname | ||
}; | ||
} | ||
onLocationChange = () => { | ||
this.forceUpdate(); | ||
const {history} = this.context; | ||
this.setState({ | ||
pathname: history.location.pathname | ||
}); | ||
} | ||
@@ -40,11 +51,11 @@ | ||
const {history} = this.context; | ||
const {pathname} = this.state; | ||
const {not, path, children} = this.props; | ||
// fetch the regexps for this view's path | ||
const regexps = pathOrPathsToRegex(path); | ||
const regexps = Utility.pathOrPathsToRegex(path); | ||
// run regexps and see if current location matches any of the path's that | ||
// we've been given | ||
const matches = matchPathsToLocation(regexps, history.location.pathname); | ||
const matches = Utility.matchPathsToLocation(regexps, pathname); | ||
@@ -65,8 +76,8 @@ // if `not` switch is disabled, we only want to render if the current | ||
// can spread in as props to child elements | ||
const flattened = flattenSegementArray(matches); | ||
const flattened = Utility.flattenSegementArray(matches); | ||
// clone each child with the segment params as props | ||
const childNodes = mapPropsToChildren(children, flattened); | ||
const childNodes = Utility.mapPropsToChildren(children, flattened); | ||
return maybeWrapWithDiv(childNodes); | ||
return Utility.maybeWrapWithDiv(childNodes); | ||
@@ -73,0 +84,0 @@ } |
@@ -44,2 +44,4 @@ import React from "react"; | ||
return [pathToRegex(paths)]; | ||
} else { | ||
return []; | ||
} | ||
@@ -46,0 +48,0 @@ } |
Sorry, the diff of this file is not supported yet
10337
218
95