Skip to content

Commit 141008a

Browse files
sashaaaaaaaaaaaaaaaaaaasashaaaaaaaaaaaaaaaaaaa
committed
transition
1 parent 2d286ee commit 141008a

6 files changed

Lines changed: 92 additions & 63 deletions

File tree

‎src/addons/TransitionablePortal/TransitionablePortal.d.ts‎

Lines changed: 14 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import * as React from 'react'
22

3-
import { TransitionEventData, TransitionProps } from '../../modules/Transition/Transition'
3+
import { TransitionProps, TRANSITION_STATUSES } from '../../modules/Transition/Transition'
44
import { PortalProps } from '../Portal/Portal'
55

66
export interface TransitionablePortalProps extends StrictTransitionablePortalProps {
@@ -15,33 +15,37 @@ export interface StrictTransitionablePortalProps {
1515
* Called when a close event happens.
1616
*
1717
* @param {SyntheticEvent} event - React's original SyntheticEvent.
18-
* @param {object} data - All props and internal state.
18+
* @param {object} props - All props.
19+
* @param {object} state - Internal state.
1920
*/
20-
onClose?: (nothing: null, data: PortalProps & TransitionablePortalState) => void
21+
onClose?: (nothing: null, props: PortalProps, state: TransitionablePortalState) => void
2122

2223
/**
2324
* Callback on each transition that changes visibility to hidden.
2425
*
2526
* @param {null}
26-
* @param {object} data - All props with status.
27+
* @param {object} props - All props.
28+
* @param {object} state - Internal state.
2729
*/
28-
onHide?: (nothing: null, data: TransitionEventData & TransitionablePortalState) => void
30+
onHide?: (nothing: null, props: TransitionProps, state: TransitionablePortalState) => void
2931

3032
/**
3133
* Called when an open event happens.
3234
*
3335
* @param {SyntheticEvent} event - React's original SyntheticEvent.
34-
* @param {object} data - All props and internal state.
36+
* @param {object} props - All props.
37+
* @param {object} state - Internal state.
3538
*/
36-
onOpen?: (nothing: null, data: PortalProps & TransitionablePortalState) => void
39+
onOpen?: (nothing: null, props: PortalProps, state: TransitionablePortalState) => void
3740

3841
/**
3942
* Callback on animation start.
4043
*
4144
* @param {null}
42-
* @param {object} data - All props with status.
45+
* @param {object} props - All props.
46+
* @param {object} state - Internal state.
4347
*/
44-
onStart?: (nothing: null, data: TransitionEventData & TransitionablePortalState) => void
48+
onStart?: (nothing: null, props: TransitionProps, state: TransitionablePortalState) => void
4549

4650
/** Controls whether or not the portal is displayed. */
4751
open?: boolean
@@ -51,6 +55,7 @@ export interface StrictTransitionablePortalProps {
5155
}
5256

5357
export interface TransitionablePortalState {
58+
transitionStatus: TRANSITION_STATUSES
5459
portalOpen: boolean
5560
transitionVisible: boolean
5661
}

‎src/addons/TransitionablePortal/TransitionablePortal.js‎

Lines changed: 16 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -74,21 +74,28 @@ function TransitionablePortal(props) {
7474
setPortalOpen(true)
7575
}
7676

77-
const handleTransitionHide = (nothing, data) => {
77+
const handleTransitionHide = (nothing, data, status) => {
7878
debug('handleTransitionHide()')
7979

8080
setTransitionVisible(false)
81-
_.invoke(props, 'onClose', null, { ...data, portalOpen: false, transitionVisible: false })
82-
_.invoke(props, 'onHide', null, { ...data, portalOpen, transitionVisible: false })
81+
_.invoke(props, 'onClose', null, data, {
82+
transitionStatus: status,
83+
portalOpen: false,
84+
transitionVisible: false,
85+
})
86+
_.invoke(props, 'onHide', null, data, {
87+
transitionStatus: status,
88+
portalOpen,
89+
transitionVisible: false,
90+
})
8391
}
8492

85-
const handleTransitionStart = (nothing, data) => {
93+
const handleTransitionStart = (nothing, data, status) => {
8694
debug('handleTransitionStart()')
87-
const { status } = data
8895
const nextTransitionVisible = status === TRANSITION_STATUS_ENTERING
8996

90-
_.invoke(props, 'onStart', null, {
91-
...data,
97+
_.invoke(props, 'onStart', null, data, {
98+
transitionStatus: status,
9299
portalOpen,
93100
transitionVisible: nextTransitionVisible,
94101
})
@@ -99,8 +106,8 @@ function TransitionablePortal(props) {
99106
}
100107

101108
setTransitionVisible(nextTransitionVisible)
102-
_.invoke(props, 'onOpen', null, {
103-
...data,
109+
_.invoke(props, 'onOpen', null, data, {
110+
transitionStatus: status,
104111
transitionVisible: nextTransitionVisible,
105112
portalOpen: true,
106113
})

‎src/modules/Transition/Transition.d.ts‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -32,33 +32,37 @@ export interface StrictTransitionProps {
3232
* Callback on each transition that changes visibility to shown.
3333
*
3434
* @param {null}
35-
* @param {object} data - All props with status.
35+
* @param {object} props - All props.
36+
* @param {TRANSITION_STATUSES} status - Transition status.
3637
*/
37-
onComplete?: (nothing: null, data: TransitionEventData) => void
38+
onComplete?: (nothing: null, props: TransitionProps, status: TRANSITION_STATUSES) => void
3839

3940
/**
4041
* Callback on each transition that changes visibility to hidden.
4142
*
4243
* @param {null}
43-
* @param {object} data - All props with status.
44+
* @param {object} props - All props.
45+
* @param {TRANSITION_STATUSES} status - Transition status.
4446
*/
45-
onHide?: (nothing: null, data: TransitionEventData) => void
47+
onHide?: (nothing: null, props: TransitionProps, status: TRANSITION_STATUSES) => void
4648

4749
/**
4850
* Callback on each transition that changes visibility to shown.
4951
*
5052
* @param {null}
51-
* @param {object} data - All props with status.
53+
* @param {object} props - All props.
54+
* @param {TRANSITION_STATUSES} status - Transition status.
5255
*/
53-
onShow?: (nothing: null, data: TransitionEventData) => void
56+
onShow?: (nothing: null, props: TransitionProps, status: TRANSITION_STATUSES) => void
5457

5558
/**
5659
* Callback on animation start.
5760
*
5861
* @param {null}
59-
* @param {object} data - All props with status.
62+
* @param {object} props - All props.
63+
* @param {TRANSITION_STATUSES} status - Transition status.
6064
*/
61-
onStart?: (nothing: null, data: TransitionEventData) => void
65+
onStart?: (nothing: null, props: TransitionProps, status: TRANSITION_STATUSES) => void
6266

6367
/** React's key of the element. */
6468
reactKey?: string
@@ -70,10 +74,6 @@ export interface StrictTransitionProps {
7074
unmountOnHide?: boolean
7175
}
7276

73-
export interface TransitionEventData extends TransitionProps {
74-
status: TRANSITION_STATUSES
75-
}
76-
7777
export interface TransitionPropDuration {
7878
hide: number
7979
show: number

‎src/modules/Transition/Transition.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -97,14 +97,14 @@ export default class Transition extends React.Component {
9797
}
9898

9999
if (!prevState.animating && this.state.animating) {
100-
_.invoke(this.props, 'onStart', null, { ...this.props, status: this.state.status })
100+
_.invoke(this.props, 'onStart', null, this.props, this.state.status)
101101
}
102102

103103
if (prevState.animating && !this.state.animating) {
104104
const callback = this.state.status === TRANSITION_STATUS_ENTERED ? 'onShow' : 'onHide'
105105

106-
_.invoke(this.props, 'onComplete', null, { ...this.props, status: this.state.status })
107-
_.invoke(this.props, callback, null, { ...this.props, status: this.state.status })
106+
_.invoke(this.props, 'onComplete', null, this.props, this.state.status)
107+
_.invoke(this.props, callback, null, this.props, this.state.status)
108108
}
109109
}
110110

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

Lines changed: 15 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ describe('TransitionablePortal', () => {
2525
})
2626

2727
describe('onClose', () => {
28-
it('is called with (null, data) on a click outside', (done) => {
28+
it('is called on a click outside', (done) => {
2929
const onClose = sandbox.spy()
3030
const wrapper = mount(
3131
<TransitionablePortal
@@ -41,7 +41,7 @@ describe('TransitionablePortal', () => {
4141

4242
assertWithTimeout(() => {
4343
onClose.should.have.been.calledOnce()
44-
onClose.should.have.been.calledWithMatch(null, { portalOpen: false })
44+
onClose.should.have.been.calledWithMatch(null, {}, { portalOpen: false })
4545

4646
wrapper.unmount()
4747
}, done)
@@ -60,7 +60,7 @@ describe('TransitionablePortal', () => {
6060
})
6161

6262
describe('onHide', () => {
63-
it('is called with (null, data) when exiting transition finished', (done) => {
63+
it('is called when exiting transition finished', (done) => {
6464
const onHide = sandbox.spy()
6565
const wrapper = mount(
6666
<TransitionablePortal
@@ -75,27 +75,32 @@ describe('TransitionablePortal', () => {
7575
wrapper.setProps({ open: false })
7676
assertWithTimeout(() => {
7777
onHide.should.have.been.calledOnce()
78-
onHide.should.have.been.calledWithMatch(null, {
79-
...quickTransition,
80-
portalOpen: false,
81-
transitionVisible: false,
82-
})
78+
onHide.should.have.been.calledWithMatch(
79+
null,
80+
{
81+
...quickTransition,
82+
},
83+
{
84+
portalOpen: false,
85+
transitionVisible: false,
86+
},
87+
)
8388

8489
wrapper.unmount()
8590
}, done)
8691
})
8792
})
8893

8994
describe('onOpen', () => {
90-
it('is called with (null, data) when opens', () => {
95+
it('is called when opens', () => {
9196
const onOpen = sandbox.spy()
9297
const wrapper = mount(
9398
<TransitionablePortal {...requiredProps} onOpen={onOpen} trigger={<button />} />,
9499
)
95100

96101
wrapper.find('button').simulate('click')
97102
onOpen.should.have.been.calledOnce()
98-
onOpen.should.have.been.calledWithMatch(null, { portalOpen: true })
103+
onOpen.should.have.been.calledWithMatch(null, {}, { portalOpen: true })
99104
})
100105

101106
it('renders contents', () => {

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

Lines changed: 32 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -396,16 +396,19 @@ describe('Transition', () => {
396396
})
397397

398398
describe('onComplete', () => {
399-
it('is called with (null, props) when transition completed', (done) => {
399+
it('is called when transition completes', (done) => {
400400
const onComplete = sandbox.spy()
401401
const handleComplete = (...args) => {
402402
onComplete(...args)
403403

404404
onComplete.should.have.been.calledOnce()
405-
onComplete.should.have.been.calledWithMatch(null, {
406-
duration: 0,
407-
status: TRANSITION_STATUS_ENTERED,
408-
})
405+
onComplete.should.have.been.calledWithMatch(
406+
null,
407+
{
408+
duration: 0,
409+
},
410+
TRANSITION_STATUS_ENTERED,
411+
)
409412

410413
done()
411414
}
@@ -440,16 +443,19 @@ describe('Transition', () => {
440443
})
441444

442445
describe('onHide', () => {
443-
it('is called with (null, props) when hidden', (done) => {
446+
it('is called when hidden', (done) => {
444447
const onHide = sandbox.spy()
445448
const handleHide = (...args) => {
446449
onHide(...args)
447450

448451
onHide.should.have.been.calledOnce()
449-
onHide.should.have.been.calledWithMatch(null, {
450-
duration: 0,
451-
status: TRANSITION_STATUS_EXITED,
452-
})
452+
onHide.should.have.been.calledWithMatch(
453+
null,
454+
{
455+
duration: 0,
456+
},
457+
TRANSITION_STATUS_EXITED,
458+
)
453459

454460
done()
455461
}
@@ -509,16 +515,19 @@ describe('Transition', () => {
509515
})
510516

511517
describe('onShow', () => {
512-
it('is called with (null, props) when shown', (done) => {
518+
it('is called when shown', (done) => {
513519
const onShow = sandbox.spy()
514520
const handleShow = (...args) => {
515521
onShow(...args)
516522

517523
onShow.should.have.been.calledOnce()
518-
onShow.should.have.been.calledWithMatch(null, {
519-
duration: 0,
520-
status: TRANSITION_STATUS_ENTERED,
521-
})
524+
onShow.should.have.been.calledWithMatch(
525+
null,
526+
{
527+
duration: 0,
528+
},
529+
TRANSITION_STATUS_ENTERED,
530+
)
522531

523532
done()
524533
}
@@ -552,16 +561,19 @@ describe('Transition', () => {
552561
})
553562

554563
describe('onStart', () => {
555-
it('is called with (null, props) when transition started', (done) => {
564+
it('is called when transition started', (done) => {
556565
const onStart = sandbox.spy()
557566
const handleStart = (...args) => {
558567
onStart(...args)
559568

560569
onStart.should.have.been.calledOnce()
561-
onStart.should.have.been.calledWithMatch(null, {
562-
duration: 0,
563-
status: TRANSITION_STATUS_ENTERING,
564-
})
570+
onStart.should.have.been.calledWithMatch(
571+
null,
572+
{
573+
duration: 0,
574+
},
575+
TRANSITION_STATUS_ENTERING,
576+
)
565577

566578
done()
567579
}

0 commit comments

Comments
 (0)