Migrate react swipeable view to swiper

Related to #113
sebastienbarbier · Jun 28, 2023 · 5e5dd0b · 5e5dd0b
1 parent cb1602e
commit 5e5dd0b
Show file tree

Hide file tree

Showing 9 changed files with 368 additions and 273 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -96,6 +96,7 @@
     "redux": "^4.2.1",
     "redux-persist": "6.0.0",
     "redux-thunk": "^2.4.2",
+    "swiper": "^9.4.1",
     "uuid": "^9.0.0",
     "workbox-webpack-plugin": "^7.0.0",
     "workbox-window": "^7.0.0"

diff --git a/src/app/components/Dashboard.js b/src/app/components/Dashboard.js
@@ -119,20 +119,6 @@ export default function Dashboard(props) {
     setOpenTrend(!openTrend);
   };
 
-  // Handle SwipeableViews (enable/disable based on window.innerWidth)
-  const [disableSwipeableViews, setDisableSwipeableViews] = useState(
-    () => window.innerWidth > 600
-  );
-  useEffect(() => {
-    function checkWidth() {
-      setDisableSwipeableViews(window.innerWidth > 600);
-    }
-    window.addEventListener("resize", checkWidth);
-    return () => {
-      window.removeEventListener("resize", checkWidth);
-    };
-  }, []);
-
   return (
     <div className="layout dashboard">
 
@@ -175,7 +161,6 @@ export default function Dashboard(props) {
               <h2>Balance</h2>
 
               <BalanceView
-                disableSwipeableViews={disableSwipeableViews}
                 statistics={statistics}
               />
 
@@ -194,7 +179,6 @@ export default function Dashboard(props) {
               <Trends
                 trend30={statistics ? statistics.trend30 : null}
                 trend7={statistics ? statistics.trend7 : null}
-                disabled={disableSwipeableViews}
                 isLoading={!statistics}
                 onOpenTrend={handleToggleTrend}
               />

diff --git a/src/app/components/Transactions.js b/src/app/components/Transactions.js
@@ -239,6 +239,7 @@ export default function Transactions(props) {
             <UserButton type="button" color="white" onModal={props.onModal} />
           </div>
         </div>
+
         <div className="indicators showModalSize wrapperMobile">
           <div className="view">
             <span>Balance&nbsp;</span>
@@ -283,11 +284,15 @@ export default function Transactions(props) {
             </span>
           </div>
         </div>
+
         <div className="indicators hideModalSize">
-          <Box
+          <swiper-container
+            space-between="0"
+            class="metrics"
+            slides-per-view="auto"
             style={{ padding: "0 40vw 0 24px" }}
           >
-            <div className="view">
+            <swiper-slide>
               <span>Balance&nbsp;</span>
               <span>
                 {!statistics ? (
@@ -302,8 +307,8 @@ export default function Transactions(props) {
                   />
                 )}
               </span>
-            </div>
-            <div className="view">
+            </swiper-slide>
+            <swiper-slide>
               <span>Expenses&nbsp;</span>
               <span>
                 {!statistics ? (
@@ -315,8 +320,8 @@ export default function Transactions(props) {
                   />
                 )}
               </span>
-            </div>
-            <div className="view">
+            </swiper-slide>
+            <swiper-slide>
               <span>Incomes&nbsp;</span>
               <span>
                 {!statistics ? (
@@ -328,8 +333,8 @@ export default function Transactions(props) {
                   />
                 )}
               </span>
-            </div>
-          </Box>
+            </swiper-slide>
+          </swiper-container>
         </div>
         <div className="layout_header_tabs wrapperMobile">
           <Tabs
@@ -397,7 +402,7 @@ export default function Transactions(props) {
             </h2>
           </div>
 
-          <div className="metrics">
+          <div className="transactions_view">
             <div className="metric">
               <h3 className="title">Balance</h3>
               <div className="balance">

diff --git a/src/app/components/Transactions.scss b/src/app/components/Transactions.scss
@@ -20,6 +20,11 @@ div.layout, form.layout {
     }
   }
 
+  swiper-slide {
+    font-size: 12px;
+    max-width: 180px;
+  }
+
   .transactions_two_columns {
     width: 100%;
     height: 100%;
@@ -43,17 +48,7 @@ div.layout, form.layout {
       h2 {
         font-size: 30px;
       }
-      .metrics {
-        display: flex;
-        justify-content: center;
-        background: rgba(170, 170, 170, 0.1);
-        padding-bottom: 10px;
-        .incomes_expenses {
-          p {
-            margin-right: 10px;
-          }
-        }
-      }
+
     }
 
     @media screen and (min-width: $smallScreen) {