@ui5/webcomponents-react/dist/components/ObjectPage/CollapsedAvatar.js

React Wrapper for UI5 Web Components and additional components

import AvatarSize from '@ui5/webcomponents/dist/types/AvatarSize.js';
import { useStylesheet } from '@ui5/webcomponents-react-base';
import { clsx } from 'clsx';
import { cloneElement, useEffect, useMemo, useRef, useState } from 'react';
import { classNames, styleData } from './CollapsedAvatar.module.css.js';
import { jsx as _jsx } from "react/jsx-runtime";
export const CollapsedAvatar = props => {
  const {
    image,
    imageShapeCircle,
    style
  } = props;
  useStylesheet(styleData, CollapsedAvatar.displayName);
  const [isMounted, setIsMounted] = useState(false);
  const domRef = useRef(null);
  const avatarContent = useMemo(() => {
    if (!image) return null;
    if (typeof image === 'string') {
      return /*#__PURE__*/_jsx("span", {
        className: classNames.imageContainer,
        style: {
          borderRadius: imageShapeCircle ? '50%' : 0,
          overflow: 'hidden'
        },
        children: /*#__PURE__*/_jsx("img", {
          className: classNames.image,
          src: image,
          alt: "Object Page Image"
        })
      });
    } else {
      return /*#__PURE__*/cloneElement(image, {
        size: AvatarSize.S,
        className: image.props?.className ? `${classNames.imageContainer} ${image.props?.className}` : classNames.imageContainer
      });
    }
  }, [image, imageShapeCircle]);
  useEffect(() => {
    setIsMounted(true);
  }, []);
  const containerClasses = clsx(classNames.base, isMounted ? classNames.visible : classNames.hidden);
  return /*#__PURE__*/_jsx("div", {
    ref: domRef,
    className: containerClasses,
    style: style,
    "data-component-name": "ObjectPageCollapsedAvatar",
    children: avatarContent
  });
};
CollapsedAvatar.displayName = 'CollapsedAvatar';