raui-core 0.21.3

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

use crate::{
    unpack_named_slots, widget,
    widget::{
        component::interactive::button::{button, ButtonProps, ButtonSettingsProps, TextChange},
        WidgetId,
    },
    widget_component, widget_hook,
};
use serde::{Deserialize, Serialize};

#[derive(Debug, Default, Clone, Serialize, Deserialize)]
pub struct InputFieldProps {
    #[serde(default)]
    pub text: String,
    #[serde(default)]
    pub cursor_position: usize,
    #[serde(default)]
    pub allow_new_line: bool,
}
implement_props_data!(InputFieldProps);

#[derive(Debug, Default, Clone, Serialize, Deserialize)]
pub struct InputFieldMessage {
    #[serde(default)]
    pub sender: WidgetId,
    #[serde(default)]
    pub data: InputFieldProps,
}

widget_hook! {
    use_input_field(life_cycle) {
        life_cycle.mount(|context| {
            let props = context.props.read_cloned_or_default::<InputFieldProps>();
            drop(context.state.write(props));
        });

        life_cycle.change(|context| {
            let ButtonSettingsProps { disabled, notify } = context.props.read_cloned_or_default();
            let props = context.props.read_cloned_or_default::<ButtonProps>();
            let mut data = match context.state.read::<InputFieldProps>() {
                Ok(state) => state.clone(),
                Err(_) => InputFieldProps::default(),
            };
            if !disabled && !props.text.is_empty() {
                for change in &props.text {
                    match change {
                        TextChange::InsertCharacter(c) => {
                            if !c.is_control() {
                                data.cursor_position = data.cursor_position.min(data.text.len());
                                data.text.insert(data.cursor_position, *c);
                                data.cursor_position += 1;
                            }
                        }
                        TextChange::MoveCursorLeft => if data.cursor_position > 0 {
                            data.cursor_position -= 1;
                        }
                        TextChange::MoveCursorRight => if data.cursor_position < data.text.len() {
                            data.cursor_position += 1;
                        }
                        TextChange::MoveCursorStart => data.cursor_position = 0,
                        TextChange::MoveCursorEnd => data.cursor_position = data.text.len(),
                        TextChange::DeleteLeft => {
                            if data.cursor_position > 0 && data.cursor_position <= data.text.len() {
                                data.cursor_position -= 1;
                                data.text.remove(data.cursor_position);
                            }
                        }
                        TextChange::DeleteRight => if data.cursor_position < data.text.len() {
                            data.text.remove(data.cursor_position);
                        }
                        TextChange::NewLine => if data.allow_new_line {
                            data.cursor_position = data.cursor_position.min(data.text.len());
                            data.text.insert(data.cursor_position, '\n');
                            data.cursor_position += 1;
                        }
                    }
                    data.cursor_position = data.cursor_position.min(data.text.len());
                }
                if let Some(notify) = notify {
                    context.messenger.write(notify, InputFieldMessage {
                        sender: context.id.to_owned(),
                        data: data.clone(),
                    });
                }
                drop(context.state.write(data));
            }
        });
    }
}

widget_component! {
    pub input_field_content(props, state, named_slots) [use_input_field] {
        unpack_named_slots!(named_slots => content);
        if let Some(content_props) = content.props_mut() {
            if let Ok(s) = state.read::<InputFieldProps>() {
                content_props.write(s.clone());
            };
            if let Ok(p) = props.read::<ButtonProps>() {
                content_props.write(p.clone());
            };
            if let Ok(p) = props.read::<ButtonSettingsProps>() {
                content_props.write(p.clone());
            };
        }

        content
    }
}

widget_component! {
    pub input_field(key, props, named_slots) {
        unpack_named_slots!(named_slots => content);

        widget! {
            (#{key} button: {props.clone()} {
                content = (input_field_content: {props.clone()} {
                    content = {content}
                })
            })
        }
    }
}