@massds/mayflower-react
Version:
React versions of Mayflower design system UI components
131 lines (130 loc) • 6.71 kB
JavaScript
;
exports.__esModule = true;
exports["default"] = void 0;
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _is = _interopRequireDefault(require("is"));
var _index = _interopRequireDefault(require("../ButtonWithIcon/index.js"));
var _index2 = _interopRequireDefault(require("../TypeAheadDropdown/index.js"));
var _IconSearch = _interopRequireDefault(require("../Icon/IconSearch.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); }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); } /**
* HeaderSearch module.
* @module @massds/mayflower-react/HeaderSearch
* @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
*/ // eslint-disable-next-line import/no-unresolved
var HeaderSearch = /*#__PURE__*/function (_React$Component) {
function HeaderSearch(props) {
var _this;
_this = _React$Component.call(this, props) || this;
_defineProperty(_this, "handleChange", function (event) {
var query = event.target.value;
_this.setState({
value: query
});
// invokes custom function if passed in the component
if (typeof _this.props.onChange === 'function') {
_this.props.onChange(query);
}
});
_defineProperty(_this, "handleSubmit", function (event) {
if (_is["default"].fn(_this.props.onSubmit)) {
_this.props.onSubmit(event);
}
});
_this.state = {
value: _this.props.defaultText
};
return _this;
}
_inheritsLoose(HeaderSearch, _React$Component);
var _proto = HeaderSearch.prototype;
_proto.render = function render() {
var headerSearch = _extends({}, this.props);
var orgDropdown = headerSearch.orgDropdown;
var shouldShowTypeAhead = orgDropdown && orgDropdown.dropdownButton && orgDropdown.inputText;
var inputProps = {
id: headerSearch.id,
className: 'ma__header-search__input',
placeholder: headerSearch.placeholder,
onChange: this.handleChange,
type: 'search',
value: this.state.value,
autoComplete: headerSearch.autoComplete
};
if (this.props.inputRef) {
inputProps.ref = this.props.inputRef;
}
headerSearch.buttonSearch.icon = /*#__PURE__*/_react["default"].createElement(_IconSearch["default"], null);
return /*#__PURE__*/_react["default"].createElement("div", {
className: "ma__header-search__wrapper ma__header-search__wrapper--responsive"
}, shouldShowTypeAhead && /*#__PURE__*/_react["default"].createElement("div", {
className: "ma__header-search__pre-filter"
}, /*#__PURE__*/_react["default"].createElement(_index2["default"], orgDropdown)), /*#__PURE__*/_react["default"].createElement("div", {
className: "ma__header-search"
}, /*#__PURE__*/_react["default"].createElement("form", {
action: "#",
className: "ma__form",
onSubmit: this.handleSubmit,
role: "search"
}, /*#__PURE__*/_react["default"].createElement("label", {
htmlFor: headerSearch.id,
className: "ma__header-search__label"
}, headerSearch.label), /*#__PURE__*/_react["default"].createElement("input", inputProps), this.props.suggestions && this.props.suggestions, this.props.postInputFilter && /*#__PURE__*/_react["default"].createElement("div", {
className: "ma__header-search__post-filter"
}, this.props.postInputFilter), /*#__PURE__*/_react["default"].createElement(_index["default"], headerSearch.buttonSearch))));
};
return HeaderSearch;
}(_react["default"].Component);
HeaderSearch.propTypes = process.env.NODE_ENV !== "production" ? {
/** The ID for the input */
id: _propTypes["default"].string,
/** The label text for the input */
label: _propTypes["default"].string,
/** The placeholder text for the input */
placeholder: _propTypes["default"].string,
/** The Search button */
buttonSearch: _propTypes["default"].shape(_index["default"].propTypes),
/** Custom submit function */
onSubmit: _propTypes["default"].func,
/** Custom change function for the text input */
onChange: _propTypes["default"].func,
/** Default input text value */
defaultText: _propTypes["default"].string,
/** Render suggestions as passable element */
suggestions: _propTypes["default"].element,
/** @molecules/TypeAheadDropdown */
orgDropdown: _propTypes["default"].shape(_index2["default"].propTypes),
/** postInputFilter passable component */
postInputFilter: _propTypes["default"].element,
/** A ref object as created by React.createRef(). Will be applied to the input element. */
inputRef: _propTypes["default"].oneOfType([
// Either a function
_propTypes["default"].func,
// Or the instance of a DOM native element (see the note about SSR)
/* eslint-disable-next-line react/forbid-prop-types */
_propTypes["default"].shape({
current: _propTypes["default"].object
})]),
/** Autocomplete input attribute value */
autoComplete: _propTypes["default"].string
} : {};
HeaderSearch.defaultProps = {
id: 'header-search',
label: 'Search terms',
placeholder: 'Search Mass.gov',
buttonSearch: {
usage: 'secondary'
}
};
var _default = exports["default"] = HeaderSearch;
module.exports = exports.default;