add react-transition-group

vskosp · Dec 8, 2020 · a2cb59f · a2cb59f
1 parent cef9805
commit a2cb59f
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 10 deletions.
diff --git a/package.json b/package.json
@@ -20,6 +20,7 @@
     "react-redux": "^7.2.2",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.0",
+    "react-transition-group": "^4.4.1",
     "redux": "^4.0.5",
     "redux-devtools-extension": "^2.13.8",
     "redux-thunk": "^2.3.0",

diff --git a/src/components/basket/basket.css b/src/components/basket/basket.css
@@ -0,0 +1,17 @@
+.basket-animation-enter {
+  opacity: 0;
+  transform: scale(0.9);
+}
+.basket-animation-enter-active {
+  opacity: 1;
+  transform: translateX(0);
+  transition: opacity 500ms, transform 500ms;
+}
+.basket-animation-exit {
+  opacity: 1;
+}
+.basket-animation-exit-active {
+  opacity: 0;
+  transform: scale(0.9);
+  transition: opacity 500ms, transform 500ms;
+}
diff --git a/src/components/basket/basket.js b/src/components/basket/basket.js
@@ -2,8 +2,11 @@ import React from 'react';
 import { connect } from 'react-redux';
 import { Link } from 'react-router-dom';
 import { createStructuredSelector } from 'reselect';
+import { CSSTransition, TransitionGroup } from 'react-transition-group';
 
 import styles from './basket.module.css';
+import './basket.css';
+
 import BasketRow from './basket-row';
 import BasketItem from './basket-item';
 import Button from '../button';
@@ -27,15 +30,22 @@ function Basket({ title = 'Basket', total, orderProducts }) {
       <h4 className={styles.title}>
         <UserConsumer>{({ name }) => `${name}'s ${title}`}</UserConsumer>
       </h4>
-      {orderProducts.map(({ product, amount, subtotal, restaurantId }) => (
-        <BasketItem
-          product={product}
-          amount={amount}
-          key={product.id}
-          subtotal={subtotal}
-          restaurantId={restaurantId}
-        />
-      ))}
+      <TransitionGroup>
+        {orderProducts.map(({ product, amount, subtotal, restaurantId }) => (
+          <CSSTransition
+            key={product.id}
+            timeout={500}
+            classNames="basket-animation"
+          >
+            <BasketItem
+              product={product}
+              amount={amount}
+              subtotal={subtotal}
+              restaurantId={restaurantId}
+            />
+          </CSSTransition>
+        ))}
+      </TransitionGroup>
       <hr className={styles.hr} />
       <BasketRow label="Sub-total" content={`${total} $`} />
       <BasketRow label="Delivery costs:" content="FREE" />

diff --git a/yarn.lock b/yarn.lock
@@ -970,7 +970,7 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
-"@babel/runtime@^7.1.2", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.5", "@babel/runtime@^7.9.2":
+"@babel/runtime@^7.1.2", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.5", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
   version "7.12.5"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.12.5.tgz#410e7e487441e1b360c29be715d870d9b985882e"
   integrity sha512-plcc+hbExy3McchJCEQG3knOsuh3HH+Prx1P6cLIkET/0dLuQDEnrT+s27Axgc9bqfsmNUNHfscgMUdBpC9xfg==
@@ -3818,6 +3818,11 @@ cssstyle@^2.2.0:
   dependencies:
     cssom "~0.3.6"
 
+csstype@^3.0.2:
+  version "3.0.5"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.5.tgz#7fdec6a28a67ae18647c51668a9ff95bb2fa7bb8"
+  integrity sha512-uVDi8LpBUKQj6sdxNaTetL6FpeCqTjOvAQuQUa/qAqq8oOd4ivkbhgnqayl0dnPal8Tb/yB1tF+gOvCBiicaiQ==
+
 cyclist@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/cyclist/-/cyclist-1.0.1.tgz#596e9698fd0c80e12038c2b82d6eb1b35b6224d9"
@@ -4096,6 +4101,14 @@ dom-converter@^0.2:
   dependencies:
     utila "~0.4"
 
+dom-helpers@^5.0.1:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-5.2.0.tgz#57fd054c5f8f34c52a3eeffdb7e7e93cd357d95b"
+  integrity sha512-Ru5o9+V8CpunKnz5LGgWXkmrH/20cGKwcHwS4m73zIvs54CN9epEmT/HLqFJW3kXpakAFkEdzgy1hzlJe3E4OQ==
+  dependencies:
+    "@babel/runtime" "^7.8.7"
+    csstype "^3.0.2"
+
 dom-serializer@0:
   version "0.2.2"
   resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.2.2.tgz#1afb81f533717175d478655debc5e332d9f9bb51"
@@ -9490,6 +9503,16 @@ react-test-renderer@^17.0.0-0:
     react-shallow-renderer "^16.13.1"
     scheduler "^0.20.1"
 
+react-transition-group@^4.4.1:
+  version "4.4.1"
+  resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.1.tgz#63868f9325a38ea5ee9535d828327f85773345c9"
+  integrity sha512-Djqr7OQ2aPUiYurhPalTrVy9ddmFCCzwhqQmtN+J3+3DzLO209Fdr70QrN8Z3DsglWql6iY1lDWAfpFiBtuKGw==
+  dependencies:
+    "@babel/runtime" "^7.5.5"
+    dom-helpers "^5.0.1"
+    loose-envify "^1.4.0"
+    prop-types "^15.6.2"
+
 react@^17.0.1:
   version "17.0.1"
   resolved "https://registry.yarnpkg.com/react/-/react-17.0.1.tgz#6e0600416bd57574e3f86d92edba3d9008726127"