feat: Dropdown select menu. (#214)

Dom
 - `vscroll_indicator`. Show a scrollback indicator on the right.

Component
 - `Maybe`: Display an component conditionnally based on a boolean.
 - `Dropdown`: A dropdown select list.

This address:
https://github.com/ArthurSonzogni/FTXUI/issues/204

CHANGELOG.md

@@ -1,5 +1,14 @@
 # Changelog
 
+## Current
+
+### Dom
+ - `vscroll_indicator`. Show a scrollback indicator on the right.
+
+### Component
+ - `Maybe`: Display an component conditionnally based on a boolean.
+ - `Dropdown`: A dropdown select list.
+
 ## 0.9 (2021-09-26)
 
 The initial release where changelog where written.

CMakeLists.txt

@@ -57,14 +57,15 @@ add_library(dom STATIC
   src/ftxui/dom/frame.cpp
   src/ftxui/dom/gauge.cpp
   src/ftxui/dom/graph.cpp
-  src/ftxui/dom/hbox.cpp
   src/ftxui/dom/gridbox.cpp
+  src/ftxui/dom/hbox.cpp
   src/ftxui/dom/hflow.cpp
   src/ftxui/dom/inverted.cpp
   src/ftxui/dom/node.cpp
   src/ftxui/dom/node_decorator.cpp
   src/ftxui/dom/paragraph.cpp
   src/ftxui/dom/reflect.cpp
+  src/ftxui/dom/scroll_indicator.cpp
   src/ftxui/dom/separator.cpp
   src/ftxui/dom/size.cpp
   src/ftxui/dom/spinner.cpp
@@ -87,8 +88,10 @@ add_library(component STATIC
   src/ftxui/component/checkbox.cpp
   src/ftxui/component/component.cpp
   src/ftxui/component/container.cpp
+  src/ftxui/component/dropdown.cpp
   src/ftxui/component/event.cpp
   src/ftxui/component/input.cpp
+  src/ftxui/component/maybe.cpp
   src/ftxui/component/menu.cpp
   src/ftxui/component/radiobox.cpp
   src/ftxui/component/radiobox.cpp

examples/component/CMakeLists.txt

@@ -2,19 +2,21 @@ set(DIRECTORY_LIB component)
 
 example(button)
 example(checkbox)
-example(nested_screen)
 example(checkbox_in_frame)
 example(composition)
+example(dropdown)
 example(gallery)
 example(homescreen)
 example(input)
+example(maybe)
 example(menu)
-example(menu_in_frame)
 example(menu2)
-example(menu_multiple)
 example(menu_entries)
+example(menu_in_frame)
+example(menu_multiple)
 example(menu_style)
 example(modal_dialog)
+example(nested_screen)
 example(print_key_press)
 example(radiobox)
 example(radiobox_in_frame)

examples/component/dropdown.cpp

@@ -0,0 +1,48 @@
+#include <functional>  // for function
+#include <iostream>  // for basic_ostream::operator<<, operator<<, endl, basic_ostream, basic_ostream<>::__ostream_type, cout, ostream
+#include <string>    // for string, basic_string, allocator
+#include <vector>    // for vector
+
+#include "ftxui/component/captured_mouse.hpp"      // for ftxui
+#include "ftxui/component/component.hpp"           // for Menu
+#include "ftxui/component/component_options.hpp"   // for MenuOption
+#include "ftxui/component/screen_interactive.hpp"  // for ScreenInteractive
+
+int main(int argc, const char* argv[]) {
+  using namespace ftxui;
+
+  std::vector<std::string> entries = {
+      "tribute",     "clearance", "ally",     "bend",  "electronics",
+      "module",      "era",       "cultural", "sniff", "nationalism",
+      "negotiation", "deliver",   "figure",   "east",
+      "tribute",     "clearance", "ally",     "bend",  "electronics",
+      "module",      "era",       "cultural", "sniff", "nationalism",
+      "negotiation", "deliver",   "figure",   "east",
+      "tribute",     "clearance", "ally",     "bend",  "electronics",
+      "module",      "era",       "cultural", "sniff", "nationalism",
+      "negotiation", "deliver",   "figure",   "east",
+  };
+
+  int selected_1 = 0;
+  int selected_2 = 0;
+  int selected_3 = 0;
+  int selected_4 = 0;
+
+  auto layout = Container::Vertical({
+      Container::Horizontal({
+          Dropdown(&entries, &selected_1),
+          Dropdown(&entries, &selected_2),
+      }),
+      Container::Horizontal({
+          Dropdown(&entries, &selected_3),
+          Dropdown(&entries, &selected_4),
+      }),
+  });
+
+  auto screen = ScreenInteractive::FitComponent();
+  screen.Loop(layout);
+}
+
+// Copyright 2020 Arthur Sonzogni. All rights reserved.
+// Use of this source code is governed by the MIT license that can be found in
+// the LICENSE file.

examples/component/maybe.cpp

@@ -0,0 +1,47 @@
+#include <functional>  // for function
+#include <iostream>  // for basic_ostream::operator<<, operator<<, endl, basic_ostream, basic_ostream<>::__ostream_type, cout, ostream
+#include <string>    // for string, basic_string, allocator
+#include <vector>    // for vector
+
+#include "ftxui/component/captured_mouse.hpp"      // for ftxui
+#include "ftxui/component/component.hpp"           // for Menu
+#include "ftxui/component/component_options.hpp"   // for MenuOption
+#include "ftxui/component/screen_interactive.hpp"  // for ScreenInteractive
+
+using namespace ftxui;
+Component Border(Component child) {
+  return Renderer(child, [child] { return child->Render() | border; });
+}
+
+int main(int argc, const char* argv[]) {
+
+  std::vector<std::string> entries = {
+      "entry 1",
+      "entry 2",
+      "entry 3",
+  };
+  int menu_1_selected = 0;
+  int menu_2_selected = 0;
+  auto menu_1 = Radiobox(&entries, &menu_1_selected);
+  auto menu_2 = Radiobox(&entries, &menu_2_selected);
+
+  menu_1 = Border(menu_1);
+  menu_2 = Border(menu_2);
+
+  bool menu_1_show = false;
+  bool menu_2_show = false;
+
+  auto layout = Container::Vertical({
+      Checkbox("Show menu_1", &menu_1_show),
+      Maybe(menu_1, &menu_1_show),
+      Checkbox("Show menu_2", &menu_2_show),
+      Maybe(menu_2, &menu_2_show),
+  });
+
+  auto screen = ScreenInteractive::TerminalOutput();
+  screen.Loop(layout);
+}
+
+// Copyright 2020 Arthur Sonzogni. All rights reserved.
+// Use of this source code is governed by the MIT license that can be found in
+// the LICENSE file.

include/ftxui/component/component.hpp

@@ -39,6 +39,7 @@ Component Menu(ConstStringListRef entries,
                int* selected_,
                Ref<MenuOption> = {});
 Component MenuEntry(ConstStringRef label, Ref<MenuEntryOption> = {});
+Component Dropdown(ConstStringListRef entries, int* selected);
 Component Radiobox(ConstStringListRef entries,
                    int* selected_,
                    Ref<RadioboxOption> option = {});
@@ -55,6 +56,7 @@ Component Renderer(Component child, std::function<Element()>);
 Component Renderer(std::function<Element()>);
 Component Renderer(std::function<Element(bool /* focused */)>);
 Component CatchEvent(Component child, std::function<bool(Event)>);
+Component Maybe(Component, bool* show);
 
 namespace Container {
 Component Vertical(Components children);

include/ftxui/component/event.hpp

@@ -74,6 +74,7 @@ struct Event {
   bool operator!=(const Event& other) const { return !operator==(other); }
 
   //--- State section ----------------------------------------------------------
+  ScreenInteractive* screen_ = nullptr;
  private:
   friend ComponentBase;
   friend ScreenInteractive;
@@ -95,8 +96,6 @@ struct Event {
     struct Cursor cursor_;
   };
   std::string input_;
-
-  ScreenInteractive* screen_ = nullptr;
 };
 
 }  // namespace ftxui

include/ftxui/dom/elements.hpp

@@ -104,6 +104,8 @@ Element yframe(Element);
 Element focus(Element);
 Element select(Element);
 
+Element vscroll_indicator(Element);
+
 // --- Util --------------------------------------------------------------------
 Element hcenter(Element);
 Element vcenter(Element);

src/ftxui/component/dropdown.cpp

@@ -0,0 +1,54 @@
+#include "ftxui/component/component.hpp"
+#include "ftxui/component/component_base.hpp"
+#include "ftxui/component/event.hpp"
+
+namespace ftxui {
+
+Component Dropdown(ConstStringListRef entries, int* selected) {
+  class Impl : public ComponentBase {
+   public:
+    Impl(ConstStringListRef entries, int* selected)
+        : entries_(std::move(entries)), selected_(selected) {
+      CheckboxOption option;
+      option.style_checked = "↓│";
+      option.style_unchecked = "→│";
+      checkbox_ = Checkbox(&title_, &show_, option),
+      radiobox_ = Radiobox(entries_, selected_);
+
+      Add(Container::Vertical({
+          checkbox_,
+          Maybe(radiobox_, &show_),
+      }));
+    }
+
+    Element Render() override {
+      title_ = entries_[*selected_];
+      if (show_) {
+        return vbox({
+                   checkbox_->Render(),
+                   separator(),
+                   radiobox_->Render() | vscroll_indicator | frame |
+                       size(HEIGHT, LESS_THAN, 12),
+               }) |
+               border;
+      }
+
+      return vbox({
+          checkbox_->Render() | border,
+          filler(),
+      });
+    }
+
+   private:
+    ConstStringListRef entries_;
+    bool show_ = false;
+    int* selected_;
+    std::string title_;
+    Component checkbox_;
+    Component radiobox_;
+  };
+
+  return Make<Impl>(std::move(entries), selected);
+}
+
+}  // namespace ftxui

src/ftxui/component/maybe.cpp

@@ -0,0 +1,31 @@
+#include "ftxui/component/component.hpp"
+#include "ftxui/component/component_base.hpp"
+#include "ftxui/component/event.hpp"
+
+namespace ftxui {
+
+Component Maybe(Component child, bool* show) {
+  class Impl : public ComponentBase {
+   public:
+    Impl(bool* show): show_(show) {}
+
+   private:
+    Element Render() override {
+      return *show_ ? ComponentBase::Render() : std::make_unique<Node>();
+    }
+    bool Focusable() const override {
+      return *show_ && ComponentBase::Focusable();
+    }
+    bool OnEvent(Event event) override {
+      return *show_ && ComponentBase::OnEvent(event);
+    }
+
+    bool* show_;
+  };
+  
+  auto maybe = Make<Impl>(show);
+  maybe->Add(std::move(child));
+  return maybe;
+}
+
+}  // namespace ftxui

src/ftxui/component/show.cpp

@@ -0,0 +1,26 @@
+#include "ftxui/component/component_base.hpp"
+
+Component Maybe(Component child, bool* show) {
+  class Impl : public ComponentBase {
+   public:
+    Impl(Component child, bool* show) : ComponentBase(child), show_(show) {}
+
+   private:
+    Element Render() override {
+      if (*show_)
+        return ComponentBase::Render();
+      else
+        return text("");
+    }
+    bool Focusable() const override {
+      return *show_ && ComponentBase::Focusable();
+    }
+    bool OnEvent(Event event) override {
+      if (*show_)
+        return false return ComponentBase::OnEvent(event);
+    }
+
+    bool* show_;
+  };
+  return Make<Impl>(std::move(child), show);
+}

src/ftxui/dom/scroll_indicator.cpp

@@ -0,0 +1,53 @@
+#include "ftxui/dom/elements.hpp"
+#include "ftxui/dom/node.hpp"
+#include "ftxui/dom/node_decorator.hpp"  // for NodeDecorator
+#include "ftxui/screen/box.hpp"
+#include "ftxui/screen/screen.hpp"
+
+namespace ftxui {
+
+/// @brief Add a filter that will invert the foreground and the background
+/// colors.
+/// @ingroup dom
+Element vscroll_indicator(Element child) {
+  class Impl : public NodeDecorator {
+    using NodeDecorator::NodeDecorator;
+
+    void Render(Screen& screen) final {
+      Node::Render(screen);
+
+      const Box& stencil = screen.stencil;
+
+      float size_inner = box_.y_max - box_.y_min;
+      float size_outter = stencil.y_max - stencil.y_min;
+      float start_y = stencil.y_min +
+                      (stencil.y_min - box_.y_min) * size_outter / size_inner;
+      float end_y = stencil.y_min +
+                    (stencil.y_max - box_.y_min) * size_outter / size_inner;
+
+      const int x = stencil.x_max;
+      for (int y = stencil.y_min; y <= stencil.y_max; ++y) {
+        bool up = (2 * y + -1 >= 2 * start_y) && (2 * y + -1 <= 2 * end_y);
+        bool down = (2 * y + 0 >= 2 * start_y) && (2 * y + 0 <= 2 * end_y);
+
+        if (up) {
+          if (down) {
+            screen.PixelAt(x, y).character = "┃";
+          } else {
+            screen.PixelAt(x, y).character = "╹";
+          }
+        } else {
+          if (down) {
+            screen.PixelAt(x, y).character = "╻";
+          } else {
+            screen.PixelAt(x, y).character = " ";
+          }
+        }
+        screen.PixelAt(x,y).inverted = true;
+      }
+    };
+  };
+  return std::make_shared<Impl>(std::move(child));
+}
+
+}  // namespace ftxui