Merge de0bddc into b49177c

README.md

@@ -17,7 +17,7 @@
     - [Remove a toast programmatically](#remove-a-toast-programmatically)
     - [Usage with redux](#usage-with-redux)
     - [Pause toast timer when the window loses focus](#pause-toast-timer-when-the-window-loses-focus)
-    - [Use a custom toastId](#use-a-custom-toast-id)
+    - [Use a custom id](#use-a-custom-id)
     - [Prevent duplicate](#prevent-duplicate)
     - [Update a toast](#update-a-toast)
       - [Basic example](#basic-example)
@@ -134,29 +134,29 @@ For convenience, toast expose a POSITION property to avoid any typo.
 
   class Position extends Component {
     notify = () => {
-    toast("Default Notification !");
+      toast("Default Notification !");
 
-    toast.success("Success Notification !", {
-      position: toast.POSITION.TOP_CENTER
-    });
+      toast.success("Success Notification !", {
+        position: toast.POSITION.TOP_CENTER
+      });
 
-    toast.error("Error Notification !", {
-      position: toast.POSITION.TOP_LEFT
-    });
+      toast.error("Error Notification !", {
+        position: toast.POSITION.TOP_LEFT
+      });
 
-    toast.warn("Warning Notification !", {
-      position: toast.POSITION.BOTTOM_LEFT
-    });
+      toast.warn("Warning Notification !", {
+        position: toast.POSITION.BOTTOM_LEFT
+      });
 
-    toast.info("Info Notification !", {
-      position: toast.POSITION.BOTTOM_CENTER
-    });
+      toast.info("Info Notification !", {
+        position: toast.POSITION.BOTTOM_CENTER
+      });
 
-    toast("Custom Style Notification with css class!", {
-      position: toast.POSITION.BOTTOM_RIGHT,
-      className: 'foo-bar'
-    });
-  };
+      toast("Custom Style Notification with css class!", {
+        position: toast.POSITION.BOTTOM_RIGHT,
+        className: 'foo-bar'
+      });
+    };
 
     render(){
       return <button onClick={this.notify}>Notify</button>;
@@ -296,7 +296,7 @@ toast('Hello', {
 })
 ```
 
-### Use a custom toastId
+### Use a custom id
 
 A custom `toastId` can be used to replace the one generated. You can use a `number` or a `string`.
 

scss/animations/_slide.scss

@@ -62,23 +62,23 @@
     }
 }
 
-@keyframes #{$rt-namespace}__slideOutUp {
+@keyframes #{$rt-namespace}__slideOutDown {
     from {
         @include transform;
     }
     to {
         visibility: hidden;
-        transform: translate3d(0, 110%, 0);
+        transform: translate3d(0, 500px, 0);
     }
 }
 
-@keyframes #{$rt-namespace}__slideOutDown {
+@keyframes #{$rt-namespace}__slideOutUp {
     from {
         @include transform;
     }
     to {
         visibility: hidden;
-        transform: translate3d(0, -110%, 0);
+        transform: translate3d(0, -500px, 0);
     }
 }
 

src/components/Toast.js

@@ -22,7 +22,7 @@ function getY(e) {
     : e.clientY;
 }
 
-const noop = () => { };
+const noop = () => {};
 
 class Toast extends Component {
   static propTypes = {

src/components/ToastContainer.js

@@ -184,9 +184,9 @@ class ToastContainer extends Component {
     return closeButton === false
       ? false
       : cloneElement(closeButton, {
-        closeToast: () => this.removeToast(toastId),
-        type: type
-      });
+          closeToast: () => this.removeToast(toastId),
+          type: type
+        });
   }
 
   getAutoCloseDelay(toastAutoClose) {
@@ -259,7 +259,7 @@ class ToastContainer extends Component {
           : this.props.draggable,
       draggablePercent:
         typeof options.draggablePercent === 'number' &&
-          !isNaN(options.draggablePercent)
+        !isNaN(options.draggablePercent)
           ? options.draggablePercent
           : this.props.draggablePercent,
       closeOnClick:
@@ -339,18 +339,16 @@ class ToastContainer extends Component {
 
     // group toast by position
     collection.forEach(toastId => {
-      const {position, options, content} = this.collection[toastId];
+      const { position, options, content } = this.collection[toastId];
       toastToRender[position] || (toastToRender[position] = []);
 
       if (this.state.toast.indexOf(options.id) !== -1) {
-        toastToRender[position].push(
-          this.makeToast(content, options)
-        );
+        toastToRender[position].push(this.makeToast(content, options));
       } else {
         toastToRender[position].push(null);
         delete this.collection[toastId];
       }
-    })
+    });
 
     return Object.keys(toastToRender).map(position => {
       const disablePointer =