feat(transitions): added new transition, entering from right left top…

README.md

@@ -137,7 +137,7 @@ position: PropTypes.oneOf([
 ]) // the position of the alerts in the page
 timeout: PropTypes.number // timeout to alert remove itself, if  set to 0 it never removes itself
 type: PropTypes.oneOf(['info', 'success', 'error']) // the default alert type used when calling this.props.alert.show
-transition: PropTypes.oneOf(['fade', 'scale']) // the transition animation
+transition: PropTypes.oneOf(['fade', 'scale', 'enter_from_right' 'enter_from_left' 'enter_from_top' 'enter_from_bottom']) // the transition animation
 containerStyle: PropTypes.Object // style to be applied in the alerts container
 template: PropTypes.oneOfType([PropTypes.element, PropTypes.func]).isRequired // the alert template to be used
 ```
@@ -171,7 +171,11 @@ export const types = {
 
 export const transitions = {
   FADE: 'fade',
-  SCALE: 'scale'
+  SCALE: 'scale',
+  ENTER_FROM_RIGHT: 'enter_from_right',
+  ENTER_FROM_LEFT: 'enter_from_left',
+  ENTER_FROM_TOP: 'enter_from_top',
+  ENTER_FROM_BOTTOM: 'enter_from_bottom',
 }
 ```
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-alert",
   "description": "A simple react alert component",
-  "version": "7.0.2",
+  "version": "7.1.0",
   "author": "Reinaldo Schiehll <[email protected]>",
   "main": "dist/cjs/react-alert.js",
   "module": "dist/esm/react-alert.js",
@@ -19,6 +19,7 @@
     "react-component"
   ],
   "scripts": {
+    "prepack": "yarn build",
     "build": "node ./scripts/build.js",
     "test": "jest --coverage --no-cache",
     "test:watch": "jest --watch --coverage --no-cache",

src/Transition.js

@@ -3,6 +3,7 @@ import { Transition as AlertTransition } from 'react-transition-group'
 import { transitions } from './options'
 
 const duration = 250
+const durationFrom = 500
 
 const defaultStyle = {
   [transitions.FADE]: {
@@ -12,6 +13,22 @@ const defaultStyle = {
   [transitions.SCALE]: {
     transform: 'scale(1)',
     transition: `all ${duration}ms ease-in-out`
+  },
+  [transitions.ENTER_FROM_RIGHT]: {
+    transform: 'translateX(0)',
+    transition: `transform ${durationFrom}ms ease-in-out`
+  },
+  [transitions.ENTER_FROM_LEFT]: {
+    transform: 'translateX(-100%)',
+    transition: `transform ${durationFrom}ms ease-in-out`
+  },
+  [transitions.ENTER_FROM_TOP]: {
+    transform: 'translateY(-100%)',
+    transition: `transform ${durationFrom}ms ease-in-out`
+  },
+  [transitions.ENTER_FROM_BOTTOM]: {
+    transform: 'translateY(100%)',
+    transition: `transform ${durationFrom}ms ease-in-out`
   }
 }
 
@@ -25,6 +42,27 @@ const transitionStyles = {
     entered: { transform: 'scale(1)' },
     exiting: { transform: 'scale(0)' },
     exited: { transform: 'scale(1)' }
+  },
+  [transitions.ENTER_FROM_RIGHT]: {
+    entering: { transform: 'translateX(0)' },
+    entered: { transform: 'translateX(0)' },
+    exiting: { transform: 'translateX(100%)' },
+    exited: { transform: 'translateX(100%)' }
+  },
+  [transitions.ENTER_FROM_LEFT]: {
+    entering: { transform: 'translateX(0)' },
+    entered: { transform: 'translateX(-100%)' },
+    exited: { transform: 'translateX(0)' }
+  },
+  [transitions.ENTER_FROM_TOP]: {
+    entering: { transform: 'translateY(0)' },
+    entered: { transform: 'translateY(-100%)' },
+    exited: { transform: 'translateY(0)' }
+  },
+  [transitions.ENTER_FROM_BOTTOM]: {
+    entering: { transform: 'translateY(0)' },
+    entered: { transform: 'translateY(100%)' },
+    exited: { transform: 'translateY(0)' }
   }
 }
 

src/options.js

@@ -18,5 +18,9 @@ export const types = {
 
 export const transitions = {
   FADE: 'fade',
-  SCALE: 'scale'
+  SCALE: 'scale',
+  ENTER_FROM_RIGHT: 'enter_from_right',
+  ENTER_FROM_LEFT: 'enter_from_left',
+  ENTER_FROM_TOP: 'enter_from_top',
+  ENTER_FROM_BOTTOM: 'enter_from_bottom'
 }