From 1f6498b2c4f54ce41b50c81e90040a1b0af1441a Mon Sep 17 00:00:00 2001 From: MatthD Date: Mon, 14 Sep 2020 08:57:16 +0200 Subject: [PATCH 1/4] feat(transitions): added new transition, entering from right left top or bottom --- README.md | 8 ++++++-- src/Transition.js | 38 ++++++++++++++++++++++++++++++++++++++ src/options.js | 6 +++++- 3 files changed, 49 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 7e866477..765d5863 100644 --- a/README.md +++ b/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', } ``` diff --git a/src/Transition.js b/src/Transition.js index e0d80f24..0f060d26 100644 --- a/src/Transition.js +++ b/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)' } } } diff --git a/src/options.js b/src/options.js index d400eb7b..0148dcc1 100644 --- a/src/options.js +++ b/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' } From 44aad427850e932732130b7448ca0e6c74b9d861 Mon Sep 17 00:00:00 2001 From: MatthD Date: Mon, 14 Sep 2020 10:30:12 +0200 Subject: [PATCH 2/4] fix(transitions): missing prepare --- package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/package.json b/package.json index 472f6d25..c8fe05c3 100644 --- a/package.json +++ b/package.json @@ -19,6 +19,7 @@ "react-component" ], "scripts": { + "prepare": "npm run build", "build": "node ./scripts/build.js", "test": "jest --coverage --no-cache", "test:watch": "jest --watch --coverage --no-cache", From 5a279c22089ea830efc8212db96960be5b8d1377 Mon Sep 17 00:00:00 2001 From: MatthD Date: Mon, 14 Sep 2020 10:58:21 +0200 Subject: [PATCH 3/4] chore(transitions): got to prepack --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index c8fe05c3..d1f1d2c0 100644 --- a/package.json +++ b/package.json @@ -19,7 +19,7 @@ "react-component" ], "scripts": { - "prepare": "npm run build", + "prepack": "yarn build", "build": "node ./scripts/build.js", "test": "jest --coverage --no-cache", "test:watch": "jest --watch --coverage --no-cache", From 8d6e44e35065ff5f71e4de24c2c12fd4f465e549 Mon Sep 17 00:00:00 2001 From: MatthD Date: Mon, 14 Sep 2020 11:19:05 +0200 Subject: [PATCH 4/4] chore(transitions): missing version update --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index d1f1d2c0..8f8f246d 100644 --- a/package.json +++ b/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 ", "main": "dist/cjs/react-alert.js", "module": "dist/esm/react-alert.js",