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

//! Chat example - simple chat application with input
//!
//! Equivalent to ink's examples/chat
//!
//! Run with: cargo run --example chat

use rnk::prelude::*;

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

fn app() -> Element {
    let app = use_app();
    let input = use_signal(String::new);
    let messages = use_signal(Vec::<String>::new);

    let input_clone = input.clone();
    let messages_clone = messages.clone();

    use_input(move |ch, key| {
        if ch == "q" && key.ctrl {
            app.exit();
        } else if key.return_key {
            let current_input = input_clone.get();
            if !current_input.is_empty() {
                messages_clone.update(|msgs| {
                    msgs.push(format!("You: {}", current_input));
                });
                input_clone.set(String::new());
            }
        } else if key.backspace || key.delete {
            input_clone.update(|s| {
                s.pop();
            });
        } else if !ch.is_empty() && !key.ctrl && !key.alt {
            input_clone.update(|s| s.push_str(ch));
        }
    });

    let current_messages = messages.get();
    let current_input = input.get();

    Box::new()
        .flex_direction(FlexDirection::Column)
        .padding(1)
        // Title
        .child(
            Box::new()
                .border_style(BorderStyle::Round)
                .border_color(Color::Cyan)
                .padding_x(2.0)
                .child(
                    Text::new("Tink Chat")
                        .color(Color::Cyan)
                        .bold()
                        .into_element(),
                )
                .into_element(),
        )
        .child(Newline::new().into_element())
        // Messages area
        .child(
            Box::new()
                .flex_direction(FlexDirection::Column)
                .min_height(10.0)
                .children(
                    current_messages
                        .iter()
                        .map(|msg| Text::new(msg).color(Color::White).into_element()),
                )
                .into_element(),
        )
        .child(Newline::new().into_element())
        // Input area
        .child(
            Box::new()
                .flex_direction(FlexDirection::Row)
                .child(
                    Text::new("Enter message: ")
                        .color(Color::Green)
                        .into_element(),
                )
                .child(
                    Text::new(format!("{}_", current_input))
                        .color(Color::White)
                        .into_element(),
                )
                .into_element(),
        )
        .child(Newline::new().into_element())
        // Help
        .child(
            Text::new("Press Enter to send, Ctrl+Q to quit")
                .dim()
                .into_element(),
        )
        .into_element()
}