{"size": 3557, "ext": "js", "max_stars_repo_path": "app/components/Button/index.js", "max_stars_repo_name": "esauri/venu", "max_stars_repo_stars_event_min_datetime": "2017-02-13T13:14:29.000Z", "max_stars_repo_stars_event_max_datetime": "2017-02-13T13:14:29.000Z", "max_issues_repo_path": "app/components/Button/index.js", "max_issues_repo_name": "esauri/venu", "max_issues_repo_issues_event_min_datetime": "2017-02-10T02:45:06.000Z", "max_issues_repo_issues_event_max_datetime": "2017-05-15T03:51:45.000Z", "max_forks_repo_path": "app/components/Button/index.js", "max_forks_repo_name": "esauri/venu", "max_forks_repo_forks_event_min_datetime": "2017-02-10T01:27:44.000Z", "max_forks_repo_forks_event_max_datetime": "2021-06-11T21:07:40.000Z"}
{"max_stars_count": 1, "max_issues_count": 62, "max_forks_count": 3, "avg_line_length": 19.7611111111, "max_line_length": 102, "alphanum_fraction": 0.5782963171}
import React, { PropTypes as T } from 'react';
import Ionicon from 'react-ionicons';
import styled from 'styled-components';
import Google from 'media/icons/socialmedia/google.png';

const Btn = styled.button`
  padding: var(--padding);

  &.fab {
    position: absolute;
    top: 40%;
    right: 0;
    z-index: 20;
    padding: calc(var(--padding) / 2);
    background: var(--background-color);
  }

  &.clear {
    padding: 0 calc(var(--padding) / 2) 0;
  }

  &.action {
    width: 100%;
    display: block;
    border-radius: 4px;
    color: var(--grey);
    padding: calc(var(--padding) - 2px);
    border: 2px solid currentColor;
    
    &.cta-subdued {
      color: var(--primary-accent-color);
      border-color: currentColor;
    }

    &.cta {
      border-color: var(--primary-accent-color);
      background: var(--primary-accent-color);
      color: var(--background-color);
    }
  }

  &.bold {
    font-weight: 700;
  }

  &.large {
    font-size: 1.5rem;
  }

  &.bordered {
    border: 3px solid currentColor;
  }

  &.rounded {
    border-radius: 2em;
  }

  &.facebook, &.google, &.anonymous {
    margin: auto;
    display: block;
    width: 95%;
    border-radius: 2em;
    border: 1px solid transparent;
  }

  &.facebook {
    background: var(--facebook-background);
    color: var(--background-color);
    border-color: var(--facebook-background);
  }

  &.google, &.anonymous {
    background: var(--white);
    color: var(--foreground-color);
    border-color: var(--foreground-color);
  }

  &.special {
    background: var(--warm-gradient);
    color: var(--background-color);
    border-color: none;

    &.reversed {
      background: var(--background-color);
      color: var(--orange);
      border-color: var(--background-color);

      &:disabled {
        border-color: var(--light-gray);
      }
    }

    &:disabled {
      background: var(--light-gray);
    }
  }

  &.full {
    display: block;
    width: 100%;
  }

  &.fixed {
    position: fixed;
    bottom: 0;
  }

  &:disabled {
    cursor: not-allowed;
    color: var(--light-gray);
  }
`;

const Img = styled.img`
  width: 1.5rem;
  height: 1.5rem;
  margin-top: -2px;
  margin-right: calc(var(--padding) / 2);
`;

export default class Button extends React.Component {
  static propTypes = {
    btnClasses: T.string,
    icon: T.string,
    name: T.string,
    type: T.string,
    image: T.string,
    onClickEvent: T.func,
    isDisabled: T.bool,
    isIconAfter: T.bool,
  }

  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    const { onClickEvent } = this.props;

    if (onClickEvent) {
      onClickEvent();
    }
  }

  render() {
    const { name, icon, type, btnClasses, isDisabled, isIconAfter, image, onClickEvent } = this.props;

    const iconComponent = (icon) ? (
      <Ionicon className={'icon'} icon={`icon ${icon}`} />
    ) : null;

    let imageComponent;
    const clickEvent = (onClickEvent) ? this.handleClick : null;

    if (image) {
      if (image === 'google') {
        imageComponent = (<Img src={Google} alt={'Google Logo'} />);
      }
    }

    if (isIconAfter) {
      return (
        <Btn type={type} className={btnClasses} onClick={clickEvent} disabled={isDisabled}>
          {name}
          {iconComponent}
        </Btn>
      );
    }

    return (
      <Btn type={type} className={btnClasses} onClick={clickEvent} disabled={isDisabled}>
        {iconComponent}
        {imageComponent}
        <span>{name}</span>
      </Btn>
    );
  }
}
