@age/quantum/Badge/Badge.js

Catho react components

"use strict";

function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _react = _interopRequireDefault(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _styledComponents = _interopRequireWildcard(require("styled-components"));

var _theme = require("../shared/theme");

function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

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-8i20do-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-8i20do-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  ";
}, 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 children = _ref4.children,
      number = _ref4.number,
      skin = _ref4.skin,
      inverted = _ref4.inverted,
      theme = _ref4.theme;
  var value = number > 99 ? '99+' : number;
  return _react.default.createElement(BadgeWrapper, {
    value: value,
    originalChildren: children
  }, _react.default.createElement(StyledBadge, {
    skin: skin,
    inverted: inverted,
    theme: theme,
    value: value,
    originalChildren: children
  }, value), children);
};

BadgeWrapper.displayName = 'BadgeWrapper';
StyledBadge.displayName = 'StyledBadge';
Badge.displayName = 'Badge';
Badge.propTypes = {
  /** Define background and text color */
  skin: _propTypes.default.oneOf(['primary', 'secondary', 'success', 'error', 'neutral']),

  /** When passed a children to <Badge />, 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 higher than 99 will be displayed "99+" instead of number value */
  number: _propTypes.default.number,

  /** Swap background and text color */
  inverted: _propTypes.default.bool,
  theme: _propTypes.default.shape({
    baseFontSize: _propTypes.default.number,
    spacing: _propTypes.default.object,
    components: _propTypes.default.shape({
      badge: _propTypes.default.object
    })
  })
};
Badge.defaultProps = {
  skin: 'neutral',
  inverted: false,
  children: '',
  number: 0,
  theme: {
    baseFontSize: _theme.baseFontSize,
    spacing: _theme.spacing,
    components: {
      badge: _theme.components.badge
    }
  }
};
var _default = Badge;
exports.default = _default;