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

React versions of Mayflower design system UI components

"use strict";

exports.__esModule = true;
exports["default"] = void 0;

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

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

var _index = _interopRequireDefault(require("../ButtonTag/index.js"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; }

var Tags = /*#__PURE__*/function (_React$Component) {
  _inheritsLoose(Tags, _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


  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() {
    var _this2 = this;

    var tags = this.state.tags;
    return tags && /*#__PURE__*/_react["default"].createElement("div", {
      className: "ma__tags"
    }, tags.map(function (tag, tagIndex) {
      return /*#__PURE__*/_react["default"].createElement(_index["default"], {
        type: tag.type,
        value: tag.value,
        text: tag.text,
        description: tag.description,
        handleClick: function handleClick(e) {
          return _this2.handleClearThis(e);
        }
        /* eslint-disable-next-line react/no-array-index-key */
        ,
        key: "resultsHeading.tag." + tagIndex
      });
    }), tags.length > 1 && /*#__PURE__*/_react["default"].createElement("button", {
      type: "button",
      className: "ma__tags-clear js-results-heading-clear",
      onClick: function onClick() {
        return _this2.handleClearAll();
      }
    }, "Clear all", this.props.clearAllContext && /*#__PURE__*/_react["default"].createElement("span", {
      className: "ma__visually-hidden"
    }, " " + this.props.clearAllContext)));
  };

  return Tags;
}(_react["default"].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["default"].arrayOf(_propTypes["default"].shape({
    type: _propTypes["default"].string,
    text: _propTypes["default"].node.isRequired,
    description: _propTypes["default"].node,
    value: _propTypes["default"].string
  })),

  /** Custom onClick function that triggers when 'Clear all' button is clicked */
  onClearCallback: _propTypes["default"].func,

  /** Custom onClick function that triggers when a tag is clicked */
  onClearThisCallback: _propTypes["default"].func,

  /** Clear all button context for screen readers. */
  clearAllContext: _propTypes["default"].string
} : {};
var _default = Tags;
exports["default"] = _default;
module.exports = exports.default;