61 lines
1.6 KiB
JavaScript
61 lines
1.6 KiB
JavaScript
import React from 'react';
|
|
import { injectIntl } from 'react-intl';
|
|
import { NotificationStack } from 'react-notification';
|
|
import { connect } from 'react-redux';
|
|
import { Link } from 'react-router-dom';
|
|
|
|
import { dismissAlert } from '../../../actions/alerts';
|
|
import { getAlerts } from '../../../selectors';
|
|
|
|
const CustomNotificationStack = (props) => (
|
|
<div role='assertive' className='z-1000 fixed inset-0 flex items-end px-4 py-6 pointer-events-none sm:p-6 sm:items-start'>
|
|
<NotificationStack {...props} />
|
|
</div>
|
|
);
|
|
|
|
const defaultBarStyleFactory = (index, style, notification) => {
|
|
return Object.assign(
|
|
{},
|
|
style,
|
|
{ bottom: `${14 + index * 12 + index * 42}px` },
|
|
);
|
|
};
|
|
|
|
const mapStateToProps = (state, { intl }) => {
|
|
const notifications = getAlerts(state);
|
|
|
|
notifications.forEach(notification => {
|
|
['title', 'message', 'actionLabel'].forEach(key => {
|
|
const value = notification[key];
|
|
|
|
if (typeof value === 'object') {
|
|
notification[key] = intl.formatMessage(value);
|
|
}
|
|
});
|
|
|
|
if (notification.actionLabel) {
|
|
notification.action = (
|
|
<Link to={notification.actionLink}>
|
|
{notification.actionLabel}
|
|
</Link>
|
|
);
|
|
}
|
|
});
|
|
|
|
return { notifications, linkComponent: Link };
|
|
};
|
|
|
|
const mapDispatchToProps = (dispatch) => {
|
|
const onDismiss = alert => {
|
|
dispatch(dismissAlert(alert));
|
|
};
|
|
|
|
return {
|
|
onDismiss,
|
|
onClick: onDismiss,
|
|
barStyleFactory: defaultBarStyleFactory,
|
|
activeBarStyleFactory: defaultBarStyleFactory,
|
|
};
|
|
};
|
|
|
|
export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(CustomNotificationStack));
|