Skip to main content

dioxus_bulma/components/
modal.rs

1use dioxus::prelude::*;
2use crate::utils::build_class;
3
4#[derive(Props, Clone, PartialEq)]
5pub struct ModalProps {
6    #[props(default = false)]
7    pub active: bool,
8    #[props(default)]
9    pub onclose: Option<EventHandler<MouseEvent>>,
10    #[props(default)]
11    pub id: Option<String>,
12    #[props(default)]
13    pub class: Option<String>,
14    #[props(default)]
15    pub style: Option<String>,
16    pub children: Element,
17}
18
19#[component]
20pub fn Modal(props: ModalProps) -> Element {
21    let base_classes = vec!["modal"];
22    let optional_classes = vec![
23        if props.active { Some("is-active".to_string()) } else { None },
24        props.class.clone(),
25    ];
26    
27    let final_class = build_class(&base_classes, &optional_classes);
28    let modal_style = props.style.as_deref().unwrap_or("");
29
30    rsx! {
31        div {
32            class: "{final_class}",
33            style: "{modal_style}",
34            id: props.id.clone(),
35            div {
36                class: "modal-background",
37                onclick: move |evt| {
38                    if let Some(handler) = &props.onclose {
39                        handler.call(evt);
40                    }
41                }
42            }
43            {props.children}
44        }
45    }
46}
47
48#[derive(Props, Clone, PartialEq)]
49pub struct ModalCardProps {
50    #[props(default)]
51    pub id: Option<String>,
52    #[props(default)]
53    pub class: Option<String>,
54    #[props(default)]
55    pub style: Option<String>,
56    pub children: Element,
57}
58
59#[component]
60pub fn ModalCard(props: ModalCardProps) -> Element {
61    let base_classes = vec!["modal-card"];
62    let optional_classes = vec![props.class.clone()];
63    let final_class = build_class(&base_classes, &optional_classes);
64    let style = props.style.as_deref().unwrap_or("");
65
66    rsx! {
67        div {
68            class: "{final_class}",
69            style: "{style}",
70            {props.children}
71        }
72    }
73}
74
75#[derive(Props, Clone, PartialEq)]
76pub struct ModalCardHeadProps {
77    #[props(default)]
78    pub onclose: Option<EventHandler<MouseEvent>>,
79    #[props(default)]
80    pub id: Option<String>,
81    #[props(default)]
82    pub class: Option<String>,
83    #[props(default)]
84    pub style: Option<String>,
85    pub children: Element,
86}
87
88#[component]
89pub fn ModalCardHead(props: ModalCardHeadProps) -> Element {
90    let base_classes = vec!["modal-card-head"];
91    let optional_classes = vec![props.class.clone()];
92    let final_class = build_class(&base_classes, &optional_classes);
93    let style = props.style.as_deref().unwrap_or("");
94
95    rsx! {
96        header {
97            class: "{final_class}",
98            style: "{style}",
99            {props.children}
100            button {
101                class: "delete",
102                "aria-label": "close",
103                onclick: move |evt| {
104                    if let Some(handler) = &props.onclose {
105                        handler.call(evt);
106                    }
107                }
108            }
109        }
110    }
111}
112
113#[derive(Props, Clone, PartialEq)]
114pub struct ModalCardBodyProps {
115    #[props(default)]
116    pub id: Option<String>,
117    #[props(default)]
118    pub class: Option<String>,
119    #[props(default)]
120    pub style: Option<String>,
121    pub children: Element,
122}
123
124#[component]
125pub fn ModalCardBody(props: ModalCardBodyProps) -> Element {
126    let base_classes = vec!["modal-card-body"];
127    let optional_classes = vec![props.class.clone()];
128    let final_class = build_class(&base_classes, &optional_classes);
129    let style = props.style.as_deref().unwrap_or("");
130
131    rsx! {
132        section {
133            class: "{final_class}",
134            style: "{style}",
135            {props.children}
136        }
137    }
138}
139
140#[derive(Props, Clone, PartialEq)]
141pub struct ModalCardFootProps {
142    #[props(default)]
143    pub id: Option<String>,
144    #[props(default)]
145    pub class: Option<String>,
146    #[props(default)]
147    pub style: Option<String>,
148    pub children: Element,
149}
150
151#[component]
152pub fn ModalCardFoot(props: ModalCardFootProps) -> Element {
153    let base_classes = vec!["modal-card-foot"];
154    let optional_classes = vec![props.class.clone()];
155    let final_class = build_class(&base_classes, &optional_classes);
156    let style = props.style.as_deref().unwrap_or("");
157
158    rsx! {
159        footer {
160            class: "{final_class}",
161            style: "{style}",
162            {props.children}
163        }
164    }
165}