@catho/quantum/Badge/Badge.js

Catho react components

"use strict";

function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;
var _propTypes = _interopRequireDefault(require("prop-types"));
var _styledComponents = _interopRequireWildcard(require("styled-components"));
var _theme = require("../shared/theme");
var _jsxRuntime = require("react/jsx-runtime");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
var getColors = function getColors(_ref) {
  var skin = _ref.skin,
    badgeColor = _ref.theme.components.badge.skins[skin],
    inverted = _ref.inverted;
  if (inverted) {
    var _ref2 = [badgeColor.background, badgeColor.text],
      text = _ref2[0],
      background = _ref2[1];
    return (0, _styledComponents.css)(["background-color:", ";color:", ";"], background, text);
  }
  return (0, _styledComponents.css)(["background-color:", ";color:", ";"], badgeColor.background, badgeColor.text);
};
var BadgeWrapper = _styledComponents["default"].div.withConfig({
  displayName: "Badge__BadgeWrapper",
  componentId: "sc-zpdrj8-0"
})(["display:inline-block;", ""], function (props) {
  return props.originalChildren ? "position: relative;" : "margin-left: 8px; margin-right: 8px;";
});
var StyledBadge = _styledComponents["default"].span.withConfig({
  displayName: "Badge__StyledBadge",
  componentId: "sc-zpdrj8-1"
})(["border-radius:8px;box-sizing:border-box;display:flex;font-weight:bold;height:24px;line-height:24px;min-width:32px;align-items:center;justify-content:center;", " ", " ", " ", ""], function (_ref3) {
  var value = _ref3.value,
    _ref3$theme = _ref3.theme,
    _ref3$theme$spacing = _ref3$theme.spacing,
    xxxsmall = _ref3$theme$spacing.xxxsmall,
    xxsmall = _ref3$theme$spacing.xxsmall,
    baseFontSize = _ref3$theme.baseFontSize,
    number = _ref3.number;
  var padding = !Number.isInteger(value) || number >= 10 ? xxsmall : xxxsmall;
  return "\n        font-size: ".concat(baseFontSize * 0.75, "px;\n        padding-left: ").concat(padding, "px;\n        padding-right: ").concat(padding, "px;\n      ");
}, function (props) {
  return props.originalChildren && "\n    position: absolute;\n    right: -10px;\n    top: -10px;\n  ";
}, function (props) {
  return props.dot && "\n    right: -2px;\n    top: 0;\n    height: 12px;\n    width: 12px;\n    min-width: 12px;\n  ";
}, getColors);

/** This components is used to display only `Numbers`. If you want to pass a string, use `<Tag />` component instead */
var Badge = function Badge(_ref4) {
  var _ref4$children = _ref4.children,
    children = _ref4$children === void 0 ? '' : _ref4$children,
    _ref4$number = _ref4.number,
    number = _ref4$number === void 0 ? 0 : _ref4$number,
    _ref4$skin = _ref4.skin,
    skin = _ref4$skin === void 0 ? 'neutral' : _ref4$skin,
    _ref4$inverted = _ref4.inverted,
    inverted = _ref4$inverted === void 0 ? false : _ref4$inverted,
    _ref4$dot = _ref4.dot,
    dot = _ref4$dot === void 0 ? false : _ref4$dot,
    _ref4$theme = _ref4.theme,
    theme = _ref4$theme === void 0 ? {
      baseFontSize: _theme.baseFontSize,
      spacing: _theme.spacing,
      components: {
        badge: _theme.components.badge
      }
    } : _ref4$theme;
  var value = number > 99 ? '99+' : number;
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(BadgeWrapper, {
    value: value,
    originalChildren: children,
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(StyledBadge, {
      skin: skin,
      inverted: inverted,
      theme: theme,
      value: value,
      originalChildren: children,
      dot: dot,
      children: dot || value
    }), children]
  });
};
BadgeWrapper.displayName = 'BadgeWrapper';
StyledBadge.displayName = 'StyledBadge';
Badge.displayName = 'Badge';
Badge.propTypes = {
  /** Set background and text colors */
  skin: _propTypes["default"].oneOf(['primary', 'secondary', 'success', 'error', 'neutral']),
  /** When passed a children to &lt;Badge /&gt;, the badge will be displayed at top-right corner of the children. */
  children: _propTypes["default"].oneOfType([_propTypes["default"].arrayOf(_propTypes["default"].node), _propTypes["default"].node]),
  /** Number to be displayed inside badge. When number is bigger than 99, it will show "99+" instead of the exact number. */
  number: _propTypes["default"].number,
  /** Swap background and text colors. */
  inverted: _propTypes["default"].bool,
  /** Shows only a dot, without any number. */
  dot: _propTypes["default"].bool,
  theme: _propTypes["default"].shape({
    baseFontSize: _propTypes["default"].number,
    spacing: _propTypes["default"].object,
    components: _propTypes["default"].shape({
      badge: _propTypes["default"].object
    })
  })
};
var _default = exports["default"] = Badge;