Recover notification

Author: Yang Zhen

app/components/Notification/actions.js

@@ -4,8 +4,6 @@ import state from './state'
 export const NOTIFY_TYPE = {
   ERROR: 'error',
   INFO: 'info',
-  SUCCESS: 'success',
-  WARNING: 'warning'
 }
 
 export const NOTIFICATION_REMOVE = 'NOTIFICATION_REMOVE'
@@ -15,14 +13,12 @@ export const removeNotification = registerAction.normal(NOTIFICATION_REMOVE, (no
 })
 
 const NOTIFICATION_ADD = 'NOTIFICATION_ADD'
-export const addNotification = registerAction.normal(
-  NOTIFICATION_ADD,
+export const addNotification = registerAction.normal(NOTIFICATION_ADD,
   (notification) => {
     const notifKey = Date.now()
     let defaultNotification = {
       message: '',
-      action: '',
-      notifyType: NOTIFY_TYPE.SUCCESS, // 默认弹出success弹窗
+      action: 'Dismiss',
       key: notifKey,
       dismissAfter: 6000,
       onClick: () => removeNotification(notifKey)
@@ -32,7 +28,7 @@ export const addNotification = registerAction.normal(
       defaultNotification = {
         ...defaultNotification,
         barStyle: { backgroundColor: 'red' },
-        actionStyle: { color: 'white' }
+        actionStyle: { color: 'white' },
       }
     }
 

app/components/Notification/index.jsx

@@ -4,86 +4,40 @@ import { NotificationStack } from 'react-notification'
 import * as actions from './actions'
 import state from './state'
 
-const actionStyleFactory = (index, style) =>
-  Object.assign({}, style, {
-    color: '#ccc',
-    right: '-100%',
-    bottom: 'initial',
-    top: `${2 + index * 4}rem`,
-    zIndex: 20,
-    fontSize: '12px',
-    padding: '8px'
-  })
-const barStyleFactory = (index, style) =>
-  Object.assign({}, style, {
+const barStyleFactory = (index, style) => {
+  return Object.assign({}, style, {
     left: 'initial',
     right: '-100%',
     bottom: 'initial',
     top: `${2 + index * 4}rem`,
     zIndex: 20,
     fontSize: '12px',
-    padding: '8px'
+    padding: '8px',
   })
+}
 
-const activeBarStyleFactory = (index, style) =>
-  Object.assign({}, style, {
+const activeBarStyleFactory = (index, style) => {
+  return Object.assign({}, style, {
     left: 'initial',
     right: '1rem',
     bottom: 'initial',
     top: `${2 + index * 4}rem`,
     fontSize: '12px',
-    padding: '8px'
+    padding: '8px',
   })
-
-function notificationMessageFactory (notifyType, message) {
-  let ClassName
-  let Color
-  switch (notifyType) {
-    case 'error':
-      ClassName = 'fa fa-times-circle'
-      Color = 'red'
-      break
-    case 'success':
-      ClassName = 'fa fa-check-circle'
-      Color = 'green'
-      break
-    case 'warning':
-      ClassName = 'fa fa-exclamation-triangle'
-      Color = 'orange'
-      break
-    case 'info':
-      ClassName = 'fa fa-info-circle'
-      Color = 'blue'
-      break
-    default:
-  }
-  return (
-    <span style={{ fontSize: 12 }}>
-      <span style={{ color: Color }}>
-        <i className={ClassName} aria-hidden='true' />
-      </span>
-      &nbsp;&nbsp;{message}
-    </span>
-  )
 }
 
 class Notification extends Component {
   constructor (props) {
     super()
   }
-
   render () {
-    const notifications = this.props.notifications.map((v) => {
-      v.action = <i className='fa fa-close' aria-hidden='true' />
-      v.message = notificationMessageFactory(v.notifyType, v.message)
-      return v
-    })
+    const { notifications } = this.props
     return (
       <NotificationStack
         notifications={notifications}
         onDismiss={notification => actions.removeNotification(notification.key)}
         barStyleFactory={barStyleFactory}
-        actionStyleFactory={actionStyleFactory}
         activeBarStyleFactory={activeBarStyleFactory}
       />
     )