feat: add combobox component
This commit is contained in:
@@ -0,0 +1,670 @@
|
||||
//! The combobox: an editable field that filters its options while typing.
|
||||
//!
|
||||
//! The state is the view: it owns the query field and the options, and the
|
||||
//! owner renders the entity itself. Typing filters, the arrow keys move a
|
||||
//! highlight, Enter commits, and what happens to unmatched text when the
|
||||
//! field loses focus is [`UnmatchedText`] — revert by default.
|
||||
|
||||
use std::cell::RefCell;
|
||||
use std::rc::Rc;
|
||||
|
||||
use gpui::prelude::FluentBuilder as _;
|
||||
use gpui::{
|
||||
App, Bounds, Context, ElementId, Entity, EventEmitter, InteractiveElement as _, IntoElement,
|
||||
KeyBinding, MouseButton, MouseDownEvent, ParentElement as _, Pixels, Render, Role,
|
||||
ScrollHandle, SharedString, StatefulInteractiveElement as _, Styled as _, Subscription, Window,
|
||||
actions, canvas, deferred, div, px,
|
||||
};
|
||||
use gpui_native_icons::{IconRole, icon};
|
||||
use gpui_native_theme::{ActiveTheme as _, Size};
|
||||
|
||||
use crate::common::{Sizable, h_flex, v_flex};
|
||||
use crate::input::{Input, InputState, InputStateEvent};
|
||||
use crate::scroll_area::ScrollArea;
|
||||
|
||||
actions!(
|
||||
combobox,
|
||||
[HighlightNext, HighlightPrevious, Choose, Dismiss]
|
||||
);
|
||||
|
||||
/// The key context the combobox's wrapper declares.
|
||||
pub const COMBOBOX_CONTEXT: &str = "Combobox";
|
||||
|
||||
/// Binds the combobox's four keys: down, up, enter, and escape.
|
||||
pub fn bind_combobox_keys(cx: &mut App) {
|
||||
let under_input = Some("Combobox > Input");
|
||||
cx.bind_keys([
|
||||
KeyBinding::new("down", HighlightNext, under_input),
|
||||
KeyBinding::new("up", HighlightPrevious, under_input),
|
||||
KeyBinding::new("enter", Choose, under_input),
|
||||
KeyBinding::new("escape", Dismiss, under_input),
|
||||
KeyBinding::new("down", HighlightNext, Some(COMBOBOX_CONTEXT)),
|
||||
KeyBinding::new("up", HighlightPrevious, Some(COMBOBOX_CONTEXT)),
|
||||
KeyBinding::new("enter", Choose, Some(COMBOBOX_CONTEXT)),
|
||||
KeyBinding::new("escape", Dismiss, Some(COMBOBOX_CONTEXT)),
|
||||
]);
|
||||
}
|
||||
|
||||
/// What happens to text that matches no option when the field loses focus.
|
||||
#[derive(Clone, Copy, Debug, Default, PartialEq, Eq)]
|
||||
pub enum UnmatchedText {
|
||||
/// Restore the chosen option's label, or empty the field.
|
||||
#[default]
|
||||
Revert,
|
||||
/// Leave the text and leave the value cleared.
|
||||
Keep,
|
||||
/// Hand the text to the `on_create` handler.
|
||||
Create,
|
||||
}
|
||||
|
||||
/// An option for a [`Combobox`]: a value and the label the filter matches on.
|
||||
pub type ComboboxOption<T> = (T, SharedString);
|
||||
/// Reports the value whenever it changes — including when typing clears it.
|
||||
pub type ComboboxHandler<T> = Rc<dyn Fn(Option<T>, &mut Window, &mut App)>;
|
||||
/// Receives unmatched text when the field loses focus in create mode.
|
||||
pub type ComboboxCreateHandler = Rc<dyn Fn(SharedString, &mut Window, &mut App)>;
|
||||
/// A filter over an option: the query, the value, the label.
|
||||
type Filter<T> = Rc<dyn Fn(&str, &T, &SharedString) -> bool>;
|
||||
|
||||
/// Builder for a combobox. Pass it to [`ComboboxState::new`].
|
||||
pub struct Combobox<T>
|
||||
where
|
||||
T: Clone + PartialEq + 'static,
|
||||
{
|
||||
id: ElementId,
|
||||
name: SharedString,
|
||||
options: Vec<ComboboxOption<T>>,
|
||||
selected: Option<T>,
|
||||
placeholder: SharedString,
|
||||
on_change: Option<ComboboxHandler<T>>,
|
||||
on_create: Option<ComboboxCreateHandler>,
|
||||
unmatched: UnmatchedText,
|
||||
size: Size,
|
||||
}
|
||||
|
||||
impl<T> Combobox<T>
|
||||
where
|
||||
T: Clone + PartialEq + 'static,
|
||||
{
|
||||
pub fn new<I, N>(id: I, name: N, options: Vec<ComboboxOption<T>>) -> Self
|
||||
where
|
||||
I: Into<ElementId>,
|
||||
N: Into<SharedString>,
|
||||
{
|
||||
Self {
|
||||
id: id.into(),
|
||||
name: name.into(),
|
||||
options,
|
||||
selected: None,
|
||||
placeholder: SharedString::from("Select..."),
|
||||
on_change: None,
|
||||
on_create: None,
|
||||
unmatched: UnmatchedText::default(),
|
||||
size: Size::default(),
|
||||
}
|
||||
}
|
||||
|
||||
/// Sets the initially selected value; its label seeds the field.
|
||||
pub fn selected(mut self, selected: impl Into<Option<T>>) -> Self {
|
||||
self.selected = selected.into();
|
||||
self
|
||||
}
|
||||
|
||||
/// Sets the text shown while the field is empty.
|
||||
pub fn placeholder<L>(mut self, placeholder: L) -> Self
|
||||
where
|
||||
L: Into<SharedString>,
|
||||
{
|
||||
self.placeholder = placeholder.into();
|
||||
self
|
||||
}
|
||||
|
||||
/// Reports the value whenever it changes.
|
||||
pub fn on_change<F>(mut self, handler: F) -> Self
|
||||
where
|
||||
F: Fn(Option<T>, &mut Window, &mut App) + 'static,
|
||||
{
|
||||
self.on_change = Some(Rc::new(handler));
|
||||
self
|
||||
}
|
||||
|
||||
/// Hands unmatched text to `handler` when the field loses focus.
|
||||
pub fn on_create<F>(mut self, handler: F) -> Self
|
||||
where
|
||||
F: Fn(SharedString, &mut Window, &mut App) + 'static,
|
||||
{
|
||||
self.on_create = Some(Rc::new(handler));
|
||||
self.unmatched = UnmatchedText::Create;
|
||||
self
|
||||
}
|
||||
|
||||
/// Leaves unmatched text in the field on blur.
|
||||
pub fn keep_unmatched_text(mut self) -> Self {
|
||||
self.unmatched = UnmatchedText::Keep;
|
||||
self
|
||||
}
|
||||
|
||||
/// Overrides the accessibility label.
|
||||
pub fn accessibility_label<L>(mut self, label: L) -> Self
|
||||
where
|
||||
L: Into<SharedString>,
|
||||
{
|
||||
self.name = label.into();
|
||||
self
|
||||
}
|
||||
}
|
||||
|
||||
/// Emitted when the combobox's value changes.
|
||||
pub struct ComboboxChanged;
|
||||
|
||||
/// The stateful combobox.
|
||||
pub struct ComboboxState<T>
|
||||
where
|
||||
T: Clone + PartialEq + 'static,
|
||||
{
|
||||
id: ElementId,
|
||||
name: SharedString,
|
||||
placeholder: SharedString,
|
||||
options: Vec<ComboboxOption<T>>,
|
||||
/// The chosen value. `None` while the text names nothing.
|
||||
selected: Option<T>,
|
||||
query: Entity<InputState>,
|
||||
/// Indices into `options` that survived the filter, in popup row order.
|
||||
visible: Vec<usize>,
|
||||
/// The highlighted popup *row*, when the popup is open.
|
||||
highlight: Option<usize>,
|
||||
on_change: Option<ComboboxHandler<T>>,
|
||||
on_create: Option<ComboboxCreateHandler>,
|
||||
filter: Filter<T>,
|
||||
unmatched: UnmatchedText,
|
||||
size: Size,
|
||||
/// Keeps the query-event subscription tied to the state's lifetime.
|
||||
_subscription: Subscription,
|
||||
}
|
||||
|
||||
impl<T> EventEmitter<ComboboxChanged> for ComboboxState<T> where T: Clone + PartialEq + 'static {}
|
||||
|
||||
impl<T> Sizable for ComboboxState<T>
|
||||
where
|
||||
T: Clone + PartialEq + 'static,
|
||||
{
|
||||
fn apply_size(&mut self, size: Size) {
|
||||
self.size = size;
|
||||
}
|
||||
}
|
||||
|
||||
impl<T> ComboboxState<T>
|
||||
where
|
||||
T: Clone + PartialEq + 'static,
|
||||
{
|
||||
/// Builds the state, its query field, and the subscription tying them.
|
||||
pub fn new(combobox: Combobox<T>, window: &mut Window, cx: &mut Context<Self>) -> Self {
|
||||
let query = InputState::new(cx);
|
||||
|
||||
// The field starts showing the label of whatever was chosen,
|
||||
// so text and value agree from the first frame.
|
||||
if let Some(selected) = &combobox.selected
|
||||
&& let Some((_, label)) = combobox.options.iter().find(|(value, _)| value == selected)
|
||||
{
|
||||
let label = label.to_string();
|
||||
query.update(cx, |query, cx| query.set_value_silent(label, window, cx));
|
||||
}
|
||||
|
||||
let subscription =
|
||||
cx.subscribe_in(&query, window, |state, _, event, window, cx| match event {
|
||||
InputStateEvent::TextChanged => state.text_changed(window, cx),
|
||||
InputStateEvent::Blurred => state.blurred(window, cx),
|
||||
_ => {}
|
||||
});
|
||||
|
||||
let visible = (0..combobox.options.len()).collect();
|
||||
|
||||
Self {
|
||||
id: combobox.id,
|
||||
name: combobox.name,
|
||||
placeholder: combobox.placeholder,
|
||||
options: combobox.options,
|
||||
selected: combobox.selected,
|
||||
query,
|
||||
visible,
|
||||
highlight: None,
|
||||
on_change: combobox.on_change,
|
||||
on_create: combobox.on_create,
|
||||
filter: Rc::new(|query, _value, label| {
|
||||
label.to_lowercase().contains(&query.to_lowercase())
|
||||
}),
|
||||
unmatched: combobox.unmatched,
|
||||
size: combobox.size,
|
||||
_subscription: subscription,
|
||||
}
|
||||
}
|
||||
|
||||
/// The text currently in the field.
|
||||
pub fn text(&self, cx: &App) -> String {
|
||||
self.query.read(cx).value().to_string()
|
||||
}
|
||||
|
||||
/// Focuses the query field.
|
||||
pub fn focus(&self, window: &mut Window, cx: &mut App) {
|
||||
window.focus(&self.query.read(cx).focus_handle(), cx);
|
||||
}
|
||||
|
||||
/// Whether the option list is showing.
|
||||
pub fn is_open(&self) -> bool {
|
||||
self.highlight.is_some()
|
||||
}
|
||||
|
||||
/// The chosen value.
|
||||
pub fn selected(&self) -> Option<&T> {
|
||||
self.selected.as_ref()
|
||||
}
|
||||
|
||||
/// Replaces the value; reports it when it actually changed.
|
||||
pub fn set_selected(&mut self, value: Option<T>, window: &mut Window, cx: &mut Context<Self>) {
|
||||
self.set_value(value, window, cx);
|
||||
}
|
||||
|
||||
/// Replaces the choice list and re-runs the current filter.
|
||||
pub fn set_options(&mut self, options: Vec<ComboboxOption<T>>, cx: &mut Context<Self>) {
|
||||
self.options = options;
|
||||
let query = self.query.read(cx).value().to_string();
|
||||
self.refilter(&query);
|
||||
cx.notify();
|
||||
}
|
||||
|
||||
/// A copy of the current choice list.
|
||||
pub fn options_snapshot(&self) -> Vec<ComboboxOption<T>> {
|
||||
self.options.clone()
|
||||
}
|
||||
|
||||
/// The label of the chosen option, if there is one.
|
||||
fn selected_label(&self) -> Option<SharedString> {
|
||||
let selected = self.selected.as_ref()?;
|
||||
self.options
|
||||
.iter()
|
||||
.find(|(value, _)| value == selected)
|
||||
.map(|(_, label)| label.clone())
|
||||
}
|
||||
|
||||
/// Recomputes `visible` for `query` and hands the survivors' labels back.
|
||||
fn refilter(&mut self, query: &str) -> Vec<SharedString> {
|
||||
let filter = self.filter.clone();
|
||||
self.visible = self
|
||||
.options
|
||||
.iter()
|
||||
.enumerate()
|
||||
.filter(|(_, (value, label))| filter(query, value, label))
|
||||
.map(|(index, _)| index)
|
||||
.collect();
|
||||
self.visible
|
||||
.iter()
|
||||
.map(|index| self.options[*index].1.clone())
|
||||
.collect()
|
||||
}
|
||||
|
||||
fn query_text(&self, cx: &Context<Self>) -> String {
|
||||
self.query.read(cx).value().trim().to_string()
|
||||
}
|
||||
|
||||
/// Sets the value and reports it, including when it is `None`.
|
||||
fn set_value(&mut self, value: Option<T>, window: &mut Window, cx: &mut Context<Self>) {
|
||||
if self.selected == value {
|
||||
return;
|
||||
}
|
||||
self.selected = value.clone();
|
||||
if let Some(on_change) = self.on_change.clone() {
|
||||
on_change(value, window, cx);
|
||||
}
|
||||
cx.emit(ComboboxChanged);
|
||||
cx.notify();
|
||||
}
|
||||
|
||||
/// Commits the option at popup *row*.
|
||||
fn choose_row(&mut self, row: usize, window: &mut Window, cx: &mut Context<Self>) {
|
||||
let Some(option_index) = self.visible.get(row).copied() else {
|
||||
return;
|
||||
};
|
||||
|
||||
let Some((value, label)) = self.options.get(option_index).cloned() else {
|
||||
return;
|
||||
};
|
||||
|
||||
self.query.update(cx, |query, cx| {
|
||||
query.set_value_silent(label.to_string(), window, cx)
|
||||
});
|
||||
self.highlight = None;
|
||||
self.refilter("");
|
||||
self.set_value(Some(value), window, cx);
|
||||
}
|
||||
|
||||
/// Typing: re-filter, open, reset the highlight, and clear the value.
|
||||
fn text_changed(&mut self, window: &mut Window, cx: &mut Context<Self>) {
|
||||
let query = self.query_text(cx);
|
||||
self.refilter(&query);
|
||||
self.highlight = (!self.visible.is_empty()).then_some(0usize);
|
||||
self.set_value(None, window, cx);
|
||||
cx.notify();
|
||||
}
|
||||
|
||||
/// Losing focus. [`UnmatchedText`] decides what the text becomes.
|
||||
fn blurred(&mut self, window: &mut Window, cx: &mut Context<Self>) {
|
||||
self.highlight = None;
|
||||
let text = self.query_text(cx);
|
||||
|
||||
if self.selected_label().as_deref() == Some(text.as_str()) {
|
||||
cx.notify();
|
||||
return;
|
||||
}
|
||||
|
||||
match self.unmatched {
|
||||
UnmatchedText::Revert => {
|
||||
let restored = self.selected_label().unwrap_or_default().to_string();
|
||||
self.query
|
||||
.update(cx, |query, cx| query.set_value_silent(restored, window, cx));
|
||||
}
|
||||
UnmatchedText::Keep => {}
|
||||
UnmatchedText::Create => {
|
||||
if !text.is_empty()
|
||||
&& let Some(on_create) = self.on_create.clone()
|
||||
{
|
||||
on_create(SharedString::from(text), window, cx);
|
||||
}
|
||||
}
|
||||
}
|
||||
cx.notify();
|
||||
}
|
||||
|
||||
/// Down and Up over the visible rows.
|
||||
fn move_highlight(&mut self, delta: i32, cx: &mut Context<Self>) {
|
||||
if self.visible.is_empty() {
|
||||
return;
|
||||
}
|
||||
let current = self
|
||||
.highlight
|
||||
.and_then(|row| self.visible.get(row).copied())
|
||||
.and_then(|option_ix| self.visible.iter().position(|&row| row == option_ix));
|
||||
let next = match current {
|
||||
Some(row) => {
|
||||
let row = (row as i32 + delta).rem_euclid(self.visible.len() as i32);
|
||||
row as usize
|
||||
}
|
||||
None => {
|
||||
if delta > 0 {
|
||||
0
|
||||
} else {
|
||||
self.visible.len() - 1
|
||||
}
|
||||
}
|
||||
};
|
||||
self.highlight = Some(next);
|
||||
cx.notify();
|
||||
}
|
||||
|
||||
/// Enter. Commits the highlighted row.
|
||||
fn choose(&mut self, window: &mut Window, cx: &mut Context<Self>) {
|
||||
let Some(row) = self.highlight else {
|
||||
cx.propagate();
|
||||
return;
|
||||
};
|
||||
self.choose_row(row, window, cx);
|
||||
}
|
||||
|
||||
/// Escape. Closes the picker.
|
||||
fn dismiss(&mut self, _window: &mut Window, cx: &mut Context<Self>) {
|
||||
if self.highlight.is_none() {
|
||||
cx.propagate();
|
||||
return;
|
||||
}
|
||||
self.highlight = None;
|
||||
cx.notify();
|
||||
}
|
||||
}
|
||||
|
||||
impl<T> Render for ComboboxState<T>
|
||||
where
|
||||
T: Clone + PartialEq + 'static,
|
||||
{
|
||||
fn render(&mut self, window: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
|
||||
let (metrics, colors, radius) = {
|
||||
let theme = cx.theme();
|
||||
let metrics = theme.sizes.resolve(self.size);
|
||||
(metrics, theme.colors, theme.radius)
|
||||
};
|
||||
let icon_size = metrics.dense_icon_size;
|
||||
let id = self.id.clone();
|
||||
let state = cx.entity();
|
||||
let open = self.highlight.is_some();
|
||||
|
||||
let chevron = h_flex()
|
||||
.id((id.clone(), "chevron"))
|
||||
.cursor_pointer()
|
||||
.on_mouse_down(MouseButton::Left, |_, _, cx| cx.stop_propagation())
|
||||
.on_click({
|
||||
let state = state.clone();
|
||||
move |_, window, cx| {
|
||||
let focus = state.read(cx).query.read(cx).focus_handle();
|
||||
window.focus(&focus, cx);
|
||||
state.update(cx, |state, cx| {
|
||||
if state.highlight.is_some() {
|
||||
state.highlight = None;
|
||||
} else {
|
||||
let query = state.query.read(cx).value().to_string();
|
||||
state.refilter(&query);
|
||||
state.highlight = (!state.visible.is_empty()).then_some(0usize);
|
||||
}
|
||||
cx.notify();
|
||||
});
|
||||
}
|
||||
})
|
||||
.child(
|
||||
icon(IconRole::ChevronDown)
|
||||
.size(icon_size)
|
||||
.color(colors.muted_foreground),
|
||||
);
|
||||
|
||||
let wrapper_bounds: Rc<RefCell<Option<Bounds<Pixels>>>> = Rc::new(RefCell::new(None));
|
||||
|
||||
let mut wrapper = div()
|
||||
.id(id.clone())
|
||||
.key_context(COMBOBOX_CONTEXT)
|
||||
.relative()
|
||||
.w_full()
|
||||
.role(Role::ComboBox)
|
||||
.aria_expanded(open)
|
||||
.aria_label(self.name.clone())
|
||||
.on_action({
|
||||
let state = state.clone();
|
||||
move |_: &HighlightNext, _window, cx| {
|
||||
state.update(cx, |state, cx| state.move_highlight(1, cx));
|
||||
}
|
||||
})
|
||||
.on_action({
|
||||
let state = state.clone();
|
||||
move |_: &HighlightPrevious, _window, cx| {
|
||||
state.update(cx, |state, cx| state.move_highlight(-1, cx));
|
||||
}
|
||||
})
|
||||
.on_action({
|
||||
let state = state.clone();
|
||||
move |_: &Choose, window, cx| {
|
||||
state.update(cx, |state, cx| state.choose(window, cx));
|
||||
}
|
||||
})
|
||||
.on_action({
|
||||
let state = state.clone();
|
||||
move |_: &Dismiss, _window, cx| {
|
||||
state.update(cx, |state, cx| state.dismiss(_window, cx));
|
||||
}
|
||||
})
|
||||
.child(
|
||||
canvas(
|
||||
{
|
||||
let cell = wrapper_bounds.clone();
|
||||
move |bounds, _window, _cx| *cell.borrow_mut() = Some(bounds)
|
||||
},
|
||||
|_, _, _window, _cx| {},
|
||||
)
|
||||
.absolute()
|
||||
.inset_0(),
|
||||
)
|
||||
.child(
|
||||
Input::new((id.clone(), "query"), self.query.clone())
|
||||
.placeholder(self.placeholder.clone())
|
||||
.with_size(self.size),
|
||||
)
|
||||
.child(
|
||||
h_flex()
|
||||
.absolute()
|
||||
.right(metrics.dense_padding_x)
|
||||
.top((metrics.input_height - icon_size) / 2.)
|
||||
.child(chevron),
|
||||
);
|
||||
|
||||
if open {
|
||||
let rows: Vec<gpui::AnyElement> = self
|
||||
.visible
|
||||
.iter()
|
||||
.enumerate()
|
||||
.map(|(row, option_ix)| {
|
||||
let (value, label) = &self.options[*option_ix];
|
||||
let highlighted = self.highlight == Some(row);
|
||||
let checked = self.selected.as_ref() == Some(value);
|
||||
let state = state.clone();
|
||||
let row_ix = row;
|
||||
|
||||
div()
|
||||
.id(("option", row))
|
||||
.debug_selector({
|
||||
let name = format!("{id}-option-{row}");
|
||||
move || name
|
||||
})
|
||||
.flex()
|
||||
.items_center()
|
||||
.gap_2()
|
||||
.px_2()
|
||||
.py_1()
|
||||
.rounded(radius.sm)
|
||||
.when(highlighted, |row| row.bg(colors.muted))
|
||||
.when(!highlighted, |row| row.hover(|row| row.bg(colors.muted)))
|
||||
.on_mouse_move({
|
||||
let state = state.clone();
|
||||
move |_, _window, cx| {
|
||||
if state.read(cx).highlight != Some(row_ix) {
|
||||
state.update(cx, |state, cx| {
|
||||
state.highlight = Some(row_ix);
|
||||
cx.notify();
|
||||
});
|
||||
}
|
||||
}
|
||||
})
|
||||
.on_click({
|
||||
let state = state.clone();
|
||||
move |_, window, cx| {
|
||||
state.update(cx, |state, cx| state.choose_row(row_ix, window, cx));
|
||||
}
|
||||
})
|
||||
.child(
|
||||
div()
|
||||
.flex_1()
|
||||
.min_w_0()
|
||||
.overflow_hidden()
|
||||
.whitespace_nowrap()
|
||||
.text_ellipsis()
|
||||
.child(label.clone()),
|
||||
)
|
||||
.when(checked, |row| {
|
||||
row.child(
|
||||
icon(IconRole::Check)
|
||||
.size(icon_size)
|
||||
.color(colors.foreground),
|
||||
)
|
||||
})
|
||||
.into_any_element()
|
||||
})
|
||||
.collect();
|
||||
|
||||
let rows: gpui::AnyElement = if rows.is_empty() {
|
||||
div()
|
||||
.px_2()
|
||||
.py_1()
|
||||
.text_size(metrics.caption_size)
|
||||
.text_color(colors.muted_foreground)
|
||||
.child("No matches")
|
||||
.into_any_element()
|
||||
} else {
|
||||
let scroll = window
|
||||
.use_keyed_state((id.clone(), "rows-scroll"), cx, |_, _| ScrollHandle::new());
|
||||
|
||||
ScrollArea::new((id.clone(), "rows"))
|
||||
.handle(scroll.read(cx).clone())
|
||||
.axes(crate::scroll_area::ScrollAxes::Vertical)
|
||||
.max_h(px(320.))
|
||||
.children(rows)
|
||||
.into_any_element()
|
||||
};
|
||||
|
||||
let panel_bounds: Rc<RefCell<Option<Bounds<Pixels>>>> = Rc::new(RefCell::new(None));
|
||||
|
||||
let panel = v_flex()
|
||||
.id((id.clone(), "panel"))
|
||||
.debug_selector({
|
||||
let name = format!("{id}-panel");
|
||||
move || name
|
||||
})
|
||||
.mt_1()
|
||||
.w_full()
|
||||
.p_1()
|
||||
.bg(colors.surface)
|
||||
.text_color(colors.foreground)
|
||||
.rounded(radius.overlay)
|
||||
.border_1()
|
||||
.border_color(colors.border)
|
||||
.overflow_hidden()
|
||||
.child(rows)
|
||||
.child(
|
||||
canvas(
|
||||
{
|
||||
let cell = panel_bounds.clone();
|
||||
move |bounds, _window, _cx| *cell.borrow_mut() = Some(bounds)
|
||||
},
|
||||
{
|
||||
let state = state.clone();
|
||||
let panel_bounds = panel_bounds.clone();
|
||||
let wrapper_bounds = wrapper_bounds.clone();
|
||||
move |_, _, window, _cx| {
|
||||
window.on_mouse_event({
|
||||
let state = state.clone();
|
||||
let panel_bounds = panel_bounds.clone();
|
||||
let wrapper_bounds = wrapper_bounds.clone();
|
||||
move |event: &MouseDownEvent, phase, _window, cx| {
|
||||
if phase != gpui::DispatchPhase::Bubble {
|
||||
return;
|
||||
}
|
||||
let on_panel = panel_bounds
|
||||
.borrow()
|
||||
.is_some_and(|bounds| bounds.contains(&event.position));
|
||||
let on_wrapper = wrapper_bounds
|
||||
.borrow()
|
||||
.is_some_and(|bounds| bounds.contains(&event.position));
|
||||
if on_panel || on_wrapper {
|
||||
return;
|
||||
}
|
||||
state.update(cx, |state, cx| {
|
||||
state.highlight = None;
|
||||
cx.notify();
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
)
|
||||
.absolute()
|
||||
.inset_0(),
|
||||
);
|
||||
|
||||
wrapper = wrapper.child(deferred(panel));
|
||||
}
|
||||
|
||||
wrapper
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user