dioxus_element_plug/components/
popconfirm.rs

1use dioxus::prelude::*;
2
3/// Popconfirm props
4#[derive(Props, Clone, PartialEq)]
5pub struct PopconfirmProps {
6    #[props(default)]
7    pub children: Element,
8
9    #[props(default = "Are you sure?".to_string())]
10    pub title: String,
11
12    #[props(default = "bottom".to_string())]
13    pub placement: String,
14
15    #[props(default = "Yes".to_string())]
16    pub confirm_button_text: String,
17
18    #[props(default = "No".to_string())]
19    pub cancel_button_text: String,
20
21    #[props(default = false)]
22    pub disabled: bool,
23
24    #[props(default = false)]
25    pub visible: bool,
26
27    #[props(default = "#F56C6C".to_string())]
28    pub icon_color: String,
29
30    #[props(default)]
31    pub on_confirm: Option<EventHandler<()>>,
32
33    #[props(default)]
34    pub on_cancel: Option<EventHandler<()>>,
35
36    #[props(default)]
37    pub class: Option<String>,
38}
39
40/// Popconfirm component for confirmation dialogs
41#[component]
42pub fn Popconfirm(props: PopconfirmProps) -> Element {
43    if props.disabled {
44        return rsx! { {props.children} };
45    }
46
47    let confirm_text = props.confirm_button_text.clone();
48    let cancel_text = props.cancel_button_text.clone();
49
50    rsx! {
51        span {
52            class: "el-popconfirm__trigger",
53            style: "display: inline-block; position: relative;",
54            {props.children}
55            if props.visible {
56                div {
57                    class: "el-popconfirm el-popper",
58                    style: "position: absolute; z-index: 3000;",
59                    div {
60                        class: "el-popconfirm__main",
61                        i { class: "el-icon-question", style: "color: {props.icon_color};" }
62                        span { class: "el-popconfirm__title", "{props.title}" }
63                    }
64                    div {
65                        class: "el-popconfirm__action",
66                        button {
67                            class: "el-button el-button--text el-button--small",
68                            onclick: move |_| {
69                                if let Some(handler) = props.on_cancel {
70                                    handler.call(());
71                                }
72                            },
73                            "{cancel_text}"
74                        }
75                        button {
76                            class: "el-button el-button--primary el-button--small",
77                            onclick: move |_| {
78                                if let Some(handler) = props.on_confirm {
79                                    handler.call(());
80                                }
81                            },
82                            "{confirm_text}"
83                        }
84                    }
85                }
86            }
87        }
88    }
89}
dioxus_element_plug/components/popconfirm.rs

dioxus_element_plug/components/
popconfirm.rs
