<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html lang='en' class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/simoberny/pen/bqwewq?depth=everything&order=popularity&page=26&q=react&show_forks=false" />
<style class="cp-pen-styles">@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
background: #f1f1f1;
font-family: "Roboto";
}
.container {
width: 900px;
overflow: auto;
background: white;
box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.1);
padding: 20px;
margin: 30px;
border-radius: 5px;
}
.container h1 {
font-weight: 300;
}
.container table {
margin-top: 20px;
border-collapse: collapse;
/*tr:last-child{
background-color: rgba(204, 235, 255,0.5);
}*/
}
.container table .totalTR {
text-align: center;
font-size: 20px;
padding: 7px;
}
.container table .totalTr {
background: rgba(0, 0, 0, 0.15) !important;
font-size: 18px;
}
.container table .totalTr .totalText {
padding-left: 10px;
}
.container table th {
font-weight: 400;
font-size: 17px;
background-color: #ff5544;
padding: 15px;
}
.container table th, .container table td {
text-align: left;
}
.container table tr:nth-child(even) {
background-color: #f2f2f2;
}
.container table td {
padding: 5px;
}
.container table td input {
border: none;
background: transparent;
font-size: 15px;
padding: 10px;
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
.container table td input:focus {
outline: none;
border-bottom: 1px solid #33adff;
}
.container table .total {
text-align: center;
font-weight: 500;
}
.container button {
margin-top: 20px;
width: 40px;
height: 40px;
border: none;
border-radius: 50%;
color: white;
font-size: 21px;
font-weight: 400;
text-align: center;
cursor: pointer;
background: #ff5544;
line-height: 40px;
box-shadow: 0 2px 10px 0px rgba(0, 0, 0, 0.3);
-webkit-transition: all 0.3s;
transition: all 0.3s;
margin-right: 20px;
}
.container button:hover {
box-shadow: 0 10px 25px -7px rgba(0, 0, 0, 0.4);
-webkit-transform: translatey(-3px);
transform: translatey(-3px);
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.container button:focus {
outline: none;
}
</style></head><body>
/* NOTHING HERE */
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.min.js'></script><script src='//cdn.bootcss.com/mobx/2.4.3/mobx.umd.min.js'></script><script src='https://npmcdn.com/mobx-react@3.5.5/index.js'></script>
<script >"use strict";
var totalVec = new Array();
function Header() {
return React.createElement(
"h1",
null,
"Dynamic Table - React"
);
}
var ListItem = React.createClass({
displayName: "ListItem",
getInitialState: function getInitialState() {
return { name: this.props.value.product.name, costo: this.props.value.product.costo, quantita: this.props.value.product.quantita, totale: 0 };
},
render: function render() {
return React.createElement(
"tr",
null,
React.createElement(
"td",
null,
React.createElement("input", { type: "text", name: "name", value: this.state.name, onChange: this.handleChange, placeholder: "Nome..." })
),
React.createElement(
"td",
null,
React.createElement("input", { type: "text", name: "costo", value: this.state.costo, onChange: this.handleChange, placeholder: "Costo unitario..." })
),
React.createElement(
"td",
null,
React.createElement("input", { type: "text", name: "quantita", value: this.state.quantita, onChange: this.handleChange, placeholder: "Quantità..." })
),
React.createElement(
"td",
{ className: "total" },
this.state.totale
)
);
},
handleChange: function handleChange(event) {
var _setState;
var target = event.target;
var name = target.name;
var value = target.value;
this.setState((_setState = {}, _setState[name] = value, _setState), this.calcoloTotale);
},
componentDidMount: function componentDidMount() {
this.setState({ totale: this.state.costo * this.state.quantita }, function () {
totalVec[this.props.value.id] = this.state.totale;this.props.updateGlobalTotal();
});
},
calcoloTotale: function calcoloTotale() {
var Ltotale = this.state.costo * this.state.quantita;
totalVec[this.props.value.id] = Ltotale;
this.setState({ totale: Ltotale }, function () {
this.props.updateGlobalTotal();
});
}
});
var Table = React.createClass({
displayName: "Table",
getInitialState: function getInitialState() {
return { totale: 0 };
},
render: function render() {
var _this = this;
return React.createElement(
"div",
null,
React.createElement(
"table",
null,
React.createElement(
"tr",
null,
React.createElement(
"th",
null,
"Name"
),
React.createElement(
"th",
null,
"Price"
),
React.createElement(
"th",
null,
"Quantity"
),
React.createElement(
"th",
null,
"Total"
)
),
this.props.items.map(function (prodotto) {
return React.createElement(ListItem, { key: prodotto.id, value: prodotto, updateGlobalTotal: _this.updateGlobalTotal });
}),
React.createElement(
"tr",
{ className: "totalTr" },
React.createElement(
"td",
{ className: "totalText" },
"Total:"
),
React.createElement("td", null),
React.createElement("td", null),
React.createElement(
"td",
{ className: "totalTR" },
this.state.totale
)
)
)
);
},
updateGlobalTotal: function updateGlobalTotal() {
var total = 0;
for (var i = 0; i < this.props.ids; i++) {if (window.CP.shouldStopExecution(1)){break;}
total += totalVec[i];
}
window.CP.exitedLoop(1);
this.setState({ totale: total });
}
});
var AddNewRow = React.createClass({
displayName: "AddNewRow",
render: function render() {
return React.createElement(
"div",
null,
React.createElement(
"button",
{ onClick: this.props.onClick },
"+"
),
"Add Product"
);
}
});
var Calculator = React.createClass({
displayName: "Calculator",
getInitialState: function getInitialState() {
return {
counter: 2, lists: [{ id: "0", product: { name: "Example 1", costo: "25", quantita: "3" } }, { id: "1", product: { name: "Example 2", costo: "32", quantita: "4" } }]
};
},
render: function render() {
return React.createElement(
"div",
{ className: "container" },
React.createElement(Header, null),
React.createElement(Table, { items: this.state.lists, ids: this.state.counter }),
React.createElement(AddNewRow, { onClick: this.addRow })
);
},
addRow: function addRow() {
this.setState({ counter: this.state.counter + 1 });
var listItem = { id: this.state.counter, product: { name: "", costo: "", quantita: "" } };
var allItem = this.state.lists.concat([listItem]);
this.setState({ lists: allItem });
}
});
ReactDOM.render(React.createElement(Calculator, null), document.body);
//# sourceURL=pen.js
</script>
</body></html>
