appy 0.1.6

Declarative UI framework with native rendering
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
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141

use appy::{components::*, hooks::*, types::*, *};
use rand::{distributions::Alphanumeric, Rng};
use std::rc::Rc;

#[derive_component(ComponentBuilder, Default, SnakeFactory)]
pub struct FlowButton {
    text: String,
    on_click: Option<Rc<dyn Fn()>>,
}

#[function_component]
fn _flow_button(p: FlowButton) -> Elements {
    let hover_state = use_hover_state_ref();
    let app_context = use_context::<AppContext>();
    let w = app_context.default_font.get_str_width(&*p.text, 24.0);

    let c = match *hover_state {
        HoverState::Normal => 0x808080,
        HoverState::Active => 0x404040,
        HoverState::Hover => 0xa0a0a0,
    };

    apx! {
        <flow width=w+16.0 height=48>
            <blk top=8 bottom=8>
                <bg color=c/>
                <text size=24 text=&*p.text/>
            </blk>
            <interaction hover_state_ref=hover_state on_click_option=p.on_click/>
        </flow>
        <flow width=8/>
    }
}

#[derive_component(ComponentBuilder, Default, SnakeFactory)]
pub struct ListItem {
    text: String,
}

#[function_component]
fn _list_item(p: ListItem) -> Elements {
    let selected = use_state(|| false);

    apx! {
        <bg color=match *selected {true=>0x0000ff, false=>0xffffff}/>
        <text size=pct(100) text=&*p.text
            color=match *selected {true=>0xffffff, false=>0x000000}/>
        <interaction on_click=rc_with_clone!([selected],move||selected.set(!*selected))/>
    }
}

#[derive(Clone)]
enum AppAction {
    AddStart,
    AddEnd,
    RemoveStart,
    RemoveEnd,
}

#[derive(Clone)]
struct AppState {
    items: Vec<String>,
}

fn random_string() -> String {
    let num = rand::thread_rng().gen_range(8..16);

    rand::thread_rng()
        .sample_iter(&Alphanumeric)
        .take(num)
        .map(char::from)
        .collect()
}

impl AppState {
    pub fn new() -> Self {
        Self { items: vec![] }
    }

    pub fn action(&self, action: AppAction) -> Self {
        let mut new_self = self.clone();
        new_self.action_mut(action);
        new_self
    }

    pub fn action_mut(&mut self, action: AppAction) {
        match action {
            AppAction::AddStart => {
                self.items.insert(0, random_string());
            }

            AppAction::RemoveStart => {
                if self.items.len() > 0 {
                    self.items.remove(0);
                }
            }

            AppAction::AddEnd => {
                self.items.push(random_string());
            }

            AppAction::RemoveEnd => {
                if self.items.len() > 0 {
                    self.items.remove(self.items.len() - 1);
                }
            }
        }
    }
}

#[main_window]
fn app() -> Elements {
    let app = use_reducer(AppState::action, AppState::new);

    apx! {
        <blk top=0 height=48>
            <bg color=0x000000/>
            <flow width=8/>
            <flow_button text="+ Start"
                on_click=rc_with_clone!([app],move||app.dispatch(AppAction::AddStart))/>
            <flow_button text="- Start"
                on_click=rc_with_clone!([app],move||app.dispatch(AppAction::RemoveStart))/>
            <flow_button text="+ End"
                on_click=rc_with_clone!([app],move||app.dispatch(AppAction::AddEnd))/>
            <flow_button text="- End"
                on_click=rc_with_clone!([app],move||app.dispatch(AppAction::RemoveEnd))/>
        </blk>
        <blk top=48>
            <bg color=0x000080/>
            {app.items.iter().flat_map(|item|{
                apx!{
                    <flow height=50 key=item.clone()>
                        <blk margin=5>
                            <list_item text=&*item/>
                        </blk>
                    </flow>
                }
            }).collect()}
        </blk>
    }
}