Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 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 | 65x 65x 65x 65x 3x 3x | /**** Libraries ****/
import React from 'react';
import { defaultProps } from './props/defaultProps';
import { propTypes } from './props/propTypes';
/**** Components ****/
import Avatar from '@zohodesk/components/lib/Avatar/Avatar';
import AvatarIcon from '../AvatarIcon/AvatarIcon';
import { Icon } from '@zohodesk/icons';
import style from './AvatarUser.module.css';
/**** Methods ****/
export default class AvatarUser extends React.Component {
render() {
let {
src,
alternateSrc,
name,
size,
onClick,
onDelete,
title,
isPaid,
isPortal,
isLocked,
dataId,
dataSelectorId,
needTitle,
needDelete,
initial,
palette,
textPalette,
customTextClass,
iconName,
iconSize,
iconClass,
iconColor,
i18nKeys,
customProps
} = this.props;
let { AvatarUserProps = {}, AvatarIconProps = {}, AvatarProps = {} } = customProps;
let { paidTitle = 'Paid User', portalTitle = 'End User', lockTitle = 'Locked' } = i18nKeys;
return (
<div
className={`${style.container} ${style[size]}`}
data-id={dataId || name || iconName}
data-test-id={dataId || name || iconName}
data-selector-id={dataSelectorId}
{...AvatarUserProps}
>
{iconName ? (
<AvatarIcon
name={iconName}
iconSize={iconSize}
size={size}
iconClass={iconClass}
dataId={iconName}
iconColor={iconColor}
title={title}
{...AvatarIconProps}
/>
) : (
<Avatar
src={src}
name={name}
initial={initial}
title={title}
onClick={onClick}
size={size}
needTitle={needTitle}
palette={palette}
textPalette={textPalette}
customClass={customTextClass}
alternateSrc={alternateSrc}
{...AvatarProps}
/>
)}
{isPaid ? (
<span data-title={paidTitle} className={style.paid} data-id='paidUser' data-test-id='paidUser'>
<Icon name='ZD-paiduser' />
</span>
) : null}
{isPortal ? (
<span data-title={portalTitle} className={style.portal} data-id='portalUser' data-test-id='portalUser'>
<Icon name='ZD-globe1' />
</span>
) : null}
{isLocked ? (
<span data-title={lockTitle} className={style.lock} data-id='locked' data-test-id='locked'>
<Icon name='ZD-lock01' />
</span>
) : null}
{needDelete ? (
<span className={style.delete} data-id='dltContactPhoto' data-test-id='dltContactPhoto' onClick={onDelete}>
<Icon name='ZD-delete2' size='15' />
</span>
) : null}
</div>
);
}
}
AvatarUser.propTypes = propTypes;
AvatarUser.defaultProps = defaultProps;
// if (__DOCS__) {
// AvatarUser.docs = {
// componentGroup: 'Avatar Group'
// };
// }
|