baseui/avatar/styled-components.js

A React Component library implementing the Base design language

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Root = exports.Initials = exports.Avatar = void 0;
var _styles = require("../styles");
/*
Copyright (c) Uber Technologies, Inc.

This source code is licensed under the MIT license found in the
LICENSE file in the root directory of this source tree.
*/

// @ts-ignore
function getSize(props) {
  const {
    $size,
    $theme
  } = props;
  const defaultSize = $theme.sizing.scale1000;
  const size = $size || defaultSize;
  return $theme.sizing[size] || size;
}
const Avatar = exports.Avatar = (0, _styles.styled)('img', props => {
  const themedSize = getSize(props);
  return {
    borderTopLeftRadius: '50%',
    borderTopRightRadius: '50%',
    borderBottomRightRadius: '50%',
    borderBottomLeftRadius: '50%',
    boxSizing: 'border-box',
    display: props.$imageLoaded ? 'block' : 'none',
    height: themedSize,
    width: themedSize,
    objectFit: 'cover'
  };
});
Avatar.displayName = "Avatar";
Avatar.displayName = 'Avatar';
const Initials = exports.Initials = (0, _styles.styled)('div', props => ({
  ...props.$theme.typography.font300,
  color: props.$theme.colors.contentInversePrimary,
  alignItems: 'center',
  display: 'flex',
  justifyContent: 'center',
  height: '100%'
}));
Initials.displayName = "Initials";
Initials.displayName = 'Initials';

// @ts-ignore
const Root = exports.Root = (0, _styles.styled)('div', props => {
  const {
    $didImageFailToLoad
  } = props;
  const themedSize = getSize(props);
  return {
    backgroundColor: $didImageFailToLoad ? props.$theme.colors.backgroundInversePrimary : null,
    borderTopLeftRadius: '50%',
    borderTopRightRadius: '50%',
    borderBottomRightRadius: '50%',
    borderBottomLeftRadius: '50%',
    boxSizing: 'border-box',
    display: 'inline-block',
    // image previously set the root height/width
    // since image is not rendered, set the height/width
    height: $didImageFailToLoad ? themedSize : null,
    width: $didImageFailToLoad ? themedSize : null
  };
});
Root.displayName = "Root";
Root.displayName = 'Root';