# All files / components/AvatarGroup index.js

100% Statements 14/14
100% Branches 2/2
100% Functions 4/4
100% Lines 14/14

    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

    1x

    1x

    1x

    5x

    5x

    2x

    5x

    5x

    12x

    6x

    12x

    1x

    1x

    1x

     import React from 'react';
    import PropTypes from 'prop-types';
    import styled from 'styled-components';
    import { Flex } from 'grid-styled';

    import Avatar from '../Avatar';
    import { PersonType } from '../../utils/types';
    import { avatarGroupItem } from '../../utils/style';

    const StyledTeamContainer = styled.div`
      width: 35px;
      height: 35px;
      position: relative;
      float: left;
    `;
    StyledTeamContainer.displayName = 'StyledTeamContainer';

    const AvatarGroup = (props) => {
      const {
        avatars, size, type, withStatus, groupType, xDistance, yDistance,
      } = props;

      const StyledAvatarGroupContainer = styled(Flex)`
        position: relative;
        left: 0;
        margin-right: ${() => groupType === 'line' ? avatars.length * 10 : 0}px;
      `;
      StyledAvatarGroupContainer.displayName = 'StyledAvatarGroupContainer';

      return (
        <StyledAvatarGroupContainer className={props.className}>
          <StyledTeamContainer>
            {avatars.map((person, index) => {
              const StyledAvatarContainer = styled.div`
                  position: absolute;
                  ${() => avatarGroupItem(index, avatars.length, groupType, xDistance, yDistance)}
                  width: 100%;
                  height: 100%;
              `;
              return (
                <StyledAvatarContainer key={person.id}>
                  <Avatar
                    size={size}
                    src={person.avatar}
                    status={person.status}
                    withStatus={withStatus}
                    type={type}
                  />
                </StyledAvatarContainer>
              );
            })
            }
          </StyledTeamContainer>
        </StyledAvatarGroupContainer>
      );
    };

    AvatarGroup.defaultProps = {
      avatars: [],
      size: 'xsmall',
      xDistance: 12,
      yDistance: 12,
      type: 'circle',
      groupType: 'circle',
      withStatus: false,
      className: 'LT-AvatarGroup-Container',
    };

    AvatarGroup.propTypes = {
      /**
       * avatars: List of PersonType to show as avatars
       */
      avatars: PropTypes.arrayOf(PersonType),
      /**
       * How each avatar is showed. Valid types: default, circle, rounded(border radius 5px), flexible
       */
      type: PropTypes.oneOf(['default', 'circle', 'rounded', 'flexible']),
      /**
       * How avatars images are showed. Valid types: line, circle
       */
      groupType: PropTypes.oneOf(['line', 'circle']),
      /**
       * image size. default (25px), xsmall(30px), small(35px), medium(40px), large(45px), xlarge (55px)
       */
      size: PropTypes.string,
      /**
       * image xDistance. Distance on the x-axis between avatars
       */
      xDistance: PropTypes.number,
      /**
       * image yDistance. Distance on the y-axis between avatars
       */
      yDistance: PropTypes.number,
      /**
       * withStatus choose wheter or not show an status indicator.
       */
      withStatus: PropTypes.bool,
      /**
       * Extra className to style the component
       */
      className: PropTypes.string,
    };

    AvatarGroup.displayName = 'AvatarGroup';

    export default AvatarGroup;