html_syntaxes.py

from idom import html


# <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
#   <div class="modal-dialog">
#     <div class="modal-content">
#       <div class="modal-header">
#         <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
#         <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
#       </div>
#       <div class="modal-body">
#         ...
#       </div>
#       <div class="modal-footer">
#         <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
#         <button type="button" class="btn btn-primary">Save changes</button>
#       </div>
#     </div>
#   </div>
# </div>


from idom import html


# --- OLD ---


html.div(
    dict(
        class_name="modal fade",
        id="exampleModal",
        tab_index="-1",
        aria_labeledby="exampleModalLabel",
        aria_hidden="true",
    ),
    html.div(
        dict(class_name="modal-dialog"),
        html.div(
            dict(class_name="modal-content"),
            html.div(
                dict(class_name="modal-header"),
                html.h5(
                    dict(class_name="modal-title", id="exampleModalLabel"),
                    "Modal Title",
                ),
                html.button(
                    dict(
                        type="button",
                        class_name="btn-close",
                        data_bs_dismiss="modal",
                        aria_label="Close",
                    )
                ),
            ),
            html.div(
                dict(class_name="modal-body"),
                ...,
            ),
            html.div(
                dict(
                    class_name="modal-footer",
                ),
                html.button(
                    dict(
                        type="button",
                        class_name="btn btn-secondary",
                        data_bs_dismiss="modal",
                        aria_label="Close",
                    ),
                    "Close",
                ),
                html.button(
                    dict(
                        type="button",
                        class_name="btn btn-primary",
                        data_bs_dismiss="modal",
                    ),
                    "Save Changes",
                ),
            ),
        ),
    ),
)


# --- NEW ---


html.div(
    html.div(
        html.div(
            html.div(
                html.h5(
                    "Modal Title",
                    class_name="modal-title",
                    id="exampleModalLabel",
                ),
                html.button(
                    type="button",
                    class_name="btn-close",
                    data_bs_dismiss="modal",
                    aria_label="Close",
                ),
                class_name="modal-header",
            ),
            html.div(
                ...,
                class_name="modal-body",
            ),
            html.div(
                html.button(
                    "Close",
                    type="button",
                    class_name="btn btn-secondary",
                    data_bs_dismiss="modal",
                    aria_label="Close",
                ),
                html.button(
                    "Save Changes",
                    type="button",
                    class_name="btn btn-primary",
                    data_bs_dismiss="modal",
                ),
                class_name="modal-footer",
            ),
            class_name="modal-content",
        ),
        class_name="modal-dialog",
    ),
    class_name="modal fade",
    id="exampleModal",
    tab_index="-1",
    aria_labeledby="exampleModalLabel",
    aria_hidden="true",
)


# --- BRACKET CHILDREN ---


html.div(
    class_name="modal fade",
    id="exampleModal",
    tab_index="-1",
    aria_labeledby="exampleModalLabel",
    aria_hidden="true",
)[
    html.div(class_name="modal-dialog")[
        html.div(class_name="modal-content")[
            html.div(class_name="modal-header")[
                html.h5(class_name="modal-title", id="exampleModalLabel")[
                    "Modal Title"
                ],
                html.button(
                    type="button",
                    class_name="btn-close",
                    data_bs_dismiss="modal",
                    aria_label="Close",
                ),
            ],
            html.div(class_name="modal-body")[...],
            html.div(class_name="modal-footer")[
                html.button(
                    type="button",
                    class_name="btn btn-secondary",
                    data_bs_dismiss="modal",
                    aria_label="Close",
                )["Close"],
                html.button(
                    type="button",
                    class_name="btn btn-primary",
                    data_bs_dismiss="modal",
                )["Save Changes"],
            ],
        ]
    ]
]


# --- BRACKET ONLY ---


html.div[
    "class_name":"modal fade",
    "id":"exampleModal",
    "tab_index":"-1",
    "aria_labeledby":"exampleModalLabel",
    "aria_hidden":"true",
    html.div[
        "class_name":"modal-dialog",
        html.div[
            "class_name":"modal-content",
            html.div[
                "class_name":"modal-header",
                html.h5[
                    "class_name":"modal-title",
                    "id":"exampleModalLabel",
                    "Modal Title",
                ],
                html.button[
                    "type":"button",
                    "class_name":"btn-close",
                    "data_bs_dismiss":"modal",
                    "aria_label":"Close",
                ],
            ],
            html.div[
                "class_name":"modal-body",
                ...,
            ],
            html.div[
                "class_name":"modal-footer",
                html.button[
                    "type":"button",
                    "class_name":"btn btn-secondary",
                    "data_bs_dismiss":"modal",
                    "aria_label":"Close",
                    "Close",
                ],
                html.button[
                    "type":"button",
                    "class_name":"btn btn-primary",
                    "data_bs_dismiss":"modal",
                    "Save Changes",
                ],
            ],
        ],
    ],
]


# --- CONTEXT MANAGERS ---


with html.div(
    class_name="modal fade",
    id="exampleModal",
    tab_index="-1",
    aria_labeledby="exampleModalLabel",
    aria_hidden="true",
):
    with html.div(class_name="modal-dialog"):
        with html.div(class_name="modal-content"):
            with html.div(class_name="modal-header"):
                html.h5(
                    "Modal Title",
                    class_name="modal-title",
                    id="exampleModalLabel",
                )
                html.button(
                    type="button",
                    class_name="btn-close",
                    data_bs_dismiss="modal",
                    aria_label="Close",
                )

            with html.div(class_name="modal-body"):
                html._(...)

            with html.div(class_name="modal-footer"):
                html.button(
                    "Close",
                    type="button",
                    class_name="btn btn-secondary",
                    data_bs_dismiss="modal",
                    aria_label="Close",
                )
                html.button(
                    "Save Changes",
                    type="button",
                    class_name="btn btn-primary",
                    data_bs_dismiss="modal",
                )


# --- CHIDLREN KEYWORD ---

html.div(
    class_name="modal fade",
    id="exampleModal",
    tab_index="-1",
    aria_labeledby="exampleModalLabel",
    aria_hidden="true",
    children=html.div(
        class_name="modal-dialog",
        children=html.div(
            class_name="modal-content",
            children=(
                html.div(
                    class_name="modal-header",
                    children=(
                        html.h5(
                            class_name="modal-title",
                            id="exampleModalLabel",
                            children="Modal Title",
                        ),
                        html.button(
                            type="button",
                            class_name="btn-close",
                            data_bs_dismiss="modal",
                            aria_label="Close",
                        ),
                    ),
                ),
                html.div(
                    class_name="modal-body",
                    children=...,
                ),
                html.div(
                    class_name="modal-footer",
                    children=(
                        html.button(
                            type="button",
                            class_name="btn btn-secondary",
                            data_bs_dismiss="modal",
                            aria_label="Close",
                            children="Close",
                        ),
                        html.button(
                            type="button",
                            class_name="btn btn-primary",
                            data_bs_dismiss="modal",
                            children="Save Changes",
                        ),
                    ),
                ),
            ),
        ),
    ),
)