add dialog

crates/core/src/dialog.rs

@@ -0,0 +1,265 @@
+use std::cell::RefCell;
+use std::rc::Rc;
+
+use gpui::prelude::FluentBuilder as _;
+use gpui::{
+    Animation, AnimationExt as _, AnyElement, App, Bounds, ElementId, FontWeight,
+    InteractiveElement as _, IntoElement, KeyDownEvent, MouseButton, MouseDownEvent,
+    ParentElement as _, Pixels, RenderOnce, Role, SharedString, StatefulInteractiveElement as _,
+    Styled as _, Window, canvas, div, ease_out_quint, relative,
+};
+use gpui_native_theme::ActiveTheme as _;
+
+use crate::common::v_flex;
+
+/// Requests the dialog's close: `false` closes.
+pub type ChangeHandler = Rc<dyn Fn(bool, &mut Window, &mut App)>;
+type ContentFn = Box<dyn Fn(&mut Window, &mut App) -> AnyElement>;
+type ActionsFn = Box<dyn Fn(&mut Window, &mut App) -> Vec<AnyElement>>;
+/// Bounds captured during the last paint, shared with the scrim listener.
+type BoundsCell = Rc<RefCell<Option<Bounds<Pixels>>>>;
+
+/// A centred panel over a dim scrim: the platform's modal.
+#[derive(IntoElement)]
+pub struct Dialog {
+    id: ElementId,
+    open: bool,
+    alert: bool,
+    title: Option<SharedString>,
+    a11y_label: Option<SharedString>,
+    on_change: Option<ChangeHandler>,
+    content: Option<ContentFn>,
+    actions: Option<ActionsFn>,
+}
+
+impl Dialog {
+    /// Creates a closed dialog.
+    pub fn new<I>(id: I) -> Self
+    where
+        I: Into<ElementId>,
+    {
+        Self {
+            id: id.into(),
+            open: false,
+            alert: false,
+            title: None,
+            a11y_label: None,
+            on_change: None,
+            content: None,
+            actions: None,
+        }
+    }
+
+    /// Sets the current open state.
+    pub fn open(mut self, open: bool) -> Self {
+        self.open = open;
+        self
+    }
+
+    /// Sets the alert mode.
+    pub fn alert(mut self, alert: bool) -> Self {
+        self.alert = alert;
+        self
+    }
+
+    /// Requests close through `on_change` on escape and scrim clicks.
+    pub fn on_change<F>(mut self, handler: F) -> Self
+    where
+        F: Fn(bool, &mut Window, &mut App) + 'static,
+    {
+        self.on_change = Some(Rc::new(handler));
+        self
+    }
+
+    /// Sets the dialog's title.
+    pub fn title<L>(mut self, title: L) -> Self
+    where
+        L: Into<SharedString>,
+    {
+        self.title = Some(title.into());
+        self
+    }
+
+    /// Sets the body content between the title and the actions.
+    pub fn content<F>(mut self, content: F) -> Self
+    where
+        F: Fn(&mut Window, &mut App) -> AnyElement + 'static,
+    {
+        self.content = Some(Box::new(content));
+        self
+    }
+
+    /// Sets the footer actions, laid out right-aligned in the given order.
+    pub fn actions<F>(mut self, actions: F) -> Self
+    where
+        F: Fn(&mut Window, &mut App) -> Vec<AnyElement> + 'static,
+    {
+        self.actions = Some(Box::new(actions));
+        self
+    }
+
+    /// Overrides the accessibility label of the panel.
+    pub fn accessibility_label<L>(mut self, label: L) -> Self
+    where
+        L: Into<SharedString>,
+    {
+        self.a11y_label = Some(label.into());
+        self
+    }
+}
+
+impl RenderOnce for Dialog {
+    fn render(self, window: &mut Window, cx: &mut App) -> impl IntoElement {
+        let root = div().absolute().inset_0();
+
+        if !self.open {
+            return root;
+        }
+
+        let (
+            scrim_color,
+            border,
+            foreground,
+            muted_foreground,
+            surface,
+            radius,
+            shadows,
+            title_size,
+            enter_duration,
+        ) = {
+            let theme = cx.theme();
+            (
+                theme.colors.overlay,
+                theme.colors.border,
+                theme.colors.foreground,
+                theme.colors.muted_foreground,
+                theme.colors.surface,
+                theme.radius.overlay,
+                theme.elevations.dialog.shadows(),
+                theme.sizes.medium.text_size,
+                theme.motion.overlay,
+            )
+        };
+
+        let role = if self.alert {
+            Role::AlertDialog
+        } else {
+            Role::Dialog
+        };
+
+        let label = self
+            .a11y_label
+            .clone()
+            .or_else(|| self.title.clone())
+            .unwrap_or_else(|| SharedString::from(self.id.to_string()));
+
+        let on_change = self.on_change.clone();
+        let alert = self.alert;
+
+        // Keyboard focus rides the panel across frames.
+        let focus_handle = window.use_keyed_state("dialog-focus", cx, |_, cx| cx.focus_handle());
+
+        let content = self.content.map(|build| build(window, cx));
+        let actions = self.actions.map(|build| build(window, cx));
+
+        let panel_bounds: BoundsCell = Rc::new(RefCell::new(None));
+
+        let panel = v_flex()
+            .id("dialog-panel")
+            .track_focus(&focus_handle.read(cx).clone())
+            .role(role)
+            .aria_label(label)
+            .min_w_64()
+            .max_w(relative(0.9))
+            .p_4()
+            .gap_3()
+            .bg(surface)
+            .text_color(foreground)
+            .rounded(radius)
+            .border_1()
+            .border_color(border)
+            .shadow(shadows)
+            .overflow_hidden()
+            .on_mouse_down(MouseButton::Left, |_, _, cx| cx.stop_propagation())
+            .on_key_down({
+                let on_change = on_change.clone();
+                move |event: &KeyDownEvent, window, cx| {
+                    if event.keystroke.key == "escape"
+                        && !alert
+                        && let Some(on_change) = &on_change
+                    {
+                        on_change(false, window, cx);
+                    }
+                    cx.stop_propagation();
+                }
+            })
+            .when_some(self.title, |panel, title| {
+                panel.child(
+                    div()
+                        .text_size(title_size)
+                        .font_weight(FontWeight::SEMIBOLD)
+                        .child(title),
+                )
+            })
+            .when_some(content, |panel, content| {
+                panel.child(div().text_color(muted_foreground).child(content))
+            })
+            .when_some(actions, |panel, actions| {
+                panel.child(div().flex().justify_end().gap_2().children(actions))
+            })
+            .child(
+                canvas(
+                    {
+                        let cell = panel_bounds.clone();
+                        move |bounds, _window, _cx| *cell.borrow_mut() = Some(bounds)
+                    },
+                    {
+                        let focus_handle = focus_handle.clone();
+                        move |_, _, window, cx| {
+                            let handle = focus_handle.read(cx).clone();
+                            if !handle.contains_focused(window, cx) {
+                                window.focus(&handle, cx);
+                            }
+                        }
+                    },
+                )
+                .absolute()
+                .inset_0(),
+            );
+
+        let scrim = div()
+            .absolute()
+            .inset_0()
+            .bg(scrim_color)
+            .occlude()
+            .when(!alert, |scrim| {
+                scrim.on_mouse_down(MouseButton::Left, {
+                    let panel_bounds = panel_bounds.clone();
+                    let on_change = on_change.clone();
+                    move |event: &MouseDownEvent, _window, cx| {
+                        let on_panel = panel_bounds
+                            .borrow()
+                            .is_some_and(|bounds| bounds.contains(&event.position));
+                        if on_panel {
+                            return;
+                        }
+                        if let Some(on_change) = &on_change {
+                            on_change(false, _window, cx);
+                        }
+                        cx.stop_propagation();
+                    }
+                })
+            });
+
+        root.flex()
+            .items_center()
+            .justify_center()
+            .p_4()
+            .child(scrim)
+            .child(panel.with_animation(
+                "dialog-enter",
+                Animation::new(enter_duration).with_easing(ease_out_quint()),
+                |panel, delta| panel.opacity(delta),
+            ))
+    }
+}

crates/core/src/lib.rs

@@ -36,6 +36,9 @@ pub mod avatar;
 #[cfg(feature = "input")]
 pub mod input;
 
+#[cfg(feature = "dialog")]
+pub mod dialog;
+
 #[cfg(feature = "menu")]
 pub mod menu;
 

crates/core/tests/dialog.rs

@@ -0,0 +1,168 @@
+use std::cell::RefCell;
+use std::rc::Rc;
+
+use gpui::{
+    Context, IntoElement, Modifiers, MouseButton, ParentElement as _, Render, Styled as _,
+    TestAppContext, VisualTestContext, Window, div, point, px,
+};
+use gpui_native_core::button::{Button, ButtonVariant};
+use gpui_native_core::dialog::Dialog;
+use gpui_native_theme::Theme;
+
+struct Harness {
+    open: bool,
+    alert: bool,
+    changes: Rc<RefCell<Vec<bool>>>,
+}
+
+impl Render for Harness {
+    fn render(&mut self, _window: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
+        let changes = self.changes.clone();
+        let view = cx.entity();
+        let on_change_view = view.clone();
+        let close_changes = self.changes.clone();
+        let close_view = view.clone();
+        div().size_full().child(
+            Dialog::new("test-dialog")
+                .open(self.open)
+                .alert(self.alert)
+                .title("Delete file?")
+                .on_change(move |next, _, cx| {
+                    eprintln!("HARNESS on_change: {next}");
+                    changes.borrow_mut().push(next);
+                    on_change_view.update(cx, |harness, cx| {
+                        harness.open = next;
+                        cx.notify();
+                    });
+                })
+                .content(|_, _| {
+                    div()
+                        .w(px(300.))
+                        .h(px(80.))
+                        .child("This cannot be undone.")
+                        .into_any_element()
+                })
+                .actions(move |_, _| {
+                    vec![
+                        Button::new("dialog-cancel")
+                            .label("Cancel")
+                            .variant(ButtonVariant::Secondary)
+                            .on_click({
+                                let close_changes = close_changes.clone();
+                                let close_view = close_view.clone();
+                                move |_, _, cx| {
+                                    close_changes.borrow_mut().push(false);
+                                    close_view.update(cx, |harness, cx| {
+                                        harness.open = false;
+                                        cx.notify();
+                                    });
+                                }
+                            })
+                            .into_any_element(),
+                        Button::new("dialog-delete")
+                            .label("Delete")
+                            .variant(ButtonVariant::Destructive)
+                            .on_click({
+                                let close_changes = close_changes.clone();
+                                let close_view = close_view.clone();
+                                move |_, _, cx| {
+                                    close_changes.borrow_mut().push(false);
+                                    close_view.update(cx, |harness, cx| {
+                                        harness.open = false;
+                                        cx.notify();
+                                    });
+                                }
+                            })
+                            .into_any_element(),
+                    ]
+                }),
+        )
+    }
+}
+
+/// An open 332px-wide dialog centered in the window: the panel spans
+/// roughly `(794..1126, 448..640)`, so `(100, 100)` is on the scrim and
+/// the window center is on the panel.
+fn dialog_window(
+    open: bool,
+    alert: bool,
+) -> (TestAppContext, VisualTestContext, Rc<RefCell<Vec<bool>>>) {
+    let mut cx = TestAppContext::single();
+    cx.update(Theme::init);
+    let changes = Rc::new(RefCell::new(Vec::new()));
+    let harness_changes = changes.clone();
+    let window = cx.add_window(move |_, _| Harness {
+        open,
+        alert,
+        changes: harness_changes,
+    });
+    let mut visual = VisualTestContext::from_window(window.into(), &cx);
+    visual.update(|window, cx| {
+        window.draw(cx).clear(cx);
+    });
+    (cx, visual, changes)
+}
+
+fn draw(visual: &mut VisualTestContext) {
+    visual.update(|window, cx| {
+        eprintln!("DRAW");
+        window.draw(cx).clear(cx);
+    });
+}
+
+fn click(visual: &mut VisualTestContext, position: gpui::Point<gpui::Pixels>) {
+    visual.simulate_mouse_down(position, MouseButton::Left, Modifiers::default());
+    visual.simulate_mouse_up(position, MouseButton::Left, Modifiers::default());
+}
+
+#[test]
+fn escape_closes_a_modal_dialog_and_stays_closed() {
+    let (_cx, mut visual, changes) = dialog_window(true, false);
+
+    visual.simulate_keystrokes("escape");
+    assert_eq!(*changes.borrow(), vec![false]);
+    draw(&mut visual);
+
+    // Closed: escape on the inert remainder reports nothing further.
+    visual.simulate_keystrokes("escape");
+    assert_eq!(*changes.borrow(), vec![false]);
+}
+
+#[test]
+fn escape_is_inert_on_an_alert() {
+    let (_cx, mut visual, changes) = dialog_window(true, true);
+    visual.simulate_keystrokes("escape");
+    assert!(changes.borrow().is_empty());
+}
+
+#[test]
+fn scrim_click_closes_a_modal_but_not_an_alert() {
+    let (_cx, mut visual, changes) = dialog_window(true, false);
+    click(&mut visual, point(px(100.), px(100.)));
+    assert_eq!(*changes.borrow(), vec![false]);
+
+    draw(&mut visual);
+    click(&mut visual, point(px(100.), px(100.)));
+    assert_eq!(*changes.borrow(), vec![false]);
+
+    // The same click on an alert's scrim answers nothing.
+    let (_cx, mut visual, changes) = dialog_window(true, true);
+    click(&mut visual, point(px(100.), px(100.)));
+    assert!(changes.borrow().is_empty());
+}
+
+#[test]
+fn clicking_the_panel_does_not_dismiss() {
+    // The window center is where the centered panel sits.
+    let (_cx, mut visual, changes) = dialog_window(true, false);
+    click(&mut visual, point(px(960.), px(540.)));
+    assert!(changes.borrow().is_empty());
+}
+
+#[test]
+fn a_closed_dialog_is_inert() {
+    let (_cx, mut visual, changes) = dialog_window(false, false);
+    visual.simulate_keystrokes("escape");
+    click(&mut visual, point(px(100.), px(100.)));
+    assert!(changes.borrow().is_empty());
+}