Sha256: 84d98741e3433d61901e587b8f599d2f76aa99931bcec12f15e8c1875764a5de
Contents?: true
Size: 1.98 KB
Versions: 38
Compression:
Stored size: 1.98 KB
Contents
/* @flow */
/*eslint-disable react/no-multi-comp, flowtype/space-before-type-colon */
import React from 'react'
import classnames from 'classnames'
import {
Avatar,
Badge,
} from '../'
import {
buildAriaProps,
buildCss,
buildDataProps,
} from '../utilities/props'
type MultipleUsersStackedProps = {
className?: String,
id?: String,
data?: object,
aria?: object,
users: Array<Object>,
}
const MultipleUsersStacked = ({
className,
id,
aria = {},
data = {},
users,
}: MultipleUsersStackedProps) => {
const moreThanTwo = users.length > 2
const onlyOne = users.length == 1
const displayCount = () => {
return moreThanTwo ? 1 : users.length
}
const ariaProps = buildAriaProps(aria)
const dataProps = buildDataProps(data)
const css = buildCss({
'pb_multiple_users_stacked_kit': true,
'single': onlyOne,
})
const firstUser = () => {
return users.slice(0, 1).map((userObject, index) => {
return (
<Avatar
{...userObject}
className="pb_multiple_users_stacked_item"
key={index}
size="xs"
/>
)
})
}
const secondUser = () => {
if (moreThanTwo === false) {
return users.slice(1, 2).map((userObject, index) => {
return (
<Avatar
{...userObject}
className="pb_multiple_users_stacked_item second_item"
key={index}
size="xs"
/>
)
})
}
}
const plusUsers = () => {
if (moreThanTwo === true) {
return (
<Badge
className="pb_multiple_users_stacked_item second_item"
rounded
text={`+${users.length - displayCount()}`}
variant="primary"
/>
)
}
}
return (
<div
{...ariaProps}
{...dataProps}
className={classnames(css, className)}
id={id}
>
{firstUser()}
{secondUser()}
{plusUsers()}
</div>
)
}
export default MultipleUsersStacked
Version data entries
38 entries across 38 versions & 1 rubygems