rnk 0.19.1

A React-like declarative terminal UI framework for Rust, inspired by Ink and Bubbletea
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117

//! Select input example - list selection with keyboard navigation
//!
//! Equivalent to ink's examples/select-input
//!
//! Run with: cargo run --example select_input

use rnk::prelude::*;

fn main() -> std::io::Result<()> {
    render(app).run()
}

fn app() -> Element {
    let app = use_app();
    let selected = use_signal(|| 0usize);
    let confirmed = use_signal(|| Option::<String>::None);

    let items = [
        ("red", "Red", Color::Red),
        ("green", "Green", Color::Green),
        ("blue", "Blue", Color::Blue),
        ("yellow", "Yellow", Color::Yellow),
        ("magenta", "Magenta", Color::Magenta),
        ("cyan", "Cyan", Color::Cyan),
    ];

    let items_len = items.len();
    let selected_clone = selected.clone();
    let confirmed_clone = confirmed.clone();

    use_input(move |ch, key| {
        if ch == "q" {
            app.exit();
        } else if key.up_arrow || ch == "k" {
            selected_clone.update(|s| {
                if *s == 0 {
                    *s = items_len - 1;
                } else {
                    *s -= 1;
                }
            });
        } else if key.down_arrow || ch == "j" {
            selected_clone.update(|s| {
                *s = (*s + 1) % items_len;
            });
        } else if key.return_key {
            let idx = selected_clone.get();
            let items = ["Red", "Green", "Blue", "Yellow", "Magenta", "Cyan"];
            confirmed_clone.set(Some(items[idx].to_string()));
        }
    });

    let current_selected = selected.get();
    let current_confirmed = confirmed.get();

    Box::new()
        .flex_direction(FlexDirection::Column)
        .padding(1)
        // Title
        .child(
            Text::new("Select a color:")
                .color(Color::White)
                .bold()
                .into_element(),
        )
        .child(Newline::new().into_element())
        // List items
        .children(items.iter().enumerate().map(|(idx, (_id, label, color))| {
            let is_selected = idx == current_selected;
            let indicator = if is_selected { "> " } else { "  " };

            Box::new()
                .flex_direction(FlexDirection::Row)
                .child(
                    Text::new(indicator)
                        .color(Color::Cyan)
                        .bold()
                        .into_element(),
                )
                .child(
                    Text::new(*label)
                        .color(if is_selected {
                            *color
                        } else {
                            Color::Ansi256(245)
                        })
                        .bold()
                        .into_element(),
                )
                .into_element()
        }))
        .child(Newline::new().into_element())
        // Confirmation message
        .child(if let Some(color) = current_confirmed {
            Box::new()
                .border_style(BorderStyle::Round)
                .border_color(Color::Green)
                .padding(1)
                .child(
                    Text::new(format!("You selected: {}", color))
                        .color(Color::Green)
                        .bold()
                        .into_element(),
                )
                .into_element()
        } else {
            Box::new().into_element()
        })
        .child(Newline::new().into_element())
        // Help
        .child(
            Text::new("Use j/k or arrows to navigate, Enter to select, q to quit")
                .dim()
                .into_element(),
        )
        .into_element()
}