@helpscout/hsds-react/components/Tag/Tag.js

React component library for Help Scout's Design System

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.default = exports.tagClassName = void 0;

var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

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

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

var _getValidProps = _interopRequireDefault(require("@helpscout/react-utils/dist/getValidProps"));

var _classnames = _interopRequireDefault(require("classnames"));

var _TagList = require("../TagList/TagList");

var _Tag = require("./Tag.css");

var _jsxRuntime = require("react/jsx-runtime");

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && 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; }

var tagClassName = 'c-Tag';
exports.tagClassName = tagClassName;

var useExtendPropsWithContext = function useExtendPropsWithContext(nextProps, context) {
  var contextValue = (0, _react.useContext)(context) || {};
  return (0, _extends2.default)({}, nextProps, contextValue);
};

var ForwardedTag = /*#__PURE__*/(0, _react.forwardRef)(function Tag(props, ref) {
  var _useExtendPropsWithCo = useExtendPropsWithContext(props, _TagList.TagListContext),
      allCaps = _useExtendPropsWithCo.allCaps,
      children = _useExtendPropsWithCo.children,
      className = _useExtendPropsWithCo.className,
      color = _useExtendPropsWithCo.color,
      count = _useExtendPropsWithCo.count,
      display = _useExtendPropsWithCo.display,
      filled = _useExtendPropsWithCo.filled,
      id = _useExtendPropsWithCo.id,
      isRemovable = _useExtendPropsWithCo.isRemovable,
      onRemove = _useExtendPropsWithCo.onRemove,
      onHide = _useExtendPropsWithCo.onHide,
      isRemovingProp = _useExtendPropsWithCo.isRemoving,
      removeProps = _useExtendPropsWithCo.removeProps,
      showTooltipOnTruncate = _useExtendPropsWithCo.showTooltipOnTruncate,
      size = _useExtendPropsWithCo.size,
      value = _useExtendPropsWithCo.value,
      onClick = _useExtendPropsWithCo.onClick,
      href = _useExtendPropsWithCo.href,
      elementClassName = _useExtendPropsWithCo.elementClassName,
      rest = (0, _objectWithoutPropertiesLoose2.default)(_useExtendPropsWithCo, ["allCaps", "children", "className", "color", "count", "display", "filled", "id", "isRemovable", "onRemove", "onHide", "isRemoving", "removeProps", "showTooltipOnTruncate", "size", "value", "onClick", "href", "elementClassName"]);

  var _useState = (0, _react.useState)(isRemovingProp),
      isRemoving = _useState[0],
      setRemoving = _useState[1];

  var _useState2 = (0, _react.useState)(true),
      shouldRender = _useState2[0],
      setRender = _useState2[1];

  var hideTag = (0, _react.useCallback)(function () {
    setRender(false);
    onHide && onHide();
  }, [onHide]);
  var handleTransitionEnd = (0, _react.useCallback)(function () {
    if (isRemoving) hideTag();
  }, [hideTag, isRemoving]);
  var handleClick = (0, _react.useCallback)(function (e) {
    onClick && onClick(e, {
      id: id,
      value: value
    });
  }, [onClick, id, value]);
  var handleRemove = (0, _react.useCallback)(function (e) {
    e.preventDefault();
    e.stopPropagation();
    !isRemoving && onRemove({
      id: id,
      value: value
    });
    setRemoving(true);
  }, [isRemoving, onRemove, id, value]);
  var isClickable = Boolean(onClick) || Boolean(href);
  var shouldShowCount = Number.isInteger(count) && size === 'lg';
  (0, _react.useEffect)(function () {
    if (isRemovingProp) {
      hideTag();
    }
  }, [isRemovingProp, hideTag]);
  var tagClassnames = (0, _classnames.default)(tagClassName, display && "is-display-" + display, !isRemoving && 'element-in', color && "is-" + color, filled && 'is-filled', className);
  var tagElementClassNames = (0, _classnames.default)(tagClassName, isClickable && 'is-clickable', isRemovable && 'is-removable', allCaps && 'is-all-caps', size && "is-" + size, elementClassName);
  var as = 'div';

  if (isClickable) {
    as = Boolean(href) ? 'a' : 'button';
  }

  var tagProps = {
    className: tagElementClassNames,
    as: as,
    onClick: handleClick
  };
  if (href) tagProps.href = href;
  return shouldRender ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Tag.TagUI, {
    className: tagClassnames,
    onTransitionEnd: handleTransitionEnd,
    ref: ref,
    "data-testid": "Tag",
    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Tag.TagElementUI, (0, _extends2.default)({}, (0, _getValidProps.default)(rest), tagProps, {
      "data-testid": "TagElement",
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Tag.TruncateUI, {
        className: "c-Tag__textWrapper",
        showTooltipOnTruncate: showTooltipOnTruncate,
        children: value || children || null
      }), shouldShowCount && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tag.CountUI, {
        "data-testid": "Tag.Count",
        children: count
      })]
    })), isRemovable && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tag.RemoveTagUI, (0, _extends2.default)({
      "aria-label": "Remove tag",
      "data-testid": "RemoveTag",
      onClick: handleRemove
    }, removeProps, {
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tag.RemoveIconUI, {
        name: "cross-small",
        size: 18,
        title: "Remove"
      })
    }))]
  }) : null;
});

function noop() {}

ForwardedTag.defaultProps = {
  color: 'grey',
  'data-cy': 'Tag',
  display: 'inline',
  isRemovable: false,
  isRemoving: false,
  onRemove: noop,
  onHide: noop,
  showTooltipOnTruncate: true,
  value: '',
  size: 'sm'
};
ForwardedTag.propTypes = {
  /** Renders text in Uppercase */
  allCaps: _propTypes.default.bool,

  /** Custom class names to be added to the component. */
  className: _propTypes.default.string,

  /** Determines the color of the component. */
  color: _propTypes.default.oneOf(['blue', 'green', 'grey', 'orange', 'pink', 'purple', 'red', 'teal', 'yellow']),

  /** Renders a badge within a medium sized tag */
  count: _propTypes.default.number,

  /** Determines the CSS `display` of the component. Default `inline`. */
  display: _propTypes.default.oneOf(['block', 'inline']),

  /** Custom class names to be added to the element component. */
  elementClassName: _propTypes.default.string,

  /** Applies a filled in color style to the component. */
  filled: _propTypes.default.bool,

  /** ID of the component. */
  id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),

  /** Renders an `x` `Icon`, which can remove this component from the DOM. */
  isRemovable: _propTypes.default.bool,

  /** Renders the `Spinner` and replaces the `x` `Icon` */
  isRemoving: _propTypes.default.bool,

  /** Custom props to pass to the remove button */
  removeProps: _propTypes.default.object,

  /** Apply a different size to the component */
  size: _propTypes.default.oneOf(['sm', 'md', 'lg']),

  /** Callback function when component is removed and unmounted. */
  onRemove: _propTypes.default.func,

  /** Renders a `Tooltip` if content is truncated. */
  showTooltipOnTruncate: _propTypes.default.bool,

  /** Value of the tag. Renders in place of `children`, if specified. */
  value: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),

  /** Data attr for Cypress tests. */
  'data-cy': _propTypes.default.string
};
var _default = ForwardedTag;
exports.default = _default;