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

React versions of Mayflower design system UI components

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; }

/**
 * SearchBanner module.
 * @module @massds/mayflower-react/SearchBanner
 * @requires module:@massds/mayflower-assets/scss/01-atoms/forms
 * @requires module:@massds/mayflower-assets/scss/01-atoms/buttons
 * @requires module:@massds/mayflower-assets/scss/01-atoms/button-with-icon
 * @requires module:@massds/mayflower-assets/scss/01-atoms/button-search
 * @requires module:@massds/mayflower-assets/scss/01-atoms/input-typeahead
 * @requires module:@massds/mayflower-assets/scss/01-atoms/svg-icons
 * @requires module:@massds/mayflower-assets/scss/01-atoms/svg-loc-icons
 * @requires module:@massds/mayflower-assets/scss/02-molecules/tabs
 */
import React from "react";
import PropTypes from "prop-types";
import classNames from "classnames";
import FilterBox from "../FilterBox/index.mjs";
import HeaderSearch from "../HeaderSearch/index.mjs"; // eslint-disable-next-line import/no-unresolved

import IconChevron from "../Icon/IconChevron.mjs";
import Tabs from "../Tabs/index.mjs"; // eslint-disable-next-line import/no-unresolved

let 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) {
    const filterBoxExpanded = nextProps.filterBoxExpanded;

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

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

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

  _proto.render = function render() {
    var _classNames;

    const _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;
    let submitButton;

    if (filterBox && filterBox.submitButton) {
      const outerClickHandler = filterBox.submitButton.onClick;
      submitButton = _extends({}, filterBox.submitButton, {
        onClick: e => {
          this.toggleFilterBox();
          outerClickHandler(e);
        }
      });
    }

    const searchBannerClasses = classNames((_classNames = {
      'ma__search-banner__top': true,
      'ma__search-banner__top--noTabs': !tabs,
      'ma__search-banner__top--noFilters': !filterBox
    }, _classNames["" + className] = !!className, _classNames));
    const toggleButtonClasses = classNames({
      '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.createElement("div", {
      className: searchBannerClasses
    }, /*#__PURE__*/React.createElement("div", {
      className: "main-content--two"
    }, searchFormTitle ? /*#__PURE__*/React.createElement("h2", {
      className: "visually-hidden"
    }, searchFormTitle) : /*#__PURE__*/React.createElement("h2", {
      className: "visually-hidden"
    }, "Search Form"), /*#__PURE__*/React.createElement(HeaderSearch, searchBox)), tabs && /*#__PURE__*/React.createElement(Tabs, tabs), !!filterBox && /*#__PURE__*/React.createElement("div", {
      className: "ma__search-banner__filter-box-container"
    }, /*#__PURE__*/React.createElement("div", {
      className: "main-content--two ma__search-banner__filter-box-toggle-container"
    }, /*#__PURE__*/React.createElement("button", {
      onClick: this.toggleFilterBox,
      type: "button",
      className: toggleButtonClasses,
      "aria-controls": this.props.filterBox.id,
      "aria-expanded": this.state.filterBoxExpanded
    }, filterToggleText, /*#__PURE__*/React.createElement(IconChevron, {
      width: 20,
      height: 20
    }))), this.state.filterBoxExpanded && /*#__PURE__*/React.createElement(FilterBox, _extends({}, filterBox, {
      submitButton: submitButton
    }))));
  };

  return SearchBanner;
}(React.Component);

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

  /** `@molecules/HeaderSearch` */
  searchBox: PropTypes.shape(HeaderSearch.propTypes).isRequired,

  /** `@molecules/Tabs` */
  tabs: PropTypes.shape(Tabs.propTypes),

  /** `@organisms/FilterBox` */
  filterBox: PropTypes.shape(FilterBox.propTypes),

  /** filterbox toggle button custom function */
  toggleButtonOnClick: PropTypes.func,

  /** Controls if filterBox is expanded */
  filterBoxExpanded: PropTypes.bool,

  /** Controls if we allow filterbox toggle to render only on mobile */
  filterDesktopHidden: PropTypes.bool,

  /** Filter box toggle button text */
  filterToggleText: PropTypes.string,

  /** The visually hidden search form title */
  searchFormTitle: PropTypes.string
} : {};
SearchBanner.defaultProps = {
  filterDesktopHidden: false,
  filterToggleText: 'More Filters',
  filterBoxExpanded: false
};
export default SearchBanner;