Fix/Avatar - Refactor to enable dynamic prop change

src/components/avatar/index.js

@@ -2,7 +2,7 @@ import _ from 'lodash';
 import PropTypes from 'prop-types';
 import React from 'react';
 import {StyleSheet, ViewPropTypes, TouchableOpacity} from 'react-native';
-import {Colors, BorderRadiuses} from '../../style';
+import {Colors} from '../../style';
 import {PureBaseComponent} from '../../commons';
 import Badge, {BADGE_SIZES} from '../badge';
 import View from '../view';
@@ -155,6 +155,39 @@ export default class Avatar extends PureBaseComponent {
     this.styles = createStyles(this.props);
   }
 
+  getContainerStyle() {
+    const {size} = this.props;
+
+    return {
+      width: size,
+      height: size,
+      alignItems: 'center',
+      justifyContent: 'center',
+      borderRadius: size / 2,
+    };
+  }
+
+  getInitialsContainer() {
+    const {size} = this.props;
+    return {
+      ...StyleSheet.absoluteFillObject,
+      alignItems: 'center',
+      justifyContent: 'center',
+      borderRadius: size / 2,
+    };
+  }
+
+  getRibbonStyle() {
+    const {size} = this.props;
+
+    return {
+      position: 'absolute',
+      top: '10%',
+      left: size / 1.7,
+      borderRadius: size / 2,
+    };
+  }
+
   getStatusBadgeColor(status) {
     switch (status) {
       case Avatar.modes.AWAY:
@@ -222,9 +255,9 @@ export default class Avatar extends PureBaseComponent {
     const {ribbonLabel, ribbonStyle, ribbonLabelStyle, customRibbon} = this.props;
     if (ribbonLabel) {
       return customRibbon ? (
-        <View style={this.styles.customRibbon}>{customRibbon}</View>
+        <View style={this.getRibbonStyle()}>{customRibbon}</View>
       ) : (
-        <View style={[this.styles.ribbon, ribbonStyle]}>
+        <View style={[this.getRibbonStyle(), this.styles.ribbon, ribbonStyle]}>
           <Text numberOfLines={1} text100 white style={[ribbonLabelStyle]}>
             {ribbonLabel}
           </Text>
@@ -246,17 +279,18 @@ export default class Avatar extends PureBaseComponent {
     } = this.props;
     const hasImage = !_.isUndefined(imageSource);
     const ImageContainer = animate ? AnimatedImage : Image;
+
     if (hasImage) {
       return (
         <ImageContainer
           animate={animate}
-          style={[this.styles.image, imageStyle]}
+          style={[this.getContainerStyle(), StyleSheet.absoluteFillObject, imageStyle]}
           source={imageSource}
           onLoadStart={onImageLoadStart}
           onLoadEnd={onImageLoadEnd}
           onError={onImageLoadError}
           testID={`${testID}.image`}
-          containerStyle={this.styles.container}
+          containerStyle={this.getContainerStyle()}
           {...imageProps}
         />
       );
@@ -273,16 +307,20 @@ export default class Avatar extends PureBaseComponent {
       onPress,
       containerStyle,
       children,
+      size,
       testID,
     } = this.props;
     const Container = onPress ? TouchableOpacity : View;
     const hasImage = !_.isUndefined(imageSource);
+    const fontSizeToImageSizeRatio = 0.32;
+    const fontSize = size * fontSizeToImageSizeRatio;
+
     return (
-      <Container style={[this.styles.container, containerStyle]} testID={testID} onPress={onPress}>
+      <Container style={[this.getContainerStyle(), containerStyle]} testID={testID} onPress={onPress}>
         <View
-          style={[this.styles.initialsContainer, {backgroundColor}, hasImage && this.styles.initialsContainerWithInset]}
+          style={[this.getInitialsContainer(), {backgroundColor}, hasImage && this.styles.initialsContainerWithInset]}
         >
-          <Text numberOfLines={1} style={[this.styles.initials, {color}]}>
+          <Text numberOfLines={1} style={[{fontSize}, this.styles.initials, {color}]}>
             {label}
           </Text>
         </View>
@@ -295,68 +333,23 @@ export default class Avatar extends PureBaseComponent {
   }
 }
 
-function createStyles({size, labelColor}) {
-  const borderRadius = size / 2;
-  const fontSizeToImageSizeRatio = 0.32;
-  const ribbonPosition = {
-    position: 'absolute',
-    top: '10%',
-    left: size / 1.7,
-  };
+function createStyles({labelColor}) {
   const styles = StyleSheet.create({
-    container: {
-      alignItems: 'center',
-      justifyContent: 'center',
-      width: size,
-      height: size,
-      borderRadius,
-    },
-    initialsContainer: {
-      ...StyleSheet.absoluteFillObject,
-      alignItems: 'center',
-      justifyContent: 'center',
-      borderRadius,
-    },
     initialsContainerWithInset: {
       top: 1,
       right: 1,
       bottom: 1,
       left: 1,
     },
-    /*eslint-disable*/
     initials: {
-      fontSize: size * fontSizeToImageSizeRatio,
       color: labelColor,
       backgroundColor: 'transparent',
     },
-    /*eslint-enable*/
-    defaultImage: {
-      width: size,
-      height: size,
-      borderRadius,
-    },
-    image: {
-      ...StyleSheet.absoluteFillObject,
-      position: 'absolute',
-      width: size,
-      height: size,
-      borderRadius,
-    },
-    fixAbsolutePosition: {
-      position: undefined,
-      left: undefined,
-      bottom: undefined,
-    },
     ribbon: {
-      ...ribbonPosition,
       backgroundColor: Colors.blue30,
-      borderRadius: BorderRadiuses.br100,
       paddingHorizontal: 6,
       paddingVertical: 3,
     },
-    customRibbon: {
-      ...ribbonPosition,
-    },
   });
 
   return styles;