patternfly_dioxus/
modal.rs

1use dioxus::prelude::*;
2
3#[allow(non_snake_case,dead_code)]
4#[inline_props]
5pub fn PfSmallModal<'a>(
6    cx: Scope<'a>,
7    title: &'a str,
8    children: Element<'a>,
9    is_close: &'a UseState<bool>,
10) -> Element {
11    // <div
12    //   class="pf-c-modal-box pf-m-sm"
13    //   role="dialog"
14    //   aria-modal="true"
15    //   aria-labelledby="modal-sm-title"
16    //   aria-describedby="modal-sm-description"
17    // >
18    //   <button
19    //     class="pf-c-button pf-m-plain"
20    //     type="button"
21    //     aria-label="Close dialog"
22    //   >
23    //     <i class="fas fa-times" aria-hidden="true"></i>
24    //   </button>
25    //   <header class="pf-c-modal-box__header">
26    //     <h1 class="pf-c-modal-box__title" id="modal-sm-title">Modal title</h1>
27    //   </header>
28    //   <div class="pf-c-modal-box__body" id="modal-sm-description">
29    //     Static text describing modal purpose. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
30    //     tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
31    //     quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
32    //     consequat.
33    //   </div>
34    //   <footer class="pf-c-modal-box__footer">Modal footer</footer>
35    // </div>
36    if *is_close.get() {
37        cx.render(rsx! {""})
38    } else {
39        cx.render(rsx!{
40            div {
41                class: "pf-c-backdrop",
42                hidden: "{is_close}",
43                div{ class: "pf-c-modal-box pf-m-sm",
44                    style: "top:50%;left:50%;transform:translate(-50%,-50%);",
45                    role: "dialog",
46                    aria_modal: "true",
47                    aria_labelledby: "modal-sm-title",
48                    aria_describedby: "modal-sm-description",
49                    button { class: "pf-c-button pf-m-plain", r#type: "button", aria_label: "Close dialog",
50                        onclick: move |_| { is_close.set(true); },
51                        i { class: "fas fa-times", aria_hidden: "true" }
52                    },
53                    header { class: "pf-c-modal-box__header",
54                        h1 { class: "pf-c-modal-box__title", "{title}" }
55                    },
56                    div { class: "pf-c-modal-box__body", children }
57                }
58            }
59     })
60    }
61}
62
63#[allow(non_snake_case,dead_code)]
64#[inline_props]
65pub fn PfModal<'a>(
66    cx: Scope<'a>,
67    title: &'a str,
68    children: Element<'a>,
69    is_close: &'a UseState<bool>,
70) -> Element {
71    // let is_close = use_state(&cx, || false);
72
73    if *is_close.get() {
74        cx.render(rsx! {""})
75    
76    } else {
77        cx.render(rsx! {
78            div {
79                class: "pf-c-backdrop",
80                hidden: "{is_close}",
81                div {
82                    class: "pf-c-modal-box",
83                    style: "top:50%;left:50%;transform:translate(-50%,-50%);",
84                    role: "dialog",
85                    aria_modal: "true",
86                    aria_labelledby: "modal-title",
87                    aria_describedby: "modal-description",
88                    button {
89                        class: "pf-c-button pf-m-plain",
90                        r#type: "button",
91                        aria_label: "Close",
92                        onclick: move |_| { is_close.set(true); },
93                        i {
94                            class: "fas fa-times",
95                            aria_hidden: "true",
96                        }
97                    },
98                    header {
99                        class: "pf-c-modal-box__header",
100                        h1 {
101                            class: "pf-c-modal-box__title",
102                            id: "modal-title",
103                            "{title}"
104                        }
105                    },
106                    div {
107                        class: "pf-c-modal-box__body",
108                        children
109                    },
110
111                }
112            }
113
114        })
115    }
116}
patternfly_dioxus/modal.rs

patternfly_dioxus/
modal.rs
