Improved messages functionality

app/script/components/MessagesView.tsx

@@ -1,24 +1,30 @@
 import * as React from "react";
+import { CSSTransitionGroup } from "react-transition-group";
 import {observer} from "mobx-react";
 import {UiStore, Message as UiMessage} from "../ui";
 import {Message} from "semantic-ui-react";
 
 @observer
-export default class MessagesView extends React.PureComponent<{ uiStore: UiStore }, {}> {
+class MessagesView extends React.PureComponent<{ uiStore: UiStore }, {}> {
     render() {
-        return <div>
+        return <div className="messages">
-            {this.props.uiStore.messages.map(this.renderMessage)}
+            <CSSTransitionGroup transitionName="message" transitionAppear={true} transitionAppearTimeout={500}
+                transitionEnterTimeout={500} transitionLeaveTimeout={500}>
+                {this.props.uiStore.messages.map(this.renderMessage)}
+            </CSSTransitionGroup>
         </div>;
     }
 
     private renderMessage = (message: UiMessage, index: number) => {
-        const {header, content, type} = message;
+        const { header, content, type } = message;
-        return <Message header={header} content={content} success={type === UiMessage.Type.Success}
+        return <Message key={message.id} className="message"
-                        info={type === UiMessage.Type.Info} warning={type === UiMessage.Type.Warning}
+            header={header} content={content}
-                        error={type === UiMessage.Type.Error} onDismiss={() => this.dismiss(index)}/>;
+            success={type === UiMessage.Type.Success}
+            info={type === UiMessage.Type.Info} warning={type === UiMessage.Type.Warning}
+            error={type === UiMessage.Type.Error} onDismiss={() => this.dismiss(index)} />;
     }
 
     private dismiss(index: number) {
         this.props.uiStore.messages.splice(index, 1);
     }
-}
+}

app/style/app.css

@@ -38,4 +38,39 @@
 .durationInput--minutes > input,
 .durationInput--seconds > input {
     width: 70px !important;
+}
+
+.messages {
+    position: fixed;
+    top: 12px;
+    left: 12px;
+    right: 12px;
+    z-index: 1000;
+}
+
+.message-enter,
+.message-appear {
+    opacity: 0.01;
+}
+
+.message-enter.message-enter-active,
+.message-appear.message-appear-active {
+    opacity: 1;
+    transition: all 500ms ease-in;
+}
+
+.message-leave {
+    /*opacity: 1;*/
+    transform-origin: top;
+    overflow-y: hidden;
+}
+
+.message-leave.message-leave-active {
+    /*opacity: 0.01;*/
+    transform: scaleY(0.01);
+    /*height: 0;*/
+    margin-top: 0;
+    padding-top: 0;
+    padding-bottom: 0;
+    transition: all 500ms ease-in;
 }

package.json

@@ -30,6 +30,7 @@
     "@types/react": "^15.0.26",
     "@types/react-dom": "^15.5.0",
     "@types/react-fontawesome": "^1.5.0",
+    "@types/react-transition-group": "^1.1.1",
     "classnames": "^2.2.5",
     "core-js": "^2.4.1",
     "font-awesome": "^4.7.0",
@@ -40,6 +41,7 @@
     "react": "^15.5.4",
     "react-dom": "^15.5.4",
     "react-fontawesome": "^1.6.1",
+    "react-transition-group": "^1.2.0",
     "semantic-ui-css": "^2.2.10",
     "semantic-ui-react": "^0.70.0",
     "webpack-merge": "^4.1.0"
@@ -53,9 +55,9 @@
     "mobx-react-devtools": "^4.2.13",
     "react-hot-loader": "^3.0.0-beta.6",
     "source-map-loader": "^0.2.1",
-    "style-loader": "^0.18.2",
+    "style-loader": "^0.18.1",
     "ts-loader": "^2.1.0",
-    "tslint": "^5.4.3",
+    "tslint": "^5.4.2",
     "typescript": "^2.3.4",
     "webpack": "^3.0.0",
     "webpack-dev-server": "^2.4.4"

yarn.lock

@@ -34,6 +34,12 @@
   dependencies:
     "@types/react" "*"
 
+"@types/react-transition-group@^1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-1.1.1.tgz#372fd2b4777b96aa983ac15fb5cc0ce150550aeb"
+  dependencies:
+    "@types/react" "*"
+
 "@types/react@*", "@types/react@^15.0.26":
   version "15.0.33"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-15.0.33.tgz#442b025b3ee7d65f25c5cf495b7bd773855c079b"
@@ -602,6 +608,10 @@ center-align@^0.1.1:
     align-text "^0.1.3"
     lazy-cache "^1.0.3"
 
+chain-function@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/chain-function/-/chain-function-1.0.0.tgz#0d4ab37e7e18ead0bdc47b920764118ce58733dc"
+
 chalk@^1.1.0, chalk@^1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-1.1.3.tgz#a8115c55e4a702fe4d150abd3872822a7e09fc98"
@@ -1113,6 +1123,10 @@ dom-converter@~0.1:
   dependencies:
     utila "~0.3"
 
+dom-helpers@^3.2.0:
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-3.2.1.tgz#3203e07fed217bd1f424b019735582fc37b2825a"
+
 dom-serializer@0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.1.0.tgz#073c697546ce0780ce23be4a28e293e40bc30c82"
@@ -3287,6 +3301,16 @@ react-proxy@^3.0.0-alpha.0:
   dependencies:
     lodash "^4.6.1"
 
+react-transition-group@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-1.2.0.tgz#b51fc921b0c3835a7ef7c571c79fc82c73e9204f"
+  dependencies:
+    chain-function "^1.0.0"
+    dom-helpers "^3.2.0"
+    loose-envify "^1.3.1"
+    prop-types "^15.5.6"
+    warning "^3.0.0"
+
 react@^15.5.4:
   version "15.6.1"
   resolved "https://registry.yarnpkg.com/react/-/react-15.6.1.tgz#baa8434ec6780bde997cdc380b79cd33b96393df"
@@ -3894,7 +3918,7 @@ strip-json-comments@~2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-2.0.1.tgz#3c531942e908c2697c0ec344858c286c7ca0a60a"
 
-style-loader@^0.18.2:
+style-loader@^0.18.1:
   version "0.18.2"
   resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-0.18.2.tgz#cc31459afbcd6d80b7220ee54b291a9fd66ff5eb"
   dependencies:
@@ -4028,7 +4052,7 @@ tslib@^1.7.1:
   version "1.7.1"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.7.1.tgz#bc8004164691923a79fe8378bbeb3da2017538ec"
 
-tslint@^5.4.3:
+tslint@^5.4.2:
   version "5.4.3"
   resolved "https://registry.yarnpkg.com/tslint/-/tslint-5.4.3.tgz#761c8402b80e347b7733a04390a757b253580467"
   dependencies:
@@ -4236,6 +4260,12 @@ vm-browserify@0.0.4:
   dependencies:
     indexof "0.0.1"
 
+warning@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/warning/-/warning-3.0.0.tgz#32e5377cb572de4ab04753bdf8821c01ed605b7c"
+  dependencies:
+    loose-envify "^1.0.0"
+
 watchpack@^1.3.1:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-1.3.1.tgz#7d8693907b28ce6013e7f3610aa2a1acf07dad87"