@massds/mayflower-react
Version:
React versions of Mayflower design system UI components
136 lines (135 loc) • 6.21 kB
JavaScript
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
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); }
/**
* 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 IconCaretDown from "../Icon/IconCaretDown.mjs";
import Tabs from "../Tabs/index.mjs";
// eslint-disable-next-line import/no-unresolved
let SearchBanner = /*#__PURE__*/function (_React$Component) {
function SearchBanner(props) {
var _this;
_this = _React$Component.call(this, props) || this;
_this.state = {
filterBoxExpanded: false
};
_this.toggleFilterBox = _this.toggleFilterBox.bind(_this);
return _this;
}
// eslint-disable-next-line camelcase
_inheritsLoose(SearchBanner, _React$Component);
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(IconCaretDown, {
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;