savory-elements 0.6.0

Collection of UI elements based on Savory
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

//! Radio element
//!
//! Radios are common elements in most apps, Savory ships radio element that
//! covers common usages.
//!
//! Radio accept these values on it's initialization:
//! - toggled: initial value
//! - text: text descripe the radio
//! - color: color used when the radio toggled
//!
//! See [`Radio`] docs to find out more about its methods.
//!
//! # Usage
//! TODO
//!
//! [`Radio`]: crate::prelude::Radio

use crate::{id::Id, prelude::*};
use derive_rich::Rich;
use savory::prelude::*;
use savory_style::{self as style, prelude::*};
use std::borrow::Cow;

pub enum Msg {
    DesignSystem(DesignSystem),
    Focus(bool),
    MouseOver(bool),
    Disable(bool),
    Toggled(bool),
    Toggle,
}

#[derive(Rich, Element)]
#[element(style_map(radio, check_sign, text))]
pub struct Radio {
    // general element properties
    #[rich(read)]
    #[element(config)]
    id: Option<Id>,
    #[rich(read)]
    #[element(config(default), data_lens)]
    style: Style,
    design_system: DesignSystem,

    // radio element properties
    #[rich(read(copy, rename = is_toggled))]
    #[element(config(default), data_lens(copy))]
    toggled: bool,
    #[rich(read)]
    #[element(config)]
    text: Option<Cow<'static, str>>,
    #[rich(read(copy, rename = is_disabled))]
    #[element(config(default), data_lens(copy))]
    disabled: bool,
    #[rich(read(copy, rename = is_focused))]
    #[element(data_lens(copy))]
    focused: bool,
    #[rich(read(copy, rename = is_mouse_over))]
    #[element(data_lens(copy))]
    mouse_over: bool,

    #[rich(read(copy))]
    #[element(config, data_lens(copy))]
    color: Option<style::Color>,
}

impl Element for Radio {
    type Message = Msg;
    type Config = Config;

    fn init(config: Self::Config, orders: &mut impl Orders<Msg>) -> Self {
        orders.subscribe(|ds: DesignSystemChanged| Msg::DesignSystem(ds.0));

        Self {
            id: config.id,
            design_system: DesignSystem::default(),
            style: config.style,
            text: config.text,
            toggled: config.toggled,
            disabled: config.disabled,
            focused: false,
            mouse_over: false,
            color: config.color,
        }
    }

    fn update(&mut self, msg: Msg, _: &mut impl Orders<Msg>) {
        match msg {
            Msg::DesignSystem(val) => self.design_system = val,
            Msg::MouseOver(val) => self.mouse_over = val,
            Msg::Focus(val) => self.focused = val,
            Msg::Disable(val) => self.disabled = val,
            Msg::Toggled(val) => self.toggled = val,
            Msg::Toggle => self.toggled = !self.toggled,
        }
    }
}

impl View<Node<Msg>> for Radio {
    fn view(&self) -> Node<Msg> {
        let style_map = self.design_system.radio(self.data_lens());
        let radio = html::button()
            .class("radio")
            .style(style_map.radio)
            .disabled(self.disabled)
            // .checked(self.toggled)
            // .type_("radio")
            .on_focus(|_| Msg::Focus(true))
            .on_blur(|_| Msg::Focus(false))
            .on_mouse_enter(|_| Msg::MouseOver(true))
            .on_mouse_leave(|_| Msg::MouseOver(false))
            .on_click(|_| Msg::Toggle)
            // push check-sign node
            .set(html::div().class("check-sign").style(style_map.check_sign));

        match self.text.as_ref() {
            None => radio.try_id(self.id.clone()),
            Some(lbl) => html::label()
                .try_id(self.id.clone())
                .class("text")
                .style(style_map.text)
                .push(radio)
                .push(lbl.clone())
                .on_mouse_enter(|_| Msg::MouseOver(true))
                .on_mouse_leave(|_| Msg::MouseOver(false)),
        }
    }
}