import React, { Fragment } from 'react'; import ReactDOM from 'react-dom'; import PropTypes from 'prop-types'; import { IntlProvider, addLocaleData } from 'react-intl'; import { getLocale } from '../locales'; import Card from 'flavours/glitch/features/status/components/card'; import ModalRoot from 'flavours/glitch/components/modal_root'; import MediaModal from 'flavours/glitch/features/ui/components/media_modal'; import { fromJS } from 'immutable'; const { localeData, messages } = getLocale(); addLocaleData(localeData); export default class CardsContainer extends React.PureComponent { static propTypes = { locale: PropTypes.string, cards: PropTypes.object.isRequired, }; state = { media: null, }; handleOpenCard = (media) => { document.body.classList.add('card-standalone__body'); this.setState({ media }); } handleCloseCard = () => { document.body.classList.remove('card-standalone__body'); this.setState({ media: null }); } render () { const { locale, cards } = this.props; return ( {[].map.call(cards, container => { const { card, ...props } = JSON.parse(container.getAttribute('data-props')); return ReactDOM.createPortal( , container, ); })} {this.state.media && ( )} ); } }