avatar v2- added support for icons, images & initials

flyingcircle · Feb 27, 2017 · 1af8c93 · 1af8c93
1 parent c90b874
commit 1af8c93
Showing 1 changed file with 95 additions and 54 deletions.
diff --git a/src/avatar/Avatar.js b/src/avatar/Avatar.js
@@ -1,36 +1,99 @@
 import React, { PropTypes } from 'react';
 import {
+  Text,
   View,
   Image,
   StyleSheet,
   TouchableOpacity,
 } from 'react-native';
 
+import Icon from 'react-native-vector-icons/FontAwesome'
 import Text from '../text/Text'
-import normalize from '../helpers/normalizeText'
 
-const Avatar = ({
-  component,
-  width,
-  height,
-  onPress,
-  onLongPress,
-  containerStyle,
-  source,
-  avatarStyle,
-  roundAvatar,
-  title,
-  titleStyle,
-  overlayContainerStyle,
-  activeOpacity,
-}) => {
-  if (!width && !height) {
+const Avatar = (props) => {
+  const {
+    component,
+    onPress,
+    onLongPress,
+    containerStyle,
+    icon,
+    iconStyle,
+    source,
+    small,
+    medium,
+    large,
+    xlarge,
+    avatarStyle,
+    rounded,
+    title,
+    titleStyle,
+    overlayContainerStyle,
+    activeOpacity,
+  } = props;
+
+  let {
+    width,
+    height,
+  } = props;
+
+  let titleSize = 17
+
+  if(small) {
+    width = 34
+    height = 34
+    titleSize = 17
+  } else if (medium) {
+    width = 50
+    height = 50
+    titleSize = 25
+  } else if (large) {
+    width = 75
+    height = 75
+    titleSize = 37.5
+  } else if (xlarge) {
+    width = 150
+    height = 150
+    titleSize = 75
+  } else if(!width && !height) {
     width = 34
     height = 34
   } else if (!width) {
     width = height
+    titleSize = width/2
   } else if (!height) {
     height = width
+    titleSize = height/2
+  }
+
+  let Component = onPress || onLongPress ? TouchableOpacity : View
+  if (component) {
+    Component = component
+  }
+
+  const renderContent = () => {
+    if (source) {
+      return (
+        <Image
+          style={[ styles.avatar, rounded && { borderRadius: width/2 }, avatarStyle && avatarStyle]}
+          source={source}
+        />
+      )
+    } else if (title) {
+      return (
+        <Text
+          style={[ styles.title, titleStyle && titleStyle ]}>
+          {title}
+        </Text>
+      )
+    } else if (icon) {
+      return (
+        <Icon
+          style={[ styles.icon, iconStyle && iconStyle ]}
+          color={icon.color}
+          name={icon.type && icon.type}
+          size={icon.size} />
+      )
+    }
   }
 
   const styles = StyleSheet.create({
@@ -52,62 +115,40 @@ const Avatar = ({
       backgroundColor: 'rgba(0,0,0,0.2)',
       alignSelf: 'stretch',
       justifyContent: 'center',
-      paddingLeft: 25,
-      paddingRight: 25,
-      paddingTop: 45,
-      paddingBottom: 40,
       position: 'absolute',
       top: 0,
       left: 0,
       right: 0,
       bottom: 0,
+      width: width,
+      height: height
     },
     title: {
       color: '#ffffff',
-      fontSize: normalize(15),
+      fontSize: titleSize,
       backgroundColor: 'rgba(0,0,0,0)',
-      marginBottom: 15,
       textAlign: 'center',
     },
+    icon: {
+      fontSize: 20,
+      color: 'red',
+    }
   });
 
-  let Component = onPress || onLongPress ? TouchableOpacity : View
-  if (component) {
-    Component = component
-  }
-
   return (
     <Component
       onPress={onPress}
       onLongPress={onLongPress}
       activeOpacity={activeOpacity}
       style={[styles.container, containerStyle && containerStyle]}>
-      <Image
+      <View
         style={[
-          styles.avatar,
-          roundAvatar && { borderRadius: width/2 },
-          avatarStyle && avatarStyle]}
-        source={source}>
-        <View
-          style={[
-            styles.overlayContainer,
-            overlayContainerStyle && overlayContainerStyle,
-          ]}
-        >
-          {(title && (typeof title === 'string')) ? (
-            <Text
-              h4
-              style={[
-                styles.title,
-                titleStyle && titleStyle
-              ]}>{title}</Text>
-          ) : (
-            <View>
-              {title}
-            </View>
-          )}
-        </View>
-      </Image>
+          styles.overlayContainer, rounded && { borderRadius: width/2 },
+          overlayContainerStyle && overlayContainerStyle,
+        ]}
+      >
+      {renderContent()}
+      </View>
     </Component>
   );
 };
@@ -121,7 +162,7 @@ Avatar.propTypes = {
   containerStyle: PropTypes.any,
   source: PropTypes.object,
   avatarStyle: PropTypes.any,
-  roundAvatar: PropTypes.bool,
+  rounded: PropTypes.bool,
   title: PropTypes.string,
   titleStyle: PropTypes.any,
   overlayContainerStyle: PropTypes.any,