transition

Author: Sasha Kondrashov

src/addons/TransitionablePortal/TransitionablePortal.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react'
 
-import { TransitionEventData, TransitionProps } from '../../modules/Transition/Transition'
+import { TransitionProps, TRANSITION_STATUSES } from '../../modules/Transition/Transition'
 import { PortalProps } from '../Portal/Portal'
 
 export interface TransitionablePortalProps extends StrictTransitionablePortalProps {
@@ -15,33 +15,37 @@ export interface StrictTransitionablePortalProps {
    * Called when a close event happens.
    *
    * @param {SyntheticEvent} event - React's original SyntheticEvent.
-   * @param {object} data - All props and internal state.
+   * @param {object} props - All props.
+   * @param {object} state - Internal state.
    */
-  onClose?: (nothing: null, data: PortalProps & TransitionablePortalState) => void
+  onClose?: (nothing: null, props: PortalProps, state: TransitionablePortalState) => void
 
   /**
    * Callback on each transition that changes visibility to hidden.
    *
    * @param {null}
-   * @param {object} data - All props with status.
+   * @param {object} props - All props.
+   * @param {object} state - Internal state.
    */
-  onHide?: (nothing: null, data: TransitionEventData & TransitionablePortalState) => void
+  onHide?: (nothing: null, props: TransitionProps, state: TransitionablePortalState) => void
 
   /**
    * Called when an open event happens.
    *
    * @param {SyntheticEvent} event - React's original SyntheticEvent.
-   * @param {object} data - All props and internal state.
+   * @param {object} props - All props.
+   * @param {object} state - Internal state.
    */
-  onOpen?: (nothing: null, data: PortalProps & TransitionablePortalState) => void
+  onOpen?: (nothing: null, props: PortalProps, state: TransitionablePortalState) => void
 
   /**
    * Callback on animation start.
    *
    * @param {null}
-   * @param {object} data - All props with status.
+   * @param {object} props - All props.
+   * @param {object} state - Internal state.
    */
-  onStart?: (nothing: null, data: TransitionEventData & TransitionablePortalState) => void
+  onStart?: (nothing: null, props: TransitionProps, state: TransitionablePortalState) => void
 
   /** Controls whether or not the portal is displayed. */
   open?: boolean
@@ -51,6 +55,7 @@ export interface StrictTransitionablePortalProps {
 }
 
 export interface TransitionablePortalState {
+  transitionStatus: TRANSITION_STATUSES
   portalOpen: boolean
   transitionVisible: boolean
 }

src/addons/TransitionablePortal/TransitionablePortal.js

@@ -74,21 +74,28 @@ function TransitionablePortal(props) {
     setPortalOpen(true)
   }
 
-  const handleTransitionHide = (nothing, data) => {
+  const handleTransitionHide = (nothing, data, status) => {
     debug('handleTransitionHide()')
 
     setTransitionVisible(false)
-    _.invoke(props, 'onClose', null, { ...data, portalOpen: false, transitionVisible: false })
-    _.invoke(props, 'onHide', null, { ...data, portalOpen, transitionVisible: false })
+    _.invoke(props, 'onClose', null, data, {
+      transitionStatus: status,
+      portalOpen: false,
+      transitionVisible: false,
+    })
+    _.invoke(props, 'onHide', null, data, {
+      transitionStatus: status,
+      portalOpen,
+      transitionVisible: false,
+    })
   }
 
-  const handleTransitionStart = (nothing, data) => {
+  const handleTransitionStart = (nothing, data, status) => {
     debug('handleTransitionStart()')
-    const { status } = data
     const nextTransitionVisible = status === TRANSITION_STATUS_ENTERING
 
-    _.invoke(props, 'onStart', null, {
-      ...data,
+    _.invoke(props, 'onStart', null, data, {
+      transitionStatus: status,
       portalOpen,
       transitionVisible: nextTransitionVisible,
     })
@@ -99,8 +106,8 @@ function TransitionablePortal(props) {
     }
 
     setTransitionVisible(nextTransitionVisible)
-    _.invoke(props, 'onOpen', null, {
-      ...data,
+    _.invoke(props, 'onOpen', null, data, {
+      transitionStatus: status,
       transitionVisible: nextTransitionVisible,
       portalOpen: true,
     })

src/modules/Transition/Transition.d.ts

@@ -32,33 +32,37 @@ export interface StrictTransitionProps {
    * Callback on each transition that changes visibility to shown.
    *
    * @param {null}
-   * @param {object} data - All props with status.
+   * @param {object} props - All props.
+   * @param {TRANSITION_STATUSES} status - Transition status.
    */
-  onComplete?: (nothing: null, data: TransitionEventData) => void
+  onComplete?: (nothing: null, props: TransitionProps, status: TRANSITION_STATUSES) => void
 
   /**
    * Callback on each transition that changes visibility to hidden.
    *
    * @param {null}
-   * @param {object} data - All props with status.
+   * @param {object} props - All props.
+   * @param {TRANSITION_STATUSES} status - Transition status.
    */
-  onHide?: (nothing: null, data: TransitionEventData) => void
+  onHide?: (nothing: null, props: TransitionProps, status: TRANSITION_STATUSES) => void
 
   /**
    * Callback on each transition that changes visibility to shown.
    *
    * @param {null}
-   * @param {object} data - All props with status.
+   * @param {object} props - All props.
+   * @param {TRANSITION_STATUSES} status - Transition status.
    */
-  onShow?: (nothing: null, data: TransitionEventData) => void
+  onShow?: (nothing: null, props: TransitionProps, status: TRANSITION_STATUSES) => void
 
   /**
    * Callback on animation start.
    *
    * @param {null}
-   * @param {object} data - All props with status.
+   * @param {object} props - All props.
+   * @param {TRANSITION_STATUSES} status - Transition status.
    */
-  onStart?: (nothing: null, data: TransitionEventData) => void
+  onStart?: (nothing: null, props: TransitionProps, status: TRANSITION_STATUSES) => void
 
   /** React's key of the element. */
   reactKey?: string
@@ -70,10 +74,6 @@ export interface StrictTransitionProps {
   unmountOnHide?: boolean
 }
 
-export interface TransitionEventData extends TransitionProps {
-  status: TRANSITION_STATUSES
-}
-
 export interface TransitionPropDuration {
   hide: number
   show: number

src/modules/Transition/Transition.js

@@ -97,14 +97,14 @@ export default class Transition extends React.Component {
     }
 
     if (!prevState.animating && this.state.animating) {
-      _.invoke(this.props, 'onStart', null, { ...this.props, status: this.state.status })
+      _.invoke(this.props, 'onStart', null, this.props, this.state.status)
     }
 
     if (prevState.animating && !this.state.animating) {
       const callback = this.state.status === TRANSITION_STATUS_ENTERED ? 'onShow' : 'onHide'
 
-      _.invoke(this.props, 'onComplete', null, { ...this.props, status: this.state.status })
-      _.invoke(this.props, callback, null, { ...this.props, status: this.state.status })
+      _.invoke(this.props, 'onComplete', null, this.props, this.state.status)
+      _.invoke(this.props, callback, null, this.props, this.state.status)
     }
   }
 

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

@@ -25,7 +25,7 @@ describe('TransitionablePortal', () => {
   })
 
   describe('onClose', () => {
-    it('is called with (null, data) on a click outside', (done) => {
+    it('is called on a click outside', (done) => {
       const onClose = sandbox.spy()
       const wrapper = mount(
         <TransitionablePortal
@@ -41,7 +41,7 @@ describe('TransitionablePortal', () => {
 
       assertWithTimeout(() => {
         onClose.should.have.been.calledOnce()
-        onClose.should.have.been.calledWithMatch(null, { portalOpen: false })
+        onClose.should.have.been.calledWithMatch(null, {}, { portalOpen: false })
 
         wrapper.unmount()
       }, done)
@@ -60,7 +60,7 @@ describe('TransitionablePortal', () => {
   })
 
   describe('onHide', () => {
-    it('is called with (null, data) when exiting transition finished', (done) => {
+    it('is called when exiting transition finished', (done) => {
       const onHide = sandbox.spy()
       const wrapper = mount(
         <TransitionablePortal
@@ -75,27 +75,32 @@ describe('TransitionablePortal', () => {
       wrapper.setProps({ open: false })
       assertWithTimeout(() => {
         onHide.should.have.been.calledOnce()
-        onHide.should.have.been.calledWithMatch(null, {
-          ...quickTransition,
-          portalOpen: false,
-          transitionVisible: false,
-        })
+        onHide.should.have.been.calledWithMatch(
+          null,
+          {
+            ...quickTransition,
+          },
+          {
+            portalOpen: false,
+            transitionVisible: false,
+          },
+        )
 
         wrapper.unmount()
       }, done)
     })
   })
 
   describe('onOpen', () => {
-    it('is called with (null, data) when opens', () => {
+    it('is called when opens', () => {
       const onOpen = sandbox.spy()
       const wrapper = mount(
         <TransitionablePortal {...requiredProps} onOpen={onOpen} trigger={<button />} />,
       )
 
       wrapper.find('button').simulate('click')
       onOpen.should.have.been.calledOnce()
-      onOpen.should.have.been.calledWithMatch(null, { portalOpen: true })
+      onOpen.should.have.been.calledWithMatch(null, {}, { portalOpen: true })
     })
 
     it('renders contents', () => {

test/specs/modules/Transition/Transition-test.js

@@ -396,16 +396,19 @@ describe('Transition', () => {
   })
 
   describe('onComplete', () => {
-    it('is called with (null, props) when transition completed', (done) => {
+    it('is called when transition completes', (done) => {
       const onComplete = sandbox.spy()
       const handleComplete = (...args) => {
         onComplete(...args)
 
         onComplete.should.have.been.calledOnce()
-        onComplete.should.have.been.calledWithMatch(null, {
-          duration: 0,
-          status: TRANSITION_STATUS_ENTERED,
-        })
+        onComplete.should.have.been.calledWithMatch(
+          null,
+          {
+            duration: 0,
+          },
+          TRANSITION_STATUS_ENTERED,
+        )
 
         done()
       }
@@ -440,16 +443,19 @@ describe('Transition', () => {
   })
 
   describe('onHide', () => {
-    it('is called with (null, props) when hidden', (done) => {
+    it('is called when hidden', (done) => {
       const onHide = sandbox.spy()
       const handleHide = (...args) => {
         onHide(...args)
 
         onHide.should.have.been.calledOnce()
-        onHide.should.have.been.calledWithMatch(null, {
-          duration: 0,
-          status: TRANSITION_STATUS_EXITED,
-        })
+        onHide.should.have.been.calledWithMatch(
+          null,
+          {
+            duration: 0,
+          },
+          TRANSITION_STATUS_EXITED,
+        )
 
         done()
       }
@@ -509,16 +515,19 @@ describe('Transition', () => {
   })
 
   describe('onShow', () => {
-    it('is called with (null, props) when shown', (done) => {
+    it('is called when shown', (done) => {
       const onShow = sandbox.spy()
       const handleShow = (...args) => {
         onShow(...args)
 
         onShow.should.have.been.calledOnce()
-        onShow.should.have.been.calledWithMatch(null, {
-          duration: 0,
-          status: TRANSITION_STATUS_ENTERED,
-        })
+        onShow.should.have.been.calledWithMatch(
+          null,
+          {
+            duration: 0,
+          },
+          TRANSITION_STATUS_ENTERED,
+        )
 
         done()
       }
@@ -552,16 +561,19 @@ describe('Transition', () => {
   })
 
   describe('onStart', () => {
-    it('is called with (null, props) when transition started', (done) => {
+    it('is called when transition started', (done) => {
       const onStart = sandbox.spy()
       const handleStart = (...args) => {
         onStart(...args)
 
         onStart.should.have.been.calledOnce()
-        onStart.should.have.been.calledWithMatch(null, {
-          duration: 0,
-          status: TRANSITION_STATUS_ENTERING,
-        })
+        onStart.should.have.been.calledWithMatch(
+          null,
+          {
+            duration: 0,
+          },
+          TRANSITION_STATUS_ENTERING,
+        )
 
         done()
       }