@elastic/eui/optimize/lib/components/badge/beta_badge/beta_badge.js

Elastic UI Component Library

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.SIZES = exports.EuiBetaBadge = exports.COLORS = exports.ALIGNMENTS = void 0;
var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = _interopRequireDefault(require("react"));
var _classnames = _interopRequireDefault(require("classnames"));
var _services = require("../../../services");
var _tool_tip = require("../../tool_tip");
var _icon = require("../../icon");
var _beta_badge = require("./beta_badge.styles");
var _react2 = require("@emotion/react");
var _excluded = ["className", "label", "color", "tooltipContent", "tooltipPosition", "anchorProps", "title", "iconType", "onClick", "onClickAriaLabel", "href", "rel", "target", "size", "alignment"];
/*
 * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
 * or more contributor license agreements. Licensed under the Elastic License
 * 2.0 and the Server Side Public License, v 1; you may not use this file except
 * in compliance with, at your election, the Elastic License 2.0 or the Server
 * Side Public License, v 1.
 */
var COLORS = exports.COLORS = ['accent', 'subdued', 'hollow', 'warning'];
var SIZES = exports.SIZES = ['s', 'm'];
var ALIGNMENTS = exports.ALIGNMENTS = ['baseline', 'middle'];

// `label` prop can be a `ReactNode` only if `title` or `tooltipContent` is provided

// Must be `type` instead of `interface`
// https://github.com/elastic/eui/issues/6085

var EuiBetaBadge = exports.EuiBetaBadge = function EuiBetaBadge(_ref) {
  var className = _ref.className,
    label = _ref.label,
    _ref$color = _ref.color,
    color = _ref$color === void 0 ? 'hollow' : _ref$color,
    tooltipContent = _ref.tooltipContent,
    _ref$tooltipPosition = _ref.tooltipPosition,
    tooltipPosition = _ref$tooltipPosition === void 0 ? 'top' : _ref$tooltipPosition,
    anchorProps = _ref.anchorProps,
    title = _ref.title,
    iconType = _ref.iconType,
    onClick = _ref.onClick,
    onClickAriaLabel = _ref.onClickAriaLabel,
    href = _ref.href,
    rel = _ref.rel,
    target = _ref.target,
    _ref$size = _ref.size,
    size = _ref$size === void 0 ? 'm' : _ref$size,
    _ref$alignment = _ref.alignment,
    alignment = _ref$alignment === void 0 ? 'baseline' : _ref$alignment,
    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
  var singleLetter = !!(typeof label === 'string' && label.length === 1);
  var isCircular = iconType || singleLetter;
  var classes = (0, _classnames.default)('euiBetaBadge', className);
  var styles = (0, _services.useEuiMemoizedStyles)(_beta_badge.euiBetaBadgeStyles);
  var cssStyles = [styles.euiBetaBadge, styles[color], styles[size], styles[alignment], isCircular ? styles.badgeSizes.circle[size] : styles.badgeSizes.default[size]];
  var icon;
  if (iconType) {
    icon = (0, _react2.jsx)(_icon.EuiIcon, {
      css: styles.euiBetaBadge__icon,
      className: "euiBetaBadge__icon",
      type: iconType,
      size: size === 'm' ? 'm' : 's',
      "aria-hidden": "true",
      color: "inherit" // forces the icon to inherit its parent color
    });
  }
  var Element = href ? 'a' : 'button';
  var relObj = {};
  if (href) {
    relObj.href = href;
    relObj.target = target;
    relObj.rel = (0, _services.getSecureRelForTarget)({
      href: href,
      target: target,
      rel: rel
    });
  }
  if (onClick) {
    relObj.onClick = onClick;
  }
  var content;
  if (onClick || href) {
    content = (0, _react2.jsx)(Element, (0, _extends2.default)({
      "aria-label": onClickAriaLabel,
      css: cssStyles,
      className: classes,
      title: typeof label === 'string' ? label : title
    }, relObj, rest), icon || label);
    if (tooltipContent) {
      return (0, _react2.jsx)(_tool_tip.EuiToolTip, {
        position: tooltipPosition,
        content: tooltipContent,
        title: title || label,
        anchorProps: anchorProps
      }, content);
    } else {
      return (0, _react2.jsx)("span", anchorProps, content);
    }
  } else {
    if (tooltipContent) {
      return (0, _react2.jsx)(_tool_tip.EuiToolTip, {
        position: tooltipPosition,
        content: tooltipContent,
        title: title || label,
        anchorProps: anchorProps
      }, (0, _react2.jsx)("span", (0, _extends2.default)({
        tabIndex: 0,
        role: "button",
        css: cssStyles,
        className: classes
      }, rest), icon || label));
    } else {
      var spanTitle = title || label;
      if (spanTitle && typeof spanTitle !== 'string') {
        console.warn("Only string titles are permitted on badges that do not use tooltips. Found: ".concat((0, _typeof2.default)(spanTitle)));
      }
      return (0, _react2.jsx)("span", anchorProps, (0, _react2.jsx)("span", (0, _extends2.default)({
        className: classes,
        title: spanTitle,
        css: cssStyles
      }, rest), icon || label));
    }
  }
};