Merge pull request #7 from davep/multiple-playgrounds

✨ Add support for multiple playgrounds in the sandbox

Author: davep

textual_query_sandbox/__init__.py

@@ -7,7 +7,7 @@
 __credits__ = ["Dave Pearson"]
 __maintainer__ = "Dave Pearson"
 __email__ = "[email protected]"
-__version__ = "0.3.0"
+__version__ = "0.4.0"
 __licence__ = "GPLv3+"
 
 ### __init__.py ends here

textual_query_sandbox/sandbox.py

@@ -2,11 +2,15 @@
 
 from __future__ import annotations
 
+from itertools import cycle
+
 from textual import on
 from textual.app import App, ComposeResult
+from textual.binding import Binding
 from textual.containers import Horizontal, Vertical, VerticalScroll
+from textual.message import Message
 from textual.widget import Widget
-from textual.widgets import Button, Input, Pretty, Static
+from textual.widgets import Button, Input, Pretty, Static, TabbedContent, TabPane, Label
 
 
 class Playground(Vertical, inherit_css=False):
@@ -43,6 +47,58 @@ def title(widget: Widget, main_title: str | None = None) -> Widget:
     return widget
 
 
+class NestedContainers(Playground):
+    """A Playground made of nested containers."""
+
+    def compose(self) -> ComposeResult:
+        """Compose the playground."""
+        with title(Vertical(id="one", classes="foo bar")):
+            with title(Vertical(id="two")):
+                with title(Horizontal(id="three", classes="baz")):
+                    for n in range(3):
+                        yield title(
+                            Vertical(id=f"three-{n}", classes=f"wibble wobble-{n}")
+                        )
+                with title(Vertical(id="four")):
+                    yield title(Vertical(id="innermost", classes="foo baz"))
+
+
+class VariousWidgets(Playground):
+    """A playground made of some widgets."""
+
+    DEFAULT_CSS = """
+    VariousWidgets Label{
+        width: 1fr;
+    }
+    """
+
+    def compose(self) -> ComposeResult:
+        """Compose the playground."""
+        with title(Horizontal()):
+            classes = cycle(("foo", "bar"))
+            with title(Vertical(id="input-widgets")):
+                for n in range(5):
+                    yield title(
+                        Input(
+                            placeholder=f"Example input {n}",
+                            id=f"input-{n}",
+                            classes=next(classes),
+                        )
+                    )
+            with title(Vertical(id="static-and-labels")):
+                for n in range(3):
+                    yield title(
+                        Static(
+                            "Can you find me?", id=f"static-{n}", classes=next(classes)
+                        )
+                    )
+                    yield title(
+                        Label(
+                            "Can you find me?", id=f"label-{n}", classes=next(classes)
+                        )
+                    )
+
+
 class QuerySandboxApp(App[None]):
     """A Textual CSS query sandbox application."""
 
@@ -55,12 +111,16 @@ class QuerySandboxApp(App[None]):
         height: 4;
     }
 
+    TabbedContent {
+        height: 2fr;
+    }
+
     Playground * {
         margin: 1;
         border: panel red 40%;
     }
 
-    .hit {
+    Playground .hit {
         border: panel green;
         background: green 10%;
     }
@@ -76,6 +136,10 @@ class QuerySandboxApp(App[None]):
         border: panel cornflowerblue;
     }
 
+    #output {
+        height: 1fr;
+    }
+
     #results {
         width: 3fr;
     }
@@ -85,44 +149,67 @@ class QuerySandboxApp(App[None]):
     }
     """
 
+    BINDINGS = [
+        Binding("f1", "playground('tab-1')", "Nested Containers"),
+        Binding("f2", "playground('tab-2')", "Various Widgets"),
+    ]
+
     def compose(self) -> ComposeResult:
         """Compose the DOM for the application."""
         with Horizontal(id="input"):
             yield Input()
             yield Button("Query")
-        with Playground():
-            with title(Vertical(id="one", classes="foo bar")):
-                with title(Vertical(id="two")):
-                    with title(Horizontal(id="three", classes="baz")):
-                        for n in range(3):
-                            yield title(
-                                Vertical(id=f"three-{n}", classes=f"wibble wobble-{n}")
-                            )
-                    with title(Vertical(id="four")):
-                        yield title(Vertical(id="innermost", classes="foo baz"))
-        with Horizontal():
+        with TabbedContent():
+            with TabPane("Nested Containers (F1)"):
+                yield NestedContainers()
+            with TabPane("Various Widgets (F2)"):
+                yield VariousWidgets()
+        with Horizontal(id="output"):
             with title(VerticalScroll(id="results"), "Query Results"):
                 yield Pretty([])
             with title(VerticalScroll(id="tree"), "Playground DOM Tree"):
                 yield Static("")
 
-    def on_mount(self) -> None:
-        self.query_one("#tree > Static", Static).update(self.query_one(Playground).tree)
+    @property
+    def input(self) -> Input:
+        """The main input widget."""
+        return self.query_one("#input Input", Input)
+
+    @property
+    def playground(self) -> Playground:
+        """The current playground widget."""
+        return self.query_one(
+            f"TabPane#{self.query_one(TabbedContent).active} Playground", Playground
+        )
 
     @on(Input.Submitted)
     @on(Button.Pressed)
-    def do_query(self) -> None:
+    @on(TabbedContent.TabActivated)
+    def do_query(self, event: Message | None = None) -> None:
         """Perform the query and show the result."""
         self.query("Playground *").remove_class("hit")
         result: list[Widget] | Exception
         try:
-            hits = self.query_one(Playground).query(self.query_one(Input).value)
+            hits = self.playground.query(self.input.value)
             hits.add_class("hit")
             result = list(hits)
         except Exception as error:  # pylint:disable=broad-exception-caught
             result = error
         self.query_one("#results > Pretty", Pretty).update(result)
-        self.query_one(Input).focus()
+        self.query_one("#tree > Static", Static).update(
+            self.playground.children[0].tree
+        )
+        if not isinstance(event, TabbedContent.TabActivated):
+            self.input.focus()
+
+    def action_playground(self, playground: str) -> None:
+        """Switch between different playgrounds.
+
+        Args:
+            playground: The playground to switch to.
+        """
+        self.query_one(TabbedContent).active = playground
+        self.do_query()
 
 
 ### sandbox.py ends here