logo

mastofe

My custom branche(s) on git.pleroma.social/pleroma/mastofe git clone https://hacktivis.me/git/mastofe.git

media_galleries_container.js (1973B)


  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import PropTypes from 'prop-types';
  4. import { IntlProvider, addLocaleData } from 'react-intl';
  5. import { getLocale } from '../locales';
  6. import MediaGallery from '../components/media_gallery';
  7. import ModalRoot from '../components/modal_root';
  8. import MediaModal from '../features/ui/components/media_modal';
  9. import { fromJS } from 'immutable';
  10. const { localeData, messages } = getLocale();
  11. addLocaleData(localeData);
  12. export default class MediaGalleriesContainer extends React.PureComponent {
  13. static propTypes = {
  14. locale: PropTypes.string.isRequired,
  15. galleries: PropTypes.object.isRequired,
  16. };
  17. state = {
  18. media: null,
  19. index: null,
  20. };
  21. handleOpenMedia = (media, index) => {
  22. document.body.classList.add('media-gallery-standalone__body');
  23. this.setState({ media, index });
  24. }
  25. handleCloseMedia = () => {
  26. document.body.classList.remove('media-gallery-standalone__body');
  27. this.setState({ media: null, index: null });
  28. }
  29. render () {
  30. const { locale, galleries } = this.props;
  31. return (
  32. <IntlProvider locale={locale} messages={messages}>
  33. <React.Fragment>
  34. {[].map.call(galleries, gallery => {
  35. const { media, ...props } = JSON.parse(gallery.getAttribute('data-props'));
  36. return ReactDOM.createPortal(
  37. <MediaGallery
  38. {...props}
  39. media={fromJS(media)}
  40. onOpenMedia={this.handleOpenMedia}
  41. />,
  42. gallery
  43. );
  44. })}
  45. <ModalRoot onClose={this.handleCloseMedia}>
  46. {this.state.media === null || this.state.index === null ? null : (
  47. <MediaModal
  48. media={this.state.media}
  49. index={this.state.index}
  50. onClose={this.handleCloseMedia}
  51. />
  52. )}
  53. </ModalRoot>
  54. </React.Fragment>
  55. </IntlProvider>
  56. );
  57. }
  58. }