@dnb/eufemia/components/avatar/Avatar.js

DNB Eufemia Design System UI Library

"use client";

import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
import React from 'react';
import classnames from 'classnames';
import { createSpacingClasses } from "../space/SpacingHelper.js";
import { createSkeletonClass } from "../skeleton/SkeletonHelper.js";
import Icon from "../icon/Icon.js";
import IconPrimary from "../IconPrimary.js";
import Img from "../../elements/img/Img.js";
import Context from "../../shared/Context.js";
import { validateDOMAttributes, extendPropsWithContext, warn } from "../../shared/component-helper.js";
import AvatarGroup, { AvatarGroupContext } from "./AvatarGroup.js";
import { getColor } from "../../shared/helpers.js";
export const defaultProps = {
  size: 'medium',
  variant: 'primary',
  skeleton: false
};
const Avatar = localProps => {
  const context = React.useContext(Context);
  const avatarGroupContext = React.useContext(AvatarGroupContext);
  const allProps = extendPropsWithContext(localProps, defaultProps, context === null || context === void 0 ? void 0 : context.Avatar, {
    skeleton: context === null || context === void 0 ? void 0 : context.skeleton
  }, avatarGroupContext);
  const {
    alt,
    className,
    children: childrenProp,
    size,
    skeleton,
    variant,
    src,
    imgProps,
    icon,
    hasLabel,
    backgroundColor,
    color,
    ...props
  } = allProps;
  let children = null;
  const skeletonClasses = createSkeletonClass('shape', skeleton, context);
  const spacingClasses = createSpacingClasses(props);
  const childrenIsString = typeof childrenProp === 'string';
  if (icon) {
    children = isIconComponent(icon) ? iconAutoSize(icon) : React.createElement(IconPrimary, {
      icon: icon,
      size: "auto",
      "aria-hidden": childrenIsString ? true : null,
      skeleton: skeleton
    });
  } else if (src || imgProps) {
    const imageProps = {
      src,
      alt,
      ...imgProps
    };
    children = React.createElement(Img, imageProps);
  } else if (childrenIsString) {
    const firstLetterUpperCase = childrenProp.charAt(0).toUpperCase();
    children = React.createElement("span", {
      "aria-hidden": true
    }, firstLetterUpperCase);
  } else if (React.Children.count(childrenProp) === 1 && isIconComponent(childrenProp)) {
    children = iconAutoSize(childrenProp);
  } else {
    children = childrenProp;
  }
  if (!avatarGroupContext && !hasLabel) {
    warn(`Avatar group required: An Avatar requires an Avatar.Group with label description as a parent component. This is to ensure correct semantic and accessibility.`);
  }
  validateDOMAttributes(allProps, props);
  const style = {
    '--background-color': getColor(backgroundColor),
    '--color': getColor(color),
    ...(props === null || props === void 0 ? void 0 : props.style)
  };
  return React.createElement("span", _extends({
    className: classnames(`dnb-avatar dnb-avatar--${variant || 'primary'} dnb-avatar--size-${size || 'medium'}`, skeletonClasses, spacingClasses, className)
  }, props, {
    style: style
  }), childrenIsString && React.createElement("span", {
    className: "dnb-sr-only"
  }, childrenProp), children);
};
Avatar.Group = AvatarGroup;
export { AvatarGroup };
Avatar._supportsSpacingProps = true;
export default Avatar;
function isIconComponent(element) {
  return React.isValidElement(element) && (element.type === Icon || element.type === IconPrimary);
}
function iconAutoSize(icon) {
  return !icon.props.size ? React.cloneElement(icon, {
    size: 'auto'
  }) : icon;
}
//# sourceMappingURL=Avatar.js.map