gpui-native-kit/crates/core/src/button.rs

//! The push button: the API template for every control that follows.

use gpui::prelude::FluentBuilder as _;
use gpui::{
    AnyView, App, ClickEvent, ElementId, InteractiveElement as _, IntoElement, ParentElement as _,
    RenderOnce, Role, SharedString, StatefulInteractiveElement as _, Styled as _, Window, relative,
};
use gpui_native_icons::{IconRole, icon};
use gpui_native_theme::{ActiveTheme as _, Size};
use gpui_native_utils::focus_ring;
use std::rc::Rc;

use crate::common::{Sizable, h_flex};

/// The single activation handler, shared by pointer, Enter, and Space.
type ClickHandler = Box<dyn Fn(&ClickEvent, &mut Window, &mut App)>;
/// The tooltip view builder gpui's `.tooltip(...)` expects.
type TooltipBuilder = Rc<dyn Fn(&mut Window, &mut App) -> AnyView>;

/// Which visual treatment a button uses.
#[derive(Clone, Copy, Debug, Default, PartialEq, Eq)]
pub enum ButtonVariant {
    /// Accent-filled; the platform's default action.
    #[default]
    Primary,
    /// Neutral and bordered; the everyday companion to `Primary`.
    Secondary,
    /// Unpainted until hovered, for toolbars and dense UI.
    Ghost,
    /// The destructive action.
    Destructive,
}

/// A push button: pointer, Enter, and Space all fire the single `on_click`.
#[derive(IntoElement)]
pub struct Button {
    id: ElementId,
    label: Option<SharedString>,
    icon: Option<IconRole>,
    variant: ButtonVariant,
    size: Size,
    disabled: bool,
    a11y_label: Option<SharedString>,
    tooltip: Option<TooltipBuilder>,
    on_click: Option<ClickHandler>,
}

impl Button {
    /// Creates a primary button.
    pub fn new<I>(id: I) -> Self
    where
        I: Into<ElementId>,
    {
        Self {
            id: id.into(),
            label: None,
            icon: None,
            variant: ButtonVariant::default(),
            size: Size::default(),
            disabled: false,
            a11y_label: None,
            tooltip: None,
            on_click: None,
        }
    }

    /// Sets the visible label.
    pub fn label<L>(mut self, label: L) -> Self
    where
        L: Into<SharedString>,
    {
        self.label = Some(label.into());
        self
    }

    /// Shows an icon beside the label.
    pub fn icon(mut self, role: IconRole) -> Self {
        self.icon = Some(role);
        self
    }

    /// Shows a tooltip view next to the button after it is hovered.
    pub fn tooltip<F>(mut self, tooltip: F) -> Self
    where
        F: Fn(&mut Window, &mut App) -> AnyView + 'static,
    {
        self.tooltip = Some(Rc::new(tooltip));
        self
    }

    /// Sets the visual treatment.
    pub fn variant(mut self, variant: ButtonVariant) -> Self {
        self.variant = variant;
        self
    }

    /// Renders the button inert, unfocusable, and dimmed; disabled always wins.
    pub fn disabled(mut self, disabled: bool) -> Self {
        self.disabled = disabled;
        self
    }

    /// Overrides the accessibility label, which defaults to the visible label.
    pub fn accessibility_label<L>(mut self, label: L) -> Self
    where
        L: Into<SharedString>,
    {
        self.a11y_label = Some(label.into());
        self
    }

    /// The single activation handler, fired by pointer, Enter, and Space.
    pub fn on_click<F>(mut self, handler: F) -> Self
    where
        F: Fn(&ClickEvent, &mut Window, &mut App) + 'static,
    {
        self.on_click = Some(Box::new(handler));
        self
    }
}

impl Sizable for Button {
    fn apply_size(&mut self, size: Size) {
        self.size = size;
    }
}

impl RenderOnce for Button {
    fn render(self, _window: &mut Window, cx: &mut App) -> impl IntoElement {
        let theme = cx.theme();
        let colors = theme.colors;
        let ramps = theme.ramps;
        let metrics = theme.sizes.resolve(self.size);

        let on_click = self.on_click;
        let a11y_label = self.a11y_label.or_else(|| self.label.clone());
        let icon_only = self.label.is_none() && self.icon.is_some();

        let (background, foreground, hover, pressed) = match self.variant {
            ButtonVariant::Primary => (
                Some(ramps.primary.base),
                colors.primary_foreground,
                ramps.primary.hover,
                ramps.primary.pressed,
            ),
            ButtonVariant::Secondary => (
                Some(colors.secondary),
                colors.secondary_foreground,
                ramps.secondary.hover,
                ramps.secondary.pressed,
            ),
            ButtonVariant::Ghost => (
                None,
                colors.foreground,
                colors.muted,
                ramps.secondary.pressed,
            ),
            ButtonVariant::Destructive => (
                Some(ramps.destructive.base),
                colors.destructive_foreground,
                ramps.destructive.hover,
                ramps.destructive.pressed,
            ),
        };

        h_flex()
            .id(self.id)
            .role(Role::Button)
            .justify_center()
            .when(icon_only, |button| button.size(metrics.control_height))
            .when(!icon_only, |button| {
                button.h(metrics.control_height).px(metrics.padding_x)
            })
            .line_height(relative(1.0))
            .gap_1p5()
            .rounded(theme.radius.control)
            .text_size(metrics.text_size)
            .when(self.variant == ButtonVariant::Secondary, |button| {
                button.border_1().border_color(colors.border)
            })
            .when_some(background, |button, background| button.bg(background))
            .text_color(foreground)
            .when_some(a11y_label, |button, label| button.aria_label(label))
            .when_some(self.icon, |button, role| {
                button.child(icon(role).size(metrics.icon_size).color(foreground))
            })
            .when_some(self.label, |button, label| button.child(label))
            .when(self.disabled, |button| button.opacity(0.5))
            .when_some(self.tooltip, |button, tooltip| {
                button.tooltip(move |window, cx| tooltip(window, cx))
            })
            .when(!self.disabled, |button| {
                button
                    .cursor_pointer()
                    .focusable()
                    .tab_stop(true)
                    .hover(move |style| style.bg(hover))
                    .active(move |style| style.bg(pressed))
                    .focus_visible(|style| style.shadow(focus_ring(colors.ring)))
                    .when_some(on_click, |button, on_click| {
                        button.on_click(move |event, window, cx| on_click(event, window, cx))
                    })
            })
    }
}