Upgrade to react-flip-toolkit and upgrade react-scroll

labzero · Feb 9, 2023 · 32274da · 32274da
1 parent 7e2538b
commit 32274da
Show file tree

Hide file tree

Showing 6 changed files with 142 additions and 107 deletions.
diff --git a/package.json b/package.json
@@ -60,13 +60,14 @@
     "react": "^16.14.0",
     "react-addons-shallow-compare": "^15.4.2",
     "react-autosuggest": "^10.0.2",
-    "react-bootstrap": "^0.33.1",
+    "react-bootstrap": "^0.31.0",
     "react-dom": "^16.14.0",
     "react-flip-move": "^3.0.5",
+    "react-flip-toolkit": "^7.0.17",
     "react-geosuggest": "^2.14.1",
     "react-intl": "^6.2.7",
     "react-redux": "^8.0.5",
-    "react-scroll": "^1.7.6",
+    "react-scroll": "^1.8.9",
     "react-transition-group": "^4.4.5",
     "redux": "^4.2.1",
     "reselect": "^2.3.0",
@@ -244,4 +245,4 @@
     "start": "babel-node tools/run start",
     "prepare": "husky install"
   }
-}
+}
diff --git a/src/components/RestaurantAddForm/RestaurantAddFormContainer.js b/src/components/RestaurantAddForm/RestaurantAddFormContainer.js
@@ -65,6 +65,7 @@ const mergeProps = (stateProps, dispatchProps) => Object.assign({}, stateProps,
         scroller.scrollTo(`restaurantListItem_${existingRestaurant.id}`, {
           containerId: 'listContainer',
           offset: document.getElementById('listForms').offsetHeight,
+          smooth: true,
         });
         scroller.scrollTo(`restaurantListItem_${existingRestaurant.id}`);
       }

diff --git a/src/components/RestaurantList/RestaurantList.js b/src/components/RestaurantList/RestaurantList.js
@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
-import React from 'react';
-import FlipMove from 'react-flip-move';
+import React, { useCallback } from 'react';
+import { Flipper, Flipped } from 'react-flip-toolkit';
 import { Element as ScrollElement } from 'react-scroll';
 import withStyles from 'isomorphic-style-loader/withStyles';
 import Grid from 'react-bootstrap/lib/Grid';
@@ -43,28 +43,65 @@ const RestaurantList = ({
     );
   }
 
+  const shouldFlip = useCallback(() => flipMove, []);
+
+  const onAppear = useCallback((el, i) => {
+    setTimeout(() => {
+      el.classList.add(s.fadeIn);
+      setTimeout(() => {
+        // eslint-disable-next-line no-param-reassign
+        el.style.opacity = 1;
+        el.classList.remove(s.fadeIn);
+      }, 500);
+    }, i * 50);
+  }, []);
+
+  const onExit = useCallback((el, i, removeElement) => {
+    setTimeout(() => {
+      el.classList.add(s.fadeOut);
+      setTimeout(removeElement, 500);
+    }, i * 50);
+  }, []);
+
+  const handleEnterUpdateDelete = useCallback(({
+    hideEnteringElements,
+    animateEnteringElements,
+    animateExitingElements,
+    animateFlippedElements
+  }) => {
+    hideEnteringElements();
+    animateEnteringElements();
+    animateExitingElements()
+      .then(animateFlippedElements);
+  }, []);
+
   return (
-    <FlipMove
-      typeName="ul"
+    <Flipper
+      element="ul"
       className={s.root}
-      disableAllAnimations={!flipMove}
-      enterAnimation="fade"
-      leaveAnimation="fade"
-      staggerDelayBy={40}
-      staggerDurationBy={40}
+      flipKey={ids}
+      handleEnterUpdateDelete={handleEnterUpdateDelete}
+      staggerConfig={{
+        default: {
+          reverse: true,
+          speed: 0.75,
+        }
+      }}
     >
       {ids.map((id) => (
-        <li key={`restaurantListItem_${id}`}>
-          <ScrollElement name={`restaurantListItem_${id}`}>
-            <RestaurantContainer
-              id={id}
-              shouldShowAddTagArea
-              shouldShowDropdown
-            />
-          </ScrollElement>
-        </li>
+        <Flipped key={id} flipId={id} onAppear={onAppear} onExit={onExit} shouldFlip={shouldFlip} stagger>
+          <li key={`restaurantListItem_${id}`}>
+            <ScrollElement name={`restaurantListItem_${id}`}>
+              <RestaurantContainer
+                id={id}
+                shouldShowAddTagArea
+                shouldShowDropdown
+              />
+            </ScrollElement>
+          </li>
+        </Flipped>
       ))}
-    </FlipMove>
+    </Flipper>
   );
 };
 

diff --git a/src/components/RestaurantList/RestaurantList.scss b/src/components/RestaurantList/RestaurantList.scss
@@ -35,3 +35,23 @@
 .nothing {
   text-align: center;
 }
+
+@keyframes fadeIn {
+  0% { opacity: 0; }
+  100% { opacity: 1; }
+}
+
+.fadeIn {
+  animation: fadeIn .35s forwards;
+  animation-timing-function: cubic-bezier(.39, .575, .565, 1);
+}
+
+@keyframes fadeOut {
+  0% { opacity: 1; }
+  100% { opacity: 0; }
+}
+
+.fadeOut {
+  animation: fadeOut .3s forwards;
+  animation-timing-function: cubic-bezier(.47, 0, .745, .715);
+}
diff --git a/src/components/RestaurantVoteCount/RestaurantVoteCount.js b/src/components/RestaurantVoteCount/RestaurantVoteCount.js
@@ -7,6 +7,10 @@ import TooltipUserContainer from '../TooltipUser/TooltipUserContainer';
 import s from './RestaurantVoteCount.scss';
 
 export class _RestaurantVoteCount extends Component {
+  static contextTypes = {
+    store: PropTypes.object.isRequired,
+  };
+
   static propTypes = {
     id: PropTypes.number.isRequired,
     votes: PropTypes.array.isRequired,
@@ -47,6 +51,7 @@ export class _RestaurantVoteCount extends Component {
             {this.props.votes.map((voteId) => (
               <TooltipUserContainer
                 key={`voteCountTooltipUser_${voteId}`}
+                store={this.context.store}
                 voteId={voteId}
               />
             ))}