JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://fb.me/react-with-addons-0.8.0.js"></script>
<script src="http://fb.me/JSXTransformer-0.8.0.js"></script>
<script src="http://fb.me/react-js-fiddle-integration.js"></script>
<script src="https://rawgithub.com/lodash/lodash/2.4.1/dist/lodash.js"></script>
<script src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
JavaScript 1.7
(function() {
var extraColumnCount = 3;
var fakeData = {
levels: [
{name: 'NOWOŚĆ', ratio: '1.2'},
{name: 'ORBIS', ratio: '1.5'},
{name: 'EUREST', ratio: '1.3'}],
categories: ['WARZYWA', 'OWOCE', 'WYŁĄCZONE ZE SPRZEDAŻY INTERNETOWEJ'],
products: {
'10': {
id: 10,
category: 'WARZYWA',
name: 'Pomidor',
priceBuy: "12.00",
priceLevels: ["15.00", "17.00", "13.00"],
inCatalogue: true
},
'11': {
id: 11,
category: 'WARZYWA',
name: 'Cebula',
priceBuy: "12.00",
priceLevels: ["15.00", "17.00", "13.00"],
inCatalogue: false
},
'12': {
id: 12,
category: 'OWOCE',
name: 'Pomarańcze',
priceBuy: "12.00",
priceLevels: ["15.00", "17.00", "13.00"],
inCatalogue: true
}
}
};
var ProductListHeaders = React.createClass({
render: function() {
var headerNodes = this.props.headers.map(function (header, idx) {
return React.DOM.th({children: header, key: idx});
});
return React.DOM.tr(
{className: 'mainHeader'},
headerNodes
);
}
});
var EmptyProductRow = React.createClass({
render: function() {
return React.DOM.tr(
null,
React.DOM.td({colSpan: this.props.columnCount, children: 'Brak produktów'})
);
}
});
var ProductRow = React.createClass({
toggleInCatalogue: function(e) {
var checked = e.target.checked;
this.setState({inCatalogue: checked});
this.props.actions.updateProduct(
this.props.id,
{inCatalogue: checked});
return false;
},
updatePriceBuy: function(e) {
var newPriceBuy = e.target.value;
// update price levels
if (!_.isNaN(newPriceBuy * 1)) {
var newPriceLevels = this.props.levels.map(function(level) {
return (level.ratio * (newPriceBuy * 1).toFixed(2)).toFixed(2);
});
...