Skip to main content

Module picker

Module picker 

Source
Expand description

Telescope-style two-column picker widget.

Layout:

┌─ Title ──────────────────────────────────────────────────┐
│ ┌─ search ──────────┐  ┌─ Detail ─────────────────────┐ │
│ │ query_            │  │ selected item detail…        │ │
│ └───────────────────┘  │                              │ │
│ ┌─ 3/12 ────────────┐  │                              │ │
│ │   item one        │  └──────────────────────────────┘ │
│ │ ▶ item two        │                                   │
│ │   item three      │                                   │
│ └───────────────────┘                                   │
└─────────────────────────────────────────────────────────┘

§Usage

// 1. Create/manage PickerState in your app state
// 2. Filter your items externally based on state.search
// 3. Compute detail lines for state.selected item
// 4. Call render_picker each frame

let filtered: Vec<PickerItem> = all_items
    .iter()
    .filter(|i| i.label.to_lowercase().contains(&state.search.to_lowercase()))
    .cloned()
    .collect();

let detail = if let Some(item) = filtered.get(state.selected) {
    vec![Line::from(item.label.clone())]
} else {
    vec![]
};

let area = tui_kit::popup::centered_popup(f, 0.88, 120, 30);
render_picker(f, area, "Find instance", &state, &filtered, detail, &theme);

Structs§

PickerItem
A single row in a render_picker list.
PickerState
Navigation and search state for a render_picker widget.

Functions§

render_picker
Render a two-column picker inside area.