@massds/mayflower-react/dist/SearchBanner/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 _classnames = _interopRequireDefault(require("classnames"));

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

var _index2 = _interopRequireDefault(require("../HeaderSearch/index.js"));

var _IconChevron = _interopRequireDefault(require("../Icon/IconChevron.js"));

var _index3 = _interopRequireDefault(require("../Tabs/index.js"));

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

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }

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

// eslint-disable-next-line import/no-unresolved
var SearchBanner = /*#__PURE__*/function (_React$Component) {
  _inheritsLoose(SearchBanner, _React$Component);

  function SearchBanner(props) {
    var _this;

    _this = _React$Component.call(this, props) || this;
    _this.state = {
      filterBoxExpanded: false
    };
    _this.toggleFilterBox = _this.toggleFilterBox.bind(_assertThisInitialized(_this));
    return _this;
  } // eslint-disable-next-line camelcase


  var _proto = SearchBanner.prototype;

  _proto.UNSAFE_componentWillReceiveProps = function UNSAFE_componentWillReceiveProps(nextProps) {
    var filterBoxExpanded = nextProps.filterBoxExpanded;

    if (this.state.filterBoxExpanded !== filterBoxExpanded) {
      this.setState({
        filterBoxExpanded: filterBoxExpanded
      });
    }
  };

  _proto.toggleFilterBox = function toggleFilterBox() {
    this.setState(function (prevState) {
      return {
        filterBoxExpanded: !prevState.filterBoxExpanded
      };
    });

    if (typeof this.props.toggleButtonOnClick === 'function') {
      this.props.toggleButtonOnClick(this.state.filterBoxExpanded);
    }
  };

  _proto.render = function render() {
    var _this2 = this,
        _classNames;

    var _this$props = this.props,
        tabs = _this$props.tabs,
        searchBox = _this$props.searchBox,
        filterBox = _this$props.filterBox,
        filterToggleText = _this$props.filterToggleText,
        className = _this$props.className,
        searchFormTitle = _this$props.searchFormTitle;
    var submitButton;

    if (filterBox && filterBox.submitButton) {
      var outerClickHandler = filterBox.submitButton.onClick;
      submitButton = _extends({}, filterBox.submitButton, {
        onClick: function onClick(e) {
          _this2.toggleFilterBox();

          outerClickHandler(e);
        }
      });
    }

    var searchBannerClasses = (0, _classnames["default"])((_classNames = {
      'ma__search-banner__top': true,
      'ma__search-banner__top--noTabs': !tabs,
      'ma__search-banner__top--noFilters': !filterBox
    }, _classNames["" + className] = !!className, _classNames));
    var toggleButtonClasses = (0, _classnames["default"])({
      'ma__search-banner__filter-box-toggle': true,
      'ma__search-banner__filter-box-toggle--expanded': this.state.filterBoxExpanded,
      'ma__search-banner__filter-box-toggle--desktop-hidden': this.props.filterDesktopHidden
    });
    return /*#__PURE__*/_react["default"].createElement("div", {
      className: searchBannerClasses
    }, /*#__PURE__*/_react["default"].createElement("div", {
      className: "main-content--two"
    }, searchFormTitle ? /*#__PURE__*/_react["default"].createElement("h2", {
      className: "visually-hidden"
    }, searchFormTitle) : /*#__PURE__*/_react["default"].createElement("h2", {
      className: "visually-hidden"
    }, "Search Form"), /*#__PURE__*/_react["default"].createElement(_index2["default"], searchBox)), tabs && /*#__PURE__*/_react["default"].createElement(_index3["default"], tabs), !!filterBox && /*#__PURE__*/_react["default"].createElement("div", {
      className: "ma__search-banner__filter-box-container"
    }, /*#__PURE__*/_react["default"].createElement("div", {
      className: "main-content--two ma__search-banner__filter-box-toggle-container"
    }, /*#__PURE__*/_react["default"].createElement("button", {
      onClick: this.toggleFilterBox,
      type: "button",
      className: toggleButtonClasses,
      "aria-controls": this.props.filterBox.id,
      "aria-expanded": this.state.filterBoxExpanded
    }, filterToggleText, /*#__PURE__*/_react["default"].createElement(_IconChevron["default"], {
      width: 20,
      height: 20
    }))), this.state.filterBoxExpanded && /*#__PURE__*/_react["default"].createElement(_index["default"], _extends({}, filterBox, {
      submitButton: submitButton
    }))));
  };

  return SearchBanner;
}(_react["default"].Component);

SearchBanner.propTypes = process.env.NODE_ENV !== "production" ? {
  /** Custom class added to the root element. */
  className: _propTypes["default"].string,

  /** `@molecules/HeaderSearch` */
  searchBox: _propTypes["default"].shape(_index2["default"].propTypes).isRequired,

  /** `@molecules/Tabs` */
  tabs: _propTypes["default"].shape(_index3["default"].propTypes),

  /** `@organisms/FilterBox` */
  filterBox: _propTypes["default"].shape(_index["default"].propTypes),

  /** filterbox toggle button custom function */
  toggleButtonOnClick: _propTypes["default"].func,

  /** Controls if filterBox is expanded */
  filterBoxExpanded: _propTypes["default"].bool,

  /** Controls if we allow filterbox toggle to render only on mobile */
  filterDesktopHidden: _propTypes["default"].bool,

  /** Filter box toggle button text */
  filterToggleText: _propTypes["default"].string,

  /** The visually hidden search form title */
  searchFormTitle: _propTypes["default"].string
} : {};
SearchBanner.defaultProps = {
  filterDesktopHidden: false,
  filterToggleText: 'More Filters',
  filterBoxExpanded: false
};
var _default = SearchBanner;
exports["default"] = _default;
module.exports = exports.default;