@massds/mayflower-react
Version:
React versions of Mayflower design system UI components
127 lines • 6 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); }
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
*/
import React from "react";
import PropTypes from "prop-types";
import is from "is";
import ButtonWithIcon from "../ButtonWithIcon/index.mjs";
import TypeAheadDropdown from "../TypeAheadDropdown/index.mjs";
// eslint-disable-next-line import/no-unresolved
import IconSearch from "../Icon/IconSearch.mjs";
let HeaderSearch = /*#__PURE__*/function (_React$Component) {
function HeaderSearch(props) {
var _this;
_this = _React$Component.call(this, props) || this;
_defineProperty(_this, "handleChange", event => {
const 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", event => {
if (is.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() {
const headerSearch = _extends({}, this.props);
const orgDropdown = headerSearch.orgDropdown;
const shouldShowTypeAhead = orgDropdown && orgDropdown.dropdownButton && orgDropdown.inputText;
const 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.createElement(IconSearch, null);
return /*#__PURE__*/React.createElement("div", {
className: "ma__header-search__wrapper ma__header-search__wrapper--responsive"
}, shouldShowTypeAhead && /*#__PURE__*/React.createElement("div", {
className: "ma__header-search__pre-filter"
}, /*#__PURE__*/React.createElement(TypeAheadDropdown, orgDropdown)), /*#__PURE__*/React.createElement("div", {
className: "ma__header-search"
}, /*#__PURE__*/React.createElement("form", {
action: "#",
className: "ma__form",
onSubmit: this.handleSubmit,
role: "search"
}, /*#__PURE__*/React.createElement("label", {
htmlFor: headerSearch.id,
className: "ma__header-search__label"
}, headerSearch.label), /*#__PURE__*/React.createElement("input", inputProps), this.props.suggestions && this.props.suggestions, this.props.postInputFilter && /*#__PURE__*/React.createElement("div", {
className: "ma__header-search__post-filter"
}, this.props.postInputFilter), /*#__PURE__*/React.createElement(ButtonWithIcon, headerSearch.buttonSearch))));
};
return HeaderSearch;
}(React.Component);
HeaderSearch.propTypes = process.env.NODE_ENV !== "production" ? {
/** The ID for the input */
id: PropTypes.string,
/** The label text for the input */
label: PropTypes.string,
/** The placeholder text for the input */
placeholder: PropTypes.string,
/** The Search button */
buttonSearch: PropTypes.shape(ButtonWithIcon.propTypes),
/** Custom submit function */
onSubmit: PropTypes.func,
/** Custom change function for the text input */
onChange: PropTypes.func,
/** Default input text value */
defaultText: PropTypes.string,
/** Render suggestions as passable element */
suggestions: PropTypes.element,
/** @molecules/TypeAheadDropdown */
orgDropdown: PropTypes.shape(TypeAheadDropdown.propTypes),
/** postInputFilter passable component */
postInputFilter: PropTypes.element,
/** A ref object as created by React.createRef(). Will be applied to the input element. */
inputRef: PropTypes.oneOfType([
// Either a function
PropTypes.func,
// Or the instance of a DOM native element (see the note about SSR)
/* eslint-disable-next-line react/forbid-prop-types */
PropTypes.shape({
current: PropTypes.object
})]),
/** Autocomplete input attribute value */
autoComplete: PropTypes.string
} : {};
HeaderSearch.defaultProps = {
id: 'header-search',
label: 'Search terms',
placeholder: 'Search Mass.gov',
buttonSearch: {
usage: 'secondary'
}
};
export default HeaderSearch;