@grafana/ui/dist/cjs/components/UsersIndicator/UsersIndicator.cjs

Grafana Components Library

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var jsxRuntime = require('react/jsx-runtime');
var css = require('@emotion/css');
var i18n = require('@grafana/i18n');
var ThemeContext = require('../../themes/ThemeContext.cjs');
var UserIcon = require('./UserIcon.cjs');

"use strict";
const UsersIndicator = ({ users, onClick, limit = 4 }) => {
  const styles = ThemeContext.useStyles2(getStyles, limit);
  if (!users.length) {
    return null;
  }
  limit = limit > 0 ? limit : 4;
  const limitReached = users.length > limit;
  const extraUsers = users.length - limit;
  const tooManyUsers = extraUsers > 99;
  return /* @__PURE__ */ jsxRuntime.jsxs(
    "div",
    {
      className: styles.container,
      "aria-label": i18n.t("grafana-ui.users-indicator.container-label", "Users indicator container"),
      children: [
        users.slice(0, limitReached ? limit : limit + 1).map((userView, idx, arr) => /* @__PURE__ */ jsxRuntime.jsx(UserIcon.UserIcon, { userView }, userView.user.name)),
        limitReached && /* @__PURE__ */ jsxRuntime.jsx(UserIcon.UserIcon, { onClick, userView: { user: { name: "Extra users" } }, showTooltip: false, children: tooManyUsers ? (
          // eslint-disable-next-line @grafana/i18n/no-untranslated-strings
          "..."
        ) : `+${extraUsers}` })
      ]
    }
  );
};
const getStyles = (theme, limit) => {
  return {
    container: css.css({
      display: "flex",
      justifyContent: "center",
      marginLeft: theme.spacing(1),
      isolation: "isolate",
      "& > *": {
        marginLeft: theme.spacing(-1),
        // Overlay the elements a bit on top of each other
        // Ensure overlaying user icons are stacked correctly with z-index on each element
        ...Object.fromEntries(
          Array.from({ length: limit }).map((_, idx) => [
            `&:nth-of-type(${idx + 1})`,
            {
              zIndex: limit - idx
            }
          ])
        )
      }
    }),
    dots: css.css({
      marginBottom: "3px"
    })
  };
};

exports.UsersIndicator = UsersIndicator;
//# sourceMappingURL=UsersIndicator.cjs.map