feat(Dialog): use MDC Foundation with Dialogs

[aeon0]

To get used to new "foundation way" I tried to convert the Dialog component. I am not sure if a missed some (or a lot).
If I missed too much it's not a problem if we close the PR and you do the conversion which might be faster in that case! At worst it was a good exercise for me ; )

[jamesmfriedman]

Thanks for this! I’ll take a look tonight.

[jamesmfriedman]

Instead I using componentWillRecieveProps, checkout how I’ve been using syncWithProps on the Slider and IconToggle.

Just looking on my phone at the moment so I can’t validate but this is the general gist of it.

This creates a react component Class that is quite literally merged with the vanilla js class from mdc so any and all functionality that exists on it is inherited. The trick is to see what the vanilla js class is already doing and work with it or around it.

[aeon0]

Changed it to syncWithProps.

Some other issues I am having:

1. How do I add custom events? With the current code changes, the onClose is not working anymore since close it is not a native MDC event such as accept and cancel. But I think it is important we add the event for backwards compatibility and convince.

2. On componentDidMount() I have to copy the code that is being used in the initialize() method of the vanilla js class. Doesn't seem nice to me, as you mentioned we only want to work around the vanilla implementation if we need to. But I couldn't figure out how to access the initialize method...

[jamesmfriedman]

@j-o-d-o Check out MDC 34 branch and #179. I just implemented the Select component with foundation. A few relevant things that I came across:

• I wasn't calling the "initialize" method from Foundation before. I've added that back, so you shouldn't have to replicate the initialize method.
• syncWithProps is really just a React sensible replacement for initialSyncWithDom. Basically, we need to do the same kind of things initialSyncWithDom does, but base it off of our props. It's not exactly the same as their method, but looking at theirs is a good place to start. Theirs never actually gets called in RMWC.
• Basically, you have to look through the vanilla JS implementation, and do the minimal number of modifications to the adapter or built in methods to get the result you want.

[aeon0]

Alright, sounds and looks good. I will merge this branch into the mdc34.

I am still not 100% sure how to add custom RMWC events that are not included in the MDC adapter, but I will fiddle around some tonight.

[jamesmfriedman]

@j-o-d-o sorry, not trying to steal your thunder but I thought being able to show you how close you were would help. See this commit 3a072b2.

Granted, things are still a bit in flux, I added a tad bit of functionality to the MDCFoundation class for this, but you get the gist. Controlling updating props (in this case the open prop), and patching the foundation adapters that need to be changed. Here I just grabbed the two event methods, duplicated them and added the onClose handler in there.

[jamesmfriedman]

Also, thank you so much for answering peoples questions on issues! It's a massive help.

[aeon0]

Ah okay, no worries ;) Implementation looks good and makes sense.

Always glad to help!