dioxus_bootstrap_css/

modal.rs

use dioxus::prelude::*;

use crate::keyboard::is_escape_key;
use crate::types::ModalSize;

/// Modal fullscreen variants.
#[derive(Clone, Copy, Debug, Default, PartialEq)]
pub enum ModalFullscreen {
    /// Not fullscreen.
    #[default]
    Off,
    /// Always fullscreen.
    Always,
    /// Fullscreen below sm breakpoint.
    SmDown,
    /// Fullscreen below md breakpoint.
    MdDown,
    /// Fullscreen below lg breakpoint.
    LgDown,
    /// Fullscreen below xl breakpoint.
    XlDown,
    /// Fullscreen below xxl breakpoint.
    XxlDown,
}

/// Bootstrap Modal component — signal-driven, no JavaScript.
///
/// Replaces Bootstrap's `<div class="modal">` + JavaScript with a signal-controlled component.
///
/// # Bootstrap HTML → Dioxus
///
/// ```html
/// <!-- Bootstrap HTML (requires JavaScript) -->
/// <div class="modal fade" tabindex="-1">
///   <div class="modal-dialog modal-lg modal-dialog-centered">
///     <div class="modal-content">
///       <div class="modal-header"><h5 class="modal-title">Title</h5></div>
///       <div class="modal-body"><p>Body</p></div>
///       <div class="modal-footer"><button class="btn btn-primary">OK</button></div>
///     </div>
///   </div>
/// </div>
/// ```
///
/// ```rust,no_run
/// # use dioxus::prelude::*;
/// # use dioxus_bootstrap_css::prelude::*;
/// # fn _doctest() -> Element {
/// // Dioxus equivalent — no JavaScript needed
/// let mut show = use_signal(|| false);
/// rsx! {
///     Button { onclick: move |_| show.set(true), "Open Modal" }
///     Modal {
///         show: show,
///         title: "Confirm Action",
///         size: ModalSize::Lg,
///         centered: true,
///         body: rsx! { p { "Are you sure?" } },
///         footer: rsx! {
///             Button { color: Color::Secondary, onclick: move |_| show.set(false), "Cancel" }
///             Button { color: Color::Primary, "Confirm" }
///         },
///     }
/// }
/// # }
/// ```
///
/// # Props
///
/// - `show` — `Signal<bool>` controlling visibility
/// - `title` — modal title text
/// - `body` — modal body content (Element)
/// - `footer` — modal footer content (Element)
/// - `size` — `ModalSize::Sm`, `Default`, `Lg`, `Xl`
/// - `fullscreen` — `ModalFullscreen::Off`, `Always`, `SmDown`..`XxlDown`
/// - `centered` — vertically center the modal
/// - `scrollable` — scrollable modal body
/// - `backdrop_close` — close when clicking backdrop (default: true)
/// - `keyboard_close` — close on the Escape key (default: true)
#[derive(Clone, PartialEq, Props)]
pub struct ModalProps {
    /// Signal controlling modal visibility.
    pub show: Signal<bool>,
    /// Modal title.
    #[props(default)]
    pub title: String,
    /// Rich header content, rendered inside `.modal-header` in place of the
    /// plain `title`. Bootstrap's header holds whatever markup the caller
    /// wants — an icon and a title, a title and a badge — and a `String` title
    /// cannot express that. [`Card`](crate::card::Card) already has this slot,
    /// for the same reason.
    #[props(default)]
    pub header: Option<Element>,
    /// Modal body content.
    #[props(default)]
    pub body: Option<Element>,
    /// Modal footer content.
    #[props(default)]
    pub footer: Option<Element>,
    /// Modal size.
    #[props(default)]
    pub size: ModalSize,
    /// Close when clicking the backdrop.
    #[props(default = true)]
    pub backdrop_close: bool,
    /// Close when the Escape key is pressed (Bootstrap's `keyboard` option).
    #[props(default = true)]
    pub keyboard_close: bool,
    /// Show the close button in the header.
    #[props(default = true)]
    pub show_close: bool,
    /// Center the modal vertically.
    #[props(default)]
    pub centered: bool,
    /// Allow the modal body to scroll.
    #[props(default)]
    pub scrollable: bool,
    /// Fullscreen mode.
    #[props(default)]
    pub fullscreen: ModalFullscreen,
    /// Additional CSS classes for the modal-dialog.
    #[props(default)]
    pub class: String,
    /// Additional CSS classes for the modal-content div.
    ///
    /// This and the three below exist because `.modal-content`,
    /// `.modal-header`, `.modal-body` and `.modal-footer` are the elements a
    /// caller most often needs to reach — a border, a padding override, a
    /// scroll height. Without them the only route is hand-written Bootstrap
    /// markup, which is what the typed component replaces.
    /// [`Card`](crate::card::Card) already carries the equivalent set.
    #[props(default)]
    pub content_class: String,
    /// Additional CSS classes for the modal-header div.
    #[props(default)]
    pub header_class: String,
    /// Additional CSS classes for the modal-body div.
    #[props(default)]
    pub body_class: String,
    /// Additional CSS classes for the modal-footer div.
    #[props(default)]
    pub footer_class: String,
    /// Inline style, appended to the modal element's own. Declared explicitly
    /// rather than left to the attribute spread because this element always sets
    /// `style` itself (`display: block`, which replaces Bootstrap's JS-driven
    /// show): a caller style arriving through `..attributes` would be a second
    /// `style` attribute on one element, and losing the fight would render the
    /// modal invisible.
    #[props(default)]
    pub style: String,
    /// Additional CSS classes for the backdrop element.
    #[props(default)]
    pub backdrop_class: String,
    /// Inline style for the backdrop element. Bootstrap fixes the backdrop and
    /// the modal at adjacent z-indexes; a page that stacks its own overlays
    /// around them needs to be able to say where these two sit.
    #[props(default)]
    pub backdrop_style: String,
    /// Called whenever the modal closes itself — the close button, a backdrop
    /// click, or Escape. `show` is set to false first, so this is for the work
    /// that must accompany closing rather than for the closing itself.
    ///
    /// Without it, state a caller clears in its own close handler is skipped by
    /// every dismissal path the component owns, and the only way to be sure was
    /// to switch all three off. Bootstrap fires `hide.bs.modal`/`hidden.bs.modal`
    /// for the same reason.
    #[props(default)]
    pub on_dismiss: Option<EventHandler<()>>,
    /// Any additional HTML attributes.
    #[props(extends = GlobalAttributes)]
    attributes: Vec<Attribute>,
    /// Child elements (alternative to body prop for custom layout).
    #[props(default)]
    pub children: Element,
}

/// The modal element's inline style: the component's own `display: block` — which
/// stands in for Bootstrap's JS-driven show — with the caller's appended.
///
/// This is a composition rather than an attribute, because the element already
/// sets `style`. A caller style arriving through the attribute spread would be a
/// second `style` on the same element; whichever one lost, the result is wrong,
/// and if `display: block` is the loser the modal is invisible while every class
/// assertion still passes.
fn modal_inline_style(extra: &str) -> String {
    if extra.is_empty() {
        "display: block;".to_string()
    } else {
        format!("display: block; {extra}")
    }
}

#[component]
pub fn Modal(props: ModalProps) -> Element {
    let is_shown = *props.show.read();
    let mut show_signal = props.show;

    if !is_shown {
        return rsx! {};
    }

    let size_class = match props.size {
        ModalSize::Sm => " modal-sm",
        ModalSize::Default => "",
        ModalSize::Lg => " modal-lg",
        ModalSize::Xl => " modal-xl",
    };

    let centered = if props.centered {
        " modal-dialog-centered"
    } else {
        ""
    };

    let scrollable = if props.scrollable {
        " modal-dialog-scrollable"
    } else {
        ""
    };

    let fullscreen = match props.fullscreen {
        ModalFullscreen::Off => "",
        ModalFullscreen::Always => " modal-fullscreen",
        ModalFullscreen::SmDown => " modal-fullscreen-sm-down",
        ModalFullscreen::MdDown => " modal-fullscreen-md-down",
        ModalFullscreen::LgDown => " modal-fullscreen-lg-down",
        ModalFullscreen::XlDown => " modal-fullscreen-xl-down",
        ModalFullscreen::XxlDown => " modal-fullscreen-xxl-down",
    };

    let dialog_class = if props.class.is_empty() {
        format!("modal-dialog{size_class}{centered}{scrollable}{fullscreen}")
    } else {
        format!(
            "modal-dialog{size_class}{centered}{scrollable}{fullscreen} {}",
            props.class
        )
    };

    let backdrop_close = props.backdrop_close;
    let keyboard_close = props.keyboard_close;

    // Each inner element keeps its Bootstrap class first, with the caller's
    // additions appended — same composition Card uses.
    let with_extra = |base: &str, extra: &str| {
        if extra.is_empty() {
            base.to_string()
        } else {
            format!("{base} {extra}")
        }
    };
    let content_class = with_extra("modal-content", &props.content_class);
    let header_class = with_extra("modal-header", &props.header_class);
    let body_class = with_extra("modal-body", &props.body_class);
    let footer_class = with_extra("modal-footer", &props.footer_class);

    // Every dismissal the component owns runs through here, so a caller's
    // `on_dismiss` cannot be reached by one path and missed by another.
    let on_dismiss = props.on_dismiss;
    let mut dismiss = move || {
        show_signal.set(false);
        if let Some(handler) = &on_dismiss {
            handler.call(());
        }
    };

    // Composed, never spread alongside the component's own — see `style`/
    // `backdrop_style` on the props.
    let backdrop_full_class = with_extra("modal-backdrop fade show", &props.backdrop_class);
    let modal_style = modal_inline_style(&props.style);

    rsx! {
        // Backdrop
        div {
            class: "{backdrop_full_class}",
            style: "{props.backdrop_style}",
            onclick: move |_| {
                if backdrop_close {
                    dismiss();
                }
            },
        }
        // Modal
        div {
            class: "modal fade show",
            style: "{modal_style}",
            tabindex: "-1",
            role: "dialog",
            "aria-modal": "true",
            // Focus the panel on open so it receives key events (Bootstrap
            // moves focus to the modal on show); Escape then closes it.
            onmounted: move |evt: MountedEvent| {
                spawn(async move {
                    let _ = evt.set_focus(true).await;
                });
            },
            onkeydown: move |evt: KeyboardEvent| {
                if keyboard_close && is_escape_key(&evt.key()) {
                    dismiss();
                }
            },
            onclick: move |_| {
                if backdrop_close {
                    dismiss();
                }
            },
            ..props.attributes,
            div {
                class: "{dialog_class}",
                // Stop click propagation so clicking inside the modal doesn't close it
                onclick: move |evt| evt.stop_propagation(),
                div { class: "{content_class}",
                    // Header — the rich `header` slot replaces the plain title
                    // when given; the close button is independent of both.
                    if props.header.is_some() || !props.title.is_empty() || props.show_close {
                        div { class: "{header_class}",
                            if let Some(header) = props.header {
                                {header}
                            } else if !props.title.is_empty() {
                                h5 { class: "modal-title", "{props.title}" }
                            }
                            if props.show_close {
                                button {
                                    class: "btn-close",
                                    r#type: "button",
                                    "aria-label": "Close",
                                    onclick: move |_| dismiss(),
                                }
                            }
                        }
                    }
                    // Body
                    if let Some(body) = props.body {
                        div { class: "{body_class}", {body} }
                    }
                    {props.children}
                    // Footer
                    if let Some(footer) = props.footer {
                        div { class: "{footer_class}", {footer} }
                    }
                }
            }
        }
    }
}

#[cfg(test)]
mod tests {
    use super::*;

    #[test]
    fn modal_style_alone_is_the_display_override() {
        assert_eq!(modal_inline_style(""), "display: block;");
    }

    #[test]
    fn a_caller_style_is_appended_not_substituted() {
        // Both must survive. `display: block` is what makes the modal visible at
        // all, so a composition that dropped it in favour of the caller's would
        // render nothing while looking entirely correct in the class list.
        assert_eq!(
            modal_inline_style("z-index: 1080;"),
            "display: block; z-index: 1080;"
        );
    }
}