dioxus-element-plug 0.2.0

Element UI components for Dioxus applications with pure Rust styling system
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

use dioxus::prelude::*;

// Notification CSS class constants
pub const NOTIFICATION: &str = "el-notification";

/// Notification types matching theme-chalk styles
#[derive(Clone, PartialEq)]
pub enum NotificationType {
    Success,
    Warning,
    Info,
    Error,
}

impl NotificationType {
    pub fn as_class(&self) -> &'static str {
        match self {
            NotificationType::Success => "el-notification--success",
            NotificationType::Warning => "el-notification--warning",
            NotificationType::Info => "el-notification--info",
            NotificationType::Error => "el-notification--error",
        }
    }
}

/// Notification props
#[derive(Props, Clone, PartialEq)]
pub struct NotificationProps {
    /// Notification title
    pub title: String,

    /// Notification message
    pub message: String,

    /// Notification type
    #[props(default = NotificationType::Info)]
    pub notification_type: NotificationType,

    /// Position of the notification
    #[props(default = "top-right".to_string())]
    pub position: String,

    /// Auto close timeout in milliseconds (0 to disable)
    #[props(default = 4500)]
    pub duration: u64,

    /// Whether the notification can be closed manually
    #[props(default = true)]
    pub closable: bool,

    /// Whether to show icon
    #[props(default = true)]
    pub show_icon: bool,

    /// Additional CSS classes
    #[props(default)]
    pub class: Option<String>,

    /// Inline styles
    #[props(default)]
    pub style: Option<String>,

    /// Close event handler
    #[props(default)]
    pub on_close: Option<EventHandler<()>>,
}

/// A notification component for temporary messages
///
/// This component creates a temporary notification that can auto-close
/// after a specified duration.
#[component]
pub fn Notification(props: NotificationProps) -> Element {
    let mut class_names = vec![NOTIFICATION.to_string()];

    class_names.push(props.notification_type.as_class().to_string());

    class_names.push(format!("is-{}", props.position));

    if let Some(ref custom_class) = props.class {
        class_names.push(custom_class.to_string());
    }

    let class_string = class_names.join(" ");
    let style_string = props.style.as_ref().cloned().unwrap_or_default();

    let icon_class = match props.notification_type {
        NotificationType::Success => "el-icon-check-circle",
        NotificationType::Warning => "el-icon-warning-outline",
        NotificationType::Info => "el-icon-info-circle",
        NotificationType::Error => "el-icon-error-circle",
    };

    rsx! {
        div {
            class: "{class_string}",
            style: "{style_string}",
            role: "alert",

            div {
                class: "el-notification__content",

                if props.show_icon {
                    i {
                        class: "{icon_class} el-notification__icon"
                    }
                }

                div {
                    class: "el-notification__group",

                    h3 {
                        class: "el-notification__title",
                        "{props.title}"
                    }

                    div {
                        class: "el-notification__message",
                        "{props.message}"
                    }
                }
            }

            if props.closable {
                button {
                    class: "el-notification__close-btn",
                    r#type: "button",
                    onclick: move |_| {
                        if let Some(handler) = props.on_close {
                            handler.call(());
                        }
                    },
                    "×"
                }
            }
        }
    }
}