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

168 lines
3.6 KiB
React
Raw Normal View History

import { connect } from 'react-redux';
import {
closeModal,
decreaseIndexInModal,
increaseIndexInModal
} from '../../../actions/modal';
import Lightbox from '../../../components/lightbox';
import ImageLoader from 'react-imageloader';
import LoadingIndicator from '../../../components/loading_indicator';
2017-01-24 07:40:48 +11:00
import PureRenderMixin from 'react-addons-pure-render-mixin';
import ImmutablePropTypes from 'react-immutable-proptypes';
2016-10-25 03:07:40 +11:00
const mapStateToProps = state => ({
media: state.getIn(['modal', 'media']),
index: state.getIn(['modal', 'index']),
2016-10-25 03:07:40 +11:00
isVisible: state.getIn(['modal', 'open'])
});
const mapDispatchToProps = dispatch => ({
onCloseClicked () {
dispatch(closeModal());
},
onOverlayClicked () {
dispatch(closeModal());
},
onNextClicked () {
dispatch(increaseIndexInModal());
},
onPrevClicked () {
dispatch(decreaseIndexInModal());
2016-10-25 03:07:40 +11:00
}
});
const imageStyle = {
display: 'block',
maxWidth: '80vw',
maxHeight: '80vh'
2016-10-25 03:07:40 +11:00
};
const loadingStyle = {
width: '400px',
paddingBottom: '120px'
};
const preloader = () => (
2017-02-11 03:30:06 +11:00
<div className='modal-container--preloader' style={loadingStyle}>
<LoadingIndicator />
</div>
);
const leftNavStyle = {
position: 'absolute',
background: 'rgba(0, 0, 0, 0.5)',
padding: '30px 15px',
cursor: 'pointer',
fontSize: '24px',
top: '0',
left: '-61px',
boxSizing: 'border-box',
height: '100%',
display: 'flex',
alignItems: 'center'
};
const rightNavStyle = {
position: 'absolute',
background: 'rgba(0, 0, 0, 0.5)',
padding: '30px 15px',
cursor: 'pointer',
fontSize: '24px',
top: '0',
right: '-61px',
boxSizing: 'border-box',
height: '100%',
display: 'flex',
alignItems: 'center'
};
2016-10-25 03:07:40 +11:00
const Modal = React.createClass({
propTypes: {
media: ImmutablePropTypes.list,
index: React.PropTypes.number.isRequired,
2016-10-25 03:07:40 +11:00
isVisible: React.PropTypes.bool,
onCloseClicked: React.PropTypes.func,
onOverlayClicked: React.PropTypes.func,
onNextClicked: React.PropTypes.func,
onPrevClicked: React.PropTypes.func
2016-10-25 03:07:40 +11:00
},
2017-01-24 07:40:48 +11:00
mixins: [PureRenderMixin],
handleNextClick () {
this.props.onNextClicked();
},
handlePrevClick () {
this.props.onPrevClicked();
},
componentDidMount () {
this._listener = e => {
if (!this.props.isVisible) {
return;
}
switch(e.key) {
case 'ArrowLeft':
this.props.onPrevClicked();
break;
case 'ArrowRight':
this.props.onNextClicked();
break;
}
};
window.addEventListener('keyup', this._listener);
},
2017-02-05 13:19:04 +11:00
componentWillUnmount () {
window.removeEventListener('keyup', this._listener);
},
2016-10-25 03:07:40 +11:00
render () {
const { media, index, ...other } = this.props;
if (!media) {
return null;
}
const url = media.get(index).get('url');
const hasLeft = index > 0;
const hasRight = index + 1 < media.size;
let leftNav, rightNav;
leftNav = rightNav = '';
if (hasLeft) {
2017-02-11 03:30:06 +11:00
leftNav = <div style={leftNavStyle} className='modal-container--nav' onClick={this.handlePrevClick}><i className='fa fa-fw fa-chevron-left' /></div>;
}
if (hasRight) {
2017-02-11 03:30:06 +11:00
rightNav = <div style={rightNavStyle} className='modal-container--nav' onClick={this.handleNextClick}><i className='fa fa-fw fa-chevron-right' /></div>;
}
2016-10-25 03:07:40 +11:00
return (
<Lightbox {...other}>
{leftNav}
<ImageLoader
src={url}
preloader={preloader}
imgProps={{ style: imageStyle }}
/>
{rightNav}
</Lightbox>
2016-10-25 03:07:40 +11:00
);
}
});
export default connect(mapStateToProps, mapDispatchToProps)(Modal);