add switch

2026-10-28 19:04:42 +07:00
parent 1ddc10cae4
commit 0924d1d301
4 changed files with 292 additions and 0 deletions
@@ -0,0 +1,142 @@
+//! The switch: a controlled on/off pill with a thumb.
+
+use gpui::prelude::FluentBuilder as _;
+use gpui::{
+    App, BoxShadow, ElementId, InteractiveElement as _, IntoElement, ParentElement as _,
+    RenderOnce, Role, SharedString, StatefulInteractiveElement as _, Styled as _, Toggled, Window,
+    div, px,
+};
+use gpui_native_theme::ActiveTheme as _;
+
+use crate::common::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,
+    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,
+            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 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 on_change = self.on_change;
+        let next = !self.checked;
+        let a11y_label = self.a11y_label.or_else(|| self.label.clone());
+
+        h_flex()
+            .id(self.id)
+            .gap_1p5()
+            .text_sm()
+            .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(vec![
+                            BoxShadow::new(px(0.), px(0.), colors.ring).spread_radius(px(3.)),
+                        ])
+                    })
+                    .when_some(on_change, |switch, on_change| {
+                        switch.on_click(move |_, window, cx| on_change(next, window, cx))
+                    })
+            })
+            .child( 
+                h_flex()
+                    .flex_none()
+                    .w_9()
+                    .h_5()
+                    .p_0p5()
+                    .rounded(theme.radius.full)
+                    .when(self.checked, |track| {
+                        track
+                            .bg(ramps.primary.base)
+                            .justify_end()
+                            .hover(|style| style.bg(ramps.primary.hover))
+                    })
+                    .when(!self.checked, |track| {
+                        track.bg(colors.border).justify_start()
+                    })
+                    .child(
+                        div()
+                            .size_4()
+                            .flex_none()
+                            .rounded(theme.radius.full)
+                            .bg(colors.primary_foreground)
+                            .border_1()
+                            .border_color(colors.border),
+                    ),
+            )
+            .when_some(self.label, |switch, label| switch.child(label))
+    }
+}