@hhgtech/hhg-components/build/index-e589665d.js

Hello Health Group common components

'use strict';

var React = require('react');
var styled = require('@emotion/styled');
var miscTheme = require('./miscTheme.js');
var useScreenSize = require('./useScreenSize-30f50b76.js');

function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }

var React__default = /*#__PURE__*/_interopDefault(React);
var styled__default = /*#__PURE__*/_interopDefault(styled);

const StyledAvatar = styled__default["default"].div `
  background-color: var(--background-color, transparent);
  color: white;
  cursor: pointer;
  img {
    --width: var(--width-prop, 40px);
    --height: var(--height-prop, 40px);
    width: var(--width);
    height: var(--height);
  }
  &[data-has-max='true'] {
    img {
      max-width: var(--width);
      max-height: var(--height);
    }
  }

  &[data-avatar-type='square'] {
    img {
      --width: var(--width-prop, 72px);
      --height: var(--height-prop, 72px);
      border-radius: ${miscTheme.theme.borderRadius};
    }
  }

  &[data-avatar-type='rounded'] {
    img {
      border-radius: 50%;
    }
  }

  &[data-custom-size='true'] {
    display: flex;
    overflow: hidden;
    overflow: hidden;
    width: var(--size);
    height: var(--size);
    align-items: center;
    justify-content: center;
    background-size: cover;
    font-size: calc(var(--size) / 2);
    font-weight: bold;
    &[data-avatar-type='square'] {
      border-radius: ${miscTheme.theme.borderRadius};
    }
    &[data-avatar-type='rounded'] {
      border-radius: 50%;
      img {
        --width: 100%;
        --height: 100%;
      }
    }
    img {
      object-fit: cover;
    }
  }
`;

const pxBySize = {
    xs: 28,
    small: 32,
    medium: 40,
    large: 48,
    xl: 64,
    xxl: 80,
    xxxl: 96,
};
/**
 * @deprecated Consider to use at '@hhgtech/hhg-components/mantine'
 */
const Avatar = ({ type = 'square', size, avatarImg, avatarUrl, firstLetter, backgroundColor, onClick, style, className, width, height, alt, }) => {
    const sizePx = size ? pxBySize[size] : undefined;
    const [isImageLoadingError, setIsImageLoadingError] = React.useState(false);
    React.useEffect(() => {
        if (avatarUrl) {
            const img = document.createElement('img');
            img.setAttribute('src', avatarUrl);
            img.addEventListener('error', () => {
                setIsImageLoadingError(true);
            });
        }
    }, [avatarUrl, setIsImageLoadingError]);
    const shouldRenderLetter = ((!avatarUrl && !avatarImg) || isImageLoadingError) && firstLetter;
    return (React__default["default"].createElement(StyledAvatar, { style: Object.assign(Object.assign({}, style), { '--size': sizePx ? sizePx + 'px' : undefined, '--width-prop': width ? width + 'px' : undefined, '--height-prop': height ? height + 'px' : undefined, '--background-color': backgroundColor }), "data-has-max": !!(width && height), "data-avatar-type": type, onClick: onClick, className: className, avatarUrl: avatarUrl, "data-custom-size": !!size },
        avatarImg,
        avatarUrl && !isImageLoadingError && (React__default["default"].createElement(useScreenSize.ImageWrap, { src: avatarUrl, alt: alt || 'avatar' })),
        shouldRenderLetter && firstLetter));
};

exports.Avatar = Avatar;