[mapguide-users] Create a modal dialog from the selection panel

[Jackie Ng]

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:

https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0

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.

src/containers/selection-panel.tsx
>>>

export interface ISelectionPanelContainerDispatch {
    ...
    openImageInModal: (src: string) => void;
}

<<<

Then you have to modify mapDispatchToProps() to map this method to
dispatching an "open modal" action

src/containers/selection-panel.tsx
>>>

import { showModalUrl } from "../actions/modal";

...

function mapDispatchToProps(dispatch: ReduxDispatch):
Partial<ISelectionPanelContainerDispatch> {
    return {
        ...
        openImageInModal: (src) => dispatch(showModalUrl({ url: src, name:
"ImageModal" }))
    };
}

<<<

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.

Hope that helps (and what I said makes sense).

- Jackie




--
View this message in context: http://osgeo-org.1560.x6.nabble.com/Create-a-modal-dialog-from-the-selection-panel-tp5329560p5329863.html
Sent from the MapGuide Users mailing list archive at Nabble.com.