78 lines
2.0 KiB
Rust
78 lines
2.0 KiB
Rust
|
use std::rc::Rc;
|
||
|
|
use leptos::*;
|
||
|
|
|
||
|
|
#[derive(Copy, Clone)]
|
||
|
|
pub struct DialogOpener {
|
||
|
|
visible: ReadSignal<bool>,
|
||
|
|
set_visible: WriteSignal<bool>,
|
||
|
|
}
|
||
|
|
|
||
|
|
impl DialogOpener {
|
||
|
|
pub fn new(cx: Scope) -> Self {
|
||
|
|
let (visible, set_visible) = create_signal(cx, false);
|
||
|
|
DialogOpener {
|
||
|
|
visible,
|
||
|
|
set_visible,
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
pub fn visible(&self) -> bool {
|
||
|
|
self.visible.get()
|
||
|
|
}
|
||
|
|
|
||
|
|
pub fn show(&self) {
|
||
|
|
self.set_visible.update(|state| { *state = true});
|
||
|
|
}
|
||
|
|
|
||
|
|
pub fn hide(&self) {
|
||
|
|
self.set_visible.update(|state| { *state = false});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
#[component]
|
||
|
|
pub fn ModalDialog(
|
||
|
|
cx: Scope,
|
||
|
|
opener: DialogOpener,
|
||
|
|
title: String,
|
||
|
|
children: Children,
|
||
|
|
) -> impl IntoView {
|
||
|
|
|
||
|
|
view! {cx,
|
||
|
|
<div class={ move || if opener.visible() {"modal fade show"} else {"modal fade"}}
|
||
|
|
style={ move || if opener.visible() {"display: block;"} else {""}}
|
||
|
|
id="modalCenter" tabindex="-1" aria-hidden="true">
|
||
|
|
<div class="modal-dialog modal-dialog-centered" role="document">
|
||
|
|
<div class="modal-content">
|
||
|
|
<div class="modal-header">
|
||
|
|
<h5 class="modal-title" id="modalCenterTitle">{title}</h5>
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
class="btn-close"
|
||
|
|
data-bs-dismiss="modal"
|
||
|
|
aria-label="Close"
|
||
|
|
on:click=move |_| opener.hide()/>
|
||
|
|
</div>
|
||
|
|
{children(cx)}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
#[component]
|
||
|
|
pub fn ModalBody(cx: Scope, children: Children) -> impl IntoView {
|
||
|
|
view! {cx,
|
||
|
|
<div class="modal-body">
|
||
|
|
{children(cx)}
|
||
|
|
</div>
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
#[component]
|
||
|
|
pub fn ModalFooter(cx: Scope, children: Children) -> impl IntoView {
|
||
|
|
view! {cx,
|
||
|
|
<div class="modal-footer">
|
||
|
|
{children(cx)}
|
||
|
|
</div>
|
||
|
|
}
|
||
|
|
}
|