forked from mui/material-ui
/
Avatar.js
146 lines (139 loc) · 3.49 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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
import React from 'react';
import PropTypes from 'prop-types';
import clsx from 'clsx';
import withStyles from '../styles/withStyles';
export const styles = theme => ({
/* Styles applied to the root element. */
root: {
position: 'relative',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
flexShrink: 0,
width: 40,
height: 40,
fontFamily: theme.typography.fontFamily,
fontSize: theme.typography.pxToRem(20),
borderRadius: '50%',
overflow: 'hidden',
userSelect: 'none',
},
/* Styles applied to the root element if there are children and not `src` or `srcSet`. */
colorDefault: {
color: theme.palette.background.default,
backgroundColor:
theme.palette.type === 'light' ? theme.palette.grey[400] : theme.palette.grey[600],
},
/* Styles applied to the img element if either `src` or `srcSet` is defined. */
img: {
width: '100%',
height: '100%',
textAlign: 'center',
// Handle non-square image. The property isn't supported by IE 11.
objectFit: 'cover',
},
});
const Avatar = React.forwardRef(function Avatar(props, ref) {
const {
alt,
children: childrenProp,
childrenClassName: childrenClassNameProp,
classes,
className: classNameProp,
component: Component = 'div',
imgProps,
sizes,
src,
srcSet,
...other
} = props;
let children = null;
const img = src || srcSet;
if (img) {
children = (
<img
alt={alt}
src={src}
srcSet={srcSet}
sizes={sizes}
className={classes.img}
{...imgProps}
/>
);
} else if (childrenClassNameProp && React.isValidElement(childrenProp)) {
children = React.cloneElement(childrenProp, {
className: clsx(childrenClassNameProp, childrenProp.props.className),
});
} else {
children = childrenProp;
}
return (
<Component
className={clsx(
classes.root,
classes.system,
{
[classes.colorDefault]: !img,
},
classNameProp,
)}
ref={ref}
{...other}
>
{children}
</Component>
);
});
Avatar.propTypes = {
/**
* Used in combination with `src` or `srcSet` to
* provide an alt attribute for the rendered `img` element.
*/
alt: PropTypes.string,
/**
* Used to render icon or text elements inside the Avatar.
* `src` and `alt` props will not be used and no `img` will
* be rendered by default.
*
* This can be an element, or just a string.
*/
children: PropTypes.node,
/**
* @ignore
* The className of the child element.
* Used by Chip and ListItemIcon to style the Avatar icon.
*/
childrenClassName: PropTypes.string,
/**
* Override or extend the styles applied to the component.
* See [CSS API](#css) below for more details.
*/
classes: PropTypes.object.isRequired,
/**
* @ignore
*/
className: PropTypes.string,
/**
* The component used for the root node.
* Either a string to use a DOM element or a component.
*/
component: PropTypes.elementType,
/**
* Attributes applied to the `img` element if the component
* is used to display an image.
*/
imgProps: PropTypes.object,
/**
* The `sizes` attribute for the `img` element.
*/
sizes: PropTypes.string,
/**
* The `src` attribute for the `img` element.
*/
src: PropTypes.string,
/**
* The `srcSet` attribute for the `img` element.
*/
srcSet: PropTypes.string,
};
export default withStyles(styles, { name: 'MuiAvatar' })(Avatar);