React Test #2 Dynamic Table with Checkbox

HTML
<div id="render"></div>
SCSS
@import url('https://fonts.googleapis.com/css?family=Montserrat:200,300,400,500,600'); *{ margin: 0; padding: 0; box-sizing: border-box; } html, body{ background: white; font-family: 'Montserrat', Helvetica, sans-serif; } input[type='checkbox']{ height: 0; width: 0; } input[type='checkbox'] + label{ position: relative; display: inline-flex; margin: 0 0; color: #9e9e9e; transition: color 250ms cubic-bezier(.4,.0,.23,1); } input[type='checkbox'] + label > span{ display: flex; justify-content: center; align-items: center; width: 15px; height: 15px; background: transparent; border: 2px solid #9E9E9E; border-radius: 2px; cursor: pointer; transition: all 250ms cubic-bezier(.4,.0,.23,1); } input[type='checkbox'] + label:hover, input[type='checkbox']:focus + label{ color: #fff; } input[type='checkbox'] + label:hover > span, input[type='checkbox']:focus + label > span{ background: rgba(255,255,255,.1); } input[type='checkbox']:checked + label > span{ border: .5em solid #f9e01f; animation: shrink-bounce 200ms cubic-bezier(.4,.0,.23,1); } input[type='checkbox']:checked + label > span:before{ content: ""; position: absolute; top: 5px; left: 2px; margin: auto; border-right: 3px solid transparent; border-bottom: 3px solid transparent; transform: rotate(45deg); transform-origin: 0% 100%; animation: checkbox-check 125ms 250ms cubic-bezier(.4,.0,.23,1) forwards; } @keyframes shrink-bounce{ 0%{ transform: scale(1); } 33%{ transform: scale(.85); } 100%{ transform: scale(1); } } @keyframes checkbox-check{ 0%{ width: 0; height: 0; border-color: #212121; transform: translate3d(0,0,0) rotate(45deg); } 33%{ width: .2em; height: 0; transform: translate3d(0,0,0) rotate(45deg); } 100%{ width: .2em; height: .5em; border-color: #212121; transform: translate3d(0,-.5em,0) rotate(45deg); } } .container{ width: 1170px; overflow: auto; background: white; border: 1px solid rgba(0,0,0,0.2); padding: 20px; margin: 30px; h1{ position: relative; font-size: 20px; font-weight: 600; color: #404040; text-transform: uppercase; &:after{ content: ''; display: block; position: absolute; bottom: -7px; width: 100px; height: 2px; background: #e96656; } } table{ margin-top: 40px; border-collapse: collapse; border: 3px solid #404040; width: 100%; .totalTR{ text-align: left; font-size: 20px; padding: 7px 10px; } .totalTr{ background: #404040 !important; font-size: 19px; color: #f9e01f; .totalText{ padding-left: 10px; } } .checkTh{ width: 38px; } .checkTd{ padding-left: 10px; } th{ font-weight: 400; font-size: 18px; background-color: #f9e01f; color: #404040; padding: 15px; } th, td{ text-align:left; } .flexcenter{ display: flex; align-items: center; justify-content: center; } tr:nth-child(even) {background-color: #f2f2f2} /*tr:last-child{ background-color: rgba(204, 235, 255,0.5); }*/ .numberi{ width: 100px !important; } td{ padding: 5px; input{ border: none; width: 85%; max-width: 250px; background: rgba(0,0,0,0.04); font-size: 15px; padding: 8px 8px; margin: 3px 5px; border-left: 3px solid transparent; &:focus{ outline: none; border-left: 3px solid #333; //background: rgba(249, 224, 31, 0.6); } } } .total{ text-align: right; font-weight: 500; padding: 0 14px; } } button{ margin-top: 20px; width: 35px; height: 35px; border: none; color: #333; font-size: 21px; font-weight: 400; text-align: center; cursor: pointer; background: #f9e01f; line-height: 35px; transition: all 0.3s; margin-right: 20px; border-radius: 3px; &:hover{ box-shadow: 0 10px 25px -7px rgba(0,0,0,0.4); transform: translatey(-3px); transition: all 0.3s; } &:focus{ outline: none; } } }
ES6
"use strict"; function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } var totalVec = []; var Header = React.createClass({ displayName: "Header", render: function render() { return React.createElement( "h1", null, "Dynamic Table with Checkbox - React" ); } }); var ListItem = React.createClass({ displayName: "ListItem", getInitialState: function getInitialState() { return { name: this.props.value.name, costo: this.props.value.costo, serviceCheck: this.props.value.checked }; }, render: function render() { return React.createElement( "tr", null, React.createElement( "td", { className: "checkTd" }, React.createElement( "div", { className: "flexcenter" }, React.createElement("input", { type: "checkbox", name: "serviceCheck", id: "c" + this.props.value.id, checked: this.state.serviceCheck, onChange: this.handleChange }), React.createElement( "label", { htmlFor: "c" + this.props.value.id }, React.createElement("span", null) ) ) ), React.createElement( "td", null, React.createElement("input", { type: "text", name: "name", value: this.state.name, onChange: this.handleChange, placeholder: "Service name..." }) ), React.createElement( "td", null, React.createElement("input", { type: "text", name: "costo", value: this.state.costo, onChange: this.handleChange, placeholder: "Service price..." }) ) ); }, handleChange: function handleChange(event) { var target = event.target; var name = target.name; var value = target.type === 'checkbox' ? target.checked : target.value; this.setState(_defineProperty({}, name, value), this.calcoloTotale); }, componentDidMount: function componentDidMount() { var finalValue = 0; if (this.state.serviceCheck) { finalValue = this.state.costo * 1.0; } else { finalValue = 0; } totalVec[this.props.value.id] = finalValue; this.props.updateGlobalTotal(); }, calcoloTotale: function calcoloTotale() { var finalValue = 0; if (this.state.serviceCheck) { finalValue = this.state.costo * 1.0; } else { finalValue = 0; } totalVec[this.props.value.id] = finalValue; this.props.updateGlobalTotal(); } }); var Table = React.createClass({ displayName: "Table", getInitialState: function getInitialState() { return { totale: 0, checked: false }; }, render: function render() { var _this = this; return React.createElement( "div", null, React.createElement( "table", null, React.createElement( "tr", null, React.createElement("th", { className: "checkTh" }), React.createElement( "th", null, "Good / Service" ), React.createElement( "th", null, "Price \u20AC" ) ), 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", null), React.createElement( "td", { className: "totalText" }, "Total (ex VAT):" ), React.createElement( "td", { className: "totalTR" }, this.state.totale, " \u20AC" ) ) ) ); }, /*selectAll: function(source){ this.setState({checked: !this.state.checked}, function(){ var checkboxes = document.getElementsByName('serviceCheck'); for(var i=0, n=checkboxes.length;i<n;i++) { checkboxes[i].checked = this.state.checked; } }); },*/ updateGlobalTotal: function updateGlobalTotal() { var total = 0; for (var i = 0; i < this.props.ids; i++) { total += totalVec[i]; } 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 Service" ); } }); var Calculator = React.createClass({ displayName: "Calculator", getInitialState: function getInitialState() { return { counter: this.props.len, lists: this.props.servizi }; }, 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: "0" } }; var allItem = this.state.lists.concat([listItem]); this.setState({ lists: allItem }); } }); var servizi = [{ "id": "0", "name": "Example 1", "costo": "49", "checked": "true" }, { "id": "1", "name": "Example 2", "costo": "20", "checked": "true" }, { "id": "2", "name": "Example 3", "costo": "100" }, { "id": "3", "name": "Example 4", "costo": "40", "checked": "true" }, { "id": "4", "name": "Example 5", "costo": "1130" }]; ReactDOM.render(React.createElement(Calculator, { servizi: servizi, len: servizi.length }), document.getElementById("render"));
Expand for more options Login