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

Grafana Components Library

{"version":3,"file":"UserIcon.mjs","sources":["../../../../src/components/UsersIndicator/UserIcon.tsx"],"sourcesContent":["import { css, cx } from '@emotion/css';\nimport { useMemo, PropsWithChildren } from 'react';\n\nimport { dateTime, DateTimeInput, GrafanaTheme2 } from '@grafana/data';\nimport { t, Trans } from '@grafana/i18n';\n\nimport { useTheme2 } from '../../themes/ThemeContext';\nimport { Tooltip } from '../Tooltip/Tooltip';\n\nimport { UserView } from './types';\n\nexport interface UserIconProps {\n  /** An object that contains the user's details and 'lastActiveAt' status */\n  userView: UserView;\n  /** A boolean value that determines whether the tooltip should be shown or not */\n  showTooltip?: boolean;\n  /** An optional class name to be added to the icon element */\n  className?: string;\n  /** onClick handler to be called when the icon is clicked */\n  onClick?: () => void;\n}\n\n/**\n * A helper function that takes in a dateString parameter\n * and returns the user's last viewed date in a specific format.\n */\nconst formatViewed = (dateString: DateTimeInput): string => {\n  const date = dateTime(dateString);\n  const diffHours = date.diff(dateTime(), 'hours', false);\n  return `Active last ${(Math.floor(-diffHours / 24) + 1) * 24}h`;\n};\n\n/**\n * Output the initials of the first and last name (if given), capitalized and concatenated together.\n * If name is not provided, an empty string is returned.\n * @param {string} [name] The name to extract initials from.\n * @returns {string} The uppercase initials of the first and last name.\n * @example\n * // Returns 'JD'\n * getUserInitials('John Doe');\n * // Returns 'A'\n * getUserInitials('Alice');\n * // Returns ''\n * getUserInitials();\n */\nconst getUserInitials = (name?: string) => {\n  if (!name) {\n    return '';\n  }\n  const [first, last] = name.split(' ');\n  return `${first?.[0] ?? ''}${last?.[0] ?? ''}`.toUpperCase();\n};\n\nexport const UserIcon = ({\n  userView,\n  className,\n  children,\n  onClick,\n  showTooltip = true,\n}: PropsWithChildren<UserIconProps>) => {\n  const { user, lastActiveAt } = userView;\n  const isActive = dateTime(lastActiveAt).diff(dateTime(), 'minutes', true) >= -15;\n  const theme = useTheme2();\n  const styles = useMemo(() => getStyles(theme, isActive), [theme, isActive]);\n  const content = (\n    <button\n      type={'button'}\n      onClick={onClick}\n      className={cx(styles.container, onClick && styles.pointer, className)}\n      aria-label={t('grafana-ui.user-icon.label', '{{name}} icon', { name: user.name })}\n    >\n      {children ? (\n        <div className={cx(styles.content, styles.textContent)}>{children}</div>\n      ) : user.avatarUrl ? (\n        <img className={styles.content} src={user.avatarUrl} alt={`${user.name} avatar`} />\n      ) : (\n        <div className={cx(styles.content, styles.textContent)}>{getUserInitials(user.name)}</div>\n      )}\n    </button>\n  );\n\n  if (showTooltip) {\n    const tooltip = (\n      <div className={styles.tooltipContainer}>\n        <div className={styles.tooltipName}>{user.name}</div>\n        <div className={styles.tooltipDate}>\n          {isActive ? (\n            <div className={styles.dotContainer}>\n              <span>\n                <Trans i18nKey=\"grafana-ui.user-icon.active-text\">Active last 15m</Trans>\n              </span>\n              <span className={styles.dot}></span>\n            </div>\n          ) : (\n            formatViewed(lastActiveAt)\n          )}\n        </div>\n      </div>\n    );\n\n    return <Tooltip content={tooltip}>{content}</Tooltip>;\n  } else {\n    return content;\n  }\n};\n\nconst getIconBorder = (color: string): string => {\n  return `0 0 0 1px ${color}`;\n};\n\nexport const getStyles = (theme: GrafanaTheme2, isActive: boolean) => {\n  const shadowColor = isActive ? theme.colors.primary.main : theme.colors.border.medium;\n  const shadowHoverColor = isActive ? theme.colors.primary.text : theme.colors.border.strong;\n\n  return {\n    container: css({\n      padding: 0,\n      width: '30px',\n      height: '30px',\n      background: 'none',\n      border: 'none',\n      borderRadius: theme.shape.radius.circle,\n      '& > *': {\n        borderRadius: theme.shape.radius.circle,\n      },\n    }),\n    content: css({\n      lineHeight: '24px',\n      maxWidth: '100%',\n      border: `3px ${theme.colors.background.primary} solid`,\n      boxShadow: getIconBorder(shadowColor),\n      backgroundClip: 'padding-box',\n      '&:hover': {\n        boxShadow: getIconBorder(shadowHoverColor),\n      },\n    }),\n    textContent: css({\n      background: theme.colors.background.primary,\n      padding: 0,\n      color: theme.colors.text.secondary,\n      textAlign: 'center',\n      fontSize: theme.typography.size.sm,\n      '&:focus': {\n        boxShadow: getIconBorder(shadowColor),\n      },\n    }),\n    tooltipContainer: css({\n      textAlign: 'center',\n      padding: theme.spacing(0, 1),\n    }),\n    tooltipName: css({\n      fontWeight: theme.typography.fontWeightBold,\n    }),\n    tooltipDate: css({\n      fontWeight: theme.typography.fontWeightRegular,\n    }),\n    dotContainer: css({\n      display: 'flex',\n      alignItems: 'center',\n    }),\n    dot: css({\n      height: '6px',\n      width: '6px',\n      backgroundColor: theme.colors.primary.main,\n      borderRadius: theme.shape.radius.circle,\n      display: 'inline-block',\n      marginLeft: theme.spacing(1),\n    }),\n    pointer: css({\n      cursor: 'pointer',\n    }),\n  };\n};\n"],"names":[],"mappings":"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"}