All files / icons Icon.js

92.86% Statements 13/14
82.14% Branches 23/28
100% Functions 1/1
92.86% Lines 13/14
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 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113        6x                             3x   3x 3x 1x   3x       3x 2x   1x   3x                                                                   6x                             6x                 6x                                        
import React, { PropTypes } from 'react';
import { Platform, TouchableHighlight, View, StyleSheet } from 'react-native';
import getIconType from '../helpers/getIconType';
 
const Icon = props => {
  const {
    type,
    name,
    size,
    color,
    iconStyle,
    component,
    underlayColor,
    reverse,
    raised,
    containerStyle,
    reverseColor,
    onPress,
    ...attributes,
  } = props;
 
  let Component = View;
  if (onPress) {
    Component = TouchableHighlight;
  }
  Iif (component) {
    Component = component;
  }
  let Icon;
  if (!type) {
    Icon = getIconType('material');
  } else {
    Icon = getIconType(type);
  }
  return (
    <Component
      underlayColor={
        reverse ? color : underlayColor || color
      }
      style={[
        (reverse || raised) && styles.button,
        (reverse || raised) && {
          borderRadius: size + 4,
          height: size * 2 + 4,
          width: size * 2 + 4
        },
        raised && styles.raised,
        {
          backgroundColor: reverse ? color : raised ? 'white' : 'transparent',
          alignItems: 'center',
          justifyContent: 'center'},
        containerStyle && containerStyle
      ]}
      onPress={onPress}
      {...attributes}
    >
      <Icon
        style={[
          {backgroundColor: 'transparent'},
          iconStyle && iconStyle
        ]}
        size={size}
        name={name}
        color={reverse ? reverseColor : color} />
    </Component>
  );
};
 
Icon.propTypes = {
  type: PropTypes.string,
  name: PropTypes.string,
  size: PropTypes.number,
  color: PropTypes.string,
  component: PropTypes.element,
  underlayColor: PropTypes.string,
  reverse: PropTypes.bool,
  raised: PropTypes.bool,
  containerStyle: View.propTypes.style,
  iconStyle: View.propTypes.style,
  onPress: PropTypes.func,
  reverseColor: PropTypes.string,
};
 
Icon.defaultProps = {
  underlayColor: 'white',
  reverse: false,
  raised: false,
  size: 24,
  color: 'black',
  reverseColor: 'white'
};
 
const styles = StyleSheet.create({
  button: {
    margin: 7
  },
  raised: {
    ...Platform.select({
      ios: {
        shadowColor: 'rgba(0,0,0, .4)',
        shadowOffset: {height: 1, width: 1},
        shadowOpacity: 1,
        shadowRadius: 1
      },
      android: {
        elevation: 2
      }
    })
  }
});
 
export default Icon;