@momo-kits/avatar 0.0.61-beta.19 → 0.0.61-beta.2

package/Avatar.js

@@ -16,8 +16,7 @@ import {
     IconSource,
     Image,
     ScaleSize,
-    Radius,
-} from '@momo-kits/core-v2';
+} from '@momo-kits/core';
 
 export const AvatarQuality = {
     low: 'low',
@@ -31,6 +30,18 @@ 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 = [
@@ -107,7 +118,7 @@ const styles = StyleSheet.create({
 });
 
 const subIconSize = (width) => ({
-    giant: {
+    tiny: {
         width: 8,
         height: 8,
         borderRadius: 4,
@@ -127,6 +138,83 @@ 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) => ({
@@ -146,35 +234,95 @@ 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,
     },
-    giant: {
+    size64: {
+        width: 64,
+        height: 64,
+        borderRadius: 32,
+    },
+    size72: {
         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(8, width),
-        lineHeight: 16,
+        fontSize: ScaleSize(5, width),
     },
     small: {
-        fontSize: ScaleSize(14, width),
-        lineHeight: 20,
+        fontSize: ScaleSize(11, width),
     },
     medium: {
-        fontSize: ScaleSize(18, width),
-        lineHeight: 22,
+        fontSize: ScaleSize(15, width),
+    },
+    middle: {
+        fontSize: ScaleSize(16, width),
     },
     large: {
-        fontSize: ScaleSize(25, width),
+        fontSize: ScaleSize(20, width),
     },
     giant: {
-        fontSize: ScaleSize(32, width),
+        fontSize: ScaleSize(25, width),
     },
 });
 
@@ -263,14 +411,9 @@ export default class Avatar extends Component {
                     style={[
                         styles.shortNameView,
                         avatarStyle,
-                        {
-                            backgroundColor: color,
-                        },
-                        this.props.shape === 'square' && {
-                            borderRadius: Radius.XS,
-                        },
+                        { backgroundColor: color },
                     ]}>
-                    <Text
+                    <Text.H4
                         style={[
                             this.props.custom
                                 ? styles.shortNameTextCustom
@@ -278,7 +421,7 @@ export default class Avatar extends Component {
                             shortNameStyle,
                         ]}>
                         {shortedName}
-                    </Text>
+                    </Text.H4>
                 </View>
             );
         }
@@ -464,7 +607,6 @@ export default class Avatar extends Component {
             cached,
             extraPropsImage,
             quality,
-            shape,
         } = this.props;
         const { hideSource } = this.state;
         const avatarStyle = this.mapStyleFromSize(size);
@@ -523,8 +665,9 @@ export default class Avatar extends Component {
 
 Avatar.propTypes = {
     name: PropTypes.string,
+    resizeMode: PropTypes.string,
     quality: PropTypes.oneOf(['low', 'medium', 'high']),
-    size: PropTypes.oneOf(['tiny', 'small', 'medium', 'large', 'giant']),
+    size: PropTypes.any,
     source: PropTypes.oneOfType([
         PropTypes.shape({ uri: PropTypes.string }),
         PropTypes.number,
@@ -539,9 +682,11 @@ 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 = {
@@ -551,5 +696,4 @@ Avatar.defaultProps = {
     quality: 'medium',
     size: 'small',
     custom: false,
-    shape: 'circle',
 };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/avatar",
-    "version": "0.0.61-beta.19",
+    "version": "0.0.61-beta.2",
     "private": false,
     "main": "index.js",
     "dependencies": {},