{"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 an optional '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\n/**\n * UserIcon renders a user icon and displays the user's name or initials along with the user's active status or last viewed date.\n *\n * https://developers.grafana.com/ui/latest/index.html?path=/docs/iconography-usericon--docs\n */\nexport const UserIcon = ({\n userView,\n className,\n children,\n onClick,\n showTooltip = true,\n}: PropsWithChildren) => {\n const { user, lastActiveAt } = userView;\n const hasActive = lastActiveAt !== undefined && lastActiveAt !== null;\n const isActive = hasActive && dateTime(lastActiveAt).diff(dateTime(), 'minutes', true) >= -15;\n const theme = useTheme2();\n const styles = useMemo(() => getStyles(theme, isActive), [theme, isActive]);\n const content = (\n \n {children ? (\n
{children}
\n ) : user.avatarUrl ? (\n {`${user.name}\n ) : (\n
{getUserInitials(user.name)}
\n )}\n \n );\n\n if (showTooltip) {\n const tooltip = (\n
\n
{user.name}
\n {hasActive && (\n
\n {isActive ? (\n
\n \n Active last 15m\n \n \n
\n ) : (\n formatViewed(lastActiveAt)\n )}\n
\n )}\n
\n );\n\n return {content};\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 cursor: 'default',\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 }),\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 hover: css({\n '&:hover > *': {\n boxShadow: getIconBorder(shadowHoverColor),\n },\n }),\n };\n};\n"],"names":[],"mappings":"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"}