@mskcc/carbon-react/lib/components/MskTag/next/Tag.js

Carbon react components for the MSKCC DSM

/**
 * MSKCC 2021, 2024
 */

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
var React = require('react');
var PropTypes = require('prop-types');
var cx = require('classnames');
var setupGetInstanceId = require('../../../tools/setupGetInstanceId.js');
var MskIcon = require('../../Icon/MskIcon.js');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);

var _Icon;
const getInstanceId = setupGetInstanceId["default"]();
const TagTypes = ['red', 'magenta', 'purple', 'blue', 'cyan', 'teal', 'green', 'gray', 'cool-gray', 'warm-gray', 'high-contrast', 'outline', 'ghost'];
const TagSizes = ['sm', 'md', 'lg'];
const Tag = _ref => {
  let {
    children,
    className,
    id = `tag-${getInstanceId()}`,
    type = 'gray',
    icon,
    renderIcon: CustomIconElement,
    title,
    disabled,
    onClose,
    size = 'md',
    as: BaseComponent,
    ...other
  } = _ref;
  const tagClasses = cx__default["default"](`msk-tag-v2`, className, {
    [`msk-tag-v2--${type}`]: type,
    [`msk-tag-v2--size-${size}`]: size,
    [`msk-tag-v2--disabled`]: disabled,
    [`msk-tag-v2--interactive`]: other.onClick && !onClose,
    [`msk-tag-v2--single`]: !onClose
  });
  const handleClose = event => {
    if (onClose) {
      event.stopPropagation();
      onClose(event);
    }
  };
  if (onClose) {
    const ComponentTag = BaseComponent ?? 'div';
    const ComponentTagInner = 'div';
    const {
      onClick,
      ...rest
    } = other;
    return /*#__PURE__*/React__default["default"].createElement(ComponentTag, _rollupPluginBabelHelpers["extends"]({
      disabled: ComponentTag === 'button' ? disabled : null,
      className: tagClasses,
      id: id,
      title: typeof children === 'string' ? children : null
    }, rest), /*#__PURE__*/React__default["default"].createElement(ComponentTagInner, {
      className: "msk-tag-v2--content-container"
    }, CustomIconElement ? /*#__PURE__*/React__default["default"].createElement(CustomIconElement, null) : icon !== undefined ? /*#__PURE__*/React__default["default"].createElement(MskIcon.Icon, {
      icon: icon,
      className: "msk-tag--icon-left"
    }) : null, /*#__PURE__*/React__default["default"].createElement("span", {
      className: "msk-tag-v2--content",
      title: typeof children === 'string' ? children : undefined
    }, children !== null && children !== undefined ? children : null)), /*#__PURE__*/React__default["default"].createElement("button", {
      onClick: handleClose,
      disabled: disabled,
      className: 'msk-tag-v2--close-btn'
    }, _Icon || (_Icon = /*#__PURE__*/React__default["default"].createElement(MskIcon.Icon, {
      icon: "clear"
    }))));
  }
  const ComponentTag = BaseComponent ?? (other.onClick ? 'button' : 'div');
  return /*#__PURE__*/React__default["default"].createElement(ComponentTag, _rollupPluginBabelHelpers["extends"]({
    disabled: ComponentTag === 'button' ? disabled : null,
    className: tagClasses,
    id: id,
    title: typeof children === 'string' ? children : null
  }, other), CustomIconElement ? /*#__PURE__*/React__default["default"].createElement(CustomIconElement, null) : icon !== undefined ? /*#__PURE__*/React__default["default"].createElement(MskIcon.Icon, {
    icon: icon,
    className: "msk-tag--icon-left"
  }) : null, /*#__PURE__*/React__default["default"].createElement("span", {
    className: "msk-tag-v2--content",
    title: typeof children === 'string' ? children : undefined
  }, children !== null && children !== undefined ? children : null));
};
Tag.displayName = 'Tag';
Tag.propTypes = {
  /**
   * Provide an alternative tag or component to use instead of the default
   * wrapping element
   */
  as: PropTypes__default["default"].elementType,
  /**
   * Provide content to be rendered inside of a <Tag>
   */
  children: PropTypes__default["default"].node,
  /**
   * Provide a custom className that is applied to the containing <span>
   */
  className: PropTypes__default["default"].string,
  /**
   * Specify if the <Tag> is disabled
   */
  disabled: PropTypes__default["default"].bool,
  /**
   * Specify the id for the tag.
   */
  id: PropTypes__default["default"].string,
  /**
   * Click handler for filter tag right icon, default to close button.
   */
  onClose: PropTypes__default["default"].func,
  /**
   * select msk icon.
   */
  icon: PropTypes__default["default"].string,
  /**
   * Optional prop to render a custom left icon.
   * Can be a React component class
   */
  renderIcon: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].object]),
  /**
   * Specify the size of the Tag. Currently supports either `sm` or
   * 'md' (default) sizes.
   */
  size: PropTypes__default["default"].oneOf(['sm', 'md', 'lg']),
  /**
   * Text to show on clear filters
   */
  title: PropTypes__default["default"].string,
  /**
   * Specify the type of the <Tag>
   */
  type: PropTypes__default["default"].string
};

exports.Tag = Tag;
exports.TagSizes = TagSizes;
exports.TagTypes = TagTypes;
exports["default"] = Tag;