Adding a button on event

[DirgeWuff]

Alright, so I have a program I'm writing that displays text paragraphs of text from a vector. When the final chunk of text is reached, I need to add a second button. I attempted to accomplish this by using another vector containing the button objects, and changing a variable called button index that will point to the correct button object. However, after over an hour of messing around with this code, I can't get it working.

void displayText(const vector<vector<string>>& text, bool fork, uint8_t block, string b1 = nullptr, string b2 = nullptr) {

    std::size_t length = text[block].size();
    uint8_t paragraph = 0;
    uint8_t buttonIndex = 0;

    auto onClick = [&] {
        if (paragraph == length - 2) {
            buttonIndex = 1;
            paragraph++;
        }
        else if (paragraph < length - 1) {
            paragraph++;

        }
        else {
            screen.Exit();
        }
    };

    vector<Component> buttons = {
       Container::Vertical({ Button("Continue...", onClick, ButtonOption::Animated(Color::Red)) }),
       Container::Horizontal( {Button(b1, onClick, ButtonOption::Animated(Color::Red)) | flex, Button(b2, onClick, ButtonOption::Animated(Color::Blue)) | flex}),
    };

    auto renderText = Renderer([&] {return vbox(splitAndDisplay(text[block][paragraph])) | size(HEIGHT, EQUAL, 30) | flex; });

    auto dispWindow = Container::Vertical({
        renderText,
        Renderer([] { return separator(); }),
        buttons[buttonIndex],
        }) | border | flex;

    screen.Loop(dispWindow);
}

int main() {

    displayText(blocks, false, 0, "Button ", "Button two");

    return 0;
}

Is there a better or easier way to do this that would actually work? Any help or ideas as to why this fails to work correctly would be greatly appreciated. Cheers.

[ArthurSonzogni]

Hello @DirgeWuff !

Maybe you can use the Maybe decorator?

FTXUI/include/ftxui/component/component.hpp

Lines 115 to 118 in 15587da

	Component Maybe(Component, const bool* show);
	Component Maybe(Component, std::function<bool()>);
	ComponentDecorator Maybe(const bool* show);
	ComponentDecorator Maybe(std::function<bool()>);

  auto dispWindow =
      Container::Vertical({
          renderText,
          Renderer([] { return separator(); }),
          buttons[0],
          Maybe(buttons[1], [&] { return paragraph == length - 2; }),
      }) |
      border | flex;

[DirgeWuff]

Ok, that works almost perfectly. However for some reason, when fork is set to false and the first condition should trigger, "### Not implemented component" prints where the button should be. This is the code:

auto dispWindow = Container::Vertical({
     renderText,
     Renderer([] { return separator(); }),
     Maybe(buttons[0], [&] {return fork == false; }),
     Maybe(buttons[0], [&] {return paragraph < length - 1 && fork == true; }),
     Maybe(buttons[1], [&] {return paragraph == length - 1 && fork == true; }),
     }) | border | flex;

 screen.Loop(dispWindow);
}

int main() {

 displayText(blocks, false, 0, "Button one", "Button two");
 return 0;
}

The following does work however:

Maybe(Container::Vertical({ Button("Continue...", onClick, ButtonOption::Animated(Color::Red)) }), [&] {return fork == false; }),
Maybe(buttons[0], [&] {return paragraph < length - 1 && fork == true; }),
Maybe(buttons[1], [&] {return paragraph == length - 1 && fork == true; }),