participantList.tsx 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154
  1. import {Fragment, useState} from 'react';
  2. import styled from '@emotion/styled';
  3. import {AnimatePresence, motion} from 'framer-motion';
  4. import Avatar from 'sentry/components/avatar';
  5. import TeamAvatar from 'sentry/components/avatar/teamAvatar';
  6. import {Button} from 'sentry/components/button';
  7. import {IconChevron} from 'sentry/icons';
  8. import {t, tn} from 'sentry/locale';
  9. import {space} from 'sentry/styles/space';
  10. import type {Team, User} from 'sentry/types';
  11. interface ParticipantScrollboxProps {
  12. teams: Team[];
  13. users: User[];
  14. }
  15. function ParticipantScrollbox({users, teams}: ParticipantScrollboxProps) {
  16. if (!users.length && !teams.length) {
  17. return null;
  18. }
  19. const showHeaders = users.length > 0 && teams.length > 0;
  20. return (
  21. <ParticipantListWrapper>
  22. {showHeaders && <ListTitle>{t('Teams (%s)', teams.length)}</ListTitle>}
  23. {teams.map(team => (
  24. <UserRow key={team.id}>
  25. <TeamAvatar team={team} size={28} />
  26. <div>
  27. {`#${team.slug}`}
  28. <SubText>{tn('%s member', '%s members', team.memberCount)}</SubText>
  29. </div>
  30. </UserRow>
  31. ))}
  32. {showHeaders && <ListTitle>{t('Individuals (%s)', users.length)}</ListTitle>}
  33. {users.map(user => (
  34. <UserRow key={user.id}>
  35. <Avatar user={user} size={28} />
  36. <div>
  37. {user.name}
  38. <SubText>{user.email}</SubText>
  39. </div>
  40. </UserRow>
  41. ))}
  42. </ParticipantListWrapper>
  43. );
  44. }
  45. interface ParticipantListProps {
  46. children: React.ReactNode;
  47. description: string;
  48. users: User[];
  49. teams?: Team[];
  50. }
  51. export function ParticipantList({teams = [], users, children}: ParticipantListProps) {
  52. const [isExpanded, setIsExpanded] = useState(false);
  53. return (
  54. <Fragment>
  55. <ParticipantWrapper onClick={() => setIsExpanded(!isExpanded)} role="button">
  56. {children}
  57. <Button
  58. borderless
  59. size="zero"
  60. icon={
  61. <IconChevron
  62. direction={isExpanded ? 'up' : 'down'}
  63. size="xs"
  64. color="gray300"
  65. />
  66. }
  67. aria-label={t('%s Participants', isExpanded ? t('Collapse') : t('Expand'))}
  68. onClick={() => setIsExpanded(!isExpanded)}
  69. />
  70. </ParticipantWrapper>
  71. <AnimatePresence>
  72. {isExpanded && (
  73. <motion.div
  74. variants={{
  75. open: {height: '100%', opacity: 1, overflow: 'initial'},
  76. closed: {height: '0', opacity: 0, overflow: 'hidden'},
  77. }}
  78. initial="closed"
  79. animate="open"
  80. exit="closed"
  81. >
  82. <ParticipantScrollbox users={users} teams={teams} />
  83. </motion.div>
  84. )}
  85. </AnimatePresence>
  86. </Fragment>
  87. );
  88. }
  89. const ParticipantWrapper = styled('div')`
  90. display: flex;
  91. align-items: center;
  92. justify-content: space-between;
  93. cursor: pointer;
  94. padding-bottom: ${space(1)};
  95. & > span {
  96. cursor: pointer;
  97. }
  98. `;
  99. const ParticipantListWrapper = styled('div')`
  100. max-height: 325px;
  101. overflow-y: auto;
  102. border: 1px solid ${p => p.theme.border};
  103. border-radius: ${p => p.theme.borderRadius};
  104. & > div:not(:last-child) {
  105. border-bottom: 1px solid ${p => p.theme.border};
  106. }
  107. & > div:first-child {
  108. border-top-left-radius: ${p => p.theme.borderRadius};
  109. border-top-right-radius: ${p => p.theme.borderRadius};
  110. }
  111. & > div:last-child {
  112. border-bottom-left-radius: ${p => p.theme.borderRadius};
  113. border-bottom-right-radius: ${p => p.theme.borderRadius};
  114. }
  115. `;
  116. const ListTitle = styled('div')`
  117. display: flex;
  118. align-items: center;
  119. padding: ${space(1)} ${space(1.5)};
  120. background-color: ${p => p.theme.backgroundSecondary};
  121. color: ${p => p.theme.gray300};
  122. text-transform: uppercase;
  123. font-weight: 600;
  124. font-size: ${p => p.theme.fontSizeSmall};
  125. `;
  126. const UserRow = styled('div')`
  127. display: flex;
  128. align-items: center;
  129. padding: ${space(1)} ${space(1.5)};
  130. gap: ${space(1)};
  131. line-height: 1.2;
  132. font-size: ${p => p.theme.fontSizeSmall};
  133. `;
  134. const SubText = styled('div')`
  135. color: ${p => p.theme.subText};
  136. font-size: ${p => p.theme.fontSizeExtraSmall};
  137. `;