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

use raui_app::app::{App, AppConfig, declarative::DeclarativeApp};
use raui_core::{
    make_widget, pre_hooks,
    widget::{
        component::{
            containers::{
                horizontal_box::{HorizontalBoxProps, horizontal_box},
                vertical_box::{VerticalBoxProps, vertical_box},
            },
            image_box::{ImageBoxProps, image_box},
            interactive::{
                button::{ButtonProps, button},
                navigation::{
                    NavAutoSelect, NavItemActive, use_nav_container_active,
                    use_nav_jump_direction_active,
                },
            },
        },
        context::WidgetContext,
        node::WidgetNode,
        unit::flex::FlexBoxItemLayout,
        utils::Color,
    },
};

#[pre_hooks(use_nav_container_active, use_nav_jump_direction_active)]
fn app(mut ctx: WidgetContext) -> WidgetNode {
    let slots_layout = FlexBoxItemLayout {
        margin: 20.0.into(),
        ..Default::default()
    };

    make_widget!(vertical_box)
        .key("vertical")
        .with_props(VerticalBoxProps {
            override_slots_layout: Some(slots_layout.clone()),
            ..Default::default()
        })
        .listed_slot(
            make_widget!(horizontal_box)
                .key("horizontal")
                .with_props(HorizontalBoxProps {
                    override_slots_layout: Some(slots_layout),
                    ..Default::default()
                })
                .listed_slot(make_widget!(button_item).key("a").with_props(NavAutoSelect))
                .listed_slot(make_widget!(button_item).key("b"))
                .listed_slot(make_widget!(button_item).key("c")),
        )
        .listed_slot(make_widget!(button_item).key("d"))
        .listed_slot(make_widget!(button_item).key("e"))
        .into()
}

fn button_item(ctx: WidgetContext) -> WidgetNode {
    make_widget!(button)
        .key("button")
        .merge_props(ctx.props.clone())
        .with_props(NavItemActive)
        .named_slot("content", make_widget!(button_content))
        .into()
}

fn button_content(ctx: WidgetContext) -> WidgetNode {
    let ButtonProps {
        selected,
        trigger,
        context,
        ..
    } = ctx.props.read_cloned_or_default();

    let color = if trigger {
        Color {
            r: 1.0,
            g: 0.25,
            b: 0.25,
            a: 1.0,
        }
    } else if context {
        Color {
            r: 0.25,
            g: 1.0,
            b: 0.25,
            a: 1.0,
        }
    } else if selected {
        Color {
            r: 0.25,
            g: 0.25,
            b: 1.0,
            a: 1.0,
        }
    } else {
        Color {
            r: 0.25,
            g: 0.25,
            b: 0.25,
            a: 1.0,
        }
    };

    make_widget!(image_box)
        .key("image")
        .with_props(ImageBoxProps::colored(color))
        .into()
}

fn main() {
    App::new(AppConfig::default().title("Navigation")).run(
        DeclarativeApp::default()
            .tree(make_widget!(app).key("app"))
            .setup_interactions(|interactions| {
                interactions.engine.deselect_when_no_button_found = false;
            }),
    );
}