@grafana/ui
Version:
Grafana Components Library
61 lines (58 loc) • 1.96 kB
JavaScript
import { jsxs, jsx } from 'react/jsx-runtime';
import { css } from '@emotion/css';
import { t } from '@grafana/i18n';
import { useStyles2 } from '../../themes/ThemeContext.mjs';
import { UserIcon } from './UserIcon.mjs';
;
const UsersIndicator = ({ users, onClick, limit = 4 }) => {
const styles = 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__ */ jsxs(
"div",
{
className: styles.container,
"aria-label": t("grafana-ui.users-indicator.container-label", "Users indicator container"),
children: [
users.slice(0, limitReached ? limit : limit + 1).map((userView, idx, arr) => /* @__PURE__ */ jsx(UserIcon, { userView }, userView.user.name)),
limitReached && /* @__PURE__ */ jsx(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({
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({
marginBottom: "3px"
})
};
};
export { UsersIndicator };
//# sourceMappingURL=UsersIndicator.mjs.map