12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758 |
- import {css} from '@emotion/react';
- import styled from '@emotion/styled';
- import ActorAvatar from 'sentry/components/avatar/actorAvatar';
- import BaseAvatar from 'sentry/components/avatar/baseAvatar';
- import {Actor} from 'sentry/types';
- type Props = {
- owners: Actor[];
- } & BaseAvatar['props'] &
- Omit<React.ComponentProps<typeof ActorAvatar>, 'actor' | 'hasTooltip'>;
- // Constrain the number of visible suggestions
- const MAX_SUGGESTIONS = 3;
- const SuggestedAvatarStack = ({owners, tooltip, tooltipOptions, ...props}: Props) => {
- const [firstSuggestion, ...suggestedOwners] = owners;
- const numAvatars = Math.min(owners.length, MAX_SUGGESTIONS);
- return (
- <AvatarStack data-test-id="suggested-avatar-stack">
- {suggestedOwners.slice(0, numAvatars - 1).map((owner, i) => (
- <Avatar
- {...props}
- suggested
- round={firstSuggestion.type === 'user'}
- actor={owner}
- key={i}
- index={i}
- hasTooltip={false}
- />
- ))}
- <Avatar
- {...props}
- suggested
- actor={firstSuggestion}
- index={numAvatars - 1}
- tooltip={tooltip}
- tooltipOptions={{...tooltipOptions, skipWrapper: true}}
- />
- </AvatarStack>
- );
- };
- const AvatarStack = styled('div')`
- display: flex;
- align-content: center;
- flex-direction: row-reverse;
- `;
- const translateStyles = (props: {index: number}) => css`
- transform: translateX(${60 * props.index}%);
- `;
- const Avatar = styled(ActorAvatar)<{index: number}>`
- ${translateStyles}
- `;
- export default SuggestedAvatarStack;
|