@momo-kits/avatar 0.0.10 → 0.0.18
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/Avatar.js +8 -9
- package/Avatar.web.js +34 -0
- package/package.json +1 -1
package/Avatar.js
CHANGED
|
@@ -317,7 +317,7 @@ const shortName = (width) => ({
|
|
|
317
317
|
export default class Avatar extends Component {
|
|
318
318
|
constructor(props) {
|
|
319
319
|
super(props);
|
|
320
|
-
this.color = this.getAvatarColor();
|
|
320
|
+
this.color = this.getAvatarColor(props.name);
|
|
321
321
|
this.state = {
|
|
322
322
|
hideSource: false,
|
|
323
323
|
ownUpdate: false,
|
|
@@ -518,14 +518,13 @@ export default class Avatar extends Component {
|
|
|
518
518
|
);
|
|
519
519
|
}
|
|
520
520
|
|
|
521
|
-
getAvatarColor() {
|
|
522
|
-
const
|
|
523
|
-
|
|
524
|
-
|
|
525
|
-
|
|
526
|
-
|
|
527
|
-
|
|
528
|
-
return '#d5d6d6';
|
|
521
|
+
getAvatarColor(name) {
|
|
522
|
+
const shortName = this.getContactShortName(name)
|
|
523
|
+
if (!shortName) return "#d5d6d6"
|
|
524
|
+
const firstLetter = shortName[0].charCodeAt(0)
|
|
525
|
+
let colorIndex = Number(firstLetter) % 26
|
|
526
|
+
if (colorIndex > 19) colorIndex = 25 - colorIndex
|
|
527
|
+
return COLORS[colorIndex]
|
|
529
528
|
}
|
|
530
529
|
|
|
531
530
|
onPress = () => {
|
package/Avatar.web.js
CHANGED
|
@@ -17,6 +17,29 @@ export const AvatarQuality = {
|
|
|
17
17
|
high: 'high',
|
|
18
18
|
};
|
|
19
19
|
|
|
20
|
+
const COLORS = [
|
|
21
|
+
'#3683f3',
|
|
22
|
+
'#ea63af',
|
|
23
|
+
'#f94889',
|
|
24
|
+
'#82b6da',
|
|
25
|
+
'#2fc093',
|
|
26
|
+
'#7b4a41',
|
|
27
|
+
'#ff97bc',
|
|
28
|
+
'#4130d7',
|
|
29
|
+
'#c3c3c3',
|
|
30
|
+
'#f7ae2f',
|
|
31
|
+
'#b04595',
|
|
32
|
+
'#57b748',
|
|
33
|
+
'#ff8900',
|
|
34
|
+
'#7841bf',
|
|
35
|
+
'#be3f3e',
|
|
36
|
+
'#c51515',
|
|
37
|
+
'#8e6472',
|
|
38
|
+
'#fed27d',
|
|
39
|
+
'#ff6f5d',
|
|
40
|
+
'#05b8ae',
|
|
41
|
+
];
|
|
42
|
+
|
|
20
43
|
export const AvatarSize = {
|
|
21
44
|
tiny: 'tiny',
|
|
22
45
|
small: 'small',
|
|
@@ -293,6 +316,7 @@ const shortName = (width) => ({
|
|
|
293
316
|
export default class Avatar extends Component {
|
|
294
317
|
constructor(props) {
|
|
295
318
|
super(props);
|
|
319
|
+
this.color = this.getAvatarColor(props.name);
|
|
296
320
|
this.state = {
|
|
297
321
|
hideSource: false,
|
|
298
322
|
ownUpdate: false,
|
|
@@ -440,6 +464,16 @@ export default class Avatar extends Component {
|
|
|
440
464
|
};
|
|
441
465
|
}
|
|
442
466
|
|
|
467
|
+
getAvatarColor(name) {
|
|
468
|
+
const shortName = this.getContactShortName(name)
|
|
469
|
+
if (!shortName) return "#d5d6d6"
|
|
470
|
+
const firstLetter = shortName[0].charCodeAt(0)
|
|
471
|
+
let colorIndex = Number(firstLetter) % 26
|
|
472
|
+
if (colorIndex > 19) colorIndex = 25 - colorIndex
|
|
473
|
+
return COLORS[colorIndex]
|
|
474
|
+
}
|
|
475
|
+
|
|
476
|
+
|
|
443
477
|
onLoadSourceError = () => {
|
|
444
478
|
this.setState({ hideSource: true, ownUpdate: true });
|
|
445
479
|
}
|