How to combine two widgets into one ?

[Riyum]

Hello there, I'm trying to build a widget that can switch between its contents e.g:

from textual.app import App, ComposeResult
from textual.widget import Widget
from textual.reactive import Reactive
from textual.widgets import Input, Footer


class TwoInOne(Widget):

    toggleSwitch = Reactive(False)

    DEFAULT_CSS = """
    TwoInOne {
        dock: bottom;
    }
    """

    def __init__(self):
        super().__init__()
        self.footer = Footer()
        self.inpt = Input()

    def render(self):
        return self.footer if self.toggleSwitch else self.inpt


class Example(App):
    def compose(self) -> ComposeResult:
        yield TwoInOne()


if __name__ == "__main__":

    Example().run()

I was able to do something like this in the past versions of textual (when there wasn't a compose function)
but now render raises NotRenderableError because obviously Input and Footer are no longer of RenderableType type.
I can achieve my goal with dynamic widgets, but I think its a wrong approach just to be able to switch between the two.

I would use self.mount and self.remove but remove is actually deleting the widget and then we back to the dynamic widgets idea

any way I can get this working in the new version ? (0.4.0)

[davep]

The Textual tutorial pretty much walks you through building a widget that's made of other widgets, as each "stopwatch" is made up of a number of other widgets.

[Riyum]

stopwatch is indeed made up from other widgets but all of them composed at once.

In my example I want to compose one of them depending on a reactive boolean.
I expect that the content of TwoInOne would be responsive to the boolean state.

[davep]

As you mention, one approach would be to use the mount and remove methods. But if you want to do it in a less destructive way you likely want to be looking at using CSS to show/hide widgets. Perhaps something like this:

from textual.app import App, ComposeResult
from textual.containers import Container
from textual.widgets import Static, Input, Button
from textual.reactive import reactive

class SwapContent( Container ):

    DEFAULT_CSS = """
    SwapContent {
        height: auto;
        border: solid red;
        background: #444;
        height: 5;
    }

    .hidden {
        display: none;
    }
    """

    allow_edit = reactive( False )

    def compose( self ) -> ComposeResult:
        yield Static( "This is just some static text", id="text" )
        yield Input( placeholder="This is an input field", id="input", classes="hidden" )

    def watch_allow_edit( self, allow_edit: bool ) -> None:
        self.query_one( "#text", Static ).set_class( allow_edit, "hidden" )
        self.query_one( "#input", Input ).set_class( not allow_edit, "hidden" )

class SwapApp( App[ None ] ):

    def compose( self ) -> ComposeResult:
        yield SwapContent()
        yield Button( "Toggle edit", id="toggle" )

    def on_button_pressed( self, event: Button.Pressed ) -> None:
        if event.button.id == "toggle":
            swapper = self.query_one( SwapContent )
            swapper.allow_edit = not swapper.allow_edit

if __name__== "__main__":
    SwapApp().run()

giving this:

Screen.Recording.2022-11-18.at.07.43.45.mov

[Riyum]

Thank you for your answer!

I was trying this approach before with add/remove_class functions, I wasn't aware of set_class, which is a more convenient function as it takes a boolean argument.

it seems that I can't focus on other widget once I focused on Input for editing and that's why I was trying to avoid this approach.

with your example above, I found out something interesting concerning the focus issue.
here is the example with some additions:

from textual.app import App, ComposeResult
from textual.containers import Container
from textual.binding import Binding
from textual.widgets import Static, Input, Button, Header
from textual.reactive import reactive


class SwapContent(Container):

    DEFAULT_CSS = """
    SwapContent {
        height: 5;
        border: solid red;
        background: #444;
    }

    .hidden {
        display: none;
    }
    """

    allow_edit = reactive(False)

    def compose(self) -> ComposeResult:
        yield Static("This is just some static text", id="text")
        yield Input(placeholder="This is an input field", id="input", classes="hidden")

    def watch_allow_edit(self, allow_edit: bool) -> None:
        self.query_one("#text", Static).set_class(allow_edit, "hidden")
        self.query_one("#input", Input).set_class(not allow_edit, "hidden")
        if allow_edit:
            self.query_one("#input", Input).focus()


class SwapApp(App[None]):

    BINDINGS = [
        ("i", "input", "Input"),
        ("q", "quit", "Quit"),
        Binding("escape", "focus_reset", "Focus", False),
    ]

    def compose(self) -> ComposeResult:
        yield Header()
        yield SwapContent()
        yield Button("Toggle edit", id="toggle")

    def action_input(self):
        swapper = self.query_one(SwapContent)
        swapper.allow_edit = True

    def action_focus_reset(self):
        swapper = self.query_one(SwapContent)
        swapper.allow_edit = False
        # self.query_one(Header).focus()

    def on_button_pressed(self, event: Button.Pressed) -> None:
        if event.button.id == "toggle":
            swapper = self.query_one(SwapContent)
            swapper.allow_edit = not swapper.allow_edit


if __name__ == "__main__":
    SwapApp().run()

pressing i will focus on input and allow me to edit it, pressing ESC will switch back to the static window and allow me to press q to exit the app or i back to editing again.

that's odd because the call of focus on the Header in action_reset_focus is commented out,
whats is even more weird, that if I remove the Button from the SwapApp compose, pressing ESC will no longer exit from input
the focus is stuck on Input. (even with explicit call of focus on Header)

[davep]

I've not tested the above code yet, but I think it's worth pointing out that not every widget can be focused. Header is one such widget.

Widgets that can hold focus include:

• Button
• CheckBox
• DataTable
• Input

And also TreeControl but I'm not linking that as it doesn't have docs yet and a new implementation is coming. I don't know for sure (and will test what happens) but I'd imagine trying to set focus to a control that can't hold focus will be a no-op.

[Riyum]

Yep, that's it, switching to some focusable widget instead of Header will make this work without the button.

I guess that in my example if I remove the button then the app has no longer other focus options and its stuck on input ?

[davep]

Pretty sure that would be the case, yeah.