@massds/mayflower-react/dist/Tags/index.mjs

React versions of Mayflower design system UI components

function _inheritsLoose(t, o) { t.prototype = Object.create(o.prototype), t.prototype.constructor = t, _setPrototypeOf(t, o); }
function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }
/**
 * Tags module.
 * @module @massds/mayflower-react/Tags
 * @requires module:@massds/mayflower-assets/scss/02-molecules/tags
 * @requires module:@massds/mayflower-assets/scss/01-atoms/button-tag
 */
import React from "react";
import PropTypes from "prop-types";
import ButtonTag from "../ButtonTag/index.mjs";
let Tags = /*#__PURE__*/function (_React$Component) {
  function Tags(props) {
    var _this;
    _this = _React$Component.call(this, props) || this;
    _this.state = {
      tags: _this.props.tags ? _this.props.tags : null
    };
    return _this;
  }

  // eslint-disable-next-line camelcase
  _inheritsLoose(Tags, _React$Component);
  var _proto = Tags.prototype;
  _proto.UNSAFE_componentWillReceiveProps = function UNSAFE_componentWillReceiveProps(nextProps) {
    this.setState({
      tags: nextProps.tags
    });
  };
  _proto.handleClearAll = function handleClearAll() {
    if (typeof this.props.onClearCallback === 'function') {
      this.props.onClearCallback();
    }
    this.setState({
      tags: null
    });
  };
  _proto.handleClearThis = function handleClearThis(event) {
    if (typeof this.props.onClearThisCallback === 'function') {
      this.props.onClearThisCallback(event.target, event);
    }
  };
  _proto.render = function render() {
    const tags = this.state.tags;
    return tags && /*#__PURE__*/React.createElement("div", {
      className: "ma__tags"
    }, tags.map((tag, tagIndex) => /*#__PURE__*/React.createElement(ButtonTag, {
      type: tag.type,
      value: tag.value,
      text: tag.text,
      description: tag.description,
      handleClick: e => this.handleClearThis(e)
      /* eslint-disable-next-line react/no-array-index-key */,
      key: "resultsHeading.tag." + tagIndex
    })), tags.length > 1 && /*#__PURE__*/React.createElement("button", {
      type: "button",
      className: "ma__tags-clear js-results-heading-clear",
      onClick: () => this.handleClearAll()
    }, "Clear all", this.props.clearAllContext && /*#__PURE__*/React.createElement("span", {
      className: "ma__visually-hidden"
    }, " " + this.props.clearAllContext)));
  };
  return Tags;
}(React.Component);
Tags.propTypes = process.env.NODE_ENV !== "production" ? {
  /** The tags applied to the search list <br/>
        type: The type of tag <br />
        text: The content displayed by the tag (required) <br />
        description: The visually hidden description of the tag <br />
        value: The value of the tag  */
  tags: PropTypes.arrayOf(PropTypes.shape({
    type: PropTypes.string,
    text: PropTypes.node.isRequired,
    description: PropTypes.node,
    value: PropTypes.string
  })),
  /** Custom onClick function that triggers when 'Clear all' button is clicked */
  onClearCallback: PropTypes.func,
  /** Custom onClick function that triggers when a tag is clicked */
  onClearThisCallback: PropTypes.func,
  /** Clear all button context for screen readers. */
  clearAllContext: PropTypes.string
} : {};
export default Tags;