Create a modal dialog from the selection panel

Create a modal dialog from the selection panel

Jackie I'm porting over some of my selection panel customization to the new react based programming language I've managed to set it up find when a property of a certain value is hit and change it to a href or show an image or interpret the data accordingly ....

I'm struggling with showing a modal dialog similar to the help / about dialogs that appear..

Currently the modal I'm creating is bounded by the selection panel .... I see a ModalLauncher container but I don't know how to use it.....

Ideally I'm trying to create a ImageModal or something that shows an image in the selection panel then when the user clicks it it opens a modal in the center of the map area showing the image in question.

I've used an existing tsx file and fiddled with it a little to get the bones working.

Re: Create a modal dialog from the selection panel

You were getting warm with ModalLauncher, but obviously the lack of documentation about this class obviously didn't help you in understanding what it does, so allow me to explain.

An easy way to understand what ModalLauncher does, is to imagine it as an (application-level) invisible "frame" that you can run InvokeURL commands into. Each URL you run in this ModalLauncher, it will spawn a modal dialog for it.

So how you do open URLs with the ModalLauncher? By dispatching any of the following actions under (src/actions/modal.ts):

- showModalComponent
- showModalUrl
- hideModal

These action methods push their respective arguments (name, url, postition, size, etc) to the "modal" branch (src/reducers/modal.ts) of the redux application state. The ModalLauncher is set to listen to changes on this branch and will show/hide modal dialogs based on the modal actions you dispatch.

Which brings to the next question of how you dispatch these actions.

Before I start, it may help to read up on this very informative article about container/presentational (aka. smart/dumb) components:

The way the mapguide-react-layout component source is laid out follows the same smart/dumb delineation:

- "smart" components are under src/containers
- "dumb" components are under src/components
- Viewer layout template components are "smart" components, but are unique enough that they reside in src/layouts

To dispatch an action, you need to be dispatching from a "smart" component. A "smart" component is decorated by the redux connect() function that is passed 2 functions into it.

- mapStateToProps: A function that is given the whole redux application state and selectively returns portions of the application state the component is interested in listening for changes
- mapDispatchToProps: A function that is given the redux action dispatcher (this is the thing you use to dispatch any of the actions we define under src/actions), and returns an object with functions that dispatch your desired actions.

So to bring this all together.

Your image-modal.tsx? Probably don't need it.

Your selection-panel.tsx? Unfortunately, I can't tell whether you are modifying the "smart" one (src/containers/selection-panel.tsx) or the "dumb" one (src/containers/selection-panel.tsx). Regardless, this is what you need to do.

In the "smart" selection-panel, there should already be a mapDispatchToProps() function there that returns a Partial<ISelectionPanelContainerDispatch>. You'll need to modify the interface to include a function that opens image URLs.

Now at this point, if your selection-panel modifications were in the "smart" one, your link click handler just needs to to call the newly mapped openImageInModal() function to launch the computed image URL in a modal dialog.

If the modifications were in a "dumb" one, you'll need an extra step of defining an onOpenImageInModal in the "dumb" component props interface, your link click handlers should then be calling this onOpenImageInModal function. Your "smart" component that wraps the "dumb" one would then provide a handler for onOpenImageInModal, to call the openImageInModal() function to dispatch the open modal action with your desired image URL.

Re: Create a modal dialog from the selection panel

Jackie,

Thanks for the info pointed me in the right direction !!!

I've managed to get the dialog to pop up as intended the changes we're in fact on the dumb side of the selection-panel(component) as I check the property name before making any changes on how to display the property ....

There's a few things I can't quiet figure out .... how can I inject html instead of just opening the image in an iframe (this would give me control over the size of the image and or how to display the value content if it was something else) ...

Just wanted to put my changes here for anyone else that was interested, these are obviously specific to my needs but perhaps there's a smarter way of extending the selectionpanel properties?