add snackbar

webui/package.json

@@ -37,6 +37,7 @@
     "react-icons": "^2.2.5",
     "react-immutable-proptypes": "^2.1.0",
     "react-jsonschema-form": "^0.49.0",
+    "react-notification": "^6.7.1",
     "react-onclickoutside": "^5.11.1",
     "react-redux": "^5.0.5",
     "react-transition-group": "^1.1.3",

webui/src/components/Shared/Snackbar.js

@@ -0,0 +1,70 @@
+import { Component } from 'react';
+import PropTypes from 'prop-types';
+
+import { Notification } from 'react-notification';
+
+class Snackbar extends Component {
+  static propTypes = {
+    isActive: PropTypes.bool,
+    message: PropTypes.string
+  }
+
+  constructor(props) {
+    super(props);
+
+    this.state = this.getStateFromProps(props);
+  }
+
+  componentWillMount() {
+    this.setState(this.getStateFromProps(this.props));
+  }
+
+  componentWillReceiveProps(nextProps) {
+    console.log(nextProps);
+    this.setState(this.getStateFromProps(nextProps));
+  }
+
+  getStateFromProps(props) {
+    const { 
+      isActive
+    } = props;
+
+    return {
+      isActive
+    }
+  }
+
+  render() {
+    const {
+      isActive
+    } = this.state;
+
+    const {
+      message
+    } = this.props;
+
+    return (
+      <Notification
+        isActive={isActive}
+        message={message}
+        onDismiss={() => this.setState({ isActive: false })}
+        barStyle={{
+          left: '50%',
+          bottom: '-100%',
+          font: '',
+          borderRadius: '0px',
+          WebkitTransform: 'translate(-50%, 0)',
+          MozTransform: 'translate(-50%, 0)',
+          msTransform: 'translate(-50%, 0)',
+          OTransform: 'translate(-50%, 0)',
+          transform: 'translate(-50%, 0)'
+        }} 
+        activeBarStyle={{
+          bottom: '0'
+        }} 
+      />
+    )
+  }
+}
+
+export default Snackbar;

webui/src/components/index.js

@@ -14,6 +14,7 @@ import Blank from './Shared/Blank';
 import Button from './Shared/Button';
 import withRipple from './Shared/withRipple';
 import Form from './Shared/Form';
+import Snackbar from './Shared/Snackbar';
 
 import * as Subscriber from './Subscriber';
 
@@ -34,6 +35,7 @@ export {
   Button,
   withRipple,
   Form,
+  Snackbar,
 
   Subscriber
 }

webui/yarn.lock

@@ -3471,6 +3471,12 @@ react-jsonschema-form@^0.49.0:
     prop-types "^15.5.8"
     setimmediate "^1.0.5"
 
+react-notification@^6.7.1:
+  version "6.7.1"
+  resolved "https://registry.yarnpkg.com/react-notification/-/react-notification-6.7.1.tgz#fec45cc6d369f4bbf7b4072fe58ddb3bc262c898"
+  dependencies:
+    prop-types "^15.5.10"
+
 react-onclickoutside@^5.11.1:
   version "5.11.1"
   resolved "https://registry.yarnpkg.com/react-onclickoutside/-/react-onclickoutside-5.11.1.tgz#00314e52567cf55faba94cabbacd119619070623"