42 lines
819 B
JavaScript
42 lines
819 B
JavaScript
import React, { Component } from 'react'
|
|
import Radium from 'radium'
|
|
import PropTypes from 'prop-types'
|
|
|
|
@Radium
|
|
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)'
|
|
}
|
|
}
|
|
|
|
handleClick(e) {
|
|
e.stopPropagation()
|
|
}
|
|
|
|
render() {
|
|
return this.props.active ? (
|
|
<div style={Dimmer.style.div} onClick={this.handleClick}>
|
|
{this.props.children}
|
|
</div>
|
|
) : null
|
|
}
|
|
}
|