[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.

[Jamo]

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?

*...\containers\selection-panel.tsx*
*Add import for showModalUrl*



*Add openDocumentUrlInModal to ISelectionPanelContainerDispatch*

*Add openDocumentUrlInModal to mapDispatchToProps (Bit of fumbling around
here to realize I needed to define the additional modal properties)*

*Add fnOpenDocumentUrlInModal and private onOpenDocumentUrlInModal to
SelectionPanelContainer
and add ?entryPoint?
onOpenDocumentUrlInModal={this.fnOpenDocumentUrlInModal} function to the
selectionPanel element *


*...\components\selection-panel.tsx*
*Add onOpenDocumentUrlInModal to the interface ISelectionPanelProps*

*Add openDocumentUrlInModal function to SelectionPanel*


*Add the new openDocumentUrlInModal to the returned property /value mapping
where required*







-----
MapGuide Maestro 6.0.0.8587
MapGuide Opensource 3.0.0.8701
Fusion, PHP, Apache
Windows 7 Pro SP1

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