@grafana/ui/dist/esm/components/UsersIndicator/UsersIndicator.mjs.map

Grafana Components Library

{"version":3,"file":"UsersIndicator.mjs","sources":["../../../../src/components/UsersIndicator/UsersIndicator.tsx"],"sourcesContent":["import { css } from '@emotion/css';\n\nimport { GrafanaTheme2 } from '@grafana/data';\nimport { t } from '@grafana/i18n';\n\nimport { useStyles2 } from '../../themes/ThemeContext';\n\nimport { UserIcon } from './UserIcon';\nimport { UserView } from './types';\n\nexport interface UsersIndicatorProps {\n  /** An object that contains the user's details and 'lastActiveAt' status */\n  users: UserView[];\n  /** A limit of how many user icons to show before collapsing them and showing a number of users instead */\n  limit?: number;\n  /** onClick handler for the user number indicator */\n  onClick?: () => void;\n}\nexport const UsersIndicator = ({ users, onClick, limit = 4 }: UsersIndicatorProps) => {\n  const styles = useStyles2(getStyles);\n  if (!users.length) {\n    return null;\n  }\n  // Make sure limit is never negative\n  limit = limit > 0 ? limit : 4;\n  const limitReached = users.length > limit;\n  const extraUsers = users.length - limit;\n  // Prevent breaking the layout when there's more than 99 users\n  const tooManyUsers = extraUsers > 99;\n\n  return (\n    <div\n      className={styles.container}\n      aria-label={t('grafana-ui.users-indicator.container-label', 'Users indicator container')}\n    >\n      {limitReached && (\n        <UserIcon onClick={onClick} userView={{ user: { name: 'Extra users' }, lastActiveAt: '' }} showTooltip={false}>\n          {tooManyUsers\n            ? // eslint-disable-next-line @grafana/i18n/no-untranslated-strings\n              '...'\n            : `+${extraUsers}`}\n        </UserIcon>\n      )}\n      {users\n        .slice(0, limitReached ? limit : limit + 1)\n        .reverse()\n        .map((userView) => (\n          <UserIcon key={userView.user.name} userView={userView} />\n        ))}\n    </div>\n  );\n};\n\nconst getStyles = (theme: GrafanaTheme2) => {\n  return {\n    container: css({\n      display: 'flex',\n      justifyContent: 'center',\n      flexDirection: 'row-reverse',\n      marginLeft: theme.spacing(1),\n\n      '& > button': {\n        marginLeft: theme.spacing(-1), // Overlay the elements a bit on top of each other\n      },\n    }),\n    dots: css({\n      marginBottom: '3px',\n    }),\n  };\n};\n"],"names":[],"mappings":";;;;;;AAkBO,MAAM,iBAAiB,CAAC,EAAE,OAAO,OAAS,EAAA,KAAA,GAAQ,GAA6B,KAAA;AACpF,EAAM,MAAA,MAAA,GAAS,WAAW,SAAS,CAAA;AACnC,EAAI,IAAA,CAAC,MAAM,MAAQ,EAAA;AACjB,IAAO,OAAA,IAAA;AAAA;AAGT,EAAQ,KAAA,GAAA,KAAA,GAAQ,IAAI,KAAQ,GAAA,CAAA;AAC5B,EAAM,MAAA,YAAA,GAAe,MAAM,MAAS,GAAA,KAAA;AACpC,EAAM,MAAA,UAAA,GAAa,MAAM,MAAS,GAAA,KAAA;AAElC,EAAA,MAAM,eAAe,UAAa,GAAA,EAAA;AAElC,EACE,uBAAA,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAW,MAAO,CAAA,SAAA;AAAA,MAClB,YAAA,EAAY,CAAE,CAAA,4CAAA,EAA8C,2BAA2B,CAAA;AAAA,MAEtF,QAAA,EAAA;AAAA,QAAA,YAAA,oBACE,GAAA,CAAA,QAAA,EAAA,EAAS,OAAkB,EAAA,QAAA,EAAU,EAAE,IAAM,EAAA,EAAE,IAAM,EAAA,aAAA,EAAiB,EAAA,YAAA,EAAc,EAAG,EAAA,EAAG,aAAa,KACrG,EAAA,QAAA,EAAA,YAAA;AAAA;AAAA,UAEG;AAAA,YACA,CAAA,CAAA,EAAI,UAAU,CACpB,CAAA,EAAA,CAAA;AAAA,QAED,MACE,KAAM,CAAA,CAAA,EAAG,eAAe,KAAQ,GAAA,KAAA,GAAQ,CAAC,CACzC,CAAA,OAAA,GACA,GAAI,CAAA,CAAC,6BACH,GAAA,CAAA,QAAA,EAAA,EAAkC,YAApB,QAAS,CAAA,IAAA,CAAK,IAA0B,CACxD;AAAA;AAAA;AAAA,GACL;AAEJ;AAEA,MAAM,SAAA,GAAY,CAAC,KAAyB,KAAA;AAC1C,EAAO,OAAA;AAAA,IACL,WAAW,GAAI,CAAA;AAAA,MACb,OAAS,EAAA,MAAA;AAAA,MACT,cAAgB,EAAA,QAAA;AAAA,MAChB,aAAe,EAAA,aAAA;AAAA,MACf,UAAA,EAAY,KAAM,CAAA,OAAA,CAAQ,CAAC,CAAA;AAAA,MAE3B,YAAc,EAAA;AAAA,QACZ,UAAA,EAAY,KAAM,CAAA,OAAA,CAAQ,CAAE,CAAA;AAAA;AAAA;AAC9B,KACD,CAAA;AAAA,IACD,MAAM,GAAI,CAAA;AAAA,MACR,YAAc,EAAA;AAAA,KACf;AAAA,GACH;AACF,CAAA;;;;"}