Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
/// <reference path="./typings/tsd.d.ts"/>
class Product {
constructor(public category:string, public price:string, public stocked:boolean, public name:string) {
}
}
let products = [
new Product('Sporting Goods', '$49.99', true, 'Football'),
new Product('Sporting Goods', '$9.99', true, 'Baseball'),
new Product('Sporting Goods', '$29.99', false, 'Basketball'),
new Product('Electronics', '$99.99', true, 'iPod Touch'),
new Product('Electronics', '$399.99', false, 'iPhone 5'),
new Product('Electronics', '$199.99', true, 'Nexus 7')
]
// ];
class ProductCategoryRow extends React.Component<string,any>
implements React.ComponentSpec<string, any> {
render() {
return React.DOM.tr({key:this.props},
React.DOM.th({colSpan: 2}, this.props)
)
}
}
class ProductRow extends React.Component<Product,any>
implements React.ComponentSpec<Product,any> {
render() {
let name = this.props.stocked ?
this.props.name :
React.DOM.span({style: {color: 'red'}}, this.props.name)
return React.DOM.tr({key:this.props.name},
React.DOM.td(null, name),
React.DOM.td(null, this.props.price)
)
}
}
class ProductTable extends React.Component<{products:Array<Product>, searchInterface:SearchInterface},any>
implements React.ComponentSpec<{products:Array<Product>, searchInterface:SearchInterface},any> {
render() {
let rows = new Array<React.ComponentSpec<any,any>>()
var lastCategory:String = null
for (let x in this.props.products) {
let product:Product = this.props.products[x]
if (product.name.indexOf(this.props.searchInterface.filterText) === -1
|| product.stocked == false && this.props.searchInterface.inStockOnly) {
continue
}
if (product.category != lastCategory) {
rows.push( new ProductCategoryRow(product.category) )
}
rows.push( new ProductRow(product) )
}
let d = React.DOM
let table = d.table
let head = d.thead
let tr = d.tr
let th = d.th
let tbody = d.tbody
return table(null,
head(null,
d.tr(null,
d.th(null, "Name"),
d.th(null, "Price")
)
),
tbody(null, rows.map(row => { return row.render() }))
)
}
}
interface SearchInterface {
filterText:string
inStockOnly:boolean
}
interface UserInputInterface {
(searchInterface:SearchInterface): void;
}
class SearchBar extends React.Component<{searchInterface:SearchInterface, userInputInterface:UserInputInterface},any>
implements React.ComponentSpec<any, any> {
handleChange() {
let filterText = React.findDOMNode(this.refs["filterTextInput"]).nodeValue
alert(filterText)
let checkbox = Boolean(React.findDOMNode(this.refs["inStockOnlyInput"]).nodeValue)
this.props.userInputInterface({filterText:filterText, inStockOnly:checkbox})
}
render() {
return React.DOM.form(null,
React.DOM.input(
{type:"text",
placeholder : "Search...",
value:this.props.searchInterface.filterText,
ref:"filterTextInput",
onChange : this.handleChange
}),
React.DOM.p(null,
React.DOM.input(
{type: "checkbox",
checked:this.props.searchInterface.inStockOnly,
ref:"inStockOnlyInput",
onChange : this.handleChange
}),
' ',
"Only show products in stock"
)
)
}
}
class FilterableProductTable extends React.Component<Array<Product>,SearchInterface>
implements React.ComponentSpec<Array<Product>,SearchInterface> {
getInitialState(): SearchInterface {
return {filterText:'', inStockOnly : false}
}
handleUserInput(searchInterface:SearchInterface) {
this.setState(searchInterface)
}
render(): React.ReactElement<any> {
return React.DOM.div(null,
new SearchBar({searchInterface:this.getInitialState(), userInputInterface:this.handleUserInput}).render(),
new ProductTable({products:this.props, searchInterface : this.getInitialState()}).render()
)
}
}
function run() {
let x = new FilterableProductTable(products)
React.render(x.render(), document.getElementById('container'))
// React.render(React.createElement("FilterableProductTable", null,products), document.body);
}
if (window.addEventListener) {
window.addEventListener('DOMContentLoaded', run);
}
else {
// window.attachEvent('onload', run);
}
//React.render(React.createElement("HelloWorld"), null);
import React = require("react")
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.