kudos icon indicating copy to clipboard operation
kudos copied to clipboard

Ported to ReactJS

Open 0b01 opened this issue 9 years ago • 0 comments

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">
                            &nbsp;
                            </div>
                        </div>
                    </a>
                </figure>
        );
    }
});

module.exports = Kudos;

0b01 avatar Sep 10 '16 21:09 0b01