@bento-core/query-bar

Introduction

This package provides the Query Bar component that displays the current Facet Search and Local Find filters on the Dashboard/Explore page. It also provides the direct ability to reset all or some of the filters with the click of a button. It is designed to be implemented directly with the:

• @bento-core/local-find
• @bento-core/facet-filter

packages. For the component's technical details, please see DESIGN.md.

See below for usage instructions.

Usage

Quick Start

Basic Usage

import { QueryBarGenerator } from '@bento-core/query-bar';

// Generate the component
const { QueryBar } = QueryBarGenerator({
  /** See Generator Options **/
});

// Use the component (e.g. In dashTemplateView.js)
const Layout = ({ classes, data, states, /* ... */}) => {
  return (
    {/* other components */}
    <div className={classes.rightContent}>
      <div className={classes.widgetsContainer}>
        {/* other components */}

        <QueryBar statusReducer={null} localFind={null} />

        {/* other components */}
      </div>
    </div>
    {/* other components */}
  );
};

Warning: The statusReducer prop requires the dashboard API data merged with the facetsConfig property. Please see the example in the demo implementation here.

Generator Configuration

See the available DEFAULT_CONFIG_QUERYBAR object to understand the component generator options. You can choose to override config, and/or functions. You DO NOT need to override all of the options if you don't want to. The component generator will only use the options you provide.

const CONFIG = {
  /* General Component Configuration */
  config: {
    /**
     * The maximum number of items to display in a query bar facet section
     * @var {number}
     */
    maxItems: 2,
    /**
     * overirdes maxItems to display all the active filter items
     * @var {boolean}
     */
    displayAllActiveFilters: false,
  },

  /* Component Helper Functions */
  functions: {
    /**
     * Clear all active facet/local find filters
     *
     * @returns {void}
     */
    clearAll: () => {},

    /**
     * Clear all active Local Find file upload filters
     *
     * @returns {void}
     */
    clearUpload: () => {},

    /**
     * Clear all active Local Find searchbox filters
     *
     * @returns {void}
     */
    clearAutocomplete: () => {},

    /**
     * Delete a specific Local Find searchbox filter (case)
     *
     * @param {string} title
     * @returns {void}
     */
    deleteAutocompleteItem: (title) => {},

    /**
     * Reset a specific facet section (e.g. Program)
     *
     * @param {object} section the configuration object for the section
     * @returns {void}
     */
    resetFacetSection: (section) => {},

    /**
     * Reset a specific facet checkbox (e.g. Program > TAILORx)
     *
     * @param {object} section the configuration object for the section
     * @param {string} checkbox the name of the checkbox
     * @returns {void}
     */
    resetFacetCheckbox: (section, checkbox) => {},

    /**
     * Reset a specific slider section (e.g. Age)
     *
     * @param {object} section the configuration object for the section
     * @returns {void}
     */
    resetFacetSlider: (section) => {},
  },
};

Exports

This component exports the following components and objects by default. You may use them as necessary.

• QueryBarGenerator - The component generator function
• DEFAULT_CONFIG_QUERYBAR - The default configuration object
• DEFAULT_STYLES_QUERYBAR – The default Material UI styles

Props

This component, which is generated by the provided generator, accepts the following props directly. The default value is specified, along with the possible values. The classes prop will override the default styling for any provided classes.

<QueryBar
  statusReducer={undefined}  // {object} - The status reducer object with the section `facetsConfig` combined
  localFind={undefined}      // {object} - The local find reducer object (Not modified)
  classes={undefined}        // {object} - The Material UI classes object. Overrides default styling for provided classes.
/>

Warning: The statusReducer prop requires the dashboard API data merged with the facetsConfig property. Please see the example in the demo implementation here.