@carbon/ibm-products
Version:
Carbon for IBM Products
147 lines (145 loc) • 4.78 kB
JavaScript
/**
* Copyright IBM Corp. 2020, 2026
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/
import { __toESM } from "../../_virtual/_rolldown/runtime.js";
import { require_classnames } from "../../node_modules/classnames/index.js";
import { pkg } from "../../settings.js";
import { getDevtoolsProps } from "../../global/js/utils/devtools.js";
import "../../global/js/utils/props-helper.js";
import { TooltipTrigger } from "../TooltipTrigger/TooltipTrigger.js";
import React from "react";
import PropTypes from "prop-types";
import { Tooltip, usePrefix } from "@carbon/react";
import { User } from "@carbon/react/icons";
//#region src/components/UserAvatar/UserAvatar.tsx
/**
* Copyright IBM Corp. 2024, 2025
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/
var import_classnames = /* @__PURE__ */ __toESM(require_classnames());
const blockClass = `${pkg.prefix}--user-avatar`;
const componentName = "UserAvatar";
const UserAvatar = React.forwardRef((props, ref) => {
const { backgroundColor = "order-1-cyan", className, image, imageDescription, name, renderIcon: RenderIcon, size = "md", tooltipText, tooltipAlignment = "bottom", ...rest } = props;
const carbonPrefix = usePrefix();
const iconSize = {
sm: 16,
md: 20,
lg: 24,
xl: 32
};
const formatInitials = () => {
const parts = name?.split(" ") || [];
const firstChar = parts[0].charAt(0).toUpperCase();
const secondChar = parts[0].charAt(1).toUpperCase();
if (parts.length === 1) return firstChar + secondChar;
const lastChar = parts[parts.length - 1].charAt(0).toUpperCase();
const initials = [firstChar];
if (lastChar) initials.push(lastChar);
return "".concat(...initials);
};
const getItem = () => {
const iconProps = { size: iconSize[size] };
if (image) return /* @__PURE__ */ React.createElement("img", {
alt: imageDescription,
src: image,
className: `${blockClass}__photo ${blockClass}__photo--${size}`
});
if (RenderIcon) return /* @__PURE__ */ React.createElement(RenderIcon, iconProps);
if (name) return formatInitials();
return /* @__PURE__ */ React.createElement(User, iconProps);
};
const Avatar = () => /* @__PURE__ */ React.createElement("div", {
...rest,
className: (0, import_classnames.default)(blockClass, className, `${blockClass}--${backgroundColor}`, `${blockClass}--${size}`, {}),
ref,
...getDevtoolsProps(componentName)
}, getItem());
if (tooltipText) return /* @__PURE__ */ React.createElement(Tooltip, {
align: tooltipAlignment,
label: tooltipText,
className: `${blockClass}__tooltip ${carbonPrefix}--icon-tooltip`
}, /* @__PURE__ */ React.createElement(TooltipTrigger, null, /* @__PURE__ */ React.createElement(Avatar, null)));
return /* @__PURE__ */ React.createElement(Avatar, null);
});
UserAvatar.displayName = componentName;
UserAvatar.propTypes = {
/**
* Provide the background color need to be set for UserAvatar. Background color will be set based on lighter or darker theme.
* For example: if you select order-5-purple, it will take $purple-60 for lighter theme and $purple-50 for darker theme.
*/
backgroundColor: PropTypes.oneOf([
"order-1-cyan",
"order-2-gray",
"order-3-green",
"order-4-magenta",
"order-5-purple",
"order-6-teal",
"order-7-cyan",
"order-8-gray",
"order-9-green",
"order-10-magenta",
"order-11-purple",
"order-12-teal"
]),
/**
* Provide an optional class to be applied to the containing node.
*/
className: PropTypes.string,
/**
* When passing the image prop, supply a full path to the image to be displayed.
*/
/**@ts-ignore */
image: PropTypes.string,
/**
* When passing the image prop use the imageDescription prop to describe the image for screen reader.
*/
/**@ts-ignore */
imageDescription: PropTypes.string,
/**
* When passing the name prop, either send the initials to be used or the user's full name. The first two capital letters of the user's name will be used as the name.
*/
name: PropTypes.string,
/**
* Provide a custom icon to use if you need to use an icon other than the default one
*/
/**@ts-ignore */
renderIcon: PropTypes.oneOfType([
PropTypes.func,
PropTypes.object,
PropTypes.string
]),
/**
* Set the size of the avatar circle
*/
size: PropTypes.oneOf([
"xl",
"lg",
"md",
"sm"
]),
/**
* Specify how the trigger should align with the tooltip
*/
tooltipAlignment: PropTypes.oneOf([
"top",
"top-left",
"top-right",
"bottom",
"bottom-left",
"bottom-right",
"left",
"right"
]),
/**
* Pass in the display name to have it shown on hover
*/
tooltipText: PropTypes.string
};
//#endregion
export { UserAvatar };