Getting Bootstrap Modals working with IDOM

[Archmonger]

I was thinking that I probably need to run a JS script on click to modify the modal.

For example, onClick for a div I'd like to run $("#modal-container").modal("show");.

Is it possible to do this without writing a custom JavaScript component?

[Archmonger]

@rmorshea Let me know if this is possible. Currently I'm stuck on getting modal popups to occur.

From my side the simplest solution seems to just be running JS on-demand. The only alternative I know of is porting React Bootstrap to IDOM.

[rmorshea]

Without custom components you're not going to be able to respond to even handlers with a call to some javascript code. The only thing I can think of to help this (and I'm not sure it would allow you to do what you need) would be to create a script parameter which gets evaled on the initial render:

idom.html.button("click me", script="node => { node.onclick = () => console.log('clicked!'); }")

[Archmonger]

The more I develop using IDOM, the more instances I come across where a script=... parameter would significantly simplify things.

For example, without this feature running a simple location.reload() ends up expanding into a whole custom javascript component, which is far too much to accomplish something simple.

[rmorshea]

Also, porting react-bootstrap to a pip installable package would be pretty easy since it already works out of the box:

import idom

bootstrap = idom.web.module_from_template("react", "react-bootstrap")
Button = idom.web.export(bootstrap, "Button")


@idom.component
def App():
    return idom.html.div(
        idom.html.link(
            dict(
                rel="stylesheet",
                href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css",
                integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3",
                crossorigin="anonymous",
            )
        ),
        Button({"variant": "primary"}, "Primary"),
    )


idom.run(App)

[Archmonger]

By default, we really should be throwing an exception if we're trying to idom.web.export something that doesn't exist (resolve_exports=True).

Additionally, an exception needs to be thrown if package doesn't exist on the CDN.

If you agree I'll draft a issue and PR for this.

[Archmonger]

The above example results in TypeError: module_from_template() got an unexpected keyword argument 'exports_default'.

I've confirmed that the function doesn't seem to accept an exports_default param on whatever IDOM version django-idom@main is pinned to.

[Archmonger]

Doing things this way seems to work in all situations except Modal and ModalHeader

# Note: `@react-bootstrap/[email protected]` does not work for any imports. I can't seem to figure out the syntax for version pinning
bootstrap = idom.web.module_from_template("react", "react-bootstrap")
modal = idom.web.export(bootstrap, "Modal") # broken - Export returns empty HTML with no children rendered
modal_dialog = idom.web.export(bootstrap, "ModalDialog")
modal_header = idom.web.export(bootstrap, "ModalHeader") # broken - cannot resolve export
modal_title = idom.web.export(bootstrap, "ModalTitle")
modal_body = idom.web.export(bootstrap, "ModalBody")
modal_footer = idom.web.export(bootstrap, "ModalFooter")

Trying to import modal directly from the Modal package doesn't work either.

bootstrap_modal = idom.web.module_from_template(
    "react", "react-bootstrap/Modal", resolve_exports=True
)
modal = idom.web.export(bootstrap_modal, "Modal") # broken - cannot resolve export

[rmorshea]

Ah, the exports_default argument is in main, but hasn't been released. I'll try to do that shortly.

Sorry I've been slow on this stuff. I've been trying to get the docs in a place where I can merge what I have and finish off the rest later. I think I should be able to do that by the end of next week. Once the docs are in I'll shift back to bug fixes and features.

[Archmonger]

Alright. I will ignore modals while I wait for this release. Will focus on the viewport for now.

[Archmonger]

I'm having similar issues with Bootstrap NavbarToggle

bootstrap = idom.web.module_from_template(
    "react", "react-bootstrap", resolve_exports=True
)
toggler = idom.web.export(bootstrap, "NavbarToggle")

[rmorshea]

This looks like an independent problem where Navbar.Toggle is an attribute of Navbar rather than an explicit export. It shouldn't be too difficult to modify IDOM to make it possible to do export(bootstrap, "Navbar.Toggle"). In short, you'd modify this check to drill down into the module using the dot-separate names rather than just checking to see if it's a direct export. Here's how you'd do that. Let me know if you'd feel comfortable making a PR to this effect.

[Archmonger]

I'll start a PR for this soonish. Most likely in a week or two.

[varun-s22]

hey is this still open?

[Archmonger]

@varun-s22 Yup still open. I never had time to PR it.

See this issue for details #543

[Archmonger]

I've determined a temporary workaround for bootstrap modals.

The Modal.Modal element exports as expected, which creates the modal base. The modal base can be shown/hidden, which is the main functionality I need at the moment.

For now, I'll require developers to manually construct the modal contents, rather than using things like Modal.Navbar, Modal.Content, and Modal.Footer.