chinwagsocial/app/assets/javascripts/components/features/ui/containers/modal_container.jsx
Eugen Rochko 82fd74d101 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);