React 16 upgrade (#7476)
* Use arrow property initializer functions * Use pure components where applicable * Add UNSAFE_ prefix for deprecated lifecycle hooks * Add allow UNSAFE_ * Removed unused "Component" * Replace boron with 'fade-modal' * Upgrade react/no-deprecated to an error * Paste react-tooltip-component source directly * Use arrow functions to bind `this` * Add UNSAFE_ prefix * Update react-redux, react-router-dom * Remove things from inlined 'fade-modal' * Adjust mountWithRouter to get unit tests passing again * Remove domkit * Add Wrapper to render-helpers * Upgrade @storybook/addon-knobsfeature/default_network_editable
ricky
5 years ago
committed by
Mark Stacey
parent
975419db54
commit
1c4f2aab8f
@ -0,0 +1,289 @@ |
||||
import React, { Component } from 'react' |
||||
import PropTypes from 'prop-types' |
||||
|
||||
let index = 0 |
||||
let extraSheet |
||||
|
||||
const insertRule = css => { |
||||
|
||||
if (!extraSheet) { |
||||
// First time, create an extra stylesheet for adding rules
|
||||
extraSheet = document.createElement('style') |
||||
document.getElementsByTagName('head')[0].appendChild(extraSheet) |
||||
// Keep reference to actual StyleSheet object (`styleSheet` for IE < 9)
|
||||
extraSheet = extraSheet.sheet || extraSheet.styleSheet |
||||
} |
||||
|
||||
const index = (extraSheet.cssRules || extraSheet.rules).length |
||||
extraSheet.insertRule(css, index) |
||||
|
||||
return extraSheet |
||||
} |
||||
|
||||
const insertKeyframesRule = keyframes => { |
||||
// random name
|
||||
const name = 'anim_' + (++index) + (+new Date()) |
||||
let css = '@' + 'keyframes ' + name + ' {' |
||||
|
||||
for (const key in keyframes) { |
||||
css += key + ' {' |
||||
|
||||
for (const property in keyframes[key]) { |
||||
const part = ':' + keyframes[key][property] + ';' |
||||
css += property + part |
||||
} |
||||
|
||||
css += '}' |
||||
} |
||||
|
||||
css += '}' |
||||
|
||||
insertRule(css) |
||||
|
||||
return name |
||||
} |
||||
|
||||
const animation = { |
||||
show: { |
||||
animationDuration: '0.3s', |
||||
animationTimingFunction: 'ease-out', |
||||
}, |
||||
hide: { |
||||
animationDuration: '0.3s', |
||||
animationTimingFunction: 'ease-out', |
||||
}, |
||||
showContentAnimation: insertKeyframesRule({ |
||||
'0%': { |
||||
opacity: 0, |
||||
}, |
||||
'100%': { |
||||
opacity: 1, |
||||
}, |
||||
}), |
||||
hideContentAnimation: insertKeyframesRule({ |
||||
'0%': { |
||||
opacity: 1, |
||||
}, |
||||
'100%': { |
||||
opacity: 0, |
||||
}, |
||||
}), |
||||
showBackdropAnimation: insertKeyframesRule({ |
||||
'0%': { |
||||
opacity: 0, |
||||
}, |
||||
'100%': { |
||||
opacity: 0.9, |
||||
}, |
||||
}), |
||||
hideBackdropAnimation: insertKeyframesRule({ |
||||
'0%': { |
||||
opacity: 0.9, |
||||
}, |
||||
'100%': { |
||||
opacity: 0, |
||||
}, |
||||
}), |
||||
} |
||||
|
||||
const endEvents = ['transitionend', 'animationend'] |
||||
|
||||
function addEventListener (node, eventName, eventListener) { |
||||
node.addEventListener(eventName, eventListener, false) |
||||
} |
||||
|
||||
function removeEventListener (node, eventName, eventListener) { |
||||
node.removeEventListener(eventName, eventListener, false) |
||||
} |
||||
|
||||
const removeEndEventListener = (node, eventListener) => { |
||||
if (endEvents.length === 0) { |
||||
return |
||||
} |
||||
endEvents.forEach(function (endEvent) { |
||||
removeEventListener(node, endEvent, eventListener) |
||||
}) |
||||
} |
||||
|
||||
const addEndEventListener = (node, eventListener) => { |
||||
if (endEvents.length === 0) { |
||||
// If CSS transitions are not supported, trigger an "end animation"
|
||||
// event immediately.
|
||||
window.setTimeout(eventListener, 0) |
||||
return |
||||
} |
||||
endEvents.forEach(function (endEvent) { |
||||
addEventListener(node, endEvent, eventListener) |
||||
}) |
||||
} |
||||
|
||||
class FadeModal extends Component { |
||||
content = null |
||||
|
||||
static propTypes = { |
||||
backdrop: PropTypes.bool, |
||||
backdropStyle: PropTypes.object, |
||||
closeOnClick: PropTypes.bool, |
||||
contentStyle: PropTypes.object, |
||||
keyboard: PropTypes.bool, |
||||
modalStyle: PropTypes.object, |
||||
onShow: PropTypes.func, |
||||
onHide: PropTypes.func, |
||||
children: PropTypes.oneOfType([ |
||||
PropTypes.arrayOf(PropTypes.node), |
||||
PropTypes.node, |
||||
]), |
||||
} |
||||
|
||||
static defaultProps = { |
||||
onShow: function () {}, |
||||
onHide: function () {}, |
||||
keyboard: true, |
||||
backdrop: true, |
||||
closeOnClick: true, |
||||
modalStyle: {}, |
||||
backdropStyle: {}, |
||||
contentStyle: {}, |
||||
children: [], |
||||
} |
||||
|
||||
state = { |
||||
willHide: true, |
||||
hidden: true, |
||||
} |
||||
|
||||
addTransitionListener = (node, handle) => { |
||||
if (node) { |
||||
const endListener = function (e) { |
||||
if (e && e.target !== node) { |
||||
return |
||||
} |
||||
removeEndEventListener(node, endListener) |
||||
handle() |
||||
} |
||||
addEndEventListener(node, endListener) |
||||
} |
||||
} |
||||
|
||||
handleBackdropClick = () => { |
||||
if (this.props.closeOnClick) { |
||||
this.hide() |
||||
} |
||||
} |
||||
|
||||
hasHidden = () => { |
||||
return this.state.hidden |
||||
} |
||||
|
||||
render () { |
||||
if (this.state.hidden) { |
||||
return null |
||||
} |
||||
|
||||
const { willHide } = this.state |
||||
const { modalStyle } = this.props |
||||
const backdropStyle = Object.assign({}, { |
||||
animationName: willHide ? animation.hideBackdropAnimation : animation.showBackdropAnimation, |
||||
animationTimingFunction: (willHide ? animation.hide : animation.show).animationTimingFunction, |
||||
}, this.props.backdropStyle) |
||||
const contentStyle = Object.assign({}, { |
||||
animationDuration: (willHide ? animation.hide : animation.show).animationDuration, |
||||
animationName: willHide ? animation.hideContentAnimation : animation.showContentAnimation, |
||||
animationTimingFunction: (willHide ? animation.hide : animation.show).animationTimingFunction, |
||||
}, this.props.contentStyle) |
||||
|
||||
const backdrop = this.props.backdrop |
||||
? ( |
||||
<div |
||||
className="backdrop" |
||||
style={backdropStyle} |
||||
onClick={this.props.closeOnClick |
||||
? this.handleBackdropClick |
||||
: null} |
||||
/> |
||||
) : undefined |
||||
|
||||
if (willHide) { |
||||
this.addTransitionListener(this.content, this.leave) |
||||
} |
||||
|
||||
return ( |
||||
<span> |
||||
<div className="modal" style={modalStyle}> |
||||
<div |
||||
className="content" |
||||
ref={el => (this.content = el)} |
||||
tabIndex="-1" |
||||
style={contentStyle} |
||||
> |
||||
{this.props.children} |
||||
</div> |
||||
</div> |
||||
{backdrop} |
||||
</span> |
||||
) |
||||
|
||||
} |
||||
|
||||
leave = () => { |
||||
this.setState({ |
||||
hidden: true, |
||||
}) |
||||
this.props.onHide(this.state.hideSource) |
||||
} |
||||
|
||||
enter = () => { |
||||
this.props.onShow() |
||||
} |
||||
|
||||
show = () => { |
||||
if (!this.state.hidden) { |
||||
return |
||||
} |
||||
|
||||
this.setState({ |
||||
willHide: false, |
||||
hidden: false, |
||||
}) |
||||
|
||||
setTimeout(function () { |
||||
this.addTransitionListener(this.content, this.enter) |
||||
}.bind(this), 0) |
||||
} |
||||
|
||||
hide = () => { |
||||
if (this.hasHidden()) { |
||||
return |
||||
} |
||||
|
||||
this.setState({ |
||||
willHide: true, |
||||
}) |
||||
} |
||||
|
||||
listenKeyboard = (event) => { |
||||
if (typeof this.props.keyboard === 'function') { |
||||
this.props.keyboard(event) |
||||
} else { |
||||
this.closeOnEsc(event) |
||||
} |
||||
} |
||||
|
||||
closeOnEsc = (event) => { |
||||
if (this.props.keyboard && |
||||
(event.key === 'Escape' || |
||||
event.keyCode === 27)) { |
||||
this.hide() |
||||
} |
||||
} |
||||
|
||||
UNSAFE_componentDidMount = () => { |
||||
window.addEventListener('keydown', this.listenKeyboard, true) |
||||
} |
||||
|
||||
UNSAFE_componentWillUnmount = () => { |
||||
window.removeEventListener('keydown', this.listenKeyboard, true) |
||||
} |
||||
} |
||||
|
||||
export default FadeModal |
||||
@ -1,12 +1,12 @@ |
||||
import React, { PureComponent } from 'react' |
||||
import React from 'react' |
||||
import NetworkDisplay from '../../network-display' |
||||
|
||||
export default class PermissionPageContainerHeader extends PureComponent { |
||||
render () { |
||||
return ( |
||||
<div className="permission-approval-container__header"> |
||||
<NetworkDisplay colored={false} /> |
||||
</div> |
||||
) |
||||
} |
||||
const ProviderPageContainerHeader = () => { |
||||
return ( |
||||
<div className="provider-approval-container__header"> |
||||
<NetworkDisplay colored={false} /> |
||||
</div> |
||||
) |
||||
} |
||||
|
||||
export default ProviderPageContainerHeader |
||||
|
||||
Loading…
Reference in new issue