68 lines
		
	
	
	
		
			1.4 KiB
		
	
	
	
		
			React
		
	
	
	
	
	
		
		
			
		
	
	
			68 lines
		
	
	
	
		
			1.4 KiB
		
	
	
	
		
			React
		
	
	
	
	
	
|  | import { connect }           from 'react-redux'; | ||
|  | import { SkyLightStateless } from 'react-skylight'; | ||
|  | import { closeModal }        from '../../../actions/modal'; | ||
|  | 
 | ||
|  | const mapStateToProps = state => ({ | ||
|  |   url: state.getIn(['modal', 'url']), | ||
|  |   isVisible: state.getIn(['modal', 'open']) | ||
|  | }); | ||
|  | 
 | ||
|  | const mapDispatchToProps = dispatch => ({ | ||
|  |   onCloseClicked () { | ||
|  |     dispatch(closeModal()); | ||
|  |   }, | ||
|  | 
 | ||
|  |   onOverlayClicked () { | ||
|  |     dispatch(closeModal()); | ||
|  |   } | ||
|  | }); | ||
|  | 
 | ||
|  | const styles = { | ||
|  |   overlayStyles: { | ||
|  | 
 | ||
|  |   }, | ||
|  | 
 | ||
|  |   dialogStyles: { | ||
|  |     width: '600px', | ||
|  |     color: '#282c37', | ||
|  |     fontSize: '16px', | ||
|  |     lineHeight: '37px', | ||
|  |     marginTop: '-300px', | ||
|  |     left: '0', | ||
|  |     right: '0', | ||
|  |     marginLeft: 'auto', | ||
|  |     marginRight: 'auto', | ||
|  |     height: 'auto' | ||
|  |   }, | ||
|  | 
 | ||
|  |   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 ( | ||
|  |       <SkyLightStateless {...other} dialogStyles={styles.dialogStyles} overlayStyles={styles.overlayStyles}> | ||
|  |         <img src={url} style={styles.imageStyle} /> | ||
|  |       </SkyLightStateless> | ||
|  |     ); | ||
|  |   } | ||
|  | 
 | ||
|  | }); | ||
|  | 
 | ||
|  | export default connect(mapStateToProps, mapDispatchToProps)(Modal); |