-
Notifications
You must be signed in to change notification settings - Fork 1k
/
Avatar.js
60 lines (52 loc) · 1.75 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
import * as React from 'react';
import { classNames, IconUtils, ObjectUtils } from '../utils/Utils';
export const Avatar = React.forwardRef((props, ref) => {
const elementRef = React.useRef(null);
const createContent = () => {
if (props.image) {
return <img src={props.image} alt={props.imageAlt} onError={props.onImageError}></img>;
} else if (props.label) {
return <span className="p-avatar-text">{props.label}</span>;
} else if (props.icon) {
return IconUtils.getJSXIcon(props.icon, { className: 'p-avatar-icon' }, { props });
}
return null;
};
React.useImperativeHandle(ref, () => ({
props,
getElement: () => elementRef.current
}));
const otherProps = ObjectUtils.findDiffKeys(props, Avatar.defaultProps);
const containerClassName = classNames(
'p-avatar p-component',
{
'p-avatar-image': props.image != null,
'p-avatar-circle': props.shape === 'circle',
'p-avatar-lg': props.size === 'large',
'p-avatar-xl': props.size === 'xlarge',
'p-avatar-clickable': !!props.onClick
},
props.className
);
const content = props.template ? ObjectUtils.getJSXElement(props.template, props) : createContent();
return (
<div ref={elementRef} className={containerClassName} style={props.style} {...otherProps}>
{content}
{props.children}
</div>
);
});
Avatar.displayName = 'Avatar';
Avatar.defaultProps = {
__TYPE: 'Avatar',
label: null,
icon: null,
image: null,
size: 'normal',
shape: 'square',
style: null,
className: null,
template: null,
imageAlt: 'avatar',
onImageError: null
};