import PropTypes from 'prop-types'; import React from 'react'; import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePureComponent from 'react-immutable-pure-component'; import { connect } from 'react-redux'; import { openModal } from 'soapbox/actions/modal'; import Bundle from 'soapbox/features/ui/components/bundle'; import { MediaGallery } from 'soapbox/features/ui/util/async-components'; export default @connect() class AttachmentThumbs extends ImmutablePureComponent { static propTypes = { dispatch: PropTypes.func.isRequired, media: ImmutablePropTypes.list.isRequired, onClick: PropTypes.func, }; renderLoading() { return <div className='media-gallery--compact' />; } onOpenMedia = (media, index) => { this.props.dispatch(openModal('MEDIA', { media, index })); } render() { const { media, onClick } = this.props; return ( <div className='attachment-thumbs'> <Bundle fetchComponent={MediaGallery} loading={this.renderLoading}> {Component => ( <Component media={media} onOpenMedia={this.onOpenMedia} height={50} compact /> )} </Bundle> {onClick && ( <div className='attachment-thumbs__clickable-region' onClick={onClick} /> )} </div> ); } }