@geezee/react-ui/esm/badge/badge.js

Modern and minimalist React UI library.

import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import _JSXStyle from "styled-jsx/style";
import React, { useMemo } from 'react';
import useTheme from '../styles/use-theme';
var defaultProps = {
  type: 'default',
  size: 'medium',
  dot: false,
  className: ''
};

var getFontSize = function getFontSize(size) {
  var sizes = {
    mini: '.7rem',
    small: '.75rem',
    medium: '.875rem',
    large: '1rem'
  };
  return sizes[size];
};

var getBgColor = function getBgColor(type, palette) {
  var colors = {
    "default": palette.foreground,
    primary: palette.success,
    success: palette.success,
    warning: palette.warning,
    error: palette.error,
    secondary: palette.secondary
  };
  return colors[type];
};

var Badge = function Badge(_ref) {
  var type = _ref.type,
      size = _ref.size,
      className = _ref.className,
      children = _ref.children,
      dot = _ref.dot,
      props = _objectWithoutProperties(_ref, ["type", "size", "className", "children", "dot"]);

  var theme = useTheme();
  var bg = useMemo(function () {
    return getBgColor(type, theme.palette);
  }, [type, theme.palette]);
  var font = useMemo(function () {
    return getFontSize(size);
  }, [size]);
  var color = useMemo(function () {
    if (!type || type === 'default') return theme.palette.background;
    return 'white';
  }, [type, theme.palette.background]);
  return /*#__PURE__*/React.createElement("span", _extends({}, props, {
    className: _JSXStyle.dynamic([["3937497070", [bg, color, font]]]) + " " + (props && props.className != null && props.className || "".concat(dot ? 'dot' : '', " ").concat(className))
  }), !dot && children, /*#__PURE__*/React.createElement(_JSXStyle, {
    id: "3937497070",
    dynamic: [bg, color, font]
  }, "span.__jsx-style-dynamic-selector{display:inline-block;padding:4px 7px;border-radius:16px;font-variant:tabular-nums;line-height:1;vertical-align:middle;background-color:".concat(bg, ";color:").concat(color, ";font-size:").concat(font, ";border:0;}.dot.__jsx-style-dynamic-selector{padding:4px;border-radius:50%;}")));
};

Badge.defaultProps = defaultProps;
export default React.memo(Badge);