app/assets/javascripts/components/features/ui/containers/modal_container.jsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

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: '100%',
  height: 'auto',
  margin: '0 auto'
};

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);