49 lines
968 B
JavaScript
49 lines
968 B
JavaScript
import React, { Component } from 'react'
|
|
import Radium from 'radium'
|
|
import PropTypes from 'prop-types'
|
|
import { reactAutoBind } from 'auto-bind2'
|
|
|
|
export class Dimmer extends Component {
|
|
static propTypes = {
|
|
active: PropTypes.bool.isRequired,
|
|
children: PropTypes.node,
|
|
}
|
|
|
|
static style = {
|
|
div: {
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
height: '100vh',
|
|
width: '100vw',
|
|
position: 'fixed',
|
|
top: 0,
|
|
left: 0,
|
|
right: 0,
|
|
bottom: 0,
|
|
zIndex: 100,
|
|
background: 'rgba(25, 25, 30, 0.75)'
|
|
}
|
|
}
|
|
|
|
constructor(props) {
|
|
super(props)
|
|
reactAutoBind(this)
|
|
}
|
|
|
|
preventPropagation(e) {
|
|
e.stopPropagation()
|
|
}
|
|
|
|
render() {
|
|
return this.props.active ? (
|
|
<div style={Dimmer.style.div} onClick={this.preventPropagation}>
|
|
{this.props.children}
|
|
</div>
|
|
) : null
|
|
}
|
|
}
|
|
|
|
export default Radium(Dimmer)
|