@massds/mayflower-react
Version:
React versions of Mayflower design system UI components
143 lines (141 loc) • 7.03 kB
JavaScript
;
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 _IconCaretDown = _interopRequireDefault(require("../Icon/IconCaretDown.js"));
var _index3 = _interopRequireDefault(require("../Tabs/index.js"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
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
*/ // eslint-disable-next-line import/no-unresolved
// eslint-disable-next-line import/no-unresolved
var 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) {
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(_IconCaretDown["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 = exports["default"] = SearchBanner;
module.exports = exports.default;