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 | 1x 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 { Icon } from '@zohodesk/icons';
import style from './AvatarThread.module.css';
export default class AvatarThread extends React.Component {
render() {
let {
src,
name,
size,
iconColor,
iconName,
iconSize,
borderPalette,
onClick,
title,
iconTitle,
onIconClick,
showOnHover,
dataId,
initial,
needBorder,
needBackground,
palette,
textPalette,
customTextClass,
needTitle,
customProps,
iconClass,
getCustomThread,
dataSelectorId
} = this.props;
let { AvatarThreadProps = {}, AvatarProps = {} } = customProps;
let hoverEffect = showOnHover ? style.hover : '';
return (
<div
className={`${style.container} ${onClick ? style.pointer : ''} ${hoverEffect}`}
data-selector-id={dataSelectorId}
{...AvatarThreadProps}
>
<Avatar
initial={initial}
src={src}
name={name}
title={title}
size={size}
onClick={onClick}
dataId={dataId}
palette={palette}
textPalette={textPalette}
customClass={customTextClass}
needTitle={needTitle}
{...AvatarProps}
/>
{(iconName || getCustomThread) && (
<span
className={`${style.thread} ${onIconClick ? style.pointer : style.defaultCursor} ${
needBackground ? style.threadBg : ''
} ${style[`thread_${size}_pos`]} ${needBorder ? style[`border_${borderPalette}`] : ''}`}
data-title={iconTitle}
data-id={iconTitle === 'Remove Follower' && 'removeFollower'}
data-test-id={iconTitle === 'Remove Follower' && 'removeFollower'}
onClick={onIconClick}
>
{iconName && (
<span className={style.icon}>
<Icon
name={iconName}
size={iconSize}
iconClass={`${iconClass}
${style[`text_${iconColor}`] ? style[`text_${iconColor}`] : iconColor}`}
/>
</span>
)}
{getCustomThread && getCustomThread()}
</span>
)}
</div>
);
}
}
AvatarThread.defaultProps = defaultProps;
AvatarThread.propTypes = propTypes;
// if (__DOCS__) {
// AvatarThread.docs = {
// componentGroup: 'Avatar Group'
// };
// }
|