gistfile1.ts

/// <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")