/
TransitionablePortal.js
158 lines (128 loc) · 4.33 KB
/
TransitionablePortal.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
import _ from 'lodash'
import PropTypes from 'prop-types'
import React, { Component } from 'react'
import Portal from '../Portal'
import Transition from '../../modules/Transition'
import { getUnhandledProps, makeDebugger } from '../../lib'
const debug = makeDebugger('transitionable_portal')
/**
* A sugar for `Portal` and `Transition`.
* @see Portal
* @see Transition
*/
export default class TransitionablePortal extends Component {
static propTypes = {
/** Primary content. */
children: PropTypes.node.isRequired,
/**
* Called when a close event happens.
*
* @param {SyntheticEvent} event - React's original SyntheticEvent.
* @param {object} data - All props and internal state.
*/
onClose: PropTypes.func,
/**
* Callback on each transition that changes visibility to hidden.
*
* @param {null}
* @param {object} data - All props with transition status and internal state.
*/
onHide: PropTypes.func,
/**
* Called when an open event happens.
*
* @param {SyntheticEvent} event - React's original SyntheticEvent.
* @param {object} data - All props and internal state.
*/
onOpen: PropTypes.func,
/**
* Callback on animation start.
*
* @param {null}
* @param {object} data - All props with transition status and internal state.
*/
onStart: PropTypes.func,
/** Controls whether or not the portal is displayed. */
open: PropTypes.bool,
/** Transition props. */
transition: PropTypes.object,
}
static defaultProps = {
transition: {
animation: 'scale',
duration: 400,
},
}
state = {}
// ----------------------------------------
// Lifecycle
// ----------------------------------------
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 }
}
if (_.isUndefined(props.open)) {
return null
}
return { portalOpen: props.open }
}
// ----------------------------------------
// Callback handling
// ----------------------------------------
handlePortalClose = () => {
debug('handlePortalClose()')
this.setState({ portalOpen: -1 })
}
handlePortalOpen = () => {
debug('handlePortalOpen()')
this.setState({ portalOpen: true })
}
handleTransitionHide = (nothing, data) => {
debug('handleTransitionHide()')
const { portalOpen } = this.state
this.setState({ transitionVisible: false })
_.invoke(this.props, 'onClose', null, { ...data, portalOpen: false, transitionVisible: false })
_.invoke(this.props, 'onHide', null, { ...data, portalOpen, transitionVisible: false })
}
handleTransitionStart = (nothing, data) => {
debug('handleTransitionStart()')
const { portalOpen } = this.state
const { status } = data
const transitionVisible = status === Transition.ENTERING
_.invoke(this.props, 'onStart', null, { ...data, portalOpen, transitionVisible })
// Heads up! TransitionablePortal fires onOpen callback on the start of transition animation
if (!transitionVisible) return
this.setState({ transitionVisible })
_.invoke(this.props, 'onOpen', null, { ...data, transitionVisible, portalOpen: true })
}
// ----------------------------------------
// Render
// ----------------------------------------
render() {
debug('render()', this.state)
// console.log('render', this.state)
const { children, transition } = this.props
const { portalOpen, transitionVisible } = this.state
const open = portalOpen || transitionVisible
const rest = getUnhandledProps(TransitionablePortal, this.props)
return (
<Portal {...rest} open={open} onOpen={this.handlePortalOpen} onClose={this.handlePortalClose}>
<Transition
{...transition}
transitionOnMount
onStart={this.handleTransitionStart}
onHide={this.handleTransitionHide}
visible={portalOpen}
>
{children}
</Transition>
</Portal>
)
}
}