@momo-kits/avatar 0.81.18-beta.1 → 0.81.19
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/index.tsx +19 -5
- package/package.json +2 -2
- package/styles.ts +1 -10
- package/types.ts +1 -1
package/index.tsx
CHANGED
|
@@ -27,7 +27,6 @@ const Avatar: FC<AvatarProps> = ({
|
|
|
27
27
|
}) => {
|
|
28
28
|
const {theme} = useContext(ApplicationContext);
|
|
29
29
|
const borderRadius = rounded ? size / 2 : Spacing.XS;
|
|
30
|
-
const iconStyle = size <= 32 ? styles.smallIcon : styles.icon;
|
|
31
30
|
|
|
32
31
|
const getShortName = (name: string) => {
|
|
33
32
|
const words = name.split(' ');
|
|
@@ -36,10 +35,10 @@ const Avatar: FC<AvatarProps> = ({
|
|
|
36
35
|
};
|
|
37
36
|
|
|
38
37
|
const getIconPosition = () => {
|
|
39
|
-
let position =
|
|
38
|
+
let position = 2;
|
|
40
39
|
|
|
41
40
|
if (size === 56) {
|
|
42
|
-
position =
|
|
41
|
+
position = 0;
|
|
43
42
|
}
|
|
44
43
|
|
|
45
44
|
if (size < 56) {
|
|
@@ -64,6 +63,9 @@ const Avatar: FC<AvatarProps> = ({
|
|
|
64
63
|
case 40: {
|
|
65
64
|
return 24;
|
|
66
65
|
}
|
|
66
|
+
case 48: {
|
|
67
|
+
return 32;
|
|
68
|
+
}
|
|
67
69
|
case 56: {
|
|
68
70
|
return 32;
|
|
69
71
|
}
|
|
@@ -80,6 +82,10 @@ const Avatar: FC<AvatarProps> = ({
|
|
|
80
82
|
const iconSize = getIconSize();
|
|
81
83
|
const shouldShowIconTop = showIconMomo && rounded;
|
|
82
84
|
const shouldShowIconBottom = showIconSupport && rounded;
|
|
85
|
+
const supportIconSize = {
|
|
86
|
+
width: getIconSize() / 2,
|
|
87
|
+
height: getIconSize() / 2,
|
|
88
|
+
};
|
|
83
89
|
|
|
84
90
|
return (
|
|
85
91
|
<View
|
|
@@ -96,7 +102,11 @@ const Avatar: FC<AvatarProps> = ({
|
|
|
96
102
|
{shouldShowIconTop && (
|
|
97
103
|
<Image
|
|
98
104
|
source={{uri: logo}}
|
|
99
|
-
style={[
|
|
105
|
+
style={[
|
|
106
|
+
styles.icon,
|
|
107
|
+
supportIconSize,
|
|
108
|
+
{top: iconPosition, right: iconPosition},
|
|
109
|
+
]}
|
|
100
110
|
/>
|
|
101
111
|
)}
|
|
102
112
|
{!!name && !image && (
|
|
@@ -121,7 +131,11 @@ const Avatar: FC<AvatarProps> = ({
|
|
|
121
131
|
{shouldShowIconBottom && (
|
|
122
132
|
<Image
|
|
123
133
|
source={{uri: iconSupport}}
|
|
124
|
-
style={[
|
|
134
|
+
style={[
|
|
135
|
+
styles.icon,
|
|
136
|
+
supportIconSize,
|
|
137
|
+
{bottom: iconPosition, right: iconPosition},
|
|
138
|
+
]}
|
|
125
139
|
/>
|
|
126
140
|
)}
|
|
127
141
|
</View>
|
package/package.json
CHANGED
package/styles.ts
CHANGED
|
@@ -2,19 +2,10 @@ import {StyleSheet} from 'react-native';
|
|
|
2
2
|
import {Radius} from '@momo-kits/foundation';
|
|
3
3
|
export default StyleSheet.create({
|
|
4
4
|
icon: {
|
|
5
|
-
width: 12,
|
|
6
|
-
height: 12,
|
|
7
|
-
borderRadius: Radius.S,
|
|
8
|
-
position: 'absolute',
|
|
9
|
-
overflow: 'hidden',
|
|
10
|
-
},
|
|
11
|
-
smallIcon: {
|
|
12
|
-
width: 8,
|
|
13
|
-
height: 8,
|
|
14
|
-
borderRadius: Radius.XS,
|
|
15
5
|
position: 'absolute',
|
|
16
6
|
overflow: 'hidden',
|
|
17
7
|
},
|
|
8
|
+
|
|
18
9
|
container: {
|
|
19
10
|
alignItems: 'center',
|
|
20
11
|
justifyContent: 'center',
|
package/types.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Predefined set of sizes for the avatar. The numbers represent pixel values.
|
|
3
3
|
*/
|
|
4
|
-
type AvatarSize = 24 | 32 | 40 | 56 | 72;
|
|
4
|
+
type AvatarSize = 24 | 32 | 40 | 48 | 56 | 72;
|
|
5
5
|
|
|
6
6
|
/**
|
|
7
7
|
* Props for the Avatar component, which displays an image or icon representing a user.
|