Customized DataTable edit on cell region

[Yurii-huang]

from textual import on
from textual.app import App, ComposeResult
from textual.events import Blur
from textual.widgets import DataTable, OptionList, Input
from textual.widgets.data_table import CellKey, CellType
from textual.reactive import var
from textual.events import Blur
from textual.screen import Screen
from textual.coordinate import Coordinate
from rich.region import Region

ROWS = [
    ("lane", "swimmer", "country", "time"),
    ("4", "Joseph Schooling", "Singapore", "50.39"),
    ("2", "Michael Phelps", "United States", "51.14"),
    ("5", "Chad le Clos", "South Africa", "51.14"),
    ("6", "László Cseh", "Hungary", "51.14"),
    ("3", "Li Zhuhao", "China", "51.26"),
    ("8", "Mehdy Metella", "France", "51.58"),
    ("7", "Tom Shields", "United States", "51.73"),
    ("1", "Aleksandr Sadovnikov", "Russia", "51.84"),
    ("10", "Darren Burns", "Scotland", "51.84"),
]

class DataEditor(Input):
    Input.DEFAULT_CSS = """
    Input{
        border: none;
        min-width: 15;
        width: auto;
        height: 1;
        background: green;       
    }
    SingleLineInput:focus {
        border: none;
    }
    Input>.input--cursor {
        background: $surface;
        color: $text;
        width: 1;
        text-style: reverse;
    }
    """
    
    def compose(self):
        self.event:DataTable.CellSelected
        return super().compose()
    
    @on(Blur)
    def on_blur(self, event:Blur) -> None:
        validation_result = (
            self.validate(self.value) if "submitted" in self.validate_on else None
        )
        self.post_message(DataEditor.Submitted(self, self.value, validation_result))

class DataView(DataTable):

    DEFAULT_CSS ="""
    DataView > DataEditor {
        width: 1fr;
        display: none;
        height: auto;
        max-height: 12;
        overlay: screen;
        constrain: y;
    }

    Select.-expanded > SelectOverlay {
        display: block;
    }
    """
    expanded: var[bool] = var(False, init=False)

    BINDINGS = [("enter", "select_cursor")]

    def compose(self):
        yield DataEditor()
    
    @on(DataEditor.Submitted)
    def _on_editor_submitted(self, event:DataEditor.Submitted):
        editor = self.query_one(DataEditor)
        data_table = editor.event.data_table
        data_table.focus()
        data_table.update_cell_at(editor.event.coordinate,
                                  editor.value,
                                  update_width=True)
        editor.display = "none"
    
    @on(DataTable.CellSelected)
    def _on_cell_selected(self, event:DataTable.CellSelected):
        editor = self.query_one(DataEditor)
        editor.value = str(event.value)
        editor.display = "block"
        editor.event = event
        region:Region = self._get_cell_region(event.coordinate)
        editor.styles.offset = (region.x, region.y)
        editor.styles.max_height = region.height
        editor.styles.max_width = region.width
        self.mount(editor)
        editor.focus()

class TableApp(App):
    def __init__(self):
        super().__init__()
        self.table = DataView(id="DataTable")
        self.table.add_columns(*ROWS[0])
        self.table.add_rows(ROWS[1:])
    def on_mount(self) -> None:
        self.mount(self.table)

if __name__ == "__main__":
    app = TableApp()
    app.run()