Created
May 29, 2015 19:52
-
-
Save bbassett/14dcdcb6ef5438ca0f83 to your computer and use it in GitHub Desktop.
This file contains hidden or 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
import ProductTable from './product-table' | |
import SearchBar from './search-bar' | |
div | |
SearchBar(filterText=state.filterText | |
inStockOnly=state.inStockOnly | |
handleUserInput=this.handleUserInput | |
) | |
ProductTable(filterText=state.filterText | |
inStockOnly=state.inStockOnly | |
products=props.products | |
) | |
export var initialState = { inStockOnly: false, filterText: '' } | |
export. | |
function handleUserInput(filterText, inStockOnly) { | |
this.setState({ | |
filterText:filterText, | |
inStockOnly:inStockOnly | |
}) | |
} | |
export var displayName='FilterableProduct' |
This file contains hidden or 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
import FilterableProduct from './filterable-product' | |
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"} | |
] | |
FilterableProduct(products=products ) |
This file contains hidden or 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
var product = props.product | |
var color = !product.stocked ? 'red' : 'black' | |
div | |
span(style={'color':color})= product.name | |
span= product.price |
This file contains hidden or 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
import ProductRow from './product-row' | |
.header | |
span Name | |
span Price | |
each product in props.products | |
if (!props.filterText || ~product.name.indexOf(props.filterText)) && (product.stocked || !props.inStockOnly) | |
ProductRow(product=product) |
This file contains hidden or 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
form(controlled=false) | |
input(placeholder='Search...' type='text' value=props.filterText onChange=this.onChange ref='search') | |
p | |
input(type='checkbox' checked=props.inStockOnly ref='checkbox' onChange=this.onChange) | |
label Only Show Products in Stock | |
export. | |
function onChange() { | |
this.props.handleUserInput( | |
this.refs.search.getDOMNode().value, | |
this.refs.checkbox.getDOMNode().checked | |
) | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Here is the JSX example, so you can compare from ours to theirs:
https://jsfiddle.net/reactjs/n47gckhr/embedded/#JavaScript