dioxus_element_plug/components/
message_box.rs

1use dioxus::prelude::*;
2
3/// MessageBox type
4#[derive(Clone, PartialEq)]
5pub enum MessageBoxType {
6    Success,
7    Warning,
8    Info,
9    Error,
10}
11
12impl MessageBoxType {
13    pub fn as_class(&self) -> &'static str {
14        match self {
15            MessageBoxType::Success => "el-message-box--success",
16            MessageBoxType::Warning => "el-message-box--warning",
17            MessageBoxType::Info => "el-message-box--info",
18            MessageBoxType::Error => "el-message-box--error",
19        }
20    }
21
22    pub fn as_icon(&self) -> &'static str {
23        match self {
24            MessageBoxType::Success => "el-icon-success",
25            MessageBoxType::Warning => "el-icon-warning",
26            MessageBoxType::Info => "el-icon-info",
27            MessageBoxType::Error => "el-icon-error",
28        }
29    }
30}
31
32/// MessageBox props
33#[derive(Props, Clone, PartialEq)]
34pub struct MessageBoxProps {
35    /// Title text
36    #[props(default)]
37    pub title: Option<String>,
38
39    /// Message content
40    pub message: String,
41
42    /// Message box type
43    #[props(default = MessageBoxType::Info)]
44    pub box_type: MessageBoxType,
45
46    /// Whether to show close button
47    #[props(default = true)]
48    pub show_close: bool,
49
50    /// Whether to show confirm button
51    #[props(default = true)]
52    pub show_confirm_button: bool,
53
54    /// Whether to show cancel button
55    #[props(default = false)]
56    pub show_cancel_button: bool,
57
58    /// Confirm button text
59    #[props(default = "OK".to_string())]
60    pub confirm_button_text: String,
61
62    /// Cancel button text
63    #[props(default = "Cancel".to_string())]
64    pub cancel_button_text: String,
65
66    /// Whether the message box is visible
67    #[props(default = true)]
68    pub visible: bool,
69
70    /// Confirm event handler
71    #[props(default)]
72    pub on_confirm: Option<EventHandler<()>>,
73
74    /// Cancel event handler
75    #[props(default)]
76    pub on_cancel: Option<EventHandler<()>>,
77
78    #[props(default)]
79    pub class: Option<String>,
80
81    #[props(default)]
82    pub style: Option<String>,
83}
84
85/// MessageBox component for modal dialogs with messages
86#[component]
87pub fn MessageBox(props: MessageBoxProps) -> Element {
88    if !props.visible {
89        return rsx! {};
90    }
91
92    let mut class_names = vec!["el-message-box".to_string()];
93    class_names.push(props.box_type.as_class().to_string());
94    if let Some(ref c) = props.class { class_names.push(c.clone()); }
95
96    rsx! {
97        div {
98            class: "el-overlay",
99            style: "position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 2001;",
100            div {
101                class: "{class_names.join(\" \")}",
102                style: props.style.clone().unwrap_or_default(),
103                if let Some(ref title) = props.title {
104                    div {
105                        class: "el-message-box__header",
106                        i { class: "{props.box_type.as_icon()} el-message-box__icon" }
107                        span { class: "el-message-box__title", "{title}" }
108                        if props.show_close {
109                            button {
110                                class: "el-message-box__close",
111                                onclick: move |_| {
112                                    if let Some(handler) = props.on_cancel {
113                                        handler.call(());
114                                    }
115                                },
116                                "×"
117                            }
118                        }
119                    }
120                }
121                div {
122                    class: "el-message-box__content",
123                    p { class: "el-message-box__message", "{props.message}" }
124                }
125                div {
126                    class: "el-message-box__btns",
127                    if props.show_cancel_button {
128                        button {
129                            class: "el-button el-button--default",
130                            onclick: move |_| {
131                                if let Some(handler) = props.on_cancel {
132                                    handler.call(());
133                                }
134                            },
135                            "{props.cancel_button_text}"
136                        }
137                    }
138                    if props.show_confirm_button {
139                        button {
140                            class: "el-button el-button--primary",
141                            onclick: move |_| {
142                                if let Some(handler) = props.on_confirm {
143                                    handler.call(());
144                                }
145                            },
146                            "{props.confirm_button_text}"
147                        }
148                    }
149                }
150            }
151        }
152    }
153}
dioxus_element_plug/components/message_box.rs

dioxus_element_plug/components/
message_box.rs
