Filter

Filter Component

Overview

The Filter component is a customizable filter component built with React and React-Bootstrap. It supports various sub-components for creating horizontal and vertical filter layouts with dropdowns, navigation links, and pane contents.

Component Structure

1. Filter: The main container component that manages horizontal filter items.
2. FilterDropdown: A dropdown container for filter options.
3. FilterToggle: A button to toggle the dropdown menu.
4. FilterMenu: A container for menu items in the dropdown.
5. FilterNav: A vertical navigation container.
6. FilterNavLink: A navigation link within the vertical menu.
7. FilterContent: The content container for tab contents.
8. FilterPane: A tab pane for filter content sections.
9. FilterPaneHeader: The header of a tab pane, including a clear button.
10. FilterPaneBody: The body section of a tab pane.
11. FilterPaneFooter: The footer section of a tab pane with action buttons.

Props

Filter

• children (node): The child elements to be rendered inside the filter.
• className (string): Optional additional CSS class for styling.

FilterDropdown

• children (node): The dropdown items to be rendered.
• className (string): Optional additional CSS class for styling.

FilterToggle

• icon (string): Optional icon to display within the toggle button.
• className (string): Optional additional CSS class for styling.
• title (string): Optional title text to display next to the icon.

FilterMenu

• children (node): Menu items to be rendered within the dropdown menu.
• className (string): Optional additional CSS class for styling.
• defaultActiveKey (string): The key of the default active tab.

FilterNav

• children (node): Navigation items to be rendered.
• className (string): Optional additional CSS class for styling.

FilterNavLink

• icon (string): Optional icon to display next to the title.
• className (string): Optional additional CSS class for styling.
• title (string): Title text to display.
• eventKey (string): Key for identifying the navigation item.

FilterContent

• children (node): The content to be rendered inside the tab container.
• className (string): Optional additional CSS class for styling.

FilterPane

• children (node): The content to be displayed in the pane.
• className (string): Optional additional CSS class for styling.
• eventKey (string): Key for identifying the tab pane.

FilterPaneHeader

• className (string): Optional additional CSS class for styling.
• onClear (func): Function to call when the clear button is clicked.
• title (string): Title text to display in the header.
• icon (string): Optional icon to display in the header.

FilterPaneBody

• children (node): The content to be displayed in the body of the pane.
• className (string): Optional additional CSS class for styling.

FilterPaneFooter

• onClear (func): Function to call when the clear button is clicked.
• onApply (func): Function to call when the apply button is clicked.
• className (string): Optional additional CSS class for styling.

Usage

import Filter from './Filter';

const Example = () => (
  <Filter className="my-filter">
    <Filter.Toggle icon="filter-icon" title="Filter" />
    <Filter.Dropdown>
      <Filter.Menu defaultActiveKey="tab1">
        <FilterNav>
          <Filter.Nav.Link icon="icon1" title="Option 1" eventKey="tab1" />
          <Filter.Nav.Link icon="icon2" title="Option 2" eventKey="tab2" />
        </FilterNav>
        <Filter.Content>
          <Filter.Pane eventKey="tab1">
            <Filter.Pane.Header title="Pane 1" onClear={() => console.log('Clear')} />
            <Filter.Pane.Body>
              Content for pane 1
            </Filter.Pane.Body>
            <Filter.Pane.Footer
              onClear={() => console.log('Clear')}
              onApply={() => console.log('Apply')}
            />
          </Filter.Pane>
          <Filter.Pane eventKey="tab2">
            <Filter.Pane.Header title="Pane 2" onClear={() => console.log('Clear')} />
            <Filter.Pane.Body>
              Content for pane 2
            </Filter.Pane.Body>
            <Filter.Pane.Footer
              onClear={() => console.log('Clear')}
              onApply={() => console.log('Apply')}
            />
          </Filter.Pane>
        </Filter.Content>
      </Filter.Menu>
    </Filter.Dropdown>
  </Filter>
);

Notes

• The Filter component and its sub-components are designed for flexibility and reusability in creating complex filter UIs.
• Use CSS classes provided for styling or customize them as needed in your project's stylesheet.