OSDN Git Service

updated account alias.
[bytom/bytom-electron.git] / src / features / shared / components / Flash / Flash.jsx
index be47540..b9070dc 100644 (file)
@@ -2,20 +2,38 @@ import React from 'react'
 import styles from './Flash.scss'
 
 class Flash extends React.Component {
+  constructor(props) {
+    super(props)
+    Object.keys(props.messages).forEach(key => {
+      const item = props.messages[key]
+      if (!item.displayed) {
+        this.props.markFlashDisplayed(key)
+        setTimeout(() => {
+          this.props.dismissFlash(key)
+        }, 5000)
+      }
+    })
+  }
+
   componentWillReceiveProps(nextProps) {
     Object.keys(nextProps.messages).forEach(key => {
       const item = nextProps.messages[key]
       if (!item.displayed) {
         this.props.markFlashDisplayed(key)
+        setTimeout(() => {
+          this.props.dismissFlash(key)
+        }, 5000)
       }
     })
   }
 
+
   render() {
     if (!this.props.messages || this.props.hideFlash) {
       return null
     }
 
+    const {t} = this.props
     const messages = []
     // Flash messages are stored in an objecty key with a random UUID. If
     // multiple messages are displayed, we rely on the browser maintaining
@@ -23,11 +41,13 @@ class Flash extends React.Component {
     // were created.
     Object.keys(this.props.messages).forEach(key => {
       const item = this.props.messages[key]
+      const messageContent = t([`message.${item.message}`, item.message])
+
       messages.push(
         <div className={`${styles.alert} ${styles[item.type]} ${styles.main}`} key={key}>
           <div className={styles.content}>
             {item.title && <div><strong>{item.title}</strong></div>}
-            {item.message}
+            {messageContent}
           </div>
 
           <button type='button' className='close' onClick={() => this.props.dismissFlash(key)}>
@@ -37,7 +57,7 @@ class Flash extends React.Component {
     })
 
     return (
-      <div>
+      <div className={this.props.className}>
         {messages}
       </div>
     )
@@ -45,11 +65,13 @@ class Flash extends React.Component {
 }
 
 import { connect } from 'react-redux'
+import {withNamespaces} from 'react-i18next'
 
 const mapStateToProps = (state) => ({
-  hideFlash: state.tutorial.isShowing && state.routing.locationBeforeTransitions.pathname.includes(state.tutorial.route)
+  // hideFlash: state.tutorial.isShowing && state.routing.locationBeforeTransitions.pathname.includes(state.tutorial.route)
+  hideFlash: false,
 })
 
 export default connect(
   mapStateToProps
-)(Flash)
+)(withNamespaces('translations') (Flash))