oegedijk / dash_oop_components Goto Github PK

from dash_oop_components import DashComponent
import dash_bootstrap_components as dbc
import dash_html_components as html
import dash


class CollapsibleTableRow(DashComponent):
    component_to_collapse: DashComponent
    collapse_button_id: str
    collapse_id: str

    def __init__(self, component_to_collapse: DashComponent, name):
        super().__init__()
        self.name = name
        self.component_to_collapse = component_to_collapse.layout()
        self.collapse_id = 'collapse' + self.name
        self.collapse_button_id = 'collapse_button' + self.name
        self.collapse_button = self.make_collapse_button()
        self.collapse = self.make_collapse()

    def make_collapse(self):
        collapse = html.Div(
            [
                dbc.Collapse(
                    children=[
                        self.component_to_collapse
                    ],
                    id=self.collapse_id,
                    is_open=False)
            ]
        )
        return collapse

    def make_collapse_button(self):
        button = dbc.Button(
            "Expand",
            id=self.collapse_button_id,
            className="mb-3",
            color="primary",
        )
        return button

    def layout(self):
        row = html.Tr([html.Td(self.collapse_button),
                       html.Td([self.collapse])])

        return row

    def component_callbacks(self, app):
        # this function is used to toggle the is_open property of each Collapse
        @app.callback(
            self.Output(self.collapse_id, "is_open"),
            [self.Input(self.collapse_button_id, "n_clicks")],
            [self.State(self.collapse_id, "is_open")]
        )
        def toggle_collapse(n, is_open):
            if n:
                return not is_open
            return is_open


class ComponentForCollapse(DashComponent):

    def __init__(self, name=None):
        super().__init__()
        self.name = name

    def layout(self):
        return html.Div(html.H2('Element'))


class TestComposite(DashComponent):

    def __init__(self):
        super().__init__()
        self.rows = []
        for i in range(2):
            self.rows.append(CollapsibleTableRow(component_to_collapse=ComponentForCollapse(),
                                                 name='row{0}'.format(i)).layout())

    def layout(self, params=None):
        return html.Div(self.rows)


summary_table = TestComposite()
sapp = dash.Dash()

sapp.layout = summary_table.layout()
summary_table.register_callbacks(sapp)
summary_table.register_components()
sapp.run_server()