forked from berserker/microblog
Port ef582dc4f2
to glitch-soc
Signed-off-by: Claire <claire.github-309c@sitedethib.com>
main^2
parent
099b3011aa
commit
c4d2c72924
7 changed files with 110 additions and 39 deletions
@ -0,0 +1,59 @@ |
||||
import React from 'react'; |
||||
import PropTypes from 'prop-types'; |
||||
import classNames from 'classnames'; |
||||
import { defineMessages, injectIntl } from 'react-intl'; |
||||
import IconButton from 'flavours/glitch/components/icon_button'; |
||||
import ImageLoader from './image_loader'; |
||||
|
||||
const messages = defineMessages({ |
||||
close: { id: 'lightbox.close', defaultMessage: 'Close' }, |
||||
}); |
||||
|
||||
export default @injectIntl |
||||
class ImageModal extends React.PureComponent { |
||||
|
||||
static propTypes = { |
||||
src: PropTypes.string.isRequired, |
||||
alt: PropTypes.string.isRequired, |
||||
onClose: PropTypes.func.isRequired, |
||||
intl: PropTypes.object.isRequired, |
||||
}; |
||||
|
||||
state = { |
||||
navigationHidden: false, |
||||
}; |
||||
|
||||
toggleNavigation = () => { |
||||
this.setState(prevState => ({ |
||||
navigationHidden: !prevState.navigationHidden, |
||||
})); |
||||
}; |
||||
|
||||
render () { |
||||
const { intl, src, alt, onClose } = this.props; |
||||
const { navigationHidden } = this.state; |
||||
|
||||
const navigationClassName = classNames('media-modal__navigation', { |
||||
'media-modal__navigation--hidden': navigationHidden, |
||||
}); |
||||
|
||||
return ( |
||||
<div className='modal-root__modal media-modal'> |
||||
<div className='media-modal__closer' role='presentation' onClick={onClose} > |
||||
<ImageLoader |
||||
src={src} |
||||
width={400} |
||||
height={400} |
||||
alt={alt} |
||||
onClick={this.toggleNavigation} |
||||
/> |
||||
</div> |
||||
|
||||
<div className={navigationClassName}> |
||||
<IconButton className='media-modal__close' title={intl.formatMessage(messages.close)} icon='times' onClick={onClose} size={40} /> |
||||
</div> |
||||
</div> |
||||
); |
||||
} |
||||
|
||||
} |
Loading…
Reference in new issue