-
Notifications
You must be signed in to change notification settings - Fork 209
/
Avatar.js
80 lines (65 loc) · 1.88 KB
/
Avatar.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
import React, { Component } from 'react';
import './Avatar.css';
const classNames = require('classnames');
const loadedAvatars = [];
export class Avatar extends Component {
constructor(props) {
super(props);
this.requestImage = this.requestImage.bind(this);
}
isLoaded(src) {
return loadedAvatars.indexOf(src) !== -1;
}
requestImage(src) {
var self = this;
this.loading = true;
var loaded = () => {
loadedAvatars.push(src);
delete self.loading;
self.setState({});
};
var img = document.createElement('img');
img.src = src;
img.onload = loaded;
img.onerror = loaded;
}
render() {
var src = this.props.src;
var isLazyImage = false;
if (this.props.lazyLoadingImage) {
isLazyImage = true;
if (!this.isLoaded(src)) {
src = this.props.lazyLoadingImage; // lazy image
if (!this.loading) {
this.requestImage(this.props.src);
}
}
else {
isLazyImage = false;
}
}
return (
<div className={classNames('rce-avatar-container', this.props.type, this.props.size, this.props.className)}>
<img
alt={this.props.alt}
src={src}
onError={this.props.onError}
className={classNames(
'rce-avatar',
{'rce-avatar-lazy': isLazyImage},
)} />
{this.props.sideElement}
</div>
);
}
}
Avatar.defaultProps = {
type: 'default',
size: 'default',
src: '',
alt: '',
sideElement: null,
lazyLoadingImage: undefined,
onError: () => void(0),
};
export default Avatar;