All files button.js

81.82% Statements 9/11
50% Branches 2/4
50% Functions 2/4
81.82% Lines 9/11

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55          8x 8x           8x 8x                       15x       15x       15x         15x                       2x        
import React, { Component } from 'react';
import PropTypes from 'prop-types';
 
export default class Button extends Component {
  constructor(props) {
    super(props);
    this.state = {
      focus: false,
      hover: false,
      color: this.props.styles.button.Color,
      backgroundColor: this.props.styles.button.backgroundColor
    };
    this.enter = this.enter.bind(this);
    this.leave = this.leave.bind(this);
  }
 
  enter() {
    this.setState({ hover: true });
  }
 
  leave() {
    this.setState({ hover: false });
  }
 
  render() {
    const backgroundColor = this.state.hover
      ? this.props.styles.hover.backgroundColor
      : this.state.backgroundColor;
 
    const color = this.state.hover
      ? this.props.styles.hover.color
      : this.state.color;
 
    const style = Object.assign({}, this.props.styles.button, {
      color: color,
      backgroundColor: backgroundColor
    });
 
    return (
      <button
        type="button"
        {...this.props}
        style={style}
        onMouseEnter={this.enter}
        onMouseLeave={this.leave}
      />
    );
  }
}
 
Button.propTypes = {
  styles: PropTypes.object.isRequired,
  onClick: PropTypes.func.isRequired
};