@hhgtech/hhg-components/build/index-0b6d8e82.js

Hello Health Group common components

'use strict';

var tslib_es6 = require('./tslib.es6-af09a0ba.js');
var React = require('react');
var togetherComponentGlobalContext = require('./utils-3a3800c0.js');
var styled = require('@emotion/styled');
var miscTheme = require('./miscTheme.js');

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

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

const StyledUserAvatar = styled__default["default"].div `
  width: ${(props) => props.size || 40}px;
  height: ${(props) => props.size || 40}px;
  flex-shrink: 0;
  cursor: pointer;

  img {
    border-radius: 50%;
  }

  .avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .avatar-default {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: ${miscTheme.theme.colors.secondaryBase};
    border-radius: 50%;
    color: white;
    font-size: 1em;
    font-weight: bold;
    line-height: 1;
  }

  &[data-is-marrybaby='true'] {
    .avatar-default {
      background-color: ${miscTheme.theme.mbColors.pink};
    }
  }
`;

const UserAvatar = (_a) => {
    var { className, isMarryBaby: isMarryBabyProp, style, avatar, username, size } = _a, rest = tslib_es6.__rest(_a, ["className", "isMarryBaby", "style", "avatar", "username", "size"]);
    const { data: { env: { isMarryBaby: isMarryBabyContext }, }, } = React.useContext(togetherComponentGlobalContext.TogetherComponentGlobalContext);
    const isMarryBaby = typeof isMarryBabyProp === 'boolean' ? isMarryBabyProp : isMarryBabyContext;
    const [tempAvatar, setTempAvatar] = React.useState(false);
    return (React__default["default"].createElement(StyledUserAvatar, Object.assign({ "data-is-marrybaby": isMarryBaby, className: className, style: style, size: size }, rest), avatar && !tempAvatar ? (React__default["default"].createElement("img", { loading: "lazy", src: avatar, className: `avatar`, alt: "avatar", onError: () => {
            // e.currentTarget.onerror = null
            if (!tempAvatar)
                setTempAvatar(true);
        } })) : (React__default["default"].createElement("div", { className: "avatar avatar-default" }, username && (username === null || username === void 0 ? void 0 : username.length) > 0 ? username[0].toUpperCase() : 'A'))));
};

exports.UserAvatar = UserAvatar;