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%'
            }
        }
    }

    onClickRipple = $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() {
        const {
            btnType,
            size,
            className,
            loading,
            disabled,
            type,
            ripples,
            ...rest
        } = this.props
        let classes = classNames(
            'btn', 
            {
                [`btn-${btnType}`]: btnType
            },
            size,
            className,
            {
                'active': this.state.active,
                'loading': loading,
                'disabled': disabled || loading
            }
        );

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