guise/input/

combobox.rs

//! `Combobox` — a searchable [`Select`](super::Select) (gpui entity).
//!
//! The trigger is an editable query field; the deferred list filters by a
//! case-insensitive substring match. Single-select closes on choice; with
//! [`Combobox::multiple`] it keeps a selection set and stays open. Emits
//! [`ComboboxEvent`] with the toggled option index.

use gpui::prelude::*;
use gpui::{
    deferred, div, px, Context, EventEmitter, FocusHandle, IntoElement, KeyDownEvent, MouseButton,
    SharedString, Window,
};

use super::line::{self, Line, LineEditor, LineState};
use super::{control_metrics, Field, KeyOutcome, TextEdit};
use crate::devtools::ProbedAny;
use crate::icon::{Icon, IconName};
use crate::theme::{theme, Size};

/// Emitted when an option is chosen/toggled. Carries the option index.
#[derive(Debug, Clone, Copy)]
pub struct ComboboxEvent(pub usize);

/// A searchable picker. Create with `cx.new(|cx| Combobox::new(cx).data([..]))`.
pub struct Combobox {
    options: Vec<SharedString>,
    selected: Vec<usize>,
    query: TextEdit,
    state: LineState,
    open: bool,
    multiple: bool,
    focus: FocusHandle,
    placeholder: SharedString,
    label: Option<SharedString>,
    size: Size,
    disabled: bool,
}

impl EventEmitter<ComboboxEvent> for Combobox {}

impl Combobox {
    pub fn new(cx: &mut Context<Self>) -> Self {
        Combobox {
            options: Vec::new(),
            selected: Vec::new(),
            query: TextEdit::new(""),
            state: LineState::new(),
            open: false,
            multiple: false,
            focus: cx.focus_handle().tab_stop(true),
            placeholder: SharedString::new_static("Search…"),
            label: None,
            size: Size::Sm,
            disabled: false,
        }
    }

    pub fn data<I, S>(mut self, options: I) -> Self
    where
        I: IntoIterator<Item = S>,
        S: Into<SharedString>,
    {
        self.options = options.into_iter().map(Into::into).collect();
        self
    }

    pub fn multiple(mut self, multiple: bool) -> Self {
        self.multiple = multiple;
        self
    }

    pub fn selected(mut self, indices: impl IntoIterator<Item = usize>) -> Self {
        self.selected = indices.into_iter().collect();
        self
    }

    pub fn placeholder(mut self, placeholder: impl Into<SharedString>) -> Self {
        self.placeholder = placeholder.into();
        self
    }

    pub fn label(mut self, label: impl Into<SharedString>) -> Self {
        self.label = Some(label.into());
        self
    }

    pub fn size(mut self, size: Size) -> Self {
        self.size = size;
        self
    }

    pub fn disabled(mut self, disabled: bool) -> Self {
        self.disabled = disabled;
        self
    }

    pub fn selected_indices(&self) -> &[usize] {
        &self.selected
    }

    /// Indices of options matching the current query.
    fn filtered(&self) -> Vec<usize> {
        let q = self.query.text().to_lowercase();
        self.options
            .iter()
            .enumerate()
            .filter(|(_, o)| q.is_empty() || o.to_lowercase().contains(&q))
            .map(|(i, _)| i)
            .collect()
    }

    fn choose(&mut self, index: usize, cx: &mut Context<Self>) {
        if self.multiple {
            if let Some(pos) = self.selected.iter().position(|x| *x == index) {
                self.selected.remove(pos);
            } else {
                self.selected.push(index);
                self.selected.sort_unstable();
            }
        } else {
            self.selected = vec![index];
            self.open = false;
            self.query.set_text("");
        }
        cx.emit(ComboboxEvent(index));
        cx.notify();
    }

    fn on_key(&mut self, event: &KeyDownEvent, window: &mut Window, cx: &mut Context<Self>) {
        if self.disabled {
            return;
        }
        let ks = &event.keystroke;
        // The list owns Escape and Enter; the rest of the trigger is an
        // ordinary text field over the query.
        if !ks.modifiers.platform && !ks.modifiers.control {
            match ks.key.as_str() {
                "escape" if self.open => {
                    self.open = false;
                    cx.notify();
                    cx.stop_propagation();
                    return;
                }
                "enter" => {
                    if let Some(&first) = self.filtered().first() {
                        self.choose(first, cx);
                    }
                    cx.notify();
                    cx.stop_propagation();
                    return;
                }
                "down" if !self.open => {
                    self.open = true;
                    cx.notify();
                    cx.stop_propagation();
                    return;
                }
                _ => {}
            }
        }
        match line::keys(self, event, window, cx) {
            KeyOutcome::Edited => {
                self.line_changed(cx);
                cx.stop_propagation();
            }
            KeyOutcome::Submit | KeyOutcome::Cancel | KeyOutcome::Pass => {}
        }
    }

    fn value_text(&self) -> SharedString {
        match (self.multiple, self.selected.len()) {
            (_, 0) => self.placeholder.clone(),
            (true, n) => SharedString::from(format!("{n} selected")),
            (false, _) => self
                .selected
                .first()
                .and_then(|i| self.options.get(*i))
                .cloned()
                .unwrap_or_else(|| self.placeholder.clone()),
        }
    }
}

impl LineEditor for Combobox {
    fn edit(&self) -> &TextEdit {
        &self.query
    }

    fn edit_mut(&mut self) -> &mut TextEdit {
        &mut self.query
    }

    fn line(&self) -> &LineState {
        &self.state
    }

    fn line_mut(&mut self) -> &mut LineState {
        &mut self.state
    }

    fn line_focus(&self) -> &FocusHandle {
        &self.focus
    }

    fn line_read_only(&self) -> bool {
        self.disabled
    }

    /// Typing into the trigger is what opens the list, so any edit does.
    fn line_changed(&mut self, cx: &mut Context<Self>) {
        self.open = true;
        cx.notify();
    }
}

line::line_input_handler!(Combobox);
line::line_focus_builders!(Combobox);

impl Render for Combobox {
    fn render(&mut self, window: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
        let t = theme(cx);
        let (height, pad_x, font) = control_metrics(self.size);
        let radius = t.radius(t.default_radius);
        let focused = self.focus.is_focused(window) && !self.disabled;
        let surface = t.surface().hsla();
        let surface_hover = t.surface_hover().hsla();
        let border = if focused { t.primary() } else { t.border() }.hsla();
        let text_color = t.text().hsla();
        let dimmed = t.dimmed().hsla();
        let selected_bg = t.primary().alpha(0.12);

        let has_value = !self.selected.is_empty();
        // With no query typed the field reads as the current selection; start
        // typing and it becomes the search box. Keeping the same element in
        // both states is what lets the platform deliver text to it at all.
        let interior = Line::new(cx.entity()).placeholder(
            self.value_text(),
            if has_value { text_color } else { dimmed },
        );

        let trigger = line::wire(div().id("guise-combobox-trigger"), &self.focus, cx)
            .on_key_down(cx.listener(Self::on_key))
            // Layered on top of the shared handlers rather than replacing
            // them: clicking the field places a caret *and* opens the list.
            .on_mouse_down(
                MouseButton::Left,
                cx.listener(|this, _event, _window, cx| {
                    if !this.disabled {
                        this.open = true;
                        cx.notify();
                    }
                }),
            )
            .flex()
            .items_center()
            .justify_between()
            .gap(px(8.0))
            .h(px(height))
            .px(px(pad_x))
            .rounded(px(radius))
            .border_1()
            .border_color(border)
            .bg(surface)
            .text_size(px(font))
            .line_height(px(font * 1.3))
            .child(div().flex_1().min_w(px(0.0)).child(interior))
            // Clicking the field places a caret, so the chevron keeps the
            // open/close toggle the trigger used to be.
            .child(
                div()
                    .id("guise-combobox-chevron")
                    .flex_none()
                    .cursor_pointer()
                    .child(
                        Icon::new(IconName::ChevronDown)
                            .size(Size::Xs)
                            .color(crate::theme::ColorName::Gray),
                    )
                    .on_click(cx.listener(|this, _ev, window, cx| {
                        if !this.disabled {
                            this.open = !this.open;
                            window.focus(&this.focus);
                            cx.notify();
                        }
                    })),
            );

        let mut wrap = div().relative().child(trigger);

        if self.open && !self.disabled {
            let filtered = self.filtered();
            let mut menu = div()
                .absolute()
                .top(px(height + 6.0))
                .left(px(0.0))
                .right(px(0.0))
                .flex()
                .flex_col()
                .gap(px(2.0))
                .p(px(4.0))
                .rounded(px(radius))
                .border_1()
                .border_color(border)
                .bg(surface)
                .shadow_md();

            if filtered.is_empty() {
                menu = menu.child(
                    div()
                        .px(px(10.0))
                        .py(px(6.0))
                        .text_size(px(font))
                        .text_color(dimmed)
                        .child(SharedString::new_static("No matches")),
                );
            }
            for i in filtered {
                let is_selected = self.selected.contains(&i);
                let option = self.options[i].clone();
                let mut row = div()
                    .id(("guise-combobox-option", i))
                    .flex()
                    .items_center()
                    .justify_between()
                    .px(px(10.0))
                    .py(px(6.0))
                    .rounded(px(4.0))
                    .text_size(px(font))
                    .text_color(text_color)
                    .hover(move |s| s.bg(surface_hover))
                    .child(option)
                    .on_click(cx.listener(move |this, _ev, _window, cx| this.choose(i, cx)));
                if is_selected {
                    row = row
                        .bg(selected_bg)
                        .child(Icon::new(IconName::Check).size(Size::Xs));
                }
                menu = menu.child(row);
            }

            wrap = wrap.child(deferred(menu));
        }

        let mut chrome = Field::new().child(if self.disabled {
            wrap.opacity(0.6)
        } else {
            wrap
        });
        if let Some(label) = self.label.clone() {
            chrome = chrome.label(label);
        }
        chrome.probe_any("Combobox")
    }
}