diff --git a/README.md b/README.md index 1231256..72d127a 100644 --- a/README.md +++ b/README.md @@ -165,10 +165,12 @@ dispatch(Notifications.warning(notification)); dispatch(Notifications.info(notification)); dispatch(Notifications.hide(uid)); // Hides notification based on uid dispatch(Notifications.removeAll()); // Removes all notifications +dispatch(Notifications.removeAll()); // Removes all notifications +dispatch(Notifications.editNotification(newNotification)); // Edit notification, newNotification must have same uid // OR // -import { show, success, error, warning, info, hide, removeAll } from 'react-notification-system-redux'; +import { show, success, error, warning, info, hide, removeAll, editNotification } from 'react-notification-system-redux'; dispatch(show(notification, level)); dispatch(success(notification)); @@ -177,6 +179,7 @@ dispatch(warning(notification)); dispatch(info(notification)); dispatch(hide(uid)); // Hides notification based on uid dispatch(removeAll()); // Removes all notifications +dispatch(editNotification(newNotification)); // Edit notification, newNotification must have same uid ``` diff --git a/example/src/components/container.js b/example/src/components/container.js index 6aee3a8..bda9e27 100644 --- a/example/src/components/container.js +++ b/example/src/components/container.js @@ -3,10 +3,10 @@ import PropTypes from 'prop-types'; import {connect} from 'react-redux'; import ReactDOM from 'react-dom'; -import Notifications, { success, error, warning, info, removeAll } from 'react-notification-system-redux'; +import Notifications, { success, error, warning, info, removeAll, editNotification } from 'react-notification-system-redux'; const notificationOpts = { - // uid: 'once-please', // you can specify your own uid if required + // uid: '123', // you can specify your own uid if required title: 'Hey, it\'s good to see you!', message: 'Now you can see how easy it is to use notifications in React!', position: 'tr', @@ -21,9 +21,9 @@ class Container extends React.Component { constructor() { super(); - this.handleClick = this.handleClick.bind(this); this.handleRemoveAll = this.handleRemoveAll.bind(this); + this.editNotification = this.editNotification.bind(this); } dispatchNotification(fn, timeout) { @@ -43,6 +43,30 @@ class Container extends React.Component { this.context.store.dispatch(removeAll()); } + editNotification(){ + let notificationPayload = { + uid : 'timer', + title: 'Updates every second', + message: `${new Date().getMinutes()}:${new Date().getSeconds()}`, + position: 'tr', + autoDismiss: 0, + action: { + label: 'Click me!!', + callback: () => alert('clicked!') + } + }; + + // show notificatiom first time + this.context.store.dispatch(success(notificationPayload)); + + // updates same uid notification after every sec. + setInterval(() => { + this.context.store.dispatch(editNotification(Object.assign({}, notificationPayload , { + message: `${new Date().getMinutes()}:${new Date().getSeconds()}` + }))); + }, 1000); + } + render() { const {notifications} = this.props; @@ -50,6 +74,8 @@ class Container extends React.Component {
+

+
); diff --git a/src/actions.js b/src/actions.js index e369ce9..5d8b53f 100644 --- a/src/actions.js +++ b/src/actions.js @@ -1,4 +1,4 @@ -import {RNS_SHOW_NOTIFICATION, RNS_HIDE_NOTIFICATION, RNS_REMOVE_ALL_NOTIFICATIONS} from './const'; +import {RNS_SHOW_NOTIFICATION, RNS_HIDE_NOTIFICATION, RNS_REMOVE_ALL_NOTIFICATIONS, RNS_EDIT_NOTIFICATION } from './const'; //Example opts // { @@ -49,3 +49,7 @@ export function hide(uid) { export function removeAll() { return { type: RNS_REMOVE_ALL_NOTIFICATIONS }; } + +export function editNotification(opts = {}){ + return {type : RNS_EDIT_NOTIFICATION, opts }; +} \ No newline at end of file diff --git a/src/const.js b/src/const.js index 470658c..4c5fe76 100644 --- a/src/const.js +++ b/src/const.js @@ -1,3 +1,4 @@ export const RNS_SHOW_NOTIFICATION = 'RNS_SHOW_NOTIFICATION'; +export const RNS_EDIT_NOTIFICATION = 'RNS_EDIT_NOTIFICATION'; export const RNS_HIDE_NOTIFICATION = 'RNS_HIDE_NOTIFICATION'; export const RNS_REMOVE_ALL_NOTIFICATIONS = 'RNS_REMOVE_ALL_NOTIFICATIONS'; diff --git a/src/notifications.js b/src/notifications.js index 066654a..6940c5c 100644 --- a/src/notifications.js +++ b/src/notifications.js @@ -8,37 +8,71 @@ import NotifySystem from 'react-notification-system'; class Notifications extends React.Component { + constructor(props){ + super(props); + this.notifications = []; //variable to keep refernce to all notifications, needs in case of update notification + this.editNotifications = this.editNotifications.bind(this); + this.addNotification = this.addNotification.bind(this); + this.removeNotification = this.removeNotification.bind(this); + } + system() { return this.refs.notify; } - componentWillReceiveProps(nextProps) { - const {notifications} = nextProps; - const notificationIds = notifications.map(notification => notification.uid); - const systemNotifications = this.system().state.notifications || []; + editNotifications(notifications){ + notifications.map((notification, index) => { + this.system().editNotification(this.notifications[index] , { + ...notification, + onRemove: () => { + this.context.store.dispatch(actions.hide(notification.uid)); + notification.onRemove && notification.onRemove(); + } + }); + }); + } - if (notifications.length > 0) { - // Get all active notifications from react-notification-system - /// and remove all where uid is not found in the reducer - (systemNotifications).forEach(notification => { - if (notificationIds.indexOf(notification.uid) < 0) { - this.system().removeNotification(notification.uid); + addNotification(notifications){ + this.notifications = notifications.map(notification => { + return this.system().addNotification({ + ...notification, + onRemove: () => { + this.context.store.dispatch(actions.hide(notification.uid)); + notification.onRemove && notification.onRemove(); } }); + }); + } - notifications.forEach(notification => { - this.system().addNotification({ - ...notification, - onRemove: () => { - this.context.store.dispatch(actions.hide(notification.uid)); - notification.onRemove && notification.onRemove(); + removeNotification(){ + this.system().clearNotifications(); + this.notifications = []; + } + + componentWillReceiveProps(nextProps) { + const {notifications} = nextProps; + const notificationIds = notifications.map(notification => notification.uid); + const systemNotifications = this.system().state.notifications || []; + + if(this.props.notifications.length === nextProps.notifications.length){ + this.editNotifications( notifications); + } + else{ + if (notifications.length > 0) { + // Get all active notifications from react-notification-system + /// and remove all where uid is not found in the reducer + (systemNotifications).forEach(notification => { + if (notificationIds.indexOf(notification.uid) < 0) { + this.system().removeNotification(notification.uid); } }); - }); + + this.addNotification(notifications); + } } if ((this.props.notifications !== notifications) && notifications.length === 0) { - this.system().clearNotifications(); + this.removeNotification(); } } @@ -71,3 +105,4 @@ Object.keys(actions).forEach(key => { Notifications.reducer = reducer; module.exports = Notifications; +// export default Notifications; diff --git a/src/reducer.js b/src/reducer.js index 576fa6e..12801a8 100644 --- a/src/reducer.js +++ b/src/reducer.js @@ -1,4 +1,4 @@ -import {RNS_SHOW_NOTIFICATION, RNS_HIDE_NOTIFICATION, RNS_REMOVE_ALL_NOTIFICATIONS} from './const'; +import {RNS_SHOW_NOTIFICATION, RNS_HIDE_NOTIFICATION, RNS_REMOVE_ALL_NOTIFICATIONS, RNS_EDIT_NOTIFICATION} from './const'; export default function Notifications(state = [], action = {}) { switch(action.type) { @@ -14,6 +14,11 @@ export default function Notifications(state = [], action = {}) { }); case RNS_REMOVE_ALL_NOTIFICATIONS: return []; + case RNS_EDIT_NOTIFICATION: + const { opts } = action; + const {uid , ...parms} = opts; + return state.map(notification => notification.uid !== uid ? notification : Object.assign({}, notification, parms)); + default : + return state; } - return state; }