@momo-kits/avatar 0.0.60-rc.6 → 0.0.61-alpha.8

package/Avatar.js

@@ -16,7 +16,8 @@ import {
     IconSource,
     Image,
     ScaleSize,
-} from '@momo-kits/core';
+    Radius,
+} from '@momo-kits/core-v2';
 
 export const AvatarQuality = {
     low: 'low',
@@ -30,18 +31,6 @@ export const AvatarSize = {
     medium: 'medium',
     large: 'large',
     giant: 'giant',
-    size8: 'size8',
-    size24: 'size24',
-    size36: 'size36',
-    size44: 'size44',
-    size48: 'size48',
-    size52: 'size52',
-    size56: 'size56',
-    size64: 'size64',
-    size72: 'size72',
-    size80: 'size80',
-    size88: 'size88',
-    size96: 'size96',
 };
 
 const COLORS = [
@@ -118,7 +107,7 @@ const styles = StyleSheet.create({
 });
 
 const subIconSize = (width) => ({
-    tiny: {
+    giant: {
         width: 8,
         height: 8,
         borderRadius: 4,
@@ -138,83 +127,6 @@ const subIconSize = (width) => ({
         height: 16,
         borderRadius: 8,
     },
-    size8: {
-        width: 8,
-        height: 8,
-        borderRadius: 4,
-    },
-    size24: {
-        width: 10,
-        height: 10,
-        borderRadius: 5,
-    },
-    size36: {
-        width: 10,
-        height: 10,
-        borderRadius: 5,
-    },
-    size44: {
-        width: 14,
-        height: 14,
-        borderRadius: 7,
-    },
-    size48: {
-        width: 14,
-        height: 14,
-        borderRadius: 7,
-    },
-    size52: {
-        width: 16,
-        height: 16,
-        borderRadius: 8,
-    },
-    size56: {
-        width: 16,
-        height: 16,
-        borderRadius: 8,
-    },
-    size64: {
-        width: 16,
-        height: 16,
-        borderRadius: 8,
-        top: -2,
-        left: -2,
-    },
-    size72: {
-        width: 18,
-        height: 18,
-        borderRadius: 9,
-        top: -3,
-        left: -3,
-    },
-    size80: {
-        width: 18,
-        height: 18,
-        borderRadius: 9,
-        top: -3,
-        left: -3,
-    },
-    size88: {
-        width: 18,
-        height: 18,
-        borderRadius: 9,
-        top: -4,
-        left: -4,
-    },
-    size96: {
-        width: 20,
-        height: 20,
-        borderRadius: 10,
-        top: -4,
-        left: -4,
-    },
-    giant: {
-        top: -5,
-        left: -5,
-        width: 24,
-        height: 24,
-        borderRadius: 12,
-    },
 });
 
 const avatarSize = (width) => ({
@@ -234,95 +146,35 @@ const avatarSize = (width) => ({
         borderRadius: 20,
     },
     large: {
-        width: 60,
-        height: 60,
-        borderRadius: 30,
-    },
-    giant: {
-        width: 120,
-        height: 120,
-        borderRadius: 60,
-    },
-    size8: {
-        width: 8,
-        height: 8,
-        borderRadius: 4,
-    },
-    size24: {
-        width: 24,
-        height: 24,
-        borderRadius: 12,
-    },
-    size36: {
-        width: 36,
-        height: 36,
-        borderRadius: 18,
-    },
-    size44: {
-        width: 44,
-        height: 44,
-        borderRadius: 22,
-    },
-    size48: {
-        width: 48,
-        height: 48,
-        borderRadius: 24,
-    },
-    size52: {
-        width: 52,
-        height: 52,
-        borderRadius: 26,
-    },
-    size56: {
         width: 56,
         height: 56,
         borderRadius: 28,
     },
-    size64: {
-        width: 64,
-        height: 64,
-        borderRadius: 32,
-    },
-    size72: {
+    giant: {
         width: 72,
         height: 72,
         borderRadius: 36,
     },
-    size80: {
-        width: 80,
-        height: 80,
-        borderRadius: 40,
-    },
-    size88: {
-        width: 88,
-        height: 88,
-        borderRadius: 44,
-    },
-    size96: {
-        width: 96,
-        height: 96,
-        borderRadius: 48,
-    },
 });
 
 const shortName = (width) => ({
     tiny: {
-        fontSize: ScaleSize(5, width),
+        fontSize: ScaleSize(8, width),
+        lineHeight: 16,
     },
     small: {
-        fontSize: ScaleSize(11, width),
+        fontSize: ScaleSize(14, width),
+        lineHeight: 20,
     },
     medium: {
-        fontSize: ScaleSize(15, width),
-    },
-    middle: {
-        fontSize: ScaleSize(16, width),
+        fontSize: ScaleSize(18, width),
+        lineHeight: 22,
     },
     large: {
-        fontSize: ScaleSize(20, width),
+        fontSize: ScaleSize(25, width),
     },
     giant: {
-        fontSize: ScaleSize(25, width),
+        fontSize: ScaleSize(32, width),
     },
 });
 
@@ -411,9 +263,14 @@ export default class Avatar extends Component {
                     style={[
                         styles.shortNameView,
                         avatarStyle,
-                        { backgroundColor: color },
+                        {
+                            backgroundColor: color,
+                        },
+                        this.props.shape === 'square' && {
+                            borderRadius: Radius.XS,
+                        },
                     ]}>
-                    <Text.H4
+                    <Text
                         style={[
                             this.props.custom
                                 ? styles.shortNameTextCustom
@@ -421,7 +278,7 @@ export default class Avatar extends Component {
                             shortNameStyle,
                         ]}>
                         {shortedName}
-                    </Text.H4>
+                    </Text>
                 </View>
             );
         }
@@ -607,6 +464,7 @@ export default class Avatar extends Component {
             cached,
             extraPropsImage,
             quality,
+            shape,
         } = this.props;
         const { hideSource } = this.state;
         const avatarStyle = this.mapStyleFromSize(size);
@@ -665,9 +523,8 @@ export default class Avatar extends Component {
 
 Avatar.propTypes = {
     name: PropTypes.string,
-    resizeMode: PropTypes.string,
     quality: PropTypes.oneOf(['low', 'medium', 'high']),
-    size: PropTypes.any,
+    size: PropTypes.oneOf(['tiny', 'small', 'medium', 'large', 'giant']),
     source: PropTypes.oneOfType([
         PropTypes.shape({ uri: PropTypes.string }),
         PropTypes.number,
@@ -682,11 +539,9 @@ Avatar.propTypes = {
     style: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
     onPress: PropTypes.func,
     loading: PropTypes.bool,
-    cached: PropTypes.bool,
-    scaleSize: PropTypes.bool,
     extraPropsImage: PropTypes.object,
-    number: PropTypes.string,
     custom: PropTypes.bool,
+    shape: PropTypes.oneOf(['circle', 'square']),
 };
 
 Avatar.defaultProps = {
@@ -696,4 +551,5 @@ Avatar.defaultProps = {
     quality: 'medium',
     size: 'small',
     custom: false,
+    shape: 'circle',
 };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/avatar",
-    "version": "0.0.60-rc.6",
+    "version": "0.0.61-alpha.8",
     "private": false,
     "main": "index.js",
     "dependencies": {},