Text input improvements

sandbox/file_search.py

@@ -0,0 +1,71 @@
+from __future__ import annotations
+
+from pathlib import Path
+from typing import Iterable
+
+from rich.console import RenderableType
+from rich.style import Style
+from rich.table import Table
+from rich.text import Text
+
+from textual.app import App
+from textual.geometry import Size
+from textual.reactive import Reactive
+from textual.widget import Widget
+from textual.widgets.text_input import TextInput, TextWidgetBase
+
+
+def get_files() -> list[Path]:
+    files = list(Path.cwd().iterdir())
+    return files
+
+
+class FileTable(Widget):
+    filter = Reactive("", layout=True)
+
+    def __init__(self, *args, files: Iterable[Path] | None = None, **kwargs):
+        super().__init__(*args, **kwargs)
+        self.files = files if files is not None else []
+
+    @property
+    def filtered_files(self) -> list[Path]:
+        return [
+            file
+            for file in self.files
+            if self.filter == "" or (self.filter and self.filter in file.name)
+        ]
+
+    def get_content_height(self, container: Size, viewport: Size, width: int) -> int:
+        return len(self.filtered_files)
+
+    def render(self, style: Style) -> RenderableType:
+        grid = Table.grid()
+        grid.add_column()
+        for file in self.filtered_files:
+            file_text = Text(f" {file.name}")
+            if self.filter:
+                file_text.highlight_regex(self.filter, "black on yellow")
+            grid.add_row(file_text)
+        return grid
+
+
+class FileSearchApp(App):
+    dark = True
+
+    def on_mount(self) -> None:
+        self.file_table = FileTable(id="file_table", files=list(Path.cwd().iterdir()))
+        self.search_bar = TextInput(placeholder="Search for files...")
+        self.search_bar.focus()
+        self.mount(file_table_wrapper=Widget(self.file_table))
+        self.mount(search_bar=self.search_bar)
+
+    def handle_changed(self, event: TextWidgetBase.Changed) -> None:
+        self.file_table.filter = event.value
+
+
+app = FileSearchApp(
+    log_path="textual.log", css_path="file_search.scss", watch_css=True, log_verbosity=2
+)
+
+if __name__ == "__main__":
+    result = app.run()

sandbox/file_search.scss

@@ -0,0 +1,21 @@
+Screen {
+  layout: dock;
+  docks: top=top bottom=bottom;
+}
+
+#file_table_wrapper {
+  dock: bottom;
+  height: auto;
+  overflow: auto auto;
+  scrollbar-color: $accent-darken-1;
+}
+
+#file_table {
+  height: auto;
+}
+
+#search_bar {
+  dock: bottom;
+  background: $accent;
+  height: 1;
+}

sandbox/input.py

@@ -1,3 +1,7 @@
+from __future__ import annotations
+
+from pathlib import Path
+
 from textual.app import App
 from textual.widget import Widget
 
@@ -12,6 +16,18 @@ def fahrenheit_to_celsius(fahrenheit: float) -> float:
     return (fahrenheit - 32) / 1.8
 
 
+words = set(Path("/usr/share/dict/words").read_text().splitlines())
+
+
+def word_autocompleter(value: str) -> str | None:
+    # An example autocompleter that uses the Unix dictionary to suggest
+    # word completions
+    for word in words:
+        if word.startswith(value):
+            return word
+    return None
+
+
 class InputApp(App[str]):
     def on_mount(self) -> None:
         self.fahrenheit = TextInput(placeholder="Fahrenheit", id="fahrenheit")
@@ -20,7 +36,16 @@ def on_mount(self) -> None:
         text_boxes = Widget(self.fahrenheit, self.celsius)
         self.mount(inputs=text_boxes)
         self.mount(spacer=Widget())
-        self.mount(footer=TextInput(placeholder="Footer Search Bar"))
+        self.mount(
+            top_search=Widget(
+                TextInput(autocompleter=word_autocompleter, id="topsearchbox")
+            )
+        )
+        self.mount(
+            footer=TextInput(
+                placeholder="Footer Search Bar", autocompleter=word_autocompleter
+            )
+        )
         self.mount(text_area=TextArea())
 
     def handle_changed(self, event: TextWidgetBase.Changed) -> None:
@@ -42,4 +67,3 @@ def handle_changed(self, event: TextWidgetBase.Changed) -> None:
 
 if __name__ == "__main__":
     result = app.run()
-    print(repr(result))

sandbox/input.scss

@@ -11,7 +11,7 @@ App {
 Screen {
   layout: dock;
   docks: top=top bottom=bottom;
-  background: $secondary;
+  background: $background;
 }
 
 #fahrenheit {
@@ -37,12 +37,17 @@ Screen {
   dock: bottom;
 }
 
+#top_search {
+  dock: top;
+}
+
+#topsearchbox {
+  width: 10%;
+}
+
 #footer {
+  background: $primary-darken-2;
   dock: bottom;
   height: 1;
   border: ;
 }
-
-#footer :focus {
-  border: heavy $secondary;
-}

src/textual/_text_backend.py

@@ -74,7 +74,7 @@ def cursor_right(self) -> bool:
         return previous_index != new_index
 
     def query_cursor_left(self) -> bool:
-        """Check if the cursor can move 1 character left in the text.
+        """Check if the cursor can move 1 codepoint left in the text.
 
         Returns:
             bool: True if the cursor can move left. False otherwise.
@@ -83,15 +83,21 @@ def query_cursor_left(self) -> bool:
         new_index = max(0, previous_index - 1)
         return previous_index != new_index
 
-    def query_cursor_right(self) -> bool:
+    def query_cursor_right(self) -> str | None:
         """Check if the cursor can move right (we can't move right if we're at the end)
+        and return the codepoint to the right of the cursor if it exists. If it doesn't
+        exist (e.g. we're at the end), then return None
 
         Returns:
-            bool: True if the cursor can move right. False otherwise.
+            str: The codepoint to the right of the cursor if it exists, otherwise None.
         """
         previous_index = self.cursor_index
         new_index = min(len(self.content), previous_index + 1)
-        return previous_index != new_index
+        if new_index == len(self.content):
+            return None
+        elif previous_index != new_index:
+            return self.content[new_index]
+        return None
 
     def cursor_text_start(self) -> bool:
         """Move the cursor to the start of the text
@@ -147,3 +153,7 @@ def get_range(self, start: int, end: int) -> str:
             str: The sliced string between start and end.
         """
         return self.content[start:end]
+
+    @property
+    def cursor_at_end(self):
+        return self.cursor_index == len(self.content)