From 23789c2d7bb36d99cef80c8524adc7f070fe5aee Mon Sep 17 00:00:00 2001
From: cmorganBE <51970032+cmorganBE@users.noreply.github.com>
Date: Wed, 14 Jul 2021 09:04:12 -0400
Subject: [PATCH] Component example showing composition of components (#150)

This approach can allow for UI sections that are more modular and reusable
---
 doc/example_list.md                |  1 +
 examples/component/CMakeLists.txt  |  1 +
 examples/component/composition.cpp | 72 ++++++++++++++++++++++++++++++
 3 files changed, 74 insertions(+)
 create mode 100644 examples/component/composition.cpp

diff --git a/doc/example_list.md b/doc/example_list.md
index 200ccad..92c99da 100644
--- a/doc/example_list.md
+++ b/doc/example_list.md
@@ -40,6 +40,7 @@
 @example ./examples/component/menu.cpp
 @example ./examples/component/menu_style.cpp
 @example ./examples/component/radiobox_in_frame.cpp
+@example ./examples/component/composition.cpp
 @example ./examples/component/button.cpp
 @example ./examples/component/toggle.cpp
 @example ./examples/component/modal_dialog.cpp
diff --git a/examples/component/CMakeLists.txt b/examples/component/CMakeLists.txt
index 9d95fe2..2d66ddd 100644
--- a/examples/component/CMakeLists.txt
+++ b/examples/component/CMakeLists.txt
@@ -7,6 +7,7 @@ endfunction(example)
 example(button)
 example(checkbox)
 example(checkbox_in_frame)
+example(composition)
 example(gallery)
 example(homescreen)
 example(input)
diff --git a/examples/component/composition.cpp b/examples/component/composition.cpp
new file mode 100644
index 0000000..543bba3
--- /dev/null
+++ b/examples/component/composition.cpp
@@ -0,0 +1,72 @@
+#include <memory>  // for allocator, shared_ptr, __shared_ptr_access
+#include <string>  // for operator+, to_wstring
+
+#include "ftxui/component/captured_mouse.hpp"  // for ftxui
+#include "ftxui/component/component.hpp"  // for Button, Horizontal, Renderer
+#include "ftxui/component/component_base.hpp"      // for ComponentBase
+#include "ftxui/component/component_options.hpp"   // for ButtonOption
+#include "ftxui/component/screen_interactive.hpp"  // for ScreenInteractive
+#include "ftxui/dom/elements.hpp"  // for text, separator, Element, operator|, vbox, border
+
+using namespace ftxui;
+
+// An example of how to compose multiple components into one and maintain their
+// interactiveness.
+int main(int argc, const char* argv[]) {
+  auto button_option = ButtonOption();
+  button_option.border = false;
+
+  auto left_count = 0;
+  auto right_count = 0;
+
+  auto left_buttons = Container::Horizontal({
+      Button(
+          "[Decrease]", [&] { left_count--; }, &button_option),
+      Button(
+          "[Increase]", [&] { left_count++; }, &button_option),
+  });
+
+  auto right_buttons = Container::Horizontal({
+      Button(
+          "[Decrease]", [&] { right_count--; }, &button_option),
+      Button(
+          "[Increase]", [&] { right_count++; }, &button_option),
+  });
+
+  // Renderer decorates its child with a new rendering function. The way the
+  // children reacts to events is maintained.
+  auto leftpane = Renderer(left_buttons, [&] {
+    return vbox({
+               text(L"This is the left control"),
+               separator(),
+               text(L"Left button count: " + std::to_wstring(left_count)),
+               left_buttons->Render(),
+           }) |
+           border;
+  });
+
+  auto rightpane = Renderer(right_buttons, [&] {
+    return vbox({
+               text(L"This is the right control"),
+               separator(),
+               text(L"Right button count: " + std::to_wstring(right_count)),
+               right_buttons->Render(),
+           }) |
+           border;
+  });
+
+  // Container groups components togethers. To render a Container::Horizontal,
+  // it render its children side by side. It maintains their interactiveness and
+  // provide the logic to navigate from one to the other using the arrow keys.
+  auto composition = Container::Horizontal({leftpane, rightpane});
+
+  auto screen = ScreenInteractive::FitComponent();
+  screen.Loop(composition);
+  return 0;
+}
+
+// Thanks to Chris Morgan for this example!
+
+// Copyright 2021 Arthur Sonzogni. All rights reserved.
+// Use of this source code is governed by the MIT license that can be found in
+// the LICENSE file.