Root: ui|v2.5|src|components|List|Filters: FilterButton.tsx

FilterButton.tsx

The FilterButton component is a React functional component responsible for rendering a button that allows users to access filters and displays a badge indicating the number of active filters applied.

Purpose:

The purpose of the FilterButton component is to provide users with a visual indicator of the presence of active filters and allow them to access the filter interface when clicked.

Props:

1. filter: An instance of ListFilterModel representing the filter model containing information about the applied filters.
2. onClick: A callback function invoked when the filter button is clicked.

Functionality:

• Renders a button with an icon (filter icon) and a badge indicating the number of active filters applied.
• Utilizes the Icon component from src/components/Shared/Icon to render the filter icon.
• The badge displays the count of active filters based on the count() method of the filter object.
• Invokes the onClick callback function when the button is clicked to trigger the display of the filter interface.

Example Usage:

import { FilterButton } from "./FilterButton";

// Inside a React component
<FilterButton filter={listFilterModel} onClick={handleFilterButtonClick} />

Explanation:

The FilterButton component enhances user experience by providing a visual cue for the presence of active filters and enabling easy access to the filter interface.