gab-social/app/javascript/gabsocial/containers/toasts_container.js

67 lines
1.7 KiB
JavaScript
Raw Normal View History

2020-11-15 18:48:32 +00:00
import React from 'react'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'
import { getToasts } from '../selectors'
import { dismissToast } from '../actions/toasts'
import { CX } from '../constants'
import Toast from '../components/toast'
class ToastsContainer extends React.PureComponent {
handleOnDismiss = (toastKey) => {
this.props.dispatch(dismissToast(toastKey))
2020-11-15 18:48:32 +00:00
}
render() {
const { notifications } = this.props
const hasNotifications = !!notifications && notifications.size > 0
2020-11-15 18:48:32 +00:00
const containerClasses = CX({
d: 1,
2020-11-15 18:48:32 +00:00
z5: 1,
posFixed: 1,
bottom0: 1,
left0: 1,
pl15: 1,
pt15: 1,
heightMax100VH: 1,
pb10: 1,
saveAreaInsetMB: 1,
2020-11-15 18:48:32 +00:00
displayNone: !hasNotifications
})
2020-11-15 18:48:32 +00:00
return (
<div className={containerClasses}>
{
hasNotifications && notifications.map((notification) => (
2020-11-15 18:48:32 +00:00
<Toast
onDismiss={this.handleOnDismiss}
id={notification.get('key')}
key={`toast-${notification.get('key')}`}
title={notification.get('title', '')}
to={notification.get('to', null)}
image={notification.get('image', null)}
message={notification.get('message', null)}
date={notification.get('date', null)}
isImageAccount={notification.get('isImageAccount', null)}
2020-11-15 18:48:32 +00:00
/>
))
}
</div>
)
}
}
const mapStateToProps = (state) => ({
notifications: state.get('toasts')
})
2020-11-15 18:48:32 +00:00
ToastsContainer.propTypes = {
notifications: PropTypes.array,
}
export default connect(mapStateToProps)(ToastsContainer)