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

React versions of Mayflower design system UI components

/**
 * 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 React from "react";
import PropTypes from "prop-types";
import classNames from "classnames"; // import child components

import Button from "../Button/index.mjs";

const FilterBox = props => {
  const action = props.action,
        submitButton = props.submitButton,
        clearButton = props.clearButton,
        active = props.active,
        fields = props.fields,
        filterLabel = props.filterLabel,
        filterNote = props.filterNote;

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

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

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

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

  /** Apply active state  */
  active: PropTypes.bool,

  /** The form action  */
  action: PropTypes.string,

  /** The aria-label for the filter form element  */
  filterLabel: PropTypes.string,

  /** An additional note for the SR users describing the functionality of the filter  */
  filterNote: PropTypes.string,

  /** @forms/Button */
  submitButton: PropTypes.shape(Button.PropTypes),

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

  /** Controls if we allow filterbox to render only on mobile */
  filterDesktopHidden: PropTypes.bool,

  /** An array of filter fields */
  fields: PropTypes.arrayOf(PropTypes.shape({
    "class": PropTypes.string,
    component: PropTypes.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: '#'
};
export default FilterBox;