-
-
Notifications
You must be signed in to change notification settings - Fork 328
Getting Bootstrap Modals working with IDOM #526
-
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?
Beta Was this translation helpful? Give feedback.
All reactions
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!'); }")
Replies: 5 comments 12 replies
-
@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.
Beta Was this translation helpful? Give feedback.
All reactions
-
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!'); }")
Beta Was this translation helpful? Give feedback.
All reactions
-
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.
Beta Was this translation helpful? Give feedback.
All reactions
-
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/bootstrap@5.1.3/dist/css/bootstrap.min.css", integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3", crossorigin="anonymous", ) ), Button({"variant": "primary"}, "Primary"), ) idom.run(App)
Beta Was this translation helpful? Give feedback.
All reactions
-
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.
Beta Was this translation helpful? Give feedback.
All reactions
-
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.
Beta Was this translation helpful? Give feedback.
All reactions
-
Doing things this way seems to work in all situations except Modal and ModalHeader
# Note: `@react-bootstrap/bootstrap@5.1.3` 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
Beta Was this translation helpful? Give feedback.
All reactions
-
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.
Beta Was this translation helpful? Give feedback.
All reactions
-
Alright. I will ignore modals while I wait for this release. Will focus on the viewport for now.
Beta Was this translation helpful? Give feedback.
All reactions
-
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")
Beta Was this translation helpful? Give feedback.
All reactions
-
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.
Beta Was this translation helpful? Give feedback.
All reactions
-
I'll start a PR for this soonish. Most likely in a week or two.
Beta Was this translation helpful? Give feedback.
All reactions
-
hey is this still open?
Beta Was this translation helpful? Give feedback.
All reactions
-
@varun-s22 Yup still open. I never had time to PR it.
See this issue for details #543
Beta Was this translation helpful? Give feedback.
All reactions
-
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.
Beta Was this translation helpful? Give feedback.