add radio
This commit is contained in:
@@ -10,3 +10,6 @@ pub mod checkbox;
|
||||
|
||||
#[cfg(feature = "switch")]
|
||||
pub mod switch;
|
||||
|
||||
#[cfg(feature = "radio")]
|
||||
pub mod radio;
|
||||
|
||||
@@ -0,0 +1,210 @@
|
||||
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, v_flex};
|
||||
|
||||
/// The group's change reporter, fired with the clicked radio's value.
|
||||
type ChangeHandler<V> = std::rc::Rc<dyn Fn(V, &mut Window, &mut App)>;
|
||||
|
||||
/// Radio button.
|
||||
pub struct Radio<V> {
|
||||
id: ElementId,
|
||||
value: V,
|
||||
label: Option<SharedString>,
|
||||
disabled: bool,
|
||||
a11y_label: Option<SharedString>,
|
||||
}
|
||||
|
||||
impl<V> Radio<V>
|
||||
where
|
||||
V: Clone + PartialEq + 'static,
|
||||
{
|
||||
/// Creates a radio representing `value`.
|
||||
pub fn new<I>(id: I, value: V) -> Self
|
||||
where
|
||||
I: Into<ElementId>,
|
||||
{
|
||||
Self {
|
||||
id: id.into(),
|
||||
value,
|
||||
label: None,
|
||||
disabled: false,
|
||||
a11y_label: None,
|
||||
}
|
||||
}
|
||||
|
||||
/// Sets the visible label; clicking it selects the radio too.
|
||||
pub fn label<L>(mut self, label: L) -> Self
|
||||
where
|
||||
L: Into<SharedString>,
|
||||
{
|
||||
self.label = Some(label.into());
|
||||
self
|
||||
}
|
||||
|
||||
/// Renders the radio inert, unfocusable, and dimmed.
|
||||
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
|
||||
}
|
||||
}
|
||||
|
||||
/// Group of radio buttons.
|
||||
#[derive(IntoElement)]
|
||||
pub struct RadioGroup<V>
|
||||
where
|
||||
V: Clone + PartialEq + 'static,
|
||||
{
|
||||
id: ElementId,
|
||||
selected: Option<V>,
|
||||
children: Vec<Radio<V>>,
|
||||
a11y_label: Option<SharedString>,
|
||||
on_change: Option<ChangeHandler<V>>,
|
||||
}
|
||||
|
||||
impl<V> RadioGroup<V>
|
||||
where
|
||||
V: Clone + PartialEq + 'static,
|
||||
{
|
||||
/// Creates an empty group with nothing selected.
|
||||
pub fn new<I>(id: I) -> Self
|
||||
where
|
||||
I: Into<ElementId>,
|
||||
{
|
||||
Self {
|
||||
id: id.into(),
|
||||
selected: None,
|
||||
children: Vec::new(),
|
||||
a11y_label: None,
|
||||
on_change: None,
|
||||
}
|
||||
}
|
||||
|
||||
/// Sets the currently selected value.
|
||||
pub fn selected(mut self, selected: Option<V>) -> Self {
|
||||
self.selected = selected;
|
||||
self
|
||||
}
|
||||
|
||||
/// Adds a radio to the group.
|
||||
pub fn child(mut self, radio: Radio<V>) -> Self {
|
||||
self.children.push(radio);
|
||||
self
|
||||
}
|
||||
|
||||
/// Sets the group's accessibility label.
|
||||
pub fn accessibility_label<L>(mut self, label: L) -> Self
|
||||
where
|
||||
L: Into<SharedString>,
|
||||
{
|
||||
self.a11y_label = Some(label.into());
|
||||
self
|
||||
}
|
||||
|
||||
/// Sets the change handler.
|
||||
pub fn on_change<F>(mut self, handler: F) -> Self
|
||||
where
|
||||
F: Fn(V, &mut Window, &mut App) + 'static,
|
||||
{
|
||||
self.on_change = Some(std::rc::Rc::new(handler));
|
||||
self
|
||||
}
|
||||
}
|
||||
|
||||
impl<V> RenderOnce for RadioGroup<V>
|
||||
where
|
||||
V: Clone + PartialEq + 'static,
|
||||
{
|
||||
fn render(self, _window: &mut Window, cx: &mut App) -> impl IntoElement {
|
||||
let theme = cx.theme();
|
||||
let colors = theme.colors;
|
||||
let ramps = theme.ramps;
|
||||
let radius = theme.radius;
|
||||
let selected = self.selected;
|
||||
let on_change = self.on_change;
|
||||
let group_label = self.a11y_label;
|
||||
|
||||
v_flex()
|
||||
.id(self.id)
|
||||
.gap_2()
|
||||
.text_sm()
|
||||
.role(Role::RadioGroup)
|
||||
.when_some(group_label.clone(), |group, label| group.aria_label(label))
|
||||
.children(self.children.into_iter().map(move |radio| {
|
||||
let is_selected = selected.as_ref() == Some(&radio.value);
|
||||
let disabled = radio.disabled;
|
||||
let row_on_change = on_change.clone();
|
||||
|
||||
let a11y_label = radio
|
||||
.a11y_label
|
||||
.or(radio.label.clone())
|
||||
.or_else(|| group_label.clone());
|
||||
|
||||
h_flex()
|
||||
.id(radio.id)
|
||||
.gap_1p5()
|
||||
.role(Role::RadioButton)
|
||||
.when_some(a11y_label, |row, label| row.aria_label(label))
|
||||
.aria_toggled(Toggled::from(is_selected))
|
||||
.when(disabled, |row| row.opacity(0.5))
|
||||
.when(!disabled, move |row| {
|
||||
let value = radio.value.clone();
|
||||
row.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(row_on_change, |row, on_change| {
|
||||
row.on_click(move |_, window, cx| {
|
||||
on_change(value.clone(), window, cx)
|
||||
})
|
||||
})
|
||||
})
|
||||
.child(
|
||||
h_flex()
|
||||
.justify_center()
|
||||
.flex_none()
|
||||
.size_4()
|
||||
.rounded(radius.full)
|
||||
.border_1()
|
||||
.when(is_selected, |indicator| {
|
||||
indicator
|
||||
.bg(ramps.primary.base)
|
||||
.border_color(ramps.primary.base)
|
||||
.hover(|style| style.bg(ramps.primary.hover))
|
||||
.child(
|
||||
div()
|
||||
.size_2()
|
||||
.rounded(radius.full)
|
||||
.bg(colors.primary_foreground),
|
||||
)
|
||||
})
|
||||
.when(!is_selected, |indicator| {
|
||||
indicator
|
||||
.bg(colors.input)
|
||||
.border_color(colors.border)
|
||||
.hover(|style| style.border_color(colors.muted_foreground))
|
||||
}),
|
||||
)
|
||||
.when_some(radio.label, |row, label| row.child(label))
|
||||
}))
|
||||
}
|
||||
}
|
||||
@@ -111,7 +111,7 @@ impl RenderOnce for Switch {
|
||||
switch.on_click(move |_, window, cx| on_change(next, window, cx))
|
||||
})
|
||||
})
|
||||
.child(
|
||||
.child(
|
||||
h_flex()
|
||||
.flex_none()
|
||||
.w_9()
|
||||
|
||||
Reference in New Issue
Block a user