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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.babelrc
View File

@ -1,4 +1,4 @@
{
"presets": ["react"],
"plugins": ["react-hot-loader/babel"]
"plugins": ["transform-object-rest-spread", "react-hot-loader/babel"]
}

1
package.json
View File

@ -12,6 +12,7 @@
"devDependencies": {
"babel-core": "^6.25.0",
"babel-loader": "^7.0.0",
"babel-plugin-transform-object-rest-spread": "^6.23.0",
"babel-preset-react": "^6.24.1",
"react-hot-loader": "^3.0.0-beta.6",
"webpack": "^3.0.0",

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>