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

//! The switch: a controlled on/off pill with a thumb.

use gpui::prelude::FluentBuilder as _;
use gpui::{
    AnimationExt as _, App, ElementId, InteractiveElement as _, IntoElement, ParentElement as _,
    RenderOnce, Role, SharedString, SpringAnimation, SpringConfig, StatefulInteractiveElement as _,
    Styled as _, Toggled, Window, div, px,
};
use gpui_native_theme::{ActiveTheme as _, Size};
use gpui_native_utils::focus_ring;

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

/// The change reporter, fired with the next value by pointer, Enter, and Space.
type ChangeHandler = Box<dyn Fn(bool, &mut Window, &mut App)>;

/// Switch component.
#[derive(IntoElement)]
pub struct Switch {
    id: ElementId,
    label: Option<SharedString>,
    checked: bool,
    size: Size,
    disabled: bool,
    a11y_label: Option<SharedString>,
    on_change: Option<ChangeHandler>,
}

impl Switch {
    /// Creates an unchecked switch.
    pub fn new<I>(id: I) -> Self
    where
        I: Into<ElementId>,
    {
        Self {
            id: id.into(),
            label: None,
            checked: false,
            size: Size::default(),
            disabled: false,
            a11y_label: None,
            on_change: None,
        }
    }

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

    /// Sets the current value; the switch never owns it.
    pub fn checked(mut self, checked: bool) -> Self {
        self.checked = checked;
        self
    }

    /// Renders the switch 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 change handler, fired with the next value by pointer, Enter, and Space.
    pub fn on_change<F>(mut self, handler: F) -> Self
    where
        F: Fn(bool, &mut Window, &mut App) + 'static,
    {
        self.on_change = Some(Box::new(handler));
        self
    }
}

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

impl RenderOnce for Switch {
    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 track_height = metrics.icon_size * 1.25;
        let track_width = metrics.icon_size * 2.25;

        let knob = metrics.icon_size;
        let inset = metrics.icon_size * 0.125;
        let travel = track_width - knob - inset * 2.;

        let next = !self.checked;
        let on_change = self.on_change;
        let a11y_label = self.a11y_label.or_else(|| self.label.clone());

        let anim_config = SpringConfig::new(500., 35., 1.);
        let anim = SpringAnimation::new(anim_config).to(if self.checked { travel } else { px(0.) });

        h_flex()
            .id(self.id)
            .gap_1p5()
            .text_size(metrics.text_size)
            .role(Role::Switch)
            .when_some(a11y_label, |switch, label| switch.aria_label(label))
            .aria_toggled(Toggled::from(self.checked))
            .when(self.disabled, |switch| switch.opacity(0.5))
            .when(!self.disabled, |switch| {
                switch
                    .cursor_pointer()
                    .focusable()
                    .tab_stop(true)
                    .focus_visible(|style| style.shadow(focus_ring(colors.ring)))
                    .when_some(on_change, |switch, on_change| {
                        switch.on_click(move |_, window, cx| on_change(next, window, cx))
                    })
            })
            .child(
                div()
                    .flex_none()
                    .relative()
                    .w(track_width)
                    .h(track_height)
                    .rounded(theme.radius.full)
                    .when(self.checked, |track| {
                        track
                            .bg(ramps.primary.base)
                            .hover(|style| style.bg(ramps.primary.hover))
                    })
                    .when(!self.checked, |track| track.bg(colors.border))
                    .child(
                        div()
                            .absolute()
                            .top(inset)
                            .left(inset)
                            .size(knob)
                            .rounded(theme.radius.full)
                            .bg(colors.primary_foreground)
                            .border_1()
                            .border_color(colors.border)
                            .with_spring("switch-thumb", anim, move |thumb, offset| {
                                thumb.left(inset + offset)
                            }),
                    ),
            )
            .when_some(self.label, |switch, label| switch.child(label))
    }
}