FTXUI/examples/component/composition.cpp

#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/deprecated.hpp"                // for text
#include "ftxui/dom/elements.hpp"  // for 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.