Menu of components (#131)

Allow Container::Vertical and Container::Horizontal to have an
external selector, similar to Container::Tab.

This is useful for implementing a menu of menu.

Co-authored-by: ArthurSonzogni <sonzogniarthur@gmail.com>

doc/example_list.md

@@ -35,6 +35,7 @@
 @example ./examples/component/input.cpp
 @example ./examples/component/homescreen.cpp
 @example ./examples/component/radiobox.cpp
+@example ./examples/component/menu_multiple.cpp
 @example ./examples/component/slider_rgb.cpp
 @example ./examples/component/menu.cpp
 @example ./examples/component/menu_style.cpp

examples/component/CMakeLists.txt

@@ -12,6 +12,7 @@ example(homescreen)
 example(input)
 example(menu)
 example(menu2)
+example(menu_multiple)
 example(menu_style)
 example(modal_dialog)
 example(radiobox)

examples/component/menu_multiple.cpp

@@ -0,0 +1,79 @@
+#include <stdlib.h>  // for EXIT_SUCCESS
+#include <memory>    // for __shared_ptr_access
+#include <string>  // for wstring, allocator, operator+, basic_string, char_traits
+#include <vector>  // for vector, __alloc_traits<>::value_type
+
+#include "ftxui/component/captured_mouse.hpp"  // for ftxui
+#include "ftxui/component/component.hpp"  // for Menu, Renderer, Horizontal, Vertical
+#include "ftxui/component/component_base.hpp"  // for ComponentBase
+#include "ftxui/component/screen_interactive.hpp"  // for Component, ScreenInteractive
+#include "ftxui/dom/elements.hpp"  // for text, Element, operator|, window, flex, vbox
+#include "ftxui/screen/string.hpp"  // for to_wstring
+
+using namespace ftxui;
+
+Component Window(std::wstring title, Component component) {
+  return Renderer(component, [component, title] {  //
+    return window(text(title), component->Render()) | flex;
+  });
+}
+
+int main(int argc, const char* argv[]) {
+  int menu_selected[] = {0, 0, 0};
+  std::vector<std::vector<std::wstring>> menu_entries = {
+      {
+          L"Ananas",
+          L"Raspberry",
+          L"Citrus",
+      },
+      {
+          L"Potatoes",
+          L"Weat",
+          L"Rise",
+      },
+      {
+          L"Carrot",
+          L"Lettuce",
+          L"Tomato",
+      },
+  };
+
+  int menu_selected_global = 0;
+  auto menu_global = Container::Vertical(
+      {
+          Window(L"Menu 1", Menu(&menu_entries[0], &menu_selected[0])),
+          Window(L"Menu 2", Menu(&menu_entries[1], &menu_selected[1])),
+          Window(L"Menu 3", Menu(&menu_entries[2], &menu_selected[2])),
+      },
+      &menu_selected_global);
+
+  auto info = Renderer([&] {
+    int g = menu_selected_global;
+    std::wstring value = menu_entries[g][menu_selected[g]];
+    return window(text(L"Content"),  //
+                  vbox({
+                      text(L"menu_selected_global = " + to_wstring(g)),
+                      text(L"menu_selected[0]     = " +
+                           to_wstring(menu_selected[0])),
+                      text(L"menu_selected[1]     = " +
+                           to_wstring(menu_selected[1])),
+                      text(L"menu_selected[2]     = " +
+                           to_wstring(menu_selected[2])),
+                      text(L"Value                = " + value),
+                  })) |
+           flex;
+  });
+
+  auto global = Container::Horizontal({
+      menu_global,
+      info,
+  });
+
+  auto screen = ScreenInteractive::TerminalOutput();
+  screen.Loop(global);
+  return EXIT_SUCCESS;
+}
+
+// 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,7 +39,9 @@ Component CatchEvent(Component child, std::function<bool(Event)>);
 
 namespace Container {
 Component Vertical(Components children);
+Component Vertical(Components children, int* selector);
 Component Horizontal(Components children);
+Component Horizontal(Components children, int* selector);
 Component Tab(Components children, int* selector);
 
 }  // namespace Container

include/ftxui/component/container.hpp

@@ -13,9 +13,11 @@ class ContainerBase : public ComponentBase {
  public:
   static Component Vertical();
   static Component Vertical(Components children);
+  static Component Vertical(Components children, int* selector);
 
   static Component Horizontal();
   static Component Horizontal(Components children);
+  static Component Horizontal(Components children, int* selector);
 
   static Component Tab(int* selector);
   static Component Tab(Components children, int* selector);
@@ -44,6 +46,7 @@ class ContainerBase : public ComponentBase {
 
   int selected_ = 0;
   int* selector_ = nullptr;
+  bool is_tab_ = false;
 
  private:
   bool OnMouseEvent(Event event);

src/ftxui/component/component_test.cpp

@@ -1,8 +1,8 @@
+#include <gtest/gtest.h>  // for Test, SuiteApiResolver, TestInfo (ptr only), TEST, TestFactoryImpl
 #include <memory>  // for shared_ptr, allocator, make_shared, __shared_ptr_access
 
 #include "ftxui/component/captured_mouse.hpp"  // for ftxui
 #include "ftxui/component/component_base.hpp"  // for ComponentBase, Component
-#include "gtest/gtest_pred_impl.h"  // for Test, SuiteApiResolver, TEST, TestFactoryImpl
 
 using namespace ftxui;
 

src/ftxui/component/container.cpp

@@ -1,4 +1,5 @@
 #include <stddef.h>  // for size_t
+
 #include <algorithm>  // for max, min
 #include <memory>  // for __shared_ptr_access, shared_ptr, make_shared, allocator, __shared_ptr_access<>::element_type, allocator_traits<>::value_type
 #include <utility>  // for move
@@ -30,6 +31,28 @@ Component Vertical(Components children) {
   return ContainerBase::Vertical(std::move(children));
 }
 
+/// @brief A list of components, drawn one by one vertically and navigated
+/// vertically using up/down arrow key or 'j'/'k' keys.
+/// This is useful for implementing a Menu for instance.
+/// @param children the list of components.
+/// @param selector An integer storing the selected children.
+/// @ingroup component
+/// @see ContainerBase
+///
+/// ### Example
+///
+/// ```cpp
+/// auto container = Container::Vertical({
+///   children_1,
+///   children_2,
+///   children_3,
+///   children_4,
+/// });
+/// ```
+Component Vertical(Components children, int* selector) {
+  return ContainerBase::Vertical(std::move(children), selector);
+}
+
 /// @brief A list of components, drawn one by one horizontally and navigated
 /// horizontally using left/right arrow key or 'h'/'l' keys.
 /// @param children the list of components.
@@ -39,17 +62,39 @@ Component Vertical(Components children) {
 /// ### Example
 ///
 /// ```cpp
+/// int selected_children = 2;
 /// auto container = Container::Horizontal({
 ///   children_1,
 ///   children_2,
 ///   children_3,
 ///   children_4,
-/// });
+/// }, &selected_children);
 /// ```
 Component Horizontal(Components children) {
   return ContainerBase::Horizontal(std::move(children));
 }
 
+/// @brief A list of components, drawn one by one horizontally and navigated
+/// horizontally using left/right arrow key or 'h'/'l' keys.
+/// @param children the list of components.
+/// @ingroup component
+/// @see ContainerBase
+///
+/// ### Example
+///
+/// ```cpp
+/// int selected_children = 2;
+/// auto container = Container::Horizontal({
+///   children_1,
+///   children_2,
+///   children_3,
+///   children_4,
+/// }, selected_children);
+/// ```
+Component Horizontal(Components children, int* selector) {
+  return ContainerBase::Horizontal(std::move(children), selector);
+}
+
 /// @brief A list of components, where only one is drawn and interacted with at
 /// a time. The |selector| gives the index of the selected component. This is
 /// useful to implement tabs.
@@ -82,9 +127,15 @@ Component ContainerBase::Vertical() {
 
 // static
 Component ContainerBase::Vertical(Components children) {
+  return Vertical(std::move(children), /*selector=*/nullptr);
+}
+
+// static
+Component ContainerBase::Vertical(Components children, int* selector) {
   auto container = std::make_shared<ContainerBase>();
   container->event_handler_ = &ContainerBase::VerticalEvent;
   container->render_handler_ = &ContainerBase::VerticalRender;
+  container->selector_ = selector ? selector : &container->selected_;
   for (Component& child : children)
     container->Add(std::move(child));
   return container;
@@ -97,9 +148,14 @@ Component ContainerBase::Horizontal() {
 
 // static
 Component ContainerBase::Horizontal(Components children) {
+  return Horizontal(std::move(children), /*selector=*/nullptr);
+}
+
+Component ContainerBase::Horizontal(Components children, int* selector) {
   auto container = std::make_shared<ContainerBase>();
   container->event_handler_ = &ContainerBase::HorizontalEvent;
   container->render_handler_ = &ContainerBase::HorizontalRender;
+  container->selector_ = selector ? selector : &container->selected_;
   for (Component& child : children)
     container->Add(std::move(child));
   return container;
@@ -113,9 +169,10 @@ Component ContainerBase::Tab(int* selector) {
 // static
 Component ContainerBase::Tab(Components children, int* selector) {
   auto container = std::make_shared<ContainerBase>();
-  container->selector_ = selector;
+  container->selector_ = selector ? selector : &container->selected_;
   container->event_handler_ = &ContainerBase::TabEvent;
   container->render_handler_ = &ContainerBase::TabRender;
+  container->is_tab_ = true;
   for (Component& child : children)
     container->Add(std::move(child));
   return container;
@@ -138,47 +195,46 @@ Component ContainerBase::ActiveChild() {
   if (children_.size() == 0)
     return nullptr;
 
-  int selected = selector_ ? *selector_ : selected_;
+  return children_[*selector_ % children_.size()];
-  return children_[selected % children_.size()];
 }
 
 void ContainerBase::SetActiveChild(ComponentBase* child) {
   for (size_t i = 0; i < children_.size(); ++i) {
     if (children_[i].get() == child) {
-      (selector_ ? *selector_ : selected_) = i;
+      *selector_ = i;
       return;
     }
   }
 }
 
 bool ContainerBase::VerticalEvent(Event event) {
-  int old_selected = selected_;
+  int old_selected = *selector_;
   if (event == Event::ArrowUp || event == Event::Character('k'))
-    selected_--;
+    (*selector_)--;
   if (event == Event::ArrowDown || event == Event::Character('j'))
-    selected_++;
+    (*selector_)++;
   if (event == Event::Tab && children_.size())
-    selected_ = (selected_ + 1) % children_.size();
+    *selector_ = (*selector_ + 1) % children_.size();
   if (event == Event::TabReverse && children_.size())
-    selected_ = (selected_ + children_.size() - 1) % children_.size();
+    *selector_ = (*selector_ + children_.size() - 1) % children_.size();
 
-  selected_ = std::max(0, std::min(int(children_.size()) - 1, selected_));
+  *selector_ = std::max(0, std::min(int(children_.size()) - 1, *selector_));
-  return old_selected != selected_;
+  return old_selected != *selector_;
 }
 
 bool ContainerBase::HorizontalEvent(Event event) {
-  int old_selected = selected_;
+  int old_selected = *selector_;
   if (event == Event::ArrowLeft || event == Event::Character('h'))
-    selected_--;
+    (*selector_)--;
   if (event == Event::ArrowRight || event == Event::Character('l'))
-    selected_++;
+    (*selector_)++;
   if (event == Event::Tab && children_.size())
-    selected_ = (selected_ + 1) % children_.size();
+    *selector_ = (*selector_ + 1) % children_.size();
   if (event == Event::TabReverse && children_.size())
-    selected_ = (selected_ + children_.size() - 1) % children_.size();
+    *selector_ = (*selector_ + children_.size() - 1) % children_.size();
 
-  selected_ = std::max(0, std::min(int(children_.size()) - 1, selected_));
+  *selector_ = std::max(0, std::min(int(children_.size()) - 1, *selector_));
-  return old_selected != selected_;
+  return old_selected != *selector_;
 }
 
 Element ContainerBase::Render() {
@@ -211,7 +267,7 @@ Element ContainerBase::TabRender() {
 }
 
 bool ContainerBase::OnMouseEvent(Event event) {
-  if (selector_)
+  if (is_tab_)
     return ActiveChild()->OnEvent(event);
 
   for (Component& child : children_) {

src/ftxui/dom/separator.cpp

@@ -1,4 +1,5 @@
 #include <memory>  // for make_shared
+#include <string>  // for wstring
 
 #include "ftxui/dom/elements.hpp"     // for Element, separator
 #include "ftxui/dom/node.hpp"         // for Node

src/ftxui/dom/text_test.cpp

@@ -1,8 +1,8 @@
 #include <gtest/gtest-message.h>  // for Message
 #include <gtest/gtest-test-part.h>  // for SuiteApiResolver, TestFactoryImpl, TestPartResult
-#include <memory>                   // for allocator
+#include <string>                   // for allocator, wstring
 
-#include "ftxui/dom/elements.hpp"   // for text, Element, operator|, border
+#include "ftxui/dom/elements.hpp"   // for text, operator|, border, Element
 #include "ftxui/dom/node.hpp"       // for Render
 #include "ftxui/screen/box.hpp"     // for ftxui
 #include "ftxui/screen/screen.hpp"  // for Screen