chore(TransitionablePortal): remove usage of UNSAFE_* methods (#3966)

* chore(TransitionablePortal): remove usage of UNSAFE_* methods

* make behavior acc

* fix remaining issue

* remove only

Author: layershifter

src/addons/TransitionablePortal/TransitionablePortal.js

@@ -64,23 +64,28 @@ export default class TransitionablePortal extends Component {
     },
   }
 
-  constructor(props) {
-    super(props)
-
-    this.state = {
-      portalOpen: props.open,
-    }
-  }
+  state = {}
 
   // ----------------------------------------
   // Lifecycle
   // ----------------------------------------
 
-  // eslint-disable-next-line camelcase
-  UNSAFE_componentWillReceiveProps({ open }) {
-    debug('componentWillReceiveProps()', { open })
+  static getDerivedStateFromProps(props, state) {
+    // This is definitely a hack :(
+    //
+    // It's coupled with handlePortalClose() for force set the state of `portalOpen` omitting
+    // props.open. It's related to implementation of the component itself as `onClose()` will be
+    // called after a transition will end.
+    // https://github.com/Semantic-Org/Semantic-UI-React/issues/2382
+    if (state.portalOpen === -1) {
+      return { portalOpen: false }
+    }
 
-    this.setState({ portalOpen: open })
+    if (_.isUndefined(props.open)) {
+      return null
+    }
+
+    return { portalOpen: props.open }
   }
 
   // ----------------------------------------
@@ -90,7 +95,7 @@ export default class TransitionablePortal extends Component {
   handlePortalClose = () => {
     debug('handlePortalClose()')
 
-    this.setState({ portalOpen: false })
+    this.setState({ portalOpen: -1 })
   }
 
   handlePortalOpen = () => {
@@ -129,7 +134,7 @@ export default class TransitionablePortal extends Component {
 
   render() {
     debug('render()', this.state)
-
+    // console.log('render', this.state)
     const { children, transition } = this.props
     const { portalOpen, transitionVisible } = this.state
 

test/specs/addons/TransitionablePortal/TransitionablePortal-test.js

@@ -43,7 +43,7 @@ describe('TransitionablePortal', () => {
     })
   })
 
-  describe('componentWillReceiveProps', () => {
+  describe('getDerivedStateFromProps', () => {
     it('passes `open` prop to `portalOpen` when defined', () => {
       wrapperMount(<TransitionablePortal {...requiredProps} />)
 
@@ -64,13 +64,13 @@ describe('TransitionablePortal', () => {
   describe('onClose', () => {
     it('is called with (null, data) when Portal closes', (done) => {
       const onClose = sandbox.spy()
-      const trigger = <button />
+
       wrapperMount(
         <TransitionablePortal
           {...requiredProps}
           onClose={onClose}
           transition={quickTransition}
-          trigger={trigger}
+          trigger={<button />}
         />,
       )
 
@@ -84,9 +84,12 @@ describe('TransitionablePortal', () => {
     })
 
     it('changes `portalOpen` to false', () => {
-      const trigger = <button />
       wrapperMount(
-        <TransitionablePortal {...requiredProps} transition={quickTransition} trigger={trigger} />,
+        <TransitionablePortal
+          {...requiredProps}
+          transition={quickTransition}
+          trigger={<button />}
+        />,
       )
 
       wrapper.find('button').simulate('click')
@@ -125,19 +128,16 @@ describe('TransitionablePortal', () => {
   describe('onOpen', () => {
     it('is called with (null, data) when Portal opens', () => {
       const onOpen = sandbox.spy()
-      const trigger = <button />
 
-      wrapperMount(<TransitionablePortal {...requiredProps} onOpen={onOpen} trigger={trigger} />)
-        .find('button')
-        .simulate('click')
+      wrapperMount(<TransitionablePortal {...requiredProps} onOpen={onOpen} trigger={<button />} />)
+      wrapper.find('button').simulate('click')
 
       onOpen.should.have.been.calledOnce()
       onOpen.should.have.been.calledWithMatch(null, { portalOpen: true })
     })
 
     it('changes `portalOpen` to true', () => {
-      const trigger = <button />
-      wrapperMount(<TransitionablePortal {...requiredProps} trigger={trigger} />)
+      wrapperMount(<TransitionablePortal {...requiredProps} trigger={<button />} />)
 
       wrapper.find('button').simulate('click')
       wrapper.should.have.state('portalOpen', true)
@@ -148,6 +148,7 @@ describe('TransitionablePortal', () => {
     it('does not block update of state on Portal close', () => {
       wrapperMount(<TransitionablePortal {...requiredProps} open />)
       wrapper.should.have.state('portalOpen', true)
+      wrapper.update()
 
       domEvent.click(document.body)
       wrapper.should.have.state('portalOpen', false)