Module dialog 

A modal dialog component for displaying critical information or actions.

This module provides dialog_provider, a component that renders content in a modal overlay. When active, the dialog sits on top of the primary UI, blocks interactions with the content behind it (via a “scrim”), and can be dismissed by user actions like pressing the Escape key or clicking the scrim.

Key Components

• dialog_provider: The main function that wraps your UI to provide dialog capabilities.
• DialogProviderState: A state object you create and manage to control the dialog’s visibility using its open() and close() methods.
• DialogProviderArgs: Configuration for the provider, including the visual style of the scrim and the mandatory on_close_request callback.
• DialogStyle: Defines the scrim’s appearance, either Material (a simple dark overlay) or Glass (a blurred, translucent effect).

Usage

The dialog_provider acts as a wrapper around your main content. It takes the main content and the dialog content as separate closures.

1. Create State: In your application’s state, create an Arc<RwLock<DialogProviderState>>.
2. Wrap Content: Call dialog_provider at a high level in your component tree.
3. Provide Content: Pass two closures to dialog_provider:
   • main_content: Renders the UI that is always visible.
   • dialog_content: Renders the content of the dialog box itself. This closure receives an f32 alpha value for animating its appearance.
4. Control Visibility: From an event handler (e.g., a button’s on_click), call dialog_state.write().open() to show the dialog.
5. Handle Closing: The on_close_request callback you provide is responsible for calling dialog_state.write().close() to dismiss the dialog.

Example

use std::sync::Arc;
use parking_lot::RwLock;
use tessera_ui::{tessera, Renderer};
use tessera_ui_basic_components::{
    dialog::{dialog_provider, DialogProviderArgsBuilder, DialogProviderState},
    button::{button, ButtonArgsBuilder},
    ripple_state::RippleState,
    text::{text, TextArgsBuilder},
};

// Define an application state.
#[derive(Default)]
struct AppState {
    dialog_state: Arc<RwLock<DialogProviderState>>,
    ripple_state: Arc<RippleState>,
}

#[tessera]
fn app(state: Arc<RwLock<AppState>>) {
    let dialog_state = state.read().dialog_state.clone();

    // Use the dialog_provider.
    dialog_provider(
        DialogProviderArgsBuilder::default()
            // Provide a callback to handle close requests.
            .on_close_request(Arc::new({
                let dialog_state = dialog_state.clone();
                move || dialog_state.write().close()
            }))
            .build()
            .unwrap(),
        dialog_state.clone(),
        // Define the main content.
        move || {
            button(
                ButtonArgsBuilder::default()
                    .on_click(Arc::new({
                        let dialog_state = dialog_state.clone();
                        move || dialog_state.write().open()
                    }))
                    .build()
                    .unwrap(),
                state.read().ripple_state.clone(),
                || text(TextArgsBuilder::default().text("Show Dialog".to_string()).build().unwrap())
            );
        },
        // Define the dialog content.
        |alpha| {
            text(TextArgsBuilder::default().text("This is a dialog!".to_string()).build().unwrap());
        }
    );
}

Structs

DialogProviderArgs

Arguments for the dialog_provider component.

DialogProviderArgsBuilder

Builder for DialogProviderArgs.

DialogProviderState

Enums

DialogProviderArgsBuilderError

Error type for DialogProviderArgsBuilder

DialogStyle

Defines the visual style of the dialog’s scrim.

Functions

dialog_provider

A provider component that manages the rendering and event flow for a modal dialog.