@gssfed/vital-ui-kit-react/dist/Avatar/AvatarBadge.js

Vital UI Kit for React!

var _templateObject = _taggedTemplateLiteral(['\n      padding: 0 5px;\n      border-radius: 0.75rem;\n      font-size: 0.725rem;\n      left: ', ';\n      right: ', ';\n      top: ', ';\n    '], ['\n      padding: 0 5px;\n      border-radius: 0.75rem;\n      font-size: 0.725rem;\n      left: ', ';\n      right: ', ';\n      top: ', ';\n    ']),
    _templateObject2 = _taggedTemplateLiteral(['\n    padding: 0;\n    border-radius: 50%;\n    font-size: 0;\n    width: ', ';\n    height: ', ';\n    right: calc(', ' / -2);\n    top: ', ';\n    left: ', ';\n    right: ', ';\n\n    &:before {\n      content: \'\';\n      position: absolute;\n      top: calc(50% - (3px / 2));\n      left: calc(50% - (3px / 2));\n      background: ', ';\n      border-radius: 50%;\n      width: 3px;\n      height: 3px;\n    }\n  '], ['\n    padding: 0;\n    border-radius: 50%;\n    font-size: 0;\n    width: ', ';\n    height: ', ';\n    right: calc(', ' / -2);\n    top: ', ';\n    left: ', ';\n    right: ', ';\n\n    &:before {\n      content: \'\';\n      position: absolute;\n      top: calc(50% - (3px / 2));\n      left: calc(50% - (3px / 2));\n      background: ', ';\n      border-radius: 50%;\n      width: 3px;\n      height: 3px;\n    }\n  ']),
    _templateObject3 = _taggedTemplateLiteral(['\n  position: absolute;\n  background-color: ', ';\n  color: ', ';\n  vertical-align: middle;\n  height: ', ';\n  line-height: ', ';\n  ', ';\n'], ['\n  position: absolute;\n  background-color: ', ';\n  color: ', ';\n  vertical-align: middle;\n  height: ', ';\n  line-height: ', ';\n  ', ';\n']);

function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }

import React from 'react';
import styled, { css } from 'styled-components';

import { trunTo } from '../utils/math';
import { badgeSizes } from './constants';

var badgeTransformStyle = function badgeTransformStyle(_ref) {
  var size = _ref.size,
      round = _ref.round,
      label = _ref.label;

  if (size === 'xlarge') {
    return css(_templateObject, round ? '70%' : 'auto', round ? 'auto' : '-12%', round ? 0 : 'calc(' + badgeSizes[size].height + ' / -2)');
  }
  // circle badge style
  return css(_templateObject2, badgeSizes[size].height, badgeSizes[size].height, badgeSizes[size].height, round ? 0 : 'calc(' + badgeSizes[size].height + ' / -2)', round ? '70%' : 'auto', round ? 'auto' : badgeSizes[size].height / -2, label ? '#fff' : 'transparent');
};

var Root = styled.span(_templateObject3, function (_ref2) {
  var theme = _ref2.theme;
  return theme.avatar.badgeBg;
}, function (_ref3) {
  var theme = _ref3.theme;
  return theme.white;
}, function (_ref4) {
  var size = _ref4.size;
  return badgeSizes[size].height;
}, function (_ref5) {
  var size = _ref5.size;
  return badgeSizes[size].height;
}, function (props) {
  return badgeTransformStyle(props);
});

var AvatarBadge = function AvatarBadge(_ref6) {
  var label = _ref6.label,
      size = _ref6.size,
      round = _ref6.round,
      style = _ref6.style;
  return React.createElement(
    Root,
    { label: label, size: size, round: round, style: style },
    size === 'xlarge' ? trunTo(label) : null
  );
};

AvatarBadge.defaultProps = {
  round: false,
  size: 'medium',
  style: null
};

export default AvatarBadge;