Last active
August 29, 2015 14:17
-
-
Save unbracketed/3caf3889516a5f8bf217 to your computer and use it in GitHub Desktop.
Riff on Omniscient-style component
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
//http://omniscientjs.github.io/playground/02-search/ | |
// content component (pure) | |
var Match = React.createClass({ | |
render: () => {( | |
<li> | |
<a href="{this.props.url}">{this.props.title}</a> | |
</li> | |
)} | |
}) | |
// pure content component, but still has to deref the cursor | |
var MatchList = React.createClass({ | |
render: () => {( | |
<ul> | |
{this.props.matches.toArray().map((lib, i) => { | |
<Match key='match-'+i title=lib.get('title') url=lib.get('url')/> | |
} | |
</ul> | |
)} | |
}) | |
// Map atom (store) values to container component props | |
propMap = { | |
q: 'search', | |
libs: 'libs' | |
}; | |
// container component | |
var Matches = component('Matches', propMap, function (props) { | |
var matches = props.libs.filter(lib => { | |
lib.get('title').indexOf(props.q) !== -1 || lib.get('url').indexOf(props.q) !== -1; | |
}); | |
return <MatchList matches=matches/> | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment