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

LabeledIdFilter.tsx

The LabeledIdFilter component is a React functional component responsible for rendering a filter interface with labeled ID selections. It utilizes the FilterSelect component to allow users to select multiple items with labels.

Purpose:

The purpose of the LabeledIdFilter component is to provide a filter interface for selecting multiple items with labels. It receives a criterion object representing the filtering criteria and invokes a callback function when the selection changes.

Props:

1. criterion: A Criterion<ILabeledId[]> object representing the filtering criterion.
2. onValueChanged: A callback function invoked when the selection of labeled IDs changes. It receives the new selection as an array of ILabeledId objects.

Functionality:

• Determines the type of input based on the inputType property of the criterionOption object.
• Renders the FilterSelect component from the src/components/Shared/Select module, allowing users to select multiple items with labels.
• Handles the selection changes by invoking the onValueChanged callback function with the updated selection array, where each item contains an ID and a label.
• Utilizes a function getLabel to extract the label from each selected object, considering different input types such as galleries, performers, studios, etc.

Example Usage:

import { LabeledIdFilter } from "./LabeledIdFilter";

// Inside a React component
<LabeledIdFilter
  criterion={labeledIdCriterion}
  onValueChanged={handleLabeledIdChange}
/>

Explanation:

The LabeledIdFilter component provides a flexible and reusable interface for selecting multiple items with labels for filtering purposes.