|
|
@ -1,9 +1,11 @@ |
|
|
|
import React from 'react'; |
|
|
|
import React, { PureComponent, Fragment } from 'react'; |
|
|
|
import ReactDOM from 'react-dom'; |
|
|
|
import PropTypes from 'prop-types'; |
|
|
|
import { IntlProvider, addLocaleData } from 'react-intl'; |
|
|
|
import { getLocale } from '../locales'; |
|
|
|
import MediaGallery from '../components/media_gallery'; |
|
|
|
import Video from '../features/video'; |
|
|
|
import Card from '../features/status/components/card'; |
|
|
|
import ModalRoot from '../components/modal_root'; |
|
|
|
import MediaModal from '../features/ui/components/media_modal'; |
|
|
|
import { fromJS } from 'immutable'; |
|
|
@ -11,11 +13,13 @@ import { fromJS } from 'immutable'; |
|
|
|
const { localeData, messages } = getLocale(); |
|
|
|
addLocaleData(localeData); |
|
|
|
|
|
|
|
export default class MediaGalleriesContainer extends React.PureComponent { |
|
|
|
const MEDIA_COMPONENTS = { MediaGallery, Video, Card }; |
|
|
|
|
|
|
|
export default class MediaContainer extends PureComponent { |
|
|
|
|
|
|
|
static propTypes = { |
|
|
|
locale: PropTypes.string.isRequired, |
|
|
|
galleries: PropTypes.object.isRequired, |
|
|
|
components: PropTypes.object.isRequired, |
|
|
|
}; |
|
|
|
|
|
|
|
state = { |
|
|
@ -24,31 +28,34 @@ export default class MediaGalleriesContainer extends React.PureComponent { |
|
|
|
}; |
|
|
|
|
|
|
|
handleOpenMedia = (media, index) => { |
|
|
|
document.body.classList.add('media-gallery-standalone__body'); |
|
|
|
document.body.classList.add('media-standalone__body'); |
|
|
|
this.setState({ media, index }); |
|
|
|
} |
|
|
|
|
|
|
|
handleCloseMedia = () => { |
|
|
|
document.body.classList.remove('media-gallery-standalone__body'); |
|
|
|
document.body.classList.remove('media-standalone__body'); |
|
|
|
this.setState({ media: null, index: null }); |
|
|
|
} |
|
|
|
|
|
|
|
render () { |
|
|
|
const { locale, galleries } = this.props; |
|
|
|
const { locale, components } = this.props; |
|
|
|
|
|
|
|
return ( |
|
|
|
<IntlProvider locale={locale} messages={messages}> |
|
|
|
<React.Fragment> |
|
|
|
{[].map.call(galleries, gallery => { |
|
|
|
const { media, ...props } = JSON.parse(gallery.getAttribute('data-props')); |
|
|
|
<Fragment> |
|
|
|
{[].map.call(components, (component, i) => { |
|
|
|
const componentName = component.getAttribute('data-component'); |
|
|
|
const Component = MEDIA_COMPONENTS[componentName]; |
|
|
|
const { media, card, ...props } = JSON.parse(component.getAttribute('data-props')); |
|
|
|
|
|
|
|
Object.assign(props, { |
|
|
|
...(media ? { media: fromJS(media) } : {}), |
|
|
|
...(card ? { card: fromJS(card) } : {}), |
|
|
|
}); |
|
|
|
|
|
|
|
return ReactDOM.createPortal( |
|
|
|
<MediaGallery |
|
|
|
{...props} |
|
|
|
media={fromJS(media)} |
|
|
|
onOpenMedia={this.handleOpenMedia} |
|
|
|
/>, |
|
|
|
gallery |
|
|
|
<Component onOpenMedia={this.handleOpenMedia} {...props} key={`media-${i}`} />, |
|
|
|
component, |
|
|
|
); |
|
|
|
})} |
|
|
|
<ModalRoot onClose={this.handleCloseMedia}> |
|
|
@ -60,7 +67,7 @@ export default class MediaGalleriesContainer extends React.PureComponent { |
|
|
|
/> |
|
|
|
)} |
|
|
|
</ModalRoot> |
|
|
|
</React.Fragment> |
|
|
|
</Fragment> |
|
|
|
</IntlProvider> |
|
|
|
); |
|
|
|
} |