diff options
author | Claire <claire.github-309c@sitedethib.com> | 2022-11-10 13:27:40 +0100 |
---|---|---|
committer | GitHub <noreply@github.com> | 2022-11-10 13:27:40 +0100 |
commit | ee7e49d1b1323618e16026bc8db8ab7f9459cc2d (patch) | |
tree | 86d51ac7c13d2b08fae534a44524c2ef8b131315 /app/javascript/flavours/glitch/features/ui/components/image_modal.js | |
parent | b2a25d446a9f4368ad9d1240b9da30bc33942da5 (diff) | |
parent | c4d2c729245fab1dda31d0de73be9bc03217b06a (diff) |
Merge pull request #1910 from ClearlyClaire/glitch-soc/merge-upstream
Merge upstream changes
Diffstat (limited to 'app/javascript/flavours/glitch/features/ui/components/image_modal.js')
-rw-r--r-- | app/javascript/flavours/glitch/features/ui/components/image_modal.js | 59 |
1 files changed, 59 insertions, 0 deletions
diff --git a/app/javascript/flavours/glitch/features/ui/components/image_modal.js b/app/javascript/flavours/glitch/features/ui/components/image_modal.js new file mode 100644 index 000000000..a792b9be7 --- /dev/null +++ b/app/javascript/flavours/glitch/features/ui/components/image_modal.js @@ -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> + ); + } + +} |