raui 0.70.17

Renderer Agnostic User Interface
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
118

use raui_app::app::declarative::DeclarativeApp;
use raui_core::{
    ManagedGc, make_widget, pre_hooks,
    view_model::ViewModel,
    widget::{
        component::{
            containers::size_box::{SizeBoxProps, size_box},
            interactive::{
                button::ButtonNotifyProps,
                input_field::{TextInput, TextInputProps},
                navigation::{NavItemActive, use_nav_container_active},
            },
        },
        context::WidgetContext,
        node::WidgetNode,
        unit::{size::SizeBoxSizeValue, text::TextBoxFont},
        utils::Rect,
    },
};
use raui_material::{
    component::{
        containers::paper::paper,
        interactive::text_field_paper::{TextFieldPaperProps, text_field_paper},
    },
    theme::{ThemeColor, ThemeProps, ThemedTextMaterial, ThemedWidgetProps, new_dark_theme},
};

const TEXT_INPUT: &str = "text-input";

// Create a new theme with a custom text variant for input fields.
fn new_theme() -> ThemeProps {
    let mut theme = new_dark_theme();
    theme.text_variants.insert(
        "input".to_owned(),
        ThemedTextMaterial {
            font: TextBoxFont {
                name: "./demos/hello-world/resources/verdana.ttf".to_owned(),
                size: 24.0,
            },
            ..Default::default()
        },
    );
    theme
}

fn use_app(ctx: &mut WidgetContext) {
    ctx.life_cycle.mount(|mut ctx| {
        // Initialize the view model for the text input field.
        let mut view_model = ViewModel::produce(|_| ManagedGc::new("Hello!".to_owned()));
        view_model
            .properties
            .bindings(TEXT_INPUT)
            .unwrap()
            .bind(ctx.id.to_owned());
        ctx.view_models.widget_register(TEXT_INPUT, view_model);
    });
}

#[pre_hooks(use_nav_container_active, use_app)]
fn app(mut ctx: WidgetContext) -> WidgetNode {
    let WidgetContext {
        id,
        mut view_models,
        ..
    } = ctx;

    // Turn the view model into a lazy TextInput for the text field props.
    let text = view_models.widget_view_model_mut(TEXT_INPUT).and_then(|v| {
        v.read::<ManagedGc<String>>()
            .map(|v| TextInput::new(v.lazy()))
    });

    make_widget!(paper)
        .with_shared_props(new_theme())
        .listed_slot(
            make_widget!(size_box)
                .with_props(SizeBoxProps {
                    width: SizeBoxSizeValue::Fill,
                    height: SizeBoxSizeValue::Exact(50.0),
                    margin: 20.0.into(),
                    ..Default::default()
                })
                .named_slot(
                    "content",
                    make_widget!(text_field_paper)
                        .key("name")
                        .with_props(TextFieldPaperProps {
                            hint: "> Type some text...".to_owned(),
                            paper_theme: ThemedWidgetProps {
                                color: ThemeColor::Primary,
                                ..Default::default()
                            },
                            padding: Rect {
                                left: 10.0,
                                right: 10.0,
                                top: 6.0,
                                bottom: 6.0,
                            },
                            variant: "input".to_owned(),
                            ..Default::default()
                        })
                        // Make input text editable.
                        .with_props(NavItemActive)
                        // Notify this widget about changes made by input text.
                        .with_props(ButtonNotifyProps(id.to_owned().into()))
                        // Pass the lazy TextInput to the text field paper to edit.
                        .with_props(TextInputProps {
                            text,
                            ..Default::default()
                        }),
                ),
        )
        .into()
}

fn main() {
    DeclarativeApp::simple("Text Field Paper", make_widget!(app));
}