mastodon/app/assets/javascripts/components/components/lightbox.jsx
2016-11-07 18:42:39 +01:00

54 lines
1.1 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)',
display: 'flex',
zIndex: '9999'
};
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 }) => {
if (!isVisible) {
return <div />;
}
return (
<div className='lightbox' style={overlayStyle} 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;