tanner/critical-leddemo
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Toggle icon locally with on / off buttons

Browse Source
This commit is contained in:
Tanner Collin
2017-06-19 21:59:25 +00:00
parent 6a27604e75
commit 23d10df83a
3 changed files with 27 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src/app.js
View File

@@ -1,6 +1,25 @@
import React from 'react';
export default class Site extends React.Component {
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = {
ioState: {
dout: [false],
},
}
}
doutSet(pin, value) {
this.setState({
ioState: {
...this.state.ioState,
dout: this.state.ioState.dout.map((x, i) => i == pin ? value : x),
},
});
}
render() {
return (
<div className="ui text container">
@@ -16,18 +35,19 @@ export default class Site extends React.Component {
<div className="column">
<div className="ui segment">
<div className="ui top attached label">Digital Out</div>
<div className="ui two column grid">
<div className="ui two column middle aligned grid">
<div className="twelve wide column">
<div className="ui right pointing label">
DO1
</div>
<div className="ui buttons">
<button className="ui red button">On</button>
<button className="ui button">Off</button>
<button onClick={() => this.doutSet(0, true)} className="ui red button">On</button>
<button onClick={() => this.doutSet(0, false)} className="ui button">Off</button>
</div>
</div>
<div className="four wide right aligned column">
<i className="red idea big icon"></i>
{!this.state.ioState.dout[0] && <i className="bordered inverted disabled idea big icon"></i>}
{this.state.ioState.dout[0] && <i className="bordered inverted red idea big icon"></i>}
</div>
</div>
</div>