Revert change to button example. (#835)

It was introduced mistakenly by:
f495ce029c

examples/component/button.cpp

@@ -1,92 +1,64 @@
-#include <ftxui/component/component.hpp>
+// Copyright 2020 Arthur Sonzogni. All rights reserved.
-#include <ftxui/component/screen_interactive.hpp>
+// Use of this source code is governed by the MIT license that can be found in
-#include <ftxui/dom/elements.hpp>
+// the LICENSE file.
-#include <ftxui/screen/screen.hpp>
+#include <memory>  // for shared_ptr, __shared_ptr_access
+#include <string>  // for operator+, to_string
 
-#include <array>
+#include "ftxui/component/captured_mouse.hpp"  // for ftxui
-#include <iostream>
+#include "ftxui/component/component.hpp"  // for Button, Horizontal, Renderer
-#include <string>
+#include "ftxui/component/component_base.hpp"      // for ComponentBase
+#include "ftxui/component/screen_interactive.hpp"  // for ScreenInteractive
+#include "ftxui/dom/elements.hpp"  // for separator, gauge, text, Element, operator|, vbox, border
 
 using namespace ftxui;
-using namespace std;
 
-enum class ConnectionMethod { ByName, ByAddress };
+// This is a helper function to create a button with a custom style.
-
+// The style is defined by a lambda function that takes an EntryState and
-void promptForConnectionMethod();
+// returns an Element.
-
+// We are using `center` to center the text inside the button, then `border` to
-void promptForServerName();
+// add a border around the button, and finally `flex` to make the button fill
-void promptForServerAddress();
+// the available space.
-void promptForServerManager();
+ButtonOption Style() {
+  auto option = ButtonOption::Animated();
+  option.transform = [](const EntryState& s) {
+    auto element = text(s.label);
+    if (s.focused) {
+      element |= bold;
+    }
+    return element | center | borderEmpty | flex;
+  };
+  return option;
+}
 
 int main() {
-  promptForConnectionMethod();
+  int value = 50;
 
+  // clang-format off
+  auto btn_dec_01 = Button("-1", [&] { value += 1; }, Style());
+  auto btn_inc_01 = Button("+1", [&] { value -= 1; }, Style());
+  auto btn_dec_10 = Button("-10", [&] { value -= 10; }, Style());
+  auto btn_inc_10 = Button("+10", [&] { value += 10; }, Style());
+  // clang-format on
+
+  // The tree of components. This defines how to navigate using the keyboard.
+  // The selected `row` is shared to get a grid layout.
+  int row = 0;
+  auto buttons = Container::Vertical({
+      Container::Horizontal({btn_dec_01, btn_inc_01}, &row) | flex,
+      Container::Horizontal({btn_dec_10, btn_inc_10}, &row) | flex,
+  });
+
+  // Modify the way to render them on screen:
+  auto component = Renderer(buttons, [&] {
+    return vbox({
+               text("value = " + std::to_string(value)),
+               separator(),
+               buttons->Render() | flex,
+           }) |
+           flex | border;
+  });
+
+  auto screen = ScreenInteractive::FitComponent();
+  screen.Loop(component);
   return 0;
 }
-
-void promptForConnectionMethod() {
-  auto screen = ScreenInteractive::TerminalOutput();
-  std::vector<std::string> connect_choice{
-      "Connect by name...",
-      "Connect by address and port...",
-      "Exit",
-  };
-  int selected = 0;
-  MenuOption option;
-  option.on_enter = [&] {
-    if (selected == 0) {
-      promptForServerManager();
-    } else if (selected == 1) {
-      promptForServerAddress();
-    } else if (selected == 2) {
-      screen.Exit();
-    }
-  };
-
-  auto connect_menu = Menu(&connect_choice, &selected, option);
-
-  auto renderer = Renderer(connect_menu, [&] {
-    return vbox({
-               text("Welcome, my client!") | color(Color::Red3Bis) | bold |
-                   center,
-               text(""),
-               text("Selected = " + std::to_string(selected)) |
-                   color(Color::LightGreenBis) | bold | center,
-
-               text(""),
-               text("Welcome to my first working multiplayer game, Medium "
-                    "Boxes.") |
-                   color(Color::LightSkyBlue1),
-               text(""),
-               text("Now, choose how you'd prefer to connect to a server!") |
-                   color(Color::LightCyan3) | center,
-               text(""),
-               connect_menu->Render() | border,
-           }) |
-           center;
-  });
-
-  screen.Loop(renderer);
-}
-
-void promptForServerName() {}
-
-void promptForServerAddress() {
-  auto screen = ScreenInteractive::TerminalOutput();
-}
-
-void promptForServerManager() {
-  auto screen = ScreenInteractive::TerminalOutput();
-  auto renderer = Renderer([&] {
-    return vbox({
-               text("Now, please enter the server manager's address and "
-                    "port, so that you'll be able to see all the available "
-                    "public servers!") |
-                   color(Color::LightGreenBis),
-               gauge(0),
-           }) |
-           center;
-  });
-
-  screen.Loop(renderer);
-}