Contents

/* @flow */

import React from 'react'
import classnames from 'classnames'
import { buildCss } from '../utilities/props'
import { Avatar } from '../'
import { globalProps } from '../utilities/globalProps.js'

type MultipleUsersProps = {
  className?: string,
  id?: string,
  maxDisplayedUsers?: number,
  reverse?: boolean,
  users: array<object>,
}

const MultipleUsers = (props: MultipleUsersProps) => {
  const { className, id, maxDisplayedUsers = 4, reverse = false, users } = props
  const displayCount =
    users.length > maxDisplayedUsers ? maxDisplayedUsers - 1 : users.length
  const usersToDisplay = users.slice(0, displayCount)

  return (
    <div
        className={classnames(
        className,
        buildCss('pb_multiple_users_kit', reverse && 'reverse'),
        globalProps(props)
      )}
        id={id}
    >
      {usersToDisplay.map((avatarData, index) => (
        <Avatar
            {...avatarData}
            className="pb_multiple_users_item"
            key={index}
            size="xs"
        />
      ))}

      <If condition={users.length > maxDisplayedUsers}>
        <div className="pb_multiple_users_item multiple_users_badge">
          {`+${users.length - 3}`}
        </div>
      </If>
    </div>
  )
}

export default MultipleUsers

Version data entries

3 entries across 3 versions & 1 rubygems

Version	Path
playbook_ui-6.2.1	app/pb_kits/playbook/pb_multiple_users/_multiple_users.jsx
playbook_ui-6.2.0	app/pb_kits/playbook/pb_multiple_users/_multiple_users.jsx
playbook_ui-7.0.0.pre.alpha1	app/pb_kits/playbook/pb_multiple_users/_multiple_users.jsx