2015-06-08 18:14:25 +02:00
|
|
|
'use strict';
|
|
|
|
|
|
|
|
import React from 'react';
|
2015-11-21 19:23:20 +01:00
|
|
|
import classNames from 'classnames';
|
2015-06-08 18:14:25 +02:00
|
|
|
|
|
|
|
import Row from 'react-bootstrap/lib/Row';
|
|
|
|
import Col from 'react-bootstrap/lib/Col';
|
|
|
|
|
2016-06-13 14:35:02 +02:00
|
|
|
import GlobalNotificationStore from '../stores/global_notification_store';
|
|
|
|
|
2016-06-13 16:25:56 +02:00
|
|
|
import { safeMerge } from '../utils/general';
|
2015-07-08 15:00:11 +02:00
|
|
|
|
2015-11-21 19:23:20 +01:00
|
|
|
const MAX_NOTIFICATION_BUBBLE_CONTAINER_WIDTH = 768;
|
|
|
|
|
2015-06-08 18:14:25 +02:00
|
|
|
let GlobalNotification = React.createClass({
|
|
|
|
|
2015-07-08 15:40:32 +02:00
|
|
|
getInitialState() {
|
2015-11-21 19:23:20 +01:00
|
|
|
const notificationStore = GlobalNotificationStore.getState();
|
|
|
|
|
2016-06-13 16:25:56 +02:00
|
|
|
return safeMerge(
|
2015-07-08 15:40:32 +02:00
|
|
|
{
|
2015-07-08 17:19:06 +02:00
|
|
|
containerWidth: 0
|
2015-07-08 15:40:32 +02:00
|
|
|
},
|
2015-11-21 19:23:20 +01:00
|
|
|
notificationStore
|
2015-07-08 15:40:32 +02:00
|
|
|
);
|
|
|
|
},
|
|
|
|
|
2015-06-08 18:14:25 +02:00
|
|
|
componentDidMount() {
|
|
|
|
GlobalNotificationStore.listen(this.onChange);
|
2015-07-08 15:00:11 +02:00
|
|
|
|
|
|
|
// init container width
|
|
|
|
this.handleContainerResize();
|
|
|
|
|
|
|
|
// we're using an event listener on window here,
|
|
|
|
// as it was not possible to listen to the resize events of a dom node
|
|
|
|
window.addEventListener('resize', this.handleContainerResize);
|
2015-06-08 18:14:25 +02:00
|
|
|
},
|
|
|
|
|
|
|
|
componentWillUnmount() {
|
2015-06-09 12:08:14 +02:00
|
|
|
GlobalNotificationStore.unlisten(this.onChange);
|
2015-07-08 15:00:11 +02:00
|
|
|
window.removeEventListener('resize', this.handleContainerResize);
|
2015-06-08 18:14:25 +02:00
|
|
|
},
|
|
|
|
|
2015-06-09 12:08:14 +02:00
|
|
|
onChange(state) {
|
2015-11-21 19:23:20 +01:00
|
|
|
this.setState(state);
|
2015-06-08 18:14:25 +02:00
|
|
|
},
|
|
|
|
|
2015-07-08 15:00:11 +02:00
|
|
|
handleContainerResize() {
|
|
|
|
this.setState({
|
2016-05-09 11:12:46 +02:00
|
|
|
containerWidth: this.refs.notificationWrapper.offsetWidth
|
2015-07-08 15:00:11 +02:00
|
|
|
});
|
|
|
|
},
|
|
|
|
|
2015-11-21 19:23:20 +01:00
|
|
|
renderNotification() {
|
2016-01-18 14:46:39 +01:00
|
|
|
const { containerWidth,
|
|
|
|
notificationsPaused,
|
|
|
|
notificationQueue: [notification],
|
|
|
|
notificationStatus } = this.state;
|
2015-11-21 19:23:20 +01:00
|
|
|
|
2015-12-07 14:31:18 +01:00
|
|
|
const notificationClasses = [];
|
|
|
|
|
2016-06-13 14:35:02 +02:00
|
|
|
if (this.state.containerWidth > MAX_NOTIFICATION_BUBBLE_CONTAINER_WIDTH) {
|
2015-12-07 14:31:18 +01:00
|
|
|
notificationClasses.push('ascribe-global-notification-bubble');
|
|
|
|
notificationClasses.push(notificationStatus === 'show' ? 'ascribe-global-notification-bubble-on'
|
|
|
|
: 'ascribe-global-notification-bubble-off');
|
|
|
|
} else {
|
|
|
|
notificationClasses.push('ascribe-global-notification');
|
|
|
|
notificationClasses.push(notificationStatus === 'show' ? 'ascribe-global-notification-on'
|
|
|
|
: 'ascribe-global-notification-off');
|
|
|
|
}
|
|
|
|
|
|
|
|
let textClass;
|
|
|
|
let message;
|
2015-11-21 19:23:20 +01:00
|
|
|
if (notification && !notificationsPaused) {
|
2015-12-07 14:31:18 +01:00
|
|
|
message = notification.message;
|
2015-07-08 17:06:53 +02:00
|
|
|
|
2015-11-21 19:23:20 +01:00
|
|
|
switch(notification.type) {
|
2015-07-08 17:19:06 +02:00
|
|
|
case 'success':
|
|
|
|
textClass = 'ascribe-global-notification-success';
|
|
|
|
break;
|
|
|
|
case 'danger':
|
|
|
|
textClass = 'ascribe-global-notification-danger';
|
|
|
|
break;
|
|
|
|
default:
|
2015-11-21 19:23:20 +01:00
|
|
|
console.warn('Could not find a matching notification type in global_notification.js');
|
2015-07-08 17:19:06 +02:00
|
|
|
}
|
2015-07-08 15:40:32 +02:00
|
|
|
}
|
2015-12-07 14:31:18 +01:00
|
|
|
|
|
|
|
return (
|
|
|
|
<div className={classNames(...notificationClasses)}>
|
|
|
|
<div className={textClass}>{message}</div>
|
|
|
|
</div>
|
|
|
|
);
|
2015-11-21 19:23:20 +01:00
|
|
|
},
|
2015-06-09 13:36:09 +02:00
|
|
|
|
2015-11-21 19:23:20 +01:00
|
|
|
render() {
|
2015-07-08 15:40:32 +02:00
|
|
|
return (
|
|
|
|
<div ref="notificationWrapper">
|
2015-06-09 13:36:09 +02:00
|
|
|
<Row>
|
|
|
|
<Col>
|
2015-11-21 19:23:20 +01:00
|
|
|
{this.renderNotification()}
|
2015-06-09 13:36:09 +02:00
|
|
|
</Col>
|
|
|
|
</Row>
|
2015-07-08 15:40:32 +02:00
|
|
|
</div>
|
|
|
|
);
|
2015-06-08 18:14:25 +02:00
|
|
|
}
|
|
|
|
});
|
|
|
|
|
2015-11-21 19:23:20 +01:00
|
|
|
export default GlobalNotification;
|