This commit is contained in:
2026-10-30 19:36:39 +07:00
parent b4a996e44c
commit 1711ce0e9d
22 changed files with 300 additions and 485 deletions
+29 -94
View File
@@ -2,12 +2,13 @@ use std::rc::Rc;
use gpui::prelude::FluentBuilder as _;
use gpui::{
AnyElement, App, ElementId, FocusHandle, Hsla, InteractiveElement as _, IntoElement,
KeyDownEvent, ParentElement as _, Pixels, RenderOnce, Role, SharedString,
StatefulInteractiveElement as _, Styled as _, Window, div,
AnyElement, App, ElementId, FocusHandle, InteractiveElement as _, IntoElement, KeyDownEvent,
ParentElement as _, RenderOnce, Role, SharedString, StatefulInteractiveElement as _,
Styled as _, Window, div,
};
use gpui_native_icons::{IconRole, icon};
use gpui_native_theme::ActiveTheme as _;
use gpui_native_theme::{ActiveTheme as _, Theme};
use gpui_native_utils::{nav_key, paint_selectable_row, selectable_label_color};
/// The change reporter, fired with the next selection by pointer and keys.
type ChangeHandler = Rc<dyn Fn(Option<usize>, &mut Window, &mut App)>;
@@ -116,19 +117,6 @@ impl List {
}
}
struct ListChrome {
foreground: Hsla,
muted: Hsla,
muted_foreground: Hsla,
primary: Hsla,
primary_foreground: Hsla,
radius_sm: Pixels,
icon_size: Pixels,
text_size: Pixels,
/// The row count, for the rows' set-size a11y attributes.
count: usize,
}
impl RenderOnce for List {
fn render(self, window: &mut Window, cx: &mut App) -> impl IntoElement {
let items = match self.items {
@@ -143,40 +131,24 @@ impl RenderOnce for List {
.map(|(index, _)| index)
.collect();
let focus_handle = window.with_element_namespace(self.id.clone(), |window| {
window.use_keyed_state("list-focus", cx, |_, cx| cx.focus_handle())
});
let focus = focus_handle.read(cx).clone();
let focus = gpui_native_utils::focus_handle(&self.id, window, cx);
let theme = cx.theme();
let label = self
.a11y_label
.clone()
.unwrap_or_else(|| SharedString::from(self.id.to_string()));
let chrome = {
let theme = cx.theme();
ListChrome {
foreground: theme.colors.foreground,
muted: theme.colors.muted,
muted_foreground: theme.colors.muted_foreground,
primary: theme.ramps.primary.base,
primary_foreground: theme.colors.primary_foreground,
radius_sm: theme.radius.sm,
icon_size: theme.sizes.medium.icon_size,
text_size: theme.sizes.medium.text_size,
count: items.len(),
}
};
let rows: Vec<AnyElement> = items
.iter()
.enumerate()
.map(|(index, item)| {
render_row(
theme,
index,
items.len(),
item,
self.selected == Some(index),
&chrome,
&self.on_change,
&focus,
)
@@ -188,7 +160,7 @@ impl RenderOnce for List {
.flex()
.flex_col()
.gap_0p5()
.text_size(chrome.text_size)
.text_size(theme.sizes.medium.text_size)
.track_focus(&focus)
.focusable()
.tab_stop(true)
@@ -199,20 +171,13 @@ impl RenderOnce for List {
let on_change = self.on_change.clone();
move |event: &KeyDownEvent, window, cx| {
let target = match event.keystroke.key.as_str() {
"down" => adjacent(&selectable, selected, true),
"up" => adjacent(&selectable, selected, false),
"home" => selectable.first().copied(),
"end" => selectable.last().copied(),
_ => return,
};
if let Some(next) = target
&& Some(next) != selected
&& let Some(on_change) = &on_change
{
on_change(Some(next), window, cx);
if nav_key(&selectable, selected, &event.keystroke.key, |next| {
if let Some(on_change) = &on_change {
on_change(next, window, cx);
}
}) {
cx.stop_propagation();
}
cx.stop_propagation();
}
})
.children(rows)
@@ -220,14 +185,15 @@ impl RenderOnce for List {
}
fn render_row(
theme: &Theme,
index: usize,
count: usize,
item: &ListItem,
selected: bool,
chrome: &ListChrome,
on_change: &Option<ChangeHandler>,
focus: &FocusHandle,
) -> AnyElement {
let label_color = row_color(item, selected, chrome);
let label_color = selectable_label_color(theme, selected, item.disabled);
let disabled = item.disabled;
div()
@@ -237,20 +203,12 @@ fn render_row(
.gap_2()
.px_2()
.py_1()
.rounded(chrome.radius_sm)
.rounded(theme.radius.sm)
.role(Role::ListItem)
.aria_selected(selected)
.aria_position_in_set(index + 1)
.aria_size_of_set(chrome.count)
.map(|row| {
if disabled {
row
} else if selected {
row.bg(chrome.primary)
} else {
row.hover(|row| row.bg(chrome.muted))
}
})
.aria_size_of_set(count)
.map(|row| paint_selectable_row(theme, row, selected, disabled))
.when(!disabled, |row| {
row.cursor_pointer().on_click({
let on_change = on_change.clone();
@@ -264,7 +222,11 @@ fn render_row(
})
})
.when_some(item.icon, |row, role| {
row.child(icon(role).size(chrome.icon_size).color(label_color))
row.child(
icon(role)
.size(theme.sizes.medium.icon_size)
.color(label_color),
)
})
.child(
div()
@@ -278,39 +240,12 @@ fn render_row(
.flex_none()
.text_sm()
.text_color(if selected {
chrome.primary_foreground
theme.colors.primary_foreground
} else {
chrome.muted_foreground
theme.colors.muted_foreground
})
.child(detail),
)
})
.into_any_element()
}
/// The row's label/icon color.
fn row_color(item: &ListItem, selected: bool, chrome: &ListChrome) -> Hsla {
if item.disabled {
chrome.muted_foreground
} else if selected {
chrome.primary_foreground
} else {
chrome.foreground
}
}
/// The next selectable row in the direction.
fn adjacent(selectable: &[usize], selected: Option<usize>, forward: bool) -> Option<usize> {
if forward {
selectable
.iter()
.copied()
.find(|index| Some(*index) > selected)
} else {
selectable
.iter()
.copied()
.rev()
.find(|index| Some(*index) < selected)
}
}