diff options
Diffstat (limited to 'openecomp-ui/src/nfvo-components/notification')
4 files changed, 195 insertions, 0 deletions
diff --git a/openecomp-ui/src/nfvo-components/notification/Notifications.js b/openecomp-ui/src/nfvo-components/notification/Notifications.js new file mode 100644 index 0000000000..046412a68d --- /dev/null +++ b/openecomp-ui/src/nfvo-components/notification/Notifications.js @@ -0,0 +1,68 @@ +/* + * Copyright © 2016-2018 European Support Limited + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import React from 'react'; +import { Portal, Notification } from 'sdc-ui/lib/react/'; +import { connect } from 'react-redux'; +import { removeNotification } from './NotificationsConstants.js'; +import { CSSTransition, TransitionGroup } from 'react-transition-group'; + +export const mapStateToProps = ({ popupNotifications = [] }) => { + return { + notifications: popupNotifications + }; +}; + +const mapActionToProps = dispatch => { + return { + onClick: item => { + dispatch(removeNotification(item)); + } + }; +}; + +class Notifications extends React.Component { + render() { + const { notifications, onClick } = this.props; + + return ( + <Portal> + <div className="onboarding-notifications-container position-top-right"> + <TransitionGroup> + {notifications.map(item => ( + <CSSTransition + in={true} + timeout={500} + unmountOnExit + classNames="react-transition" + key={`notification-transition-${item.id}`}> + <Notification + key={item.id} + type={item.type} + title={item.title} + message={item.message} + onClick={() => onClick(item)} + /> + </CSSTransition> + ))} + </TransitionGroup> + </div> + </Portal> + ); + } +} + +export default connect(mapStateToProps, mapActionToProps, null)(Notifications); diff --git a/openecomp-ui/src/nfvo-components/notification/NotificationsConstants.js b/openecomp-ui/src/nfvo-components/notification/NotificationsConstants.js new file mode 100644 index 0000000000..329c557cb0 --- /dev/null +++ b/openecomp-ui/src/nfvo-components/notification/NotificationsConstants.js @@ -0,0 +1,66 @@ +/* + * Copyright © 2016-2018 European Support Limited + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +import UUID from 'uuid-js'; + +export const actionTypes = { + ADD_NOTIFICATION: 'ADD_NOTIFICATION', + REMOVE_NOTIFICATION: 'REMOVE_NOTIFICATION' +}; + +export const notificationActions = { + showNotification: item => ({ + type: actionTypes.ADD_NOTIFICATION, + payload: { + ...item, + id: UUID.create().toString() + } + }), + + showSuccess: ({ title, message, timeout }) => + notificationActions.showNotification({ + title, + message, + timeout, + type: 'success' + }), + showInfo: ({ title, message, timeout }) => + notificationActions.showNotification({ + title, + message, + timeout, + type: 'info' + }), + showWarning: ({ title, message, timeout }) => + notificationActions.showNotification({ + title, + message, + timeout, + type: 'warning' + }), + showError: ({ title, message, timeout }) => + notificationActions.showNotification({ + title, + message, + timeout, + type: 'error' + }), + removeNotification: item => ({ + type: actionTypes.REMOVE_NOTIFICATION, + payload: item + }) +}; + +export const notificationTimeout = 4000; diff --git a/openecomp-ui/src/nfvo-components/notification/NotificationsMiddleware.js b/openecomp-ui/src/nfvo-components/notification/NotificationsMiddleware.js new file mode 100644 index 0000000000..f32f20bc50 --- /dev/null +++ b/openecomp-ui/src/nfvo-components/notification/NotificationsMiddleware.js @@ -0,0 +1,33 @@ +/* + * Copyright © 2016-2018 European Support Limited + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +import { + actionTypes, + notificationActions, + notificationTimeout +} from './NotificationsConstants.js'; + +const notifications = store => next => action => { + if (action.type === actionTypes.ADD_NOTIFICATION) { + const { timeout, ...data } = action.payload; + const interval = timeout || notificationTimeout; + setTimeout(() => { + store.dispatch(notificationActions.removeNotification(data)); + }, interval); + } + return next(action); +}; + +export default notifications; diff --git a/openecomp-ui/src/nfvo-components/notification/NotificationsReducer.js b/openecomp-ui/src/nfvo-components/notification/NotificationsReducer.js new file mode 100644 index 0000000000..9b97381c22 --- /dev/null +++ b/openecomp-ui/src/nfvo-components/notification/NotificationsReducer.js @@ -0,0 +1,28 @@ +/* + * Copyright © 2016-2018 European Support Limited + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +import { actionTypes } from './NotificationsConstants'; + +export default (state = [], action) => { + switch (action.type) { + case actionTypes.ADD_NOTIFICATION: + return [...state, action.payload]; + + case actionTypes.REMOVE_NOTIFICATION: + return state.filter(item => item.id !== action.payload.id); + default: + return state; + } +}; |