kudos
kudos copied to clipboard
Ported to ReactJS
Hey. I ported the code to ReactJS if anyone needs one it's here:
import './kudos.css';
var React = require('react');
var classNames = require('classnames');
var Kudos = React.createClass({
getInitialState: function() {
return {
complete: false,
active: false,
timer: null
};
},
isKudod: function() {
return this.state.complete;
},
start: function() {
if (!this.isKudod()) {
this.setState({
active: true
});
// return this.timer = setTimeout(this.complete, 700);
this.setState({
timer: setTimeout(this.complete, 700)
});
}
},
end: function() {
if (!this.isKudod()) {
this.setState({
active: false
});
if (this.state.timer != null) {
return clearTimeout(this.state.timer);
}
}
},
complete: function() {
this.end();
this.setState({complete: true});
},
unkudo: function(event) {
if (this.isKudod()){
this.setState({complete:false});
}
},
render: function() {
var classes = classNames({
'kudo': true,
'kudoable': true,
'active': this.state.active,
'complete': this.state.complete
})
return (<figure className={classes}
onMouseEnter={this.start}
onMouseLeave={this.end}
onTouchStart={this.start}
onTouchEnd={this.end}
onClick={this.unkudo}
>
<a className="kudobject">
<div className="opening">
<div className="circle">
</div>
</div>
</a>
</figure>
);
}
});
module.exports = Kudos;