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 112 113 114 115 116 117 118 119 120 121 122 | 1x 1x 1x 1x 1x | import React from 'react';
import { defaultProps } from './props/defaultProps';
import { propTypes } from './props/propTypes';
import Avatar from '@zohodesk/components/lib/Avatar/Avatar';
import AvatarTeam from '@zohodesk/components/lib/AvatarTeam/AvatarTeam';
import style from './AvatarWithTeam.module.css';
export default class AvatarWithTeam extends React.Component {
render() {
let {
name,
size,
src,
teamName,
isTeam,
needTitle = false,
initial,
title,
palette,
textPalette,
customTextClass,
teamClassName,
borderOnActive,
customProps,
dataSelectorId,
teamBorderActive
} = this.props;
let {
AvatarWithTeamProps = {},
Avatar1Props = {},
AvatarTeam1Props = {},
Avatar2Props = {},
AvatarTeam2Props = {}
} = customProps;
return (
<span
className={`${style.container} `}
data-id='avatarWithTeamId'
data-test-id='avatarWithTeamId'
data-selector-id={dataSelectorId}
{...AvatarWithTeamProps}
>
{isTeam && teamName ? (
<Avatar
name={name}
src={src}
size={size}
initial={initial}
needTitle={needTitle}
palette={palette}
textPalette={textPalette}
customClass={customTextClass}
borderOnActive={borderOnActive}
{...Avatar1Props}
/>
) : isTeam ? (
<AvatarTeam
name={name}
src={src}
size={size}
needTitle={needTitle}
title={needTitle ? title : undefined}
palette={palette}
textPalette={textPalette}
customClass={{
customAvatar: customTextClass
}}
borderOnActive={borderOnActive}
{...AvatarTeam1Props}
/>
) : (
<Avatar
name={name}
src={src}
size={size}
initial={initial}
needTitle={needTitle}
palette={palette}
textPalette={textPalette}
customClass={customTextClass}
borderOnActive={borderOnActive}
{...Avatar2Props}
/>
)}
{teamName ? (
<span
className={`${style.teamAvatar} ${teamClassName} `}
data-id='teamNameTestId'
data-test-id='teamNameTestId'
data-title={needTitle ? title : undefined}
>
<AvatarTeam
name={teamName}
size='small'
palette={palette}
textPalette={textPalette}
isFilled
needTitle={needTitle}
customClass={{
customAvatar: customTextClass
}}
borderOnActive={teamBorderActive}
{...AvatarTeam2Props}
/>
</span>
) : null}
</span>
);
}
}
AvatarWithTeam.defaultProps = defaultProps;
AvatarWithTeam.propTypes = propTypes;
// if (__DOCS__) {
// AvatarWithTeam.docs = {
// componentGroup: 'Avatar Group'
// };
// }
|