forked from reya/gpui-native-kit
refactor
This commit is contained in:
+40
-128
@@ -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)>;
|
||||
@@ -143,38 +144,8 @@ impl Tree {
|
||||
}
|
||||
}
|
||||
|
||||
struct TreeChrome {
|
||||
foreground: Hsla,
|
||||
muted: Hsla,
|
||||
muted_foreground: Hsla,
|
||||
primary: Hsla,
|
||||
primary_foreground: Hsla,
|
||||
radius_sm: Pixels,
|
||||
icon_size: Pixels,
|
||||
padding_x: Pixels,
|
||||
text_size: Pixels,
|
||||
/// The row count, for the rows' set-size a11y attributes.
|
||||
count: usize,
|
||||
}
|
||||
|
||||
impl RenderOnce for Tree {
|
||||
fn render(self, window: &mut Window, cx: &mut App) -> impl IntoElement {
|
||||
let chrome = {
|
||||
let theme = cx.theme();
|
||||
TreeChrome {
|
||||
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,
|
||||
padding_x: theme.sizes.medium.padding_x,
|
||||
text_size: theme.sizes.medium.text_size,
|
||||
count: 0,
|
||||
}
|
||||
};
|
||||
|
||||
let items = match self.items {
|
||||
Some(build) => build(window, cx),
|
||||
None => Vec::new(),
|
||||
@@ -188,30 +159,24 @@ impl RenderOnce for Tree {
|
||||
.collect();
|
||||
|
||||
// Keyboard focus rides the container across frames.
|
||||
let focus_handle = window.with_element_namespace(self.id.clone(), |window| {
|
||||
window.use_keyed_state("tree-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 label = self
|
||||
.a11y_label
|
||||
.clone()
|
||||
.unwrap_or_else(|| SharedString::from(self.id.to_string()));
|
||||
|
||||
let chrome = TreeChrome {
|
||||
count: items.len(),
|
||||
..chrome
|
||||
};
|
||||
let theme = cx.theme();
|
||||
|
||||
let rows: Vec<AnyElement> = items
|
||||
.iter()
|
||||
.enumerate()
|
||||
.map(|(index, item)| {
|
||||
.map(|(index, _item)| {
|
||||
render_row(
|
||||
item,
|
||||
theme,
|
||||
&items,
|
||||
index,
|
||||
self.selected == Some(index),
|
||||
&chrome,
|
||||
&self.on_change,
|
||||
&self.on_disclosure,
|
||||
&focus,
|
||||
@@ -224,7 +189,7 @@ impl RenderOnce for Tree {
|
||||
.flex()
|
||||
.flex_col()
|
||||
.gap_0p5()
|
||||
.text_size(chrome.text_size)
|
||||
.text_size(theme.sizes.medium.text_size)
|
||||
.track_focus(&focus)
|
||||
.focusable()
|
||||
.tab_stop(true)
|
||||
@@ -235,39 +200,15 @@ impl RenderOnce for Tree {
|
||||
let on_change = self.on_change.clone();
|
||||
let on_disclosure = self.on_disclosure.clone();
|
||||
move |event: &KeyDownEvent, 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();
|
||||
return;
|
||||
}
|
||||
match event.keystroke.key.as_str() {
|
||||
"down" => {
|
||||
if let Some(next) = adjacent(&selectable, selected, true)
|
||||
&& Some(next) != selected
|
||||
&& let Some(on_change) = &on_change
|
||||
{
|
||||
on_change(Some(next), window, cx);
|
||||
}
|
||||
}
|
||||
"up" => {
|
||||
if let Some(next) = adjacent(&selectable, selected, false)
|
||||
&& Some(next) != selected
|
||||
&& let Some(on_change) = &on_change
|
||||
{
|
||||
on_change(Some(next), window, cx);
|
||||
}
|
||||
}
|
||||
"home" => {
|
||||
if let Some(first) = selectable.first()
|
||||
&& selected != Some(*first)
|
||||
&& let Some(on_change) = &on_change
|
||||
{
|
||||
on_change(Some(*first), window, cx);
|
||||
}
|
||||
}
|
||||
"end" => {
|
||||
if let Some(last) = selectable.last()
|
||||
&& selected != Some(*last)
|
||||
&& let Some(on_change) = &on_change
|
||||
{
|
||||
on_change(Some(*last), window, cx);
|
||||
}
|
||||
}
|
||||
"left" | "right" => {
|
||||
let expanding = event.keystroke.key == "right";
|
||||
if let Some(index) = selected
|
||||
@@ -290,19 +231,21 @@ impl RenderOnce for Tree {
|
||||
}
|
||||
|
||||
fn render_row(
|
||||
item: &TreeItem,
|
||||
theme: &Theme,
|
||||
items: &[TreeItem],
|
||||
index: usize,
|
||||
selected: bool,
|
||||
chrome: &TreeChrome,
|
||||
on_change: &Option<ChangeHandler>,
|
||||
on_disclosure: &Option<DisclosureHandler>,
|
||||
focus: &FocusHandle,
|
||||
) -> AnyElement {
|
||||
let label_color = row_color(item, selected, chrome);
|
||||
let item = &items[index];
|
||||
let count = items.len();
|
||||
let label_color = selectable_label_color(theme, selected, item.disabled);
|
||||
let disabled = item.disabled;
|
||||
|
||||
// One indent step per depth level, on the theme's horizontal padding.
|
||||
let indent = chrome.padding_x * (item.depth as f32 + 1.0);
|
||||
let indent = theme.sizes.medium.padding_x * (item.depth as f32 + 1.0);
|
||||
|
||||
div()
|
||||
.id(("tree-item", index))
|
||||
@@ -312,21 +255,13 @@ fn render_row(
|
||||
.pl(indent)
|
||||
.pr_2()
|
||||
.py_1()
|
||||
.rounded(chrome.radius_sm)
|
||||
.rounded(theme.radius.sm)
|
||||
.role(Role::TreeItem)
|
||||
.aria_selected(selected)
|
||||
.aria_level(item.depth + 1)
|
||||
.aria_size_of_set(chrome.count)
|
||||
.aria_size_of_set(count)
|
||||
.when(item.expandable, |row| row.aria_expanded(item.expanded))
|
||||
.map(|row| {
|
||||
if disabled {
|
||||
row
|
||||
} else if selected {
|
||||
row.bg(chrome.primary)
|
||||
} else {
|
||||
row.hover(|row| row.bg(chrome.muted))
|
||||
}
|
||||
})
|
||||
.map(|row| paint_selectable_row(theme, row, selected, disabled))
|
||||
.when(!disabled, |row| {
|
||||
row.cursor_pointer().on_click({
|
||||
let on_change = on_change.clone();
|
||||
@@ -344,11 +279,15 @@ fn render_row(
|
||||
index,
|
||||
disabled,
|
||||
selected,
|
||||
chrome,
|
||||
theme,
|
||||
on_disclosure,
|
||||
))
|
||||
.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()
|
||||
@@ -365,20 +304,20 @@ fn render_disclosure(
|
||||
index: usize,
|
||||
disabled: bool,
|
||||
selected: bool,
|
||||
chrome: &TreeChrome,
|
||||
theme: &Theme,
|
||||
on_disclosure: &Option<DisclosureHandler>,
|
||||
) -> AnyElement {
|
||||
let glyph_color = if disabled {
|
||||
chrome.muted_foreground
|
||||
theme.colors.muted_foreground
|
||||
} else if selected {
|
||||
chrome.primary_foreground
|
||||
theme.colors.primary_foreground
|
||||
} else {
|
||||
chrome.muted_foreground
|
||||
theme.colors.muted_foreground
|
||||
};
|
||||
|
||||
let cell = div()
|
||||
.flex_none()
|
||||
.size(chrome.icon_size)
|
||||
.size(theme.sizes.medium.icon_size)
|
||||
.flex()
|
||||
.items_center()
|
||||
.justify_center()
|
||||
@@ -388,7 +327,7 @@ fn render_disclosure(
|
||||
} else {
|
||||
IconRole::ChevronRight
|
||||
})
|
||||
.size(chrome.icon_size * 0.75)
|
||||
.size(theme.sizes.medium.icon_size * 0.75)
|
||||
.color(glyph_color),
|
||||
);
|
||||
|
||||
@@ -410,30 +349,3 @@ fn render_disclosure(
|
||||
cell.into_any_element()
|
||||
}
|
||||
}
|
||||
|
||||
/// The row's label/icon color.
|
||||
fn row_color(item: &TreeItem, selected: bool, chrome: &TreeChrome) -> 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)
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user