Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Thinking In React - Code Slice 1 in Ruby
class ProductCategoryRow < React::Component::Base
param :category, type: String
def render
tr { th(colSpan: 2) { params.category } }
end
end
class ProductRow < React::Component::Base
param :product, type: Hash
def product_color_code
params.product[:stocked] ? {color: :red} : {}
end
def render
tr do
td do
span({style: product_color_code}) { params.product[:name] }
end
td { params.product[:price] }
end
end
end
class ProductTable < React::Component::Base
param :products, type: [Hash]
def render
table do
thead { tr { "Name".th; "Price".th }}
tbody do
params[:products].inject(nil) do | last_category, product|
if product[:category] != last_category
ProductCategoryRow category: product[:category], key: product[:category]
end
ProductRow product: product, key: product[:name]
product[:category]
end
end
end
end
end
class SearchBar < React::Component::Base
def render
form do
input type: :text, placeholder: "Search..."
para do
input type: :checkbox
"Only show products in stock".span
end
end
end
end
class FilterableProductTable < React::Component::Base
param :products, type: [Hash]
render
div do
SearchBar()
ProductTable products: params.products
end
end
end
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'}
];
Element['#container'].render { FilterableProductTable products: PRODUCTS }
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.