class ProductCategoryRow extends React.Component {
render() {
return (<tr><th colSpan="2">{this.props.category}</th></tr>);
}
}
class ProductRow extends React.Component {
render() {
var name = this.props.product.stocked ?
this.props.product.name :
<span style={{color: 'red'}}>
{this.props.product.name}
</span>;
return (
<tr>
<td>{name}</td>
<td>{this.props.product.price}</td>
</tr>
);
}
}
class ProductTable extends React.Component {
render() {
var rows = [];
var lastCategory = null;
this.props.products.forEach(function(product) {
if (product.name.indexOf(this.props.filterText) === -1 || (!product.stocked && this.props.inStockOnly)) {
return;
}
if (product.category !== lastCategory) {
rows.push(<ProductCategoryRow category={product.category} key={product.category} />);
}
rows.push(<ProductRow product={product} key={product.name} />);
lastCategory = product.category;
}.bind(this));
return (
<table>
<thead>
<tr>
<th>Name</th>
<th>Price</th>
</tr>
</thead>
<tbody>{rows}</tbody>
</table>
);
}
}
class SearchBar extends React.Component {
render() {
return (
<form>
<input
type="text"
placeholder="Search..."
value={this.props.filterText}
ref="filterTextInput"
onChange={() => {
this.props.stateNavigator.refresh({
filterText: this.refs.filterTextInput.value,
inStockOnly: this.refs.inStockOnlyInput.checked
});
}}
/>
<p>
<input
type="checkbox"
checked={this.props.inStockOnly}
ref="inStockOnlyInput"
onChange={() => {
this.props.stateNavigator.refresh({
filterText: this.refs.filterTextInput.value,
inStockOnly: this.refs.inStockOnlyInput.checked
});
}}
/>
{' '}
Only show products in stock
</p>
</form>
);
}
}
class FilterableProductTable extends React.Component {
render() {
return (
<div>
<NavigationReact.NavigationContext.Consumer>
{({ stateNavigator }) => (
<SearchBar
filterText={this.props.filterText}
inStockOnly={this.props.inStockOnly}
stateNavigator={stateNavigator}
/>
)}
</NavigationReact.NavigationContext.Consumer>
<ProductTable
products={this.props.products}
filterText={this.props.filterText}
inStockOnly={this.props.inStockOnly}
/>
</div>
);
}
}
var PRODUCTS = [
{category: 'Sporting Goods', price: '$49.99', stocked: true, name: 'Football'},
{category: 'Sporting Goods', price: '$9.99', stocked: true, name: 'Baseball'},
{category: 'Sporting Goods', price: '$29.99', stocked: false, name: 'Basketball'},
{category: 'Electronics', price: '$99.99', stocked: true, name: 'iPod Touch'},
{category: 'Electronics', price: '$399.99', stocked: false, name: 'iPhone 5'},
{category: 'Electronics', price: '$199.99', stocked: true, name: 'Nexus 7'}
];
var stateNavigator = new Navigation.StateNavigator([
{key:'products', route:'{inStockOnly?}/{filterText?}', defaults:{inStockOnly: false}}
]);
stateNavigator.states.products.renderView = function(data) {
return (
<FilterableProductTable
products={PRODUCTS}
filterText={data.filterText || ''}
inStockOnly={data.inStockOnly}
/>
);
}
stateNavigator.start();
ReactDOM.render(
<NavigationReact.NavigationHandler stateNavigator={stateNavigator}>
<NavigationReact.NavigationContext.Consumer>
{({ state, data }) => state.renderView(data)}
</NavigationReact.NavigationContext.Consumer>
</NavigationReact.NavigationHandler>,
document.getElementById('container')
);
<div id="container">
</div>
body {
padding: 20px
}
External resources loaded into this fiddle: