feat(TransitionablePortal): add component

[layershifter]

Why?

• Modal requires the page Dimmer
• Page Dimmer requires transitions, but it uses Portal
• Portal unmounts components when closes

Solution

We need to simply wrap Portal into the new components that respects Transition's callbacks.

But, we can use Portal?

Portal is already complicated, this will be overhang for it as callback handling is quite complex.

[layershifter]

@levithomason It's ready for initial review.

Naming

I'm not sure that I chose the best name for the component, too many characters as I think.

Behaviour

I have trouble with onClose handling, the try to click multiple on Button in docs and you will undertand troubles :)

---

I also need to add more tests after initial review.

[codecov-io]

Codecov Report

Merging #2155 into master will increase coverage by <.01%.
The diff coverage is 100%.

@@            Coverage Diff             @@
##           master    #2155      +/-   ##
==========================================
+ Coverage   99.73%   99.73%   +<.01%     
==========================================
  Files         151      152       +1     
  Lines        2621     2651      +30     
==========================================
+ Hits         2614     2644      +30     
  Misses          7        7

Impacted Files	Coverage Δ
...ddons/TransitionablePortal/TransitionablePortal.js	100% <100%> (ø)

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 4d28298...1b11690. Read the comment docs.

[levithomason]

OK, thanks. Skimming through PRs/Issues right now trying to get a release out. I will come back to this one as it seems like it needs more attention than I have at the moment.

[levithomason]

Reviewing and testing...

[levithomason]

This component does not extend ACC, is this still valid?

[levithomason]

Resolved, see my next...

[levithomason]

This component does not extend ACC, is this still valid?

[levithomason]

Oh, I see. This is referring to the underlying Portal which extends ACC.

[levithomason]

My first thought was just to add an unmountOnClose prop to the Portal, however, leaving lots of Portal components mounted to the DOM doesn't sound like a good idea. Also, we do want to unmount them, just not until the Transition is done.

Your solution seems like a sane approach to this problem for now.

Name

It's great. I'd rather have it verbose and clear than short. Perhaps since we have Transition and Portal, we just call it PortalTransition?

Behavior

Ah, this is tricky. Clicking the trigger immediately calls onClose/onOpen, because those callbacks are triggered from the Portal props. However, the PortalTransition is not truly closed until the transition has completed. Therefore, the authoritative callback for "opened" is onOpen from the Portal and the authoritative callback for "closed" is onHide from the Transition.

Changing the example from onClose to onHide resolves the issue. The button state also waits for the Transition before changing. This is correct and prevents entering an invalid mix of states.

Suggest Fix

We probably shouldn't expose the onOpen and onClose callbacks at all. Just use onStart and onHide. These are called at the actual time the state changes.

[layershifter]

@levithomason I've made changes, thanks for your suggestions. Ready for review

[levithomason]

Released in semantic-ui-react@0.76.0