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

Grafana Components Library

'use strict';

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

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

"use strict";
const formatViewed = (dateString) => {
  const date = data.dateTime(dateString);
  const diffHours = date.diff(data.dateTime(), "hours", false);
  return `Active last ${(Math.floor(-diffHours / 24) + 1) * 24}h`;
};
const getUserInitials = (name) => {
  var _a, _b;
  if (!name) {
    return "";
  }
  const [first, last] = name.split(" ");
  return `${(_a = first == null ? void 0 : first[0]) != null ? _a : ""}${(_b = last == null ? void 0 : last[0]) != null ? _b : ""}`.toUpperCase();
};
const UserIcon = ({
  userView,
  className,
  children,
  onClick,
  showTooltip = true
}) => {
  const { user, lastActiveAt } = userView;
  const hasActive = lastActiveAt !== void 0 && lastActiveAt !== null;
  const isActive = hasActive && data.dateTime(lastActiveAt).diff(data.dateTime(), "minutes", true) >= -15;
  const theme = ThemeContext.useTheme2();
  const styles = React.useMemo(() => getStyles(theme, isActive), [theme, isActive]);
  const content = children ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: css.cx(styles.content, styles.textContent), children }) : user.avatarUrl ? /* @__PURE__ */ jsxRuntime.jsx("img", { className: styles.content, src: user.avatarUrl, alt: `${user.name} avatar` }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: css.cx(styles.content, styles.textContent), children: getUserInitials(user.name) });
  const wrapper = onClick ? /* @__PURE__ */ jsxRuntime.jsx(
    "button",
    {
      type: "button",
      onClick,
      className: css.cx(styles.container, styles.hover, styles.pointer, className),
      "aria-label": i18n.t("grafana-ui.user-icon.label", "{{name}} icon", { name: user.name }),
      children: content
    }
  ) : (
    // a11y: don't render an interactive button if icon is not clickable
    /* @__PURE__ */ jsxRuntime.jsx(
      "div",
      {
        "aria-label": i18n.t("grafana-ui.user-icon.label", "{{name}} icon", { name: user.name }),
        className: css.cx(styles.container, className),
        children: content
      }
    )
  );
  if (showTooltip) {
    const tooltip = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.tooltipContainer, "data-testid": "user-icon-tooltip", children: [
      /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.tooltipName, children: user.name }),
      hasActive && /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.tooltipDate, children: isActive ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.dotContainer, children: [
        /* @__PURE__ */ jsxRuntime.jsx("span", { children: /* @__PURE__ */ jsxRuntime.jsx(i18n.Trans, { i18nKey: "grafana-ui.user-icon.active-text", children: "Active last 15m" }) }),
        /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.dot })
      ] }) : formatViewed(lastActiveAt) })
    ] });
    return /* @__PURE__ */ jsxRuntime.jsx(Tooltip.Tooltip, { content: tooltip, children: wrapper });
  } else {
    return wrapper;
  }
};
const getIconBorder = (color) => {
  return `0 0 0 1px ${color}`;
};
const getStyles = (theme, isActive) => {
  const shadowColor = isActive ? theme.colors.primary.main : theme.colors.border.medium;
  const shadowHoverColor = isActive ? theme.colors.primary.text : theme.colors.border.strong;
  return {
    container: css.css({
      padding: 0,
      width: "30px",
      height: "30px",
      background: "none",
      border: "none",
      borderRadius: theme.shape.radius.circle,
      cursor: "default",
      "& > *": {
        borderRadius: theme.shape.radius.circle
      }
    }),
    content: css.css({
      lineHeight: "24px",
      maxWidth: "100%",
      border: `3px ${theme.colors.background.primary} solid`,
      boxShadow: getIconBorder(shadowColor),
      backgroundClip: "padding-box"
    }),
    textContent: css.css({
      background: theme.colors.background.primary,
      padding: 0,
      color: theme.colors.text.secondary,
      textAlign: "center",
      fontSize: theme.typography.size.sm,
      "&:focus": {
        boxShadow: getIconBorder(shadowColor)
      }
    }),
    tooltipContainer: css.css({
      textAlign: "center",
      padding: theme.spacing(0, 1)
    }),
    tooltipName: css.css({
      fontWeight: theme.typography.fontWeightBold
    }),
    tooltipDate: css.css({
      fontWeight: theme.typography.fontWeightRegular
    }),
    dotContainer: css.css({
      display: "flex",
      alignItems: "center"
    }),
    dot: css.css({
      height: "6px",
      width: "6px",
      backgroundColor: theme.colors.primary.main,
      borderRadius: theme.shape.radius.circle,
      display: "inline-block",
      marginLeft: theme.spacing(1)
    }),
    pointer: css.css({
      cursor: "pointer"
    }),
    hover: css.css({
      "&:hover > *": {
        boxShadow: getIconBorder(shadowHoverColor)
      }
    })
  };
};

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