Skip to content

Instantly share code, notes, and snippets.

@mikaelbr
Created October 30, 2014 14:04
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mikaelbr/d54ad8871c79d15049d3 to your computer and use it in GitHub Desktop.
Save mikaelbr/d54ad8871c79d15049d3 to your computer and use it in GitHub Desktop.
var React = require('react'),
immstruct = require('immstruct'),
component = require('omniscient');
var d = React.DOM;
component.debug();
var mixins = {
changeHandler: function (e) {
this.props.cursor.update(function (currentSearch) {
return e.currentTarget.value;
});
}
};
var SearchBox = component('SearchBox', mixins, function (props) {
return (
<div>
<input placeholder="Search.."
value={props.cursor.deref()}
onChange={this.changeHandler} />
</div>
);
});
var Match = component('Match', function (props) {
var cursor = props.cursor;
return (
<li>
<a href={cursor.get('url')}>{cursor.get('title')}</a>
</li>
);
});
var Matches = component('Matches', function (props) {
// get our cursor from the properties.
var cursor = props.cursor;
// Get the value from search query
var q = cursor.get('search');
// Get all projects
var libs = cursor.get('libs');
// Get all javascript projects that matches the query
var matches = libs.filter(function (lib) {
return lib.get('title').indexOf(q) !== -1 || lib.get('url').indexOf(q) !== -1;
});
// Present the matches
return (
<ul>
{matches.toArray().map(function (lib, i) {
return (
<Match.jsx key={'match-' + lib.get('title')}
cursor={lib} />
);
})}
</ul>
);
});
var Search = component('Search', function (props) {
return (
<div>
<SearchBox.jsx cursor={props.cursor.cursor('search')} />
<Matches.jsx cursor={props.cursor} />
</div>
);
});
var structure = immstruct({
search: "",
libs: [
{ title: "Backbone.js", url: "http://documentcloud.github.io/backbone/" },
{ title: "AngularJS", url: "https://angularjs.org/" },
{ title: "jQuery", url: "http://jquery.com/" },
{ title: "Prototype", url: "http://www.prototypejs.org/" },
{ title: "React", url: "http://facebook.github.io/react/" },
{ title: "Omniscient", url: "https://github.com/omniscientjs/omniscient" },
{ title: "Ember", url: "http://emberjs.com/" },
{ title: "Knockout.js", url: "http://knockoutjs.com/" },
{ title: "Dojo", url: "http://dojotoolkit.org/" },
{ title: "Mootools", url: "http://mootools.net/" },
{ title: "Underscore", url: "http://documentcloud.github.io/underscore/" },
{ title: "Lodash", url: "http://lodash.com/" },
{ title: "Moment", url: "http://momentjs.com/" },
{ title: "Express", url: "http://expressjs.com/" },
{ title: "Koa", url: "http://koajs.com" },
]
});
render();
structure.on('next-animation-frame', render);
function render () {
React.render(
<Search.jsx cursor={structure.cursor()} />,
document.body
);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment