New button concept for Carbon Native

Button.jsx

import React, {
  PropTypes,
} from 'react';

import {
  StyleSheet,
  Text,
  TouchableHighlight,
  TouchableOpacity,
  View,
} from 'react-native';

import Color from 'color';

const colors = {
  light: '#fff',
  stable: '#f8f8f8',
  primary: '#337AF9',
  calm: '#11c1f3',
  secondary: '#22DD5E',
  energized: '#FFC600',
  danger: '#F83B36',
  royal: '#7E59FF',
  dark: '#222',
};

const sizes = {
  xs: 4,
  sm: 8,
  md: 12,
  lg: 16,
  xl: 20,
};

const propTypes = {
  activeOpacity: PropTypes.number,
  block: PropTypes.bool,
  children: PropTypes.node,
  clear: PropTypes.bool,
  color: PropTypes.oneOfType([
    PropTypes.number,
    PropTypes.string,
  ]),
  onPress: PropTypes.func,
  outline: PropTypes.bool,
  round: PropTypes.bool,
  shadow: PropTypes.bool,
  size: PropTypes.oneOfType([
    PropTypes.number,
    PropTypes.string,
  ]),
  style: PropTypes.oneOfType([
    PropTypes.number,
    PropTypes.object,
  ]),
  text: PropTypes.string,
  underlayColor: PropTypes.oneOfType([
    PropTypes.number,
    PropTypes.string,
  ]),
};

const defaultProps = {
  activeOpacity: 1,
  block: false,
  children: null,
  clear: false,
  color: colors.stable,
  onPress: () => alert('Attach an onPress prop'),
  outline: false,
  round: false,
  shadow: true,
  size: sizes.md,
  style: null,
  text: 'Press Me',
  underlayColor: null,
};

const cs = StyleSheet.create({
  button: {
    alignItems: 'center',
    borderWidth: 2,
    flex: 0,
    justifyContent: 'center',
  },
});

export default function Button(props) {
  const {
    activeOpacity,
    block: $block,
    children,
    clear,
    color: $color,
    onPress,
    outline,
    round,
    shadow: $shadow,
    size: $size,
    style,
    text,
    underlayColor,
    ...passProps,
  } = props;

  const size = sizes[$size] || $size;
  const color = colors[$color] ? Color(colors[$color]) : Color($color);
  const colorDark = color.darken(0.2);
  const luminosTextColor = color.luminosity() < 0.5 ? '#fff' : '#000';

  const block = $block && { alignSelf: 'stretch' };
  const backgroundColor = clear || outline ? 'transparent' : color
  const borderColor = outline ? color : 'transparent';
  const borderRadius = round ? 50 : 2;
  const padding = size > 15
    ? { padding: 16 }
    : { paddingHorizontal: 4, paddingVertical: 8 };
  const shadow = $shadow && {
    elevation: 2,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.2,
    shadowRadius: 2,
  };
  const textColor = clear || outline ? color : luminosTextColor;

  const buttonStyle = [
    cs.button,
    block,
    { backgroundColor },
    { borderColor },
    { borderRadius },
    padding,
    shadow,
    style,
  ];

  const textStyle = {
    color: textColor,
    fontSize: size,
  };

  const content = children || (
    <Text style={textStyle}>
      {text}
    </Text>
  );

  if (clear) {
    return (
      <TouchableOpacity
        onPress={onPress}
        style={buttonStyle}
        {...passProps}
      >
        {content}
      </TouchableOpacity>
    );
  }

  return (
    <TouchableHighlight
      activeOpacity={activeOpacity}
      onPress={onPress}
      style={buttonStyle}
      underlayColor={underlayColor || colorDark}
      {...passProps}
    >
      {content}
    </TouchableHighlight>
  );
}

Button.propTypes = propTypes;
Button.defaultProps = defaultProps;