Component decorators (#354)

Add decorator variants for decorator components

Add the "pipe" operator for components, similar to what was done for Elements.
We are able to put something like:
```
Button(...) | Maybe(&show_button)
```

Add decorators for:
- `Maybe`
- `CatchEvent`
- `Renderer`

Signed-off-by: Kefu Chai <tchaikov@gmail.com>
Co-authored-by: ArthurSonzogni <sonzogniarthur@gmail.com>

src/ftxui/component/catch_event.cpp

@@ -55,6 +55,33 @@ Component CatchEvent(Component child,
   return out;
 }
 
+/// @brief Decorate a component, using |on_event| to catch events. This function
+/// must returns true when the event has been handled, false otherwise.
+/// @param on_event The function drawing the interface.
+/// @ingroup component
+///
+/// ### Example
+///
+/// ```cpp
+/// auto screen = ScreenInteractive::TerminalOutput();
+/// auto renderer = Renderer([] { return text("Hello world"); });
+/// renderer |= CatchEvent([&](Event event) {
+///   if (event == Event::Character('q')) {
+///     screen.ExitLoopClosure()();
+///     return true;
+///   }
+///   return false;
+/// });
+/// screen.Loop(renderer);
+/// ```
+ComponentDecorator CatchEvent(std::function<bool(Event)> on_event) {
+  return [on_event = std::move(on_event)](Component child) {
+    return CatchEvent(child, [on_event = std::move(on_event)](Event event) {
+      return on_event(event);
+    });
+  };
+}
+
 }  // namespace ftxui
 
 // Copyright 2021 Arthur Sonzogni. All rights reserved.

src/ftxui/component/maybe.cpp

@@ -1,38 +1,86 @@
+#include <functional>  // for function
 #include <memory>  // for make_unique, __shared_ptr_access, __shared_ptr_access<>::element_type, shared_ptr
 #include <utility>  // for move
 
-#include "ftxui/component/component.hpp"       // for Make, Maybe
-#include "ftxui/component/component_base.hpp"  // for ComponentBase, Component
+#include "ftxui/component/component.hpp"  // for ComponentDecorator, Maybe, Make
+#include "ftxui/component/component_base.hpp"  // for Component, ComponentBase
 #include "ftxui/component/event.hpp"           // for Event
 #include "ftxui/dom/elements.hpp"              // for Element
 #include "ftxui/dom/node.hpp"                  // for Node
 
 namespace ftxui {
 
-Component Maybe(Component child, const bool* show) {
+Component Maybe(Component child, std::function<bool()> show) {
   class Impl : public ComponentBase {
    public:
-    Impl(const bool* show) : show_(show) {}
+    Impl(std::function<bool()> show) : show_(std::move(show)) {}
 
    private:
     Element Render() override {
-      return *show_ ? ComponentBase::Render() : std::make_unique<Node>();
+      return show_() ? ComponentBase::Render() : std::make_unique<Node>();
     }
     bool Focusable() const override {
-      return *show_ && ComponentBase::Focusable();
+      return show_() && ComponentBase::Focusable();
     }
     bool OnEvent(Event event) override {
-      return *show_ && ComponentBase::OnEvent(event);
+      return show_() && ComponentBase::OnEvent(event);
     }
 
-    const bool* show_;
+    std::function<bool()> show_;
   };
 
-  auto maybe = Make<Impl>(show);
+  auto maybe = Make<Impl>(std::move(show));
   maybe->Add(std::move(child));
   return maybe;
 }
 
+/// @brief Decorate a component. It is shown only when the |show| function
+/// returns true.
+/// @params show a function returning whether the decoratorated component should
+/// be shown.
+/// @ingroup component
+///
+/// ### Example
+///
+/// ```cpp
+/// auto component = Renderer([]{ return "Hello World!"; });
+/// auto maybe_component = component | Maybe([&]{ return counter == 42; });
+/// ```
+ComponentDecorator Maybe(std::function<bool()> show) {
+  return [show = std::move(show)](Component child) mutable {
+    return Maybe(child, std::move(show));
+  };
+}
+
+/// @brief Decorate a component |child|. It is shown only when |show| is true.
+/// @params child the compoennt to decorate.
+/// @params show a boolean. |child| is shown when |show| is true.
+/// @ingroup component
+///
+/// ### Example
+///
+/// ```cpp
+/// auto component = Renderer([]{ return "Hello World!"; });
+/// auto maybe_component = Maybe(component, &show);
+/// ```
+Component Maybe(Component child, const bool* show) {
+  return Maybe(child, [show] { return *show; });
+}
+
+/// @brief Decorate a component. It is shown only when |show| is true.
+/// @params show a boolean. |child| is shown when |show| is true.
+/// @ingroup component
+///
+/// ### Example
+///
+/// ```cpp
+/// auto component = Renderer([]{ return "Hello World!"; });
+/// auto maybe_component = component | Maybe(&show);
+/// ```
+ComponentDecorator Maybe(const bool* show) {
+  return [show](Component child) { return Maybe(child, show); };
+}
+
 }  // namespace ftxui
 
 // Copyright 2021 Arthur Sonzogni. All rights reserved.

src/ftxui/component/renderer.cpp

@@ -104,6 +104,28 @@ Component Renderer(std::function<Element(bool)> render) {
   return Make<Impl>(std::move(render));
 }
 
+/// @brief Decorate a component, by decorating what it renders.
+/// @param decorator the function modifying the element it renders.
+/// @ingroup component
+///
+/// ### Example
+///
+/// ```cpp
+/// auto screen = ScreenInteractive::TerminalOutput();
+/// auto renderer =
+//     Renderer([] { return text("Hello");)
+///  | Renderer(bold)
+///  | Renderer(inverted);
+/// screen.Loop(renderer);
+/// ```
+ComponentDecorator Renderer(ElementDecorator decorator) {
+  return [decorator](Component component) {
+    return Renderer(component, [component, decorator] {
+      return component->Render() | decorator;
+    });
+  };
+}
+
 }  // namespace ftxui
 
 // Copyright 2021 Arthur Sonzogni. All rights reserved.

src/ftxui/component/util.cpp

@@ -0,0 +1,32 @@
+#include <functional>  // for function
+#include <memory>      // for __shared_ptr_access
+
+#include "ftxui/component/component.hpp"  // for ElementDecorator, Renderer, ComponentDecorator, operator|, operator|=
+#include "ftxui/component/component_base.hpp"  // for Component, ComponentBase
+#include "ftxui/dom/elements.hpp"              // for Element
+
+namespace ftxui {
+
+Component operator|(Component component, ComponentDecorator decorator) {
+  return decorator(component);
+}
+
+Component operator|(Component component, ElementDecorator decorator) {
+  return component | Renderer(decorator);
+}
+
+Component& operator|=(Component& component, ComponentDecorator decorator) {
+  component = component | decorator;
+  return component;
+}
+
+Component& operator|=(Component& component, ElementDecorator decorator) {
+  component = component | decorator;
+  return component;
+}
+
+}  // namespace ftxui
+
+// Copyright 2022 Arthur Sonzogni. All rights reserved.
+// Use of this source code is governed by the MIT license that can be found in
+// the LICENSE file.