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 | 2x 10x 10x 16x 4x 12x 10x 2x 2x 2x 18x 2x 2x 2x 34x 34x 2x 2x 20x 20x 20x 2x 2x 2x 7x 2x 7x 2x | import React, { Fragment } from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import { Avatar, AvatarIcon, AvatarInitials } from '../avatar';
export const AvatarGroupContent = props => {
const { isPrimary, isInverse, type } = props;
const getContentType = (type, isPrimary) => {
switch (type) {
case 'icon':
return <AvatarGroupedIcon />;
case 'user-initials':
return <AvatarGroupedUserInitials isInverse={isInverse} />;
case 'image':
default:
return <AvatarImage imgType={isPrimary ? '1' : '2'} />;
}
};
return (
<Fragment>
<AvatarGrouped isPrimary isInverse={isInverse}>
{getContentType(type, isPrimary)}
</AvatarGrouped>
<AvatarGrouped isInverse={isInverse}>
{getContentType(type, false)}
</AvatarGrouped>
</Fragment>
);
};
AvatarGroupContent.defaultProps = {
type: 'image'
};
AvatarGroupContent.propTypes = {
type: PropTypes.oneOf(['image', 'icon', 'user-initials']),
isPrimary: PropTypes.bool,
isInverse: PropTypes.bool
};
export const AvatarGroup = props => (
<span
className={classNames('slds-avatar-group', {
[`slds-avatar-group_${props.size}`]: props.size
})}
>
{props.children}
</span>
);
AvatarGroup.defaultProps = {
children: <AvatarGroupContent />
};
AvatarGroup.propTypes = {
children: PropTypes.node.isRequired,
size: PropTypes.oneOf(['x-small', 'small', 'medium', 'large'])
};
export const AvatarGrouped = props => {
const { children, isPrimary, isInverse } = props;
return (
<Avatar isGrouped isPrimary={isPrimary} isInverse={isInverse}>
{children}
</Avatar>
);
};
AvatarGrouped.propTypes = {
children: PropTypes.node.isRequired,
isPrimary: PropTypes.bool,
isInverse: PropTypes.bool
};
export const AvatarImage = props => {
const { imgType } = props;
const assistiveText = `Person ${imgType} name`;
return (
<img
alt={assistiveText}
src={`/assets/images/avatar${imgType}.jpg`}
title={assistiveText}
/>
);
};
AvatarImage.defaultProps = {
imgType: '1'
};
AvatarImage.propTypes = {
imgType: PropTypes.oneOf(['1', '2']).isRequired
};
export const AvatarGroupedIcon = props => (
<AvatarIcon symbol="user" isGrouped />
);
export const AvatarGroupedUserInitials = props => (
<AvatarInitials
isGrouped
isInverse={props.isInverse}
title="Person name"
initials="WW"
/>
);
AvatarGroupedUserInitials.propTypes = {
isInverse: PropTypes.bool
};
|