@massds/mayflower-react/dist/FilterBox/index.js

React versions of Mayflower design system UI components

"use strict";

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("../Button/index.js"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

/**
 * FilterBox module.
 * @module @massds/mayflower-react/FilterBox
 * @requires module:@massds/mayflower-assets/scss/01-atoms/forms
 * @requires module:@massds/mayflower-assets/scss/01-atoms/buttons
 */
// import child components
var FilterBox = function FilterBox(props) {
  var action = props.action,
      submitButton = props.submitButton,
      clearButton = props.clearButton,
      active = props.active,
      fields = props.fields,
      filterLabel = props.filterLabel,
      filterNote = props.filterNote;

  var handleClear = function handleClear() {
    if (typeof props.clearButton.onClearCallback === 'function') {
      props.clearButton.onClearCallback();
    }
  };

  var filterBoxClasses = (0, _classnames["default"])({
    'ma__filter-box': true,
    'ma__filter-box--desktop-hidden': props.filterDesktopHidden
  });
  var filterBoxFormClasses = (0, _classnames["default"])({
    'ma__filter-box__form js-filter-box': true,
    'ma__filter-box__form--active': active
  });
  return /*#__PURE__*/_react["default"].createElement("section", {
    className: filterBoxClasses,
    id: props.id
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: "ma__filter-box__container"
  }, /*#__PURE__*/_react["default"].createElement("form", {
    className: filterBoxFormClasses,
    action: action,
    "aria-describedby": filterNote ? props.id + "-note" : null,
    "aria-label": filterLabel || null
  }, filterNote && /*#__PURE__*/_react["default"].createElement("div", {
    id: props.id + "-note",
    "aria-hidden": "true",
    className: "ma-visually-hidden"
  }, filterNote), /*#__PURE__*/_react["default"].createElement("div", {
    className: "main-content--two"
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: "ma__filter-box__filters"
  }, fields.map(function (field, i) {
    return (
      /*#__PURE__*/

      /* eslint-disable-next-line react/no-array-index-key */
      _react["default"].createElement("div", {
        className: field["class"],
        key: "filterbox-field-" + i
      }, field.component)
    );
  })), (submitButton || clearButton) && /*#__PURE__*/_react["default"].createElement("div", {
    className: "ma__filter-box__controls"
  }, submitButton && /*#__PURE__*/_react["default"].createElement("div", {
    className: "ma__filter-box__button"
  }, /*#__PURE__*/_react["default"].createElement(_index["default"], submitButton)), clearButton && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("button", {
    type: "button",
    "aria-label": clearButton.info,
    className: "ma__filter-box__clear js-filter-box-clear",
    onClick: function onClick() {
      return handleClear();
    }
  }, clearButton.text)))))));
};

FilterBox.propTypes = process.env.NODE_ENV !== "production" ? {
  /** The id of the FilterBox component. */
  id: _propTypes["default"].string,

  /** Apply active state  */
  active: _propTypes["default"].bool,

  /** The form action  */
  action: _propTypes["default"].string,

  /** The aria-label for the filter form element  */
  filterLabel: _propTypes["default"].string,

  /** An additional note for the SR users describing the functionality of the filter  */
  filterNote: _propTypes["default"].string,

  /** @forms/Button */
  submitButton: _propTypes["default"].shape(_index["default"].PropTypes),

  /** Clear all button at the bottom of the filter */
  clearButton: _propTypes["default"].shape({
    text: _propTypes["default"].string,
    info: _propTypes["default"].string,
    onClearCallback: _propTypes["default"].func
  }),

  /** Controls if we allow filterbox to render only on mobile */
  filterDesktopHidden: _propTypes["default"].bool,

  /** An array of filter fields */
  fields: _propTypes["default"].arrayOf(_propTypes["default"].shape({
    "class": _propTypes["default"].string,
    component: _propTypes["default"].element
  }))
} : {};
FilterBox.defaultProps = {
  id: 'filter-box',
  active: false,
  clearButton: {
    text: 'Clear all filters',
    info: 'Clear all applied filters'
  },
  submitButton: {
    text: 'Submit',
    type: 'submit',
    size: '',
    theme: '',
    usage: ''
  },
  action: '#'
};
var _default = FilterBox;
exports["default"] = _default;
module.exports = exports.default;