Merge pull request #1954 from jhff/widget/combobox

Add `ComboBox` widget

CHANGELOG.md

@@ -18,6 +18,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Nested overlays. [#1719](https://github.com/iced-rs/iced/pull/1719)
 - Cursor availability. [#1904](https://github.com/iced-rs/iced/pull/1904)
 - Backend-specific primitives. [#1932](https://github.com/iced-rs/iced/pull/1932)
+- `ComboBox` widget. [#1954](https://github.com/iced-rs/iced/pull/1954)
 - `web-colors` feature flag to enable "sRGB linear" blending. [#1888](https://github.com/iced-rs/iced/pull/1888)
 - `PaneGrid` logic to split panes by drag & drop. [#1856](https://github.com/iced-rs/iced/pull/1856)
 - `PaneGrid` logic to drag & drop panes to the edges. [#1865](https://github.com/iced-rs/iced/pull/1865)

examples/combo_box/Cargo.toml

@@ -0,0 +1,9 @@
+[package]
+name = "combo_box"
+version = "0.1.0"
+authors = ["Joao Freitas <[email protected]>"]
+edition = "2021"
+publish = false
+
+[dependencies]
+iced = { path = "../..", features = ["debug"] }

examples/combo_box/README.md

@@ -0,0 +1,18 @@
+## Combo-Box
+
+A dropdown list of searchable and selectable options.
+
+It displays and positions an overlay based on the window position of the widget.
+
+The __[`main`]__ file contains all the code of the example.
+
+<div align="center">
+    <img src="combobox.gif">
+</div>
+
+You can run it with `cargo run`:
+```
+cargo run --package combo_box
+```
+
+[`main`]: src/main.rs

examples/combo_box/src/main.rs

@@ -0,0 +1,143 @@
+use iced::widget::{
+    column, combo_box, container, scrollable, text, vertical_space,
+};
+use iced::{Alignment, Element, Length, Sandbox, Settings};
+
+pub fn main() -> iced::Result {
+    Example::run(Settings::default())
+}
+
+struct Example {
+    languages: combo_box::State<Language>,
+    selected_language: Option<Language>,
+    text: String,
+}
+
+#[derive(Debug, Clone, Copy)]
+enum Message {
+    Selected(Language),
+    OptionHovered(Language),
+    Closed,
+}
+
+impl Sandbox for Example {
+    type Message = Message;
+
+    fn new() -> Self {
+        Self {
+            languages: combo_box::State::new(Language::ALL.to_vec()),
+            selected_language: None,
+            text: String::new(),
+        }
+    }
+
+    fn title(&self) -> String {
+        String::from("Combo box - Iced")
+    }
+
+    fn update(&mut self, message: Message) {
+        match message {
+            Message::Selected(language) => {
+                self.selected_language = Some(language);
+                self.text = language.hello().to_string();
+                self.languages.unfocus();
+            }
+            Message::OptionHovered(language) => {
+                self.text = language.hello().to_string();
+            }
+            Message::Closed => {
+                self.text = self
+                    .selected_language
+                    .map(|language| language.hello().to_string())
+                    .unwrap_or_default();
+            }
+        }
+    }
+
+    fn view(&self) -> Element<Message> {
+        let combo_box = combo_box(
+            &self.languages,
+            "Type a language...",
+            self.selected_language.as_ref(),
+            Message::Selected,
+        )
+        .on_option_hovered(Message::OptionHovered)
+        .on_close(Message::Closed)
+        .width(250);
+
+        let content = column![
+            text(&self.text),
+            "What is your language?",
+            combo_box,
+            vertical_space(150),
+        ]
+        .width(Length::Fill)
+        .align_items(Alignment::Center)
+        .spacing(10);
+
+        container(scrollable(content))
+            .width(Length::Fill)
+            .height(Length::Fill)
+            .center_x()
+            .center_y()
+            .into()
+    }
+}
+
+#[derive(Debug, Clone, Copy, PartialEq, Eq, Default)]
+pub enum Language {
+    Danish,
+    #[default]
+    English,
+    French,
+    German,
+    Italian,
+    Portuguese,
+    Spanish,
+    Other,
+}
+
+impl Language {
+    const ALL: [Language; 8] = [
+        Language::Danish,
+        Language::English,
+        Language::French,
+        Language::German,
+        Language::Italian,
+        Language::Portuguese,
+        Language::Spanish,
+        Language::Other,
+    ];
+
+    fn hello(&self) -> &str {
+        match self {
+            Language::Danish => "Halloy!",
+            Language::English => "Hello!",
+            Language::French => "Salut!",
+            Language::German => "Hallo!",
+            Language::Italian => "Ciao!",
+            Language::Portuguese => "Olá!",
+            Language::Spanish => "¡Hola!",
+            Language::Other => "... hello?",
+        }
+    }
+}
+
+impl std::fmt::Display for Language {
+    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
+        write!(
+            f,
+            "{}",
+            match self {
+                Language::Danish => "Danish",
+                Language::English => "English",
+                Language::French => "French",
+                Language::German => "German",
+                Language::Italian => "Italian",
+                Language::Portuguese => "Portuguese",
+                Language::Spanish => "Spanish",
+                Language::Other => "Some other language",
+            }
+        )
+    }
+}