{"size": 1991, "ext": "js", "max_stars_repo_path": "src/components/atoms/button/Button.js", "max_stars_repo_name": "ms-in/reactNativeApp", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/components/atoms/button/Button.js", "max_issues_repo_name": "ms-in/reactNativeApp", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/components/atoms/button/Button.js", "max_forks_repo_name": "ms-in/reactNativeApp", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 24.8875, "max_line_length": 84, "alphanum_fraction": 0.6348568559}
import React from 'react';
import {Text, TouchableOpacity} from 'react-native';
import Icon from 'react-native-vector-icons/dist/MaterialIcons';

import {BRAND_BLUE, WHITE, PRIMARY} from '../../../styles';

export const Button = (props) => {
  const {buttonStyle, textStyle} = styles;
  const {onPress, label, style, customTextStyle, disabled, onError, testID} = props;
  return (
    <TouchableOpacity
      onPress={disabled ? onError : onPress}
      style={[buttonStyle, style]}
      activeOpacity={0.8}
      testID={testID}>
      <Text style={[textStyle, customTextStyle]}>{label}</Text>
    </TouchableOpacity>
  );
};

const ButtonIcon = (props) => {
  const {icon, iconColor} = props;
  return (
    <Icon
      name={icon ? icon : 'error_outline'}
      size={30}
      color={iconColor ? iconColor : PRIMARY}
    />
  );
};
export const BorderedButton = (props) => {
  const {onPress, label, icon, iconColor, style} = props;
  return (
    <TouchableOpacity
      onPress={onPress}
      style={[styles.borderedButtonStyle, style]}
      activeOpacity={0.8}>
      {icon ? <ButtonIcon icon={icon} iconColor={iconColor} /> : null}
      <Text style={styles.borderedButtonText}>{label}</Text>
    </TouchableOpacity>
  );
};

const styles = {
  textStyle: {
    alignSelf: 'center',
    color: '#fff',
    fontSize: 16,
    fontFamily: 'OpenSans-Bold',
  },
  buttonStyle: {
    // flexGrow: 1,
    height: 48,
    alignSelf: 'stretch',
    justifyContent: 'center',
    backgroundColor: BRAND_BLUE,
    marginVertical: 10,
    borderRadius: 8,
  },
  borderedButtonStyle: {
    backgroundColor: WHITE,
    borderWidth: 1,
    borderColor: PRIMARY,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    marginVertical: 10,
    marginHorizontal: 20,
    borderRadius: 8,
    paddingVertical: 12,
  },
  borderedButtonText: {
    alignSelf: 'center',
    fontFamily: 'OpenSans-Bold',
    fontSize: 12,
    lineHeight: 16,
    color: PRIMARY,
  },
};
