UNPKG

2.04 kBTypeScriptView Raw
1import type * as React from "react";
2export interface ItemModifiers {
3 /** Whether this is the "active" (focused) item, meaning keyboard interactions will act upon it. */
4 active: boolean;
5 /** Whether this item is disabled and should ignore interactions. */
6 disabled: boolean;
7 /** Whether this item matches the predicate. A typical renderer could hide `false` values. */
8 matchesPredicate: boolean;
9}
10/**
11 * An object describing how to render a particular item.
12 * An `itemRenderer` receives the item as its first argument, and this object as its second argument.
13 *
14 * Make sure to forward the provided `ref` to the rendered element (usually via `<MenuItem ref={ref} />`)
15 * to ensure that scrolling to active items works correctly.
16 *
17 * @template T type of the DOM element rendered for this item to which we can attach a ref (defaults to MenuItem's HTMLLIElement)
18 */
19export interface ItemRendererProps<T extends HTMLElement = HTMLLIElement> {
20 /**
21 * A ref attached the native HTML element rendered by this item.
22 *
23 * N.B. this is optional to preserve backwards-compatibilty with @blueprintjs/select version < 4.9.0
24 */
25 ref?: React.Ref<T>;
26 /** Click event handler to select this item. */
27 handleClick: React.MouseEventHandler<HTMLElement>;
28 /**
29 * Focus event handler to set this as the "active" item.
30 *
31 * N.B. this is optional to preserve backwards-compatibility with @blueprintjs/select version < 4.2.0
32 */
33 handleFocus?: () => void;
34 /** Index of the item in the QueryList items array. */
35 index: number;
36 /** Modifiers that describe how to render this item, such as `active` or `disabled`. */
37 modifiers: ItemModifiers;
38 /** The current query string used to filter the items. */
39 query: string;
40}
41/**
42 * Type alias for a function that receives an item and props and renders a JSX element (or `null`).
43 *
44 * @template T list item data type
45 */
46export type ItemRenderer<T> = (item: T, itemProps: ItemRendererProps) => React.JSX.Element | null;