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 | 26x 26x 26x 26x 7x 7x | import React from 'react';
import { defaultProps } from './props/defaultProps';
import { propTypes } from './props/propTypes';
import { Icon } from '@zohodesk/icons';
import { Container } from '@zohodesk/components/lib/Layout';
import AvatarSize from '@zohodesk/components/lib/Provider/AvatarSize';
import style from './AvatarIcon.module.css';
export default class AvatarIcon extends React.Component {
render() {
let {
name,
size,
iconSize,
iconClass,
iconColor,
onClick,
palette,
dataId,
className,
isIconBold,
title,
borderOnActive,
borderOnHover,
customProps,
dataSelectorId
} = this.props;
let { AvatarIconProps = {} } = customProps;
let border = borderOnHover || onClick;
return (
<Container
className={`${style.container} ${borderOnActive ? style.borderOnActive : border ? style.borderOnHover : ''
} ${AvatarSize(size)} ${style[palette] ? style[palette] : ''} ${className}`}
onClick={onClick}
dataId={dataId}
data-title={title}
isInline
align='both'
isCover={false}
dataSelectorId={dataSelectorId}
{...AvatarIconProps}
>
<Icon
name={name}
size={iconSize}
iconClass={` ${iconClass} ${style.avatar_align_center} ${style.iconColor} ${iconColor ? ` ${style[`icon_${iconColor}`] ? style[`icon_${iconColor}`] : ''}` : ''} `}
isBold={isIconBold}
/>
</Container>
);
}
}
AvatarIcon.defaultProps = defaultProps;
AvatarIcon.propTypes = propTypes;
// if (__DOCS__) {
// AvatarIcon.docs = { componentGroup: 'Avatar Group' };
// }
|