Replace rebass with own Modal component

This commit is contained in:
Lukas Martinelli
2016-12-21 13:55:11 +01:00
parent 8fc8dfd4f6
commit bdb0466436
3 changed files with 108 additions and 30 deletions

View File

@@ -0,0 +1,53 @@
import React from 'react'
class ViewportOverlay extends React.Component {
static propTypes = {
style: React.PropTypes.object
}
render() {
const overlayStyle = {
position: 'fixed',
top: 0,
right: 0,
bottom: 0,
left: 0,
zIndex: 2,
opacity: 0.875,
backgroundColor: 'rgb(28, 31, 36)',
...this.props.style
}
return <div style={overlayStyle} />
}
}
class Overlay extends React.Component {
static propTypes = {
isOpen: React.PropTypes.bool.isRequired,
children: React.PropTypes.element.isRequired
}
render() {
return <div style={{
top: 0,
right: 0,
bottom: 0,
left: 0,
position: 'fixed',
display: this.props.isOpen ? 'flex' : 'none',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center'
}}>
<ViewportOverlay />
<div style={{
zIndex: 3,
}}>
{this.props.children}
</div>
</div>
}
}
export default Overlay