@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}\n\n/**\n * A component that displays a set of user icons indicating which users are currently active. If there are too many users to display all the icons, it will collapse the icons into a single icon with a number indicating the number of additional users.\n *\n * https://developers.grafana.com/ui/latest/index.html?path=/docs/iconography-usersindicator--docs\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":";;;;;;;AAwBO,MAAM,iBAAiB,CAAC,EAAE,OAAO,OAAA,EAAS,KAAA,GAAQ,GAAE,KAA2B;AACpF,EAAA,MAAM,MAAA,GAAS,WAAW,SAAS,CAAA;AACnC,EAAA,IAAI,CAAC,MAAM,MAAA,EAAQ;AACjB,IAAA,OAAO,IAAA;AAAA,EACT;AAEA,EAAA,KAAA,GAAQ,KAAA,GAAQ,IAAI,KAAA,GAAQ,CAAA;AAC5B,EAAA,MAAM,YAAA,GAAe,MAAM,MAAA,GAAS,KAAA;AACpC,EAAA,MAAM,UAAA,GAAa,MAAM,MAAA,GAAS,KAAA;AAElC,EAAA,MAAM,eAAe,UAAA,GAAa,EAAA;AAElC,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAW,MAAA,CAAO,SAAA;AAAA,MAClB,YAAA,EAAY,CAAA,CAAE,4CAAA,EAA8C,2BAA2B,CAAA;AAAA,MAEtF,QAAA,EAAA;AAAA,QAAA,YAAA,oBACC,GAAA,CAAC,QAAA,EAAA,EAAS,OAAA,EAAkB,QAAA,EAAU,EAAE,IAAA,EAAM,EAAE,IAAA,EAAM,aAAA,EAAc,EAAG,YAAA,EAAc,EAAA,EAAG,EAAG,aAAa,KAAA,EACrG,QAAA,EAAA,YAAA;AAAA;AAAA,UAEG;AAAA,YACA,CAAA,CAAA,EAAI,UAAU,CAAA,CAAA,EACpB,CAAA;AAAA,QAED,MACE,KAAA,CAAM,CAAA,EAAG,eAAe,KAAA,GAAQ,KAAA,GAAQ,CAAC,CAAA,CACzC,OAAA,GACA,GAAA,CAAI,CAAC,6BACJ,GAAA,CAAC,QAAA,EAAA,EAAkC,YAApB,QAAA,CAAS,IAAA,CAAK,IAA0B,CACxD;AAAA;AAAA;AAAA,GACL;AAEJ;AAEA,MAAM,SAAA,GAAY,CAAC,KAAA,KAAyB;AAC1C,EAAA,OAAO;AAAA,IACL,WAAW,GAAA,CAAI;AAAA,MACb,OAAA,EAAS,MAAA;AAAA,MACT,cAAA,EAAgB,QAAA;AAAA,MAChB,aAAA,EAAe,aAAA;AAAA,MACf,UAAA,EAAY,KAAA,CAAM,OAAA,CAAQ,CAAC,CAAA;AAAA,MAE3B,YAAA,EAAc;AAAA,QACZ,UAAA,EAAY,KAAA,CAAM,OAAA,CAAQ,CAAA,CAAE;AAAA;AAAA;AAC9B,KACD,CAAA;AAAA,IACD,MAAM,GAAA,CAAI;AAAA,MACR,YAAA,EAAc;AAAA,KACf;AAAA,GACH;AACF,CAAA;;;;"}