Button.js

import React, { Component } from 'react';
import Ripple from '../../animations/ripple/Ripple';
import { rippleSize } from '../../animations/ripple/shapeRipple';

export default class Button extends Component {
  constructor() {
    super();
    this.state = {
      hovered: false,
      rippleSize: 0,
    }
  }
  componentDidMount() {
    let rect = this.refs.rippleBox.getBoundingClientRect();
    this.setState({ rippleSize: rippleSize(rect.width, rect.height)})
  }
  handleMouseOver = () => (
    this.setState({ hovered: true })
  );
  handleMouseOut = () => (
    this.setState({ hovered: false })
  );
  buttonStyles = () => {
    let { hovered } = this.state;
    let { type, styles, color, disabled, disabledColor } = this.props;
    let reStyle = Object.assign({}, staticStyles, styles);
    let { button, raised } = reStyle;

    return Object.assign({}, button.defaultStyles,
      (hovered && !disabled) && button.hoveredState,
      type && staticStyles[type].defaultStyles,
      color && color,
      disabled && staticStyles[type || 'button'].disabledState,
      disabled && disabledColor,
    );
  };
  renderRippleContainer = () => {
  };
  render() {
    let { type, children, handleClick, icon, disabled, onClick } = this.props;
    let { rippleSize } = this.state;
    return (
      <div style={this.buttonStyles()}
           onMouseOver={this.handleMouseOver}
           onMouseOut={this.handleMouseOut}
           onClick={onClick}
           ref='rippleBox'
      >
      {
        icon ? <i className='material-icons' style={staticStyles[type].icon}>{ icon }</i>
        : children ? children : 'button'
      }
      {
        !disabled &&
      <Ripple size={rippleSize}  />
      }
      </div>
    );
  }
};

const staticStyles = {
  button: {
    defaultStyles: {
      background: 'transparent',
      borderRadius: '2px',
      color: 'rgb(0,0,0)',
      position: 'relative',
      height: '36px',
      minWidth: '64px',
      padding: '0 16px',
      display: 'inline-block',
      fontSize: '14px',
      fontWeight: '500',
      textTransform: 'uppercase',
      lineHeight: '1',
      letterSpacing: '0px',
      overflow: 'hidden',
      willChange: 'box-shadow, transform',
      transition: 'box-shadow 0.2s cubic-bezier(0.4, 0, 1, 1), background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s cubic-bezier(0.4, 0, 0.2, 1)',
      cursor: 'pointer',
      textAlign: 'center',
      lineHeight: '36px',
      verticalAlign: 'middle',
    },
    hoveredState: {
      backgroundColor: 'rgba(158, 158, 158, .2)',
      // boxShadow: '0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12)',
    },
    disabledState: {
      color: 'rgba(0,0,0, .26)',
      cursor: 'default',
      backgroundColor: 'transparent',
    }
  },
  raised: {
    defaultStyles: {
      background: 'rgba(158, 158, 159, .2)',
      boxShadow: '0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12)',
    },
    activeState: {

    },
    focusedState: {

    },
    hoveredState: {

    },
    disabledState: {
      backgroundColor: 'rgba(0,0,0, .12)',
      color: 'rgba(0,0,0, .26)',
      cursor: 'default',
      boxShadow: '0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12)',
    },
  },
  flat: {
  },
  colored: {
    defaultStyles: {
      backgroundColor: 'rgb(63,81,181)',
      color: 'rgb(255,255,255)',
    },
  },
  fab: {
    defaultStyles: {
      borderRadius: '50%',
      fontSize: '24px',
      height: '56px',
      margin: 'auto',
      width: '56px',
      minWidth: '56px',
      padding: '0px',
      overflow: 'hidden',
      background: 'rgba(158,158,158, .2)',
      boxShadow: '0 1px 1.5px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24)',
      position: 'relative',
      lineHeight: 'normal'
    },
    icon: {
      position: 'absolute',
      top: '50%',
      left: '50%',
      transform: 'translate(-12px, -12px)',
      lineHeight: '24px',
      width: '24px',
      verticalAlign: 'middle',

    },
    disabledState: {
      backgroundColor: 'rgba(0,0,0, .12)',
      color: 'rgba(0,0,0, .26)',
      cursor: 'default',
      boxShadow: '0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12)',
    }
  },
  icon: {
    defaultStyles: {
      borderRadius: '50%',
      fontSize: '24px',
      height: '32px',
      marginLeft: '0px',
      marginRight: '0px',
      minWidth: '32px',
      width: '32px',
      padding: '0px',
      overflow: 'hidden',
      color: 'inherit',
      lineHeight: 'normal',
    },
    icon: {
      position: 'absolute',
      top: '50%',
      left: '50%',
      transform: 'translate(-12px, -12px)',
      lineHeight: '24px',
      width: '24px',
      verticalAlign: 'middle',
    },
    disabledState: {
      color: 'rgba(0,0,0, .26)',
      cursor: 'default',
    }
  }

}