Merge branch 'snackbar'

src/components/Snackbar.js

@@ -21,21 +21,49 @@ const styles = (theme) => ({
 
 class Snackbar extends Component {
 
+  constructor(props){
+    super(props);
+    this.state = {
+      open: props.open
+    };
+    this.timeout = null;
+  }
+
+  componentDidMount(){
+    if(this.state.open){
+      this.autoHideDuration();
+    }
+  }
+
+  componentWillUnmount(){
+    if(this.state.open){
+      clearTimeout(this.timeout);
+    }
+  }
+
+  onClose = () => {
+    this.setState({open: false});
+  }
+
+  autoHideDuration = () => {
+    this.timeout = setTimeout(() => {
+      this.onClose();
+    }, 5000);
+  }
+
   render() {
     return (
       <MaterialUISnackbar
         anchorOrigin={{vertical: 'bottom', horizontal: 'left' }}
-        open={this.props.open}
+        open={this.state.open}
-        onClose={this.props.onClose}
+        key={this.props.key}
-        key={Date.now()+this.props.message}
-        autoHideDuration={5000}
         style={{left: '22px', bottom: '40px', width: '300px', zIndex: '100'}}
       >
         <SnackbarContent
           style={{flexWrap: 'nowrap'}}
           className={this.props.type === 'error' ? this.props.classes.error : this.props.classes.success}
           action={
-            <IconButton onClick={this.props.onClose} style={{color: 'inherit'}}>
+            <IconButton onClick={this.onClose} style={{color: 'inherit'}}>
               <FontAwesomeIcon icon={faTimes} size="xs"/>
             </IconButton>
           }

src/components/Tutorial/Builder/Builder.js

@@ -37,6 +37,7 @@ class Builder extends Component {
       content: '',
       string: false,
       snackbar: false,
+      key: '',
       message: ''
     };
     this.inputRef = React.createRef();
@@ -49,7 +50,7 @@ class Builder extends Component {
   submit = () => {
     var isError = this.props.checkError();
     if(isError){
-      this.setState({ snackbar: true, message: `Die Angaben für das Tutorial sind nicht vollständig.`, type: 'error'});
+      this.setState({ snackbar: true, key: Date.now(), message: `Die Angaben für das Tutorial sind nicht vollständig.`, type: 'error'});
       window.scrollTo(0, 0);
     }
     else{
@@ -65,7 +66,7 @@ class Builder extends Component {
 
   reset = () => {
     this.props.resetTutorial();
-    this.setState({ snackbar: true, message: `Das Tutorial wurde erfolgreich zurückgesetzt.`, type: 'success'});
+    this.setState({ snackbar: true, key: Date.now(), message: `Das Tutorial wurde erfolgreich zurückgesetzt.`, type: 'success'});
     window.scrollTo(0, 0);
   }
 
@@ -95,7 +96,7 @@ class Builder extends Component {
         result.steps = [{}];
       }
       this.props.readJSON(result);
-      this.setState({ snackbar: true, message: `${isFile ? 'Die übergebene JSON-Datei' : 'Der übergebene JSON-String'} wurde erfolgreich übernommen.`, type: 'success'});
+      this.setState({ snackbar: true, key: Date.now(), message: `${isFile ? 'Die übergebene JSON-Datei' : 'Der übergebene JSON-String'} wurde erfolgreich übernommen.`, type: 'success'});
     } catch(err){
       console.log(err);
       this.props.progress(false);
@@ -115,10 +116,6 @@ class Builder extends Component {
     this.setState({ open: !this.state });
   }
 
-  toggleSnackbar = () => {
-    this.setState({ snackbar: !this.state, message: '', type: null });
-  }
-
 
   render() {
     return (
@@ -185,9 +182,9 @@ class Builder extends Component {
 
         <Snackbar
           open={this.state.snackbar}
-          onClose={this.toggleSnackbar}
           message={this.state.message}
           type={this.state.type}
+          key={this.state.key}
         />
 
       </div>

src/components/WorkspaceFunc.js

@@ -62,6 +62,7 @@ class WorkspaceFunc extends Component {
       saveXml: false,
       name: props.name,
       snackbar: false,
+      key: '',
       message: ''
     };
   }
@@ -76,10 +77,6 @@ class WorkspaceFunc extends Component {
     this.setState({ open: !this.state });
   }
 
-  toggleSnackbar = () => {
-    this.setState({ snackbar: !this.state, message: '' });
-  }
-
   saveXmlFile = () => {
     var code = this.props.xml;
     this.toggleDialog();
@@ -128,7 +125,7 @@ class WorkspaceFunc extends Component {
               var extensionPosition = xmlFile.name.lastIndexOf('.');
               this.props.workspaceName(xmlFile.name.substr(0, extensionPosition));
             }
-            this.setState({ snackbar: true, message: 'Das Projekt aus gegebener XML-Datei wurde erfolgreich eingefügt.' });
+            this.setState({ snackbar: true, key: Date.now(), message: 'Das Projekt aus gegebener XML-Datei wurde erfolgreich eingefügt.' });
           }
         } catch(err){
           this.setState({ open: true, file: false, title: 'Ungültige XML', content: 'Die XML-Datei konnte nicht in Blöcke zerlegt werden. Bitte überprüfe den XML-Code und versuche es erneut.' });
@@ -140,7 +137,7 @@ class WorkspaceFunc extends Component {
   renameWorkspace = () => {
     this.props.workspaceName(this.state.name);
     this.toggleDialog();
-    this.setState({ snackbar: true, message: `Das Projekt wurde erfolgreich in '${this.state.name}' umbenannt.` });
+    this.setState({ snackbar: true, key: Date.now(), message: `Das Projekt wurde erfolgreich in '${this.state.name}' umbenannt.` });
   }
 
   resetWorkspace = () => {
@@ -156,7 +153,7 @@ class WorkspaceFunc extends Component {
     if(!this.props.solutionCheck){
       this.props.workspaceName(null);
     }
-    this.setState({ snackbar: true, message: 'Das Projekt wurde erfolgreich zurückgesetzt.' });
+    this.setState({ snackbar: true, key: Date.now(), message: 'Das Projekt wurde erfolgreich zurückgesetzt.' });
   }
 
   render() {
@@ -226,9 +223,9 @@ class WorkspaceFunc extends Component {
 
         <Snackbar
           open={this.state.snackbar}
-          onClose={this.toggleSnackbar}
           message={this.state.message}
           type='success'
+          key={this.state.key}
         />
 
       </div>