Tabs with shared components

[nmarks99]

I am creating an application where there needs to be several views/screens that the user can change between at runtime. Each view has many of the same components, and the main difference between each view is the visual layout of the components on the screen.

My first thought was to use Container::Tab, but I can't figure out the correct way to do it when I have the same component that must appear in several tabs. Here is a minimal example which demonstrates what I am talking about:

#include <memory> // for allocator, __shared_ptr_access, shared_ptr
#include <string> // for string, basic_string
#include <vector> // for vector

#include "ftxui/component/captured_mouse.hpp"     // for ftxui
#include "ftxui/component/component.hpp"          // for Radiobox, Horizontal, Menu, Renderer, Tab
#include "ftxui/component/component_base.hpp"     // for ComponentBase
#include "ftxui/component/screen_interactive.hpp" // for ScreenInteractive
#include "ftxui/dom/elements.hpp"                 // for Element, separator, hbox, operator|, border

using namespace ftxui;

int main() {
    std::vector<std::string> tab_values{
        "tab_1",
        "tab_2",
        "tab_3",
    };
    int tab_selected = 0;
    auto tab_menu = Menu(&tab_values, &tab_selected);

    int value = 0;

    auto plus_button = Button(
	ButtonOption{
	    .label = "+",
	    .on_click = [&]{
	    value += 1;
	}
    });

    auto tab1_renderer = Renderer(plus_button, [&]{
	return vbox({
	    text("I am tab 1"),
	    separatorEmpty(),
	    plus_button->Render() | center
	});
    });
    
    auto tab2_renderer = Renderer(plus_button, [&]{
	return vbox({
	    text("I am tab 2"),
	    separatorEmpty(),
	    plus_button->Render() | center
	});
    });

    auto tab3_renderer = Renderer(plus_button, [&]{
	return vbox({
	    text("I am tab 3"),
	    separatorEmpty(),
	    plus_button->Render() | center
	});
    });

    auto tab_container = Container::Tab(
        {
	    tab1_renderer,
	    tab2_renderer,
	    tab3_renderer,
        },
        &tab_selected);

    auto container = Container::Horizontal({
        tab_menu,
        tab_container,
    });

    auto renderer = Renderer(container, [&] {
        return hbox({
	    text(std::to_string(value)),
	    separator(),
	    tab_menu->Render(),
	    separator(),
	    tab_container->Render()
	}) | border;
    });

    auto screen = ScreenInteractive::TerminalOutput();
    screen.Loop(renderer);
}

If you run this (or you can probably tell just looking at it) you'll see that the button only works in tab3, presumably because I am not able to pass the same component to multiple renderers like I am doing here. What is the correct way to do this? Is there a way around this limitation with tabs?

Alternatively, I've tried instead of using tabs, to simply conditionally render different elements in the main renderer of my application depending on the value of a integer flag that denotes the desired view. This somewhat works, however I couldn't figure out a good way to define the main container(s) for my application when the visual layout changes drastically between views, and the input (mouse and keyboard) ends up being quite strange.

Any suggestions on how best to approach this problem with FTXUI would be appreciated. Thanks!

[lmarzull]

Hello,

I'm a little bit new to ftxui, but for what I understand, the call to Renderer(plus_button, [&]{ ...}) overwrite preceding call.
So, effectively, the 3rd call for tab3 overwrite preceding Renderer call, and then, button is only working on tab 3.

If it's suitable for you, you will have to build 3 differents button with same "handling" function.
Otherwise, perhaps, you may put you button outside the tab component.
Not sure about what you want to achieve exactly in your GUI.

Sorry, if this does not suite your need.

[nmarks99]

Hi,
Yes I understand that each Renderer call "overwrites" the previous ones, and I can make this work with separate button components for each tab. I was hoping there would be a way to have only 1 button component that can be shared across tabs. The idea is to have each tab have all the same components, just in a different visual layout. It seems overly verbose to need to create n copies of the same component for n number of tabs.