45 lines
1.0 KiB
JavaScript
45 lines
1.0 KiB
JavaScript
import IconButton from './icon_button';
|
|
|
|
const overlayStyle = {
|
|
position: 'fixed',
|
|
top: '0',
|
|
left: '0',
|
|
width: '100%',
|
|
height: '100%',
|
|
justifyContent: 'center',
|
|
alignContent: 'center',
|
|
background: 'rgba(0, 0, 0, 0.5)'
|
|
};
|
|
|
|
const dialogStyle = {
|
|
color: '#282c37',
|
|
background: '#d9e1e8',
|
|
borderRadius: '4px',
|
|
boxShadow: '0 0 15px rgba(0, 0, 0, 0.4)',
|
|
padding: '10px',
|
|
margin: 'auto',
|
|
position: 'relative'
|
|
};
|
|
|
|
const closeStyle = {
|
|
position: 'absolute',
|
|
top: '4px',
|
|
right: '4px'
|
|
};
|
|
|
|
const Lightbox = ({ isVisible, onOverlayClicked, onCloseClicked, children }) =>
|
|
<div className='lightbox' style={{ ...overlayStyle, display: isVisible ? 'flex' : 'none' }} onClick={onOverlayClicked}>
|
|
<div style={dialogStyle}>
|
|
<IconButton title='Close' icon='times' onClick={onCloseClicked} size={16} style={closeStyle} />
|
|
{children}
|
|
</div>
|
|
</div>
|
|
|
|
Lightbox.propTypes = {
|
|
isVisible: React.PropTypes.bool,
|
|
onOverlayClicked: React.PropTypes.func,
|
|
onCloseClicked: React.PropTypes.func
|
|
};
|
|
|
|
export default Lightbox;
|