fixBug:右上角的提醒通知优化 taskId:#4102

Author: tongtingting

app/components/Notification/actions.js

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

app/components/Notification/index.jsx

@@ -4,40 +4,87 @@ import { NotificationStack } from 'react-notification'
 import * as actions from './actions'
 import state from './state'
 
-const barStyleFactory = (index, style) => {
-  return Object.assign({}, style, {
+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, {
     left: 'initial',
     right: '-100%',
     bottom: 'initial',
     top: `${2 + index * 4}rem`,
     zIndex: 20,
     fontSize: '12px',
-    padding: '8px',
+    padding: '8px'
   })
-}
 
-const activeBarStyleFactory = (index, style) => {
-  return Object.assign({}, style, {
+const activeBarStyleFactory = (index, style) =>
+  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
+    const notifications = this.props.notifications.map((v) => {
+      v.action = <i className='fa fa-close' aria-hidden='true' />
+      v.dismissAfter = false
+      v.message = notificationMessageFactory(v.notifyType, v.message)
+      return v
+    })
     return (
       <NotificationStack
         notifications={notifications}
         onDismiss={notification => actions.removeNotification(notification.key)}
         barStyleFactory={barStyleFactory}
+        actionStyleFactory={actionStyleFactory}
         activeBarStyleFactory={activeBarStyleFactory}
       />
     )