@helpscout/hsds-react/components/TagList/TagList.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.TagList = exports.TagListContext = exports.tagListClassName = void 0;

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

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

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

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

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

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

var _component = require("../../utilities/component");

var _Overflow = _interopRequireDefault(require("../Overflow"));

var _Tooltip = _interopRequireDefault(require("../Tooltip"));

var _TagList = require("./TagList.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 tagListClassName = 'c-TagList';
exports.tagListClassName = tagListClassName;

var TagListContext = /*#__PURE__*/_react.default.createContext();

exports.TagListContext = TagListContext;

var TagList = function TagList(props) {
  var children = props.children,
      className = props.className,
      clearAll = props.clearAll,
      limit = props.limit,
      isRemovable = props.isRemovable,
      onRemove = props.onRemove,
      onRemoveAll = props.onRemoveAll,
      overflowFade = props.overflowFade,
      size = props.size,
      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["children", "className", "clearAll", "limit", "isRemovable", "onRemove", "onRemoveAll", "overflowFade", "size"]);

  var _useState = (0, _react.useState)(false),
      isNoLimit = _useState[0],
      setNoLimit = _useState[1];

  var componentClassNames = (0, _classnames.default)(tagListClassName, size && "is-" + size, className);

  var handleOnRemove = function handleOnRemove(value) {
    return onRemove(value);
  };

  var tags = _react.default.Children.toArray(children);

  var total = tags.length;
  var shouldFilterTags = limit > 0 && !overflowFade && tags.length > limit && !isNoLimit;
  var tagList = shouldFilterTags ? tags.slice(0, limit) : tags;
  var tagsComponents = tagList.map(function (tag, index) {
    var isLastWithClearAll = !limit && total - 1 === index && clearAll && tags.length > 1;
    var shoudShowAllButton = shouldFilterTags && tagList.length - 1 === index;
    var clearAllComponent = isLastWithClearAll ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_TagList.ClearAllUI, {
      onClick: onRemoveAll,
      "data-testid": "TagList.ClearAll",
      "data-cy": "TagList.ClearAll",
      children: "Clear all"
    }, "clearAllButton") : null;
    var badgeComponent = shoudShowAllButton ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
      withTriggerWrapper: false,
      title: "Show hidden tags",
      delay: 10,
      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_TagList.ShowAllButtonUI, {
        "aria-label": "Show hidden tags",
        onClick: function onClick() {
          return setNoLimit(true);
        },
        children: ["+", total - limit]
      })
    }) : null;
    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_TagList.ItemUI, {
      children: [tag, clearAllComponent, badgeComponent]
    }, (0, _component.getComponentKey)(tag, index));
  });
  var componentMarkup = /*#__PURE__*/(0, _jsxRuntime.jsx)(_TagList.ListUI, {
    children: tagsComponents
  });
  var contextValue = {
    isRemovable: isRemovable,
    size: size,
    onRemove: handleOnRemove
  };
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(TagListContext.Provider, {
    value: contextValue,
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TagList.TagListUI, (0, _extends2.default)({}, (0, _getValidProps.default)(rest), {
      className: componentClassNames,
      "data-testid": "TagList",
      children: overflowFade ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Overflow.default, {
        children: componentMarkup
      }) : componentMarkup
    }))
  });
};

exports.TagList = TagList;

function noop() {}

TagList.defaultProps = {
  'data-cy': 'TagList',
  onRemove: noop,
  onRemoveAll: noop,
  overflowFade: false,
  isRemovable: false,
  clearAll: false,
  size: 'sm'
};
TagList.propTypes = {
  /** Custom class names to be added to the component. */
  className: _propTypes.default.string,

  /** Limit the number of items displayed within TagList */
  limit: _propTypes.default.number,

  /** Enables the ability to remove child `Tag` components. */
  isRemovable: _propTypes.default.bool,

  /** Callback function when a child `Tag` is removed and unmounted. */
  onRemove: _propTypes.default.func,

  /** Callback function when a the clear all button was clicked */
  onRemoveAll: _propTypes.default.func,

  /** Wraps component in an `Overflow` component. */
  overflowFade: _propTypes.default.bool,

  /** Display a Clear all button at the end of the list */
  clearAll: _propTypes.default.bool,

  /** Size of all tag */
  size: _propTypes.default.oneOf(['md', 'sm']),

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