glitchier-soc/app/assets/javascripts/components/features/ui/containers/modal_container.jsx
Eugen Rochko db4df4481b Fix modals sizing and add animation to it, fix by only making the text of
status clickable (this also fixes multiple dropdown being openable at the same
time)
2016-11-10 23:21:24 +01:00

47 lines
1,000 B
JavaScript

import { connect } from 'react-redux';
import { closeModal } from '../../../actions/modal';
import Lightbox from '../../../components/lightbox';
const mapStateToProps = state => ({
url: state.getIn(['modal', 'url']),
isVisible: state.getIn(['modal', 'open'])
});
const mapDispatchToProps = dispatch => ({
onCloseClicked () {
dispatch(closeModal());
},
onOverlayClicked () {
dispatch(closeModal());
}
});
const imageStyle = {
display: 'block',
maxWidth: '80vw',
maxHeight: '80vh'
};
const Modal = React.createClass({
propTypes: {
url: React.PropTypes.string,
isVisible: React.PropTypes.bool,
onCloseClicked: React.PropTypes.func,
onOverlayClicked: React.PropTypes.func
},
render () {
const { url, ...other } = this.props;
return (
<Lightbox {...other}>
<img src={url} style={imageStyle} />
</Lightbox>
);
}
});
export default connect(mapStateToProps, mapDispatchToProps)(Modal);