react-jam-ui/components/Button/index.js

React JAM UI components

import React from 'react';
import classNames from 'classnames';
import './styles.styl'

export default class Button extends React.Component {
    constructor() {
        super();

        this.state = {
            active: false,
            ripples: {
                x: '50%',
                y: '50%'
            }
        }
    }

    click($e) {
        if (!this.props.loading) {
            const x = $e.nativeEvent.offsetX;
            const y = $e.nativeEvent.offsetY;

            this.setState({
                active: true,
                ripples: {
                    x: x,
                    y: y
                }
            });

            setTimeout(()=>{
                this.setState({
                    active: false
                });
            }, 300)
        }
    }

    render() {
        let classes = classNames('btn', {[`btn-${this.props.btnType}`]: this.props.btnType}, this.props.size, this.props.className, {
            'active': this.state.active,
            'loading': this.props.loading,
            'disabled': this.props.disabled || this.props.loading
        });

        return (
            <button className={ classes } type={this.props.type || 'button'} onClick={ this.props.onClick } disabled={this.props.disabled || this.props.loading}>
                { this.props.loading ? 'Loading' : this.props.children}                
                { this.props.ripples ? <i className='ripples' onClick={::this.click}><i className='circle' style={{left: this.state.ripples.x, top: this.state.ripples.y}}></i></i> : null }
            </button>
        )
    }
}