feature: next/pre preview image

Author: locpnh0409

package.json

@@ -78,7 +78,6 @@
     "react-infinite-scroll-component": "^6.1.0",
     "react-konva": "17.0.2-6",
     "react-markdown": "^8.0.3",
-    "react-multi-carousel": "^2.8.2",
     "react-redux": "^7.2.4",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.3",

src/routes/AnnotationPage/ImagePreview/index.tsx

@@ -1,7 +1,15 @@
-import { Box, Skeleton, Typography } from "@mui/material";
+import ArrowBackIosIcon from "@mui/icons-material/ArrowBackIos";
+import ArrowForwardIosIcon from "@mui/icons-material/ArrowForwardIos";
+import {
+  Box,
+  Button,
+  List,
+  ListItem,
+  Skeleton,
+  Typography,
+} from "@mui/material";
 import { BeforeUnload } from "components";
-import { useEffect, useMemo, useState } from "react";
-import Carousel from "react-multi-carousel";
+import { useEffect, useMemo, useRef, useState } from "react";
 import "react-multi-carousel/lib/styles.css";
 import { useDispatch, useSelector } from "react-redux";
 import { resetCurrentStateDrawObject } from "reduxes/annotation/action";
@@ -129,13 +137,15 @@ function ImagePreview() {
     setIsOpenDiaglog(false);
   };
 
-  const responsive = {
-    desktop: {
-      breakpoint: { max: 3000, min: 1024 },
-      items: 3,
-      paritialVisibilityGutter: 60,
-      slidesToSlide: 2,
-    },
+  const refList = useRef<HTMLUListElement>(null);
+  // refList.current?.scroll
+  const scrollLeft = () => {
+    refList.current?.scroll({ left: refList.current.scrollLeft - 500 });
+  };
+  const scrollRight = () => {
+    if (refList.current) {
+      refList.current.scroll({ left: refList.current.scrollLeft + 500 });
+    }
   };
   const renderContent = () => {
     if (!currentAnnotationFiles) {
@@ -147,60 +157,70 @@ function ImagePreview() {
           isActive={!!needConfirmChangePreviewImageDialog}
           message={QUIT_ANNOTATION_EDITOR_PROMPT_MESSAGE}
         />
-        <Box
-          sx={{
-            width: "95vw",
-            lineHeight: "10vh",
-          }}
-        >
-          <Carousel
-            partialVisbile
-            itemClass="image-item"
-            responsive={responsive}
-            deviceType="desktop"
-            swipeable={false}
-            draggable
-            // showDots
+        <Box display="flex">
+          <Button
+            color="primary"
+            startIcon={<ArrowBackIosIcon />}
+            onClick={scrollLeft}
+          />
+          <List
+            sx={{
+              overflow: "auto",
+              display: "flex",
+              flexDirection: "row",
+              padding: 0,
+              width: "92vw",
+              lineHeight: "8vh",
+            }}
+            ref={refList}
+            id="scrollTest"
           >
             {currentAnnotationFiles.items.map((item) => (
-              <ImagePreviewBadge key={item.filename} filename={item.filename}>
-                <Box
-                  sx={{
-                    // background: `url(${fileThumbByImageName[imageName]})no-repeat center`,
-                    border:
-                      item.filename === currentPreviewImageName
-                        ? "3px solid red"
-                        : "1px solid",
-                    backgroundSize: "contain",
-                    height: 60,
-                    cursor: "pointer",
-                  }}
-                  width="250px"
-                  position="relative"
-                  onClick={() => {
-                    handleSelectPreview(item.filename);
-                  }}
-                >
+              <ListItem key={item.filename}>
+                <ImagePreviewBadge filename={item.filename}>
                   <Box
-                    display="flex"
-                    justifyContent="center"
-                    height="100%"
-                    alignItems="center"
+                    sx={{
+                      // background: `url(${fileThumbByImageName[imageName]})no-repeat center`,
+                      border:
+                        item.filename === currentPreviewImageName
+                          ? "3px solid red"
+                          : "1px solid",
+                      backgroundSize: "contain",
+                      height: 60,
+                      cursor: "pointer",
+                    }}
+                    width="250px"
+                    position="relative"
+                    onClick={() => {
+                      handleSelectPreview(item.filename);
+                    }}
                   >
-                    <Typography
-                      sx={{
-                        color: "text.primary",
-                        p: 1,
-                      }}
-                      noWrap
+                    <Box
+                      display="flex"
+                      justifyContent="center"
+                      height="100%"
+                      alignItems="center"
                     >
-                      {item.filename}
-                    </Typography>
+                      <Typography
+                        sx={{
+                          color: "text.primary",
+                          p: 1,
+                        }}
+                        noWrap
+                      >
+                        {item.filename}
+                      </Typography>
+                    </Box>
                   </Box>
-                </Box>
-              </ImagePreviewBadge>
+                </ImagePreviewBadge>
+              </ListItem>
             ))}
-          </Carousel>
+          </List>
+          <Button
+            color="primary"
+            startIcon={<ArrowForwardIosIcon />}
+            onClick={scrollRight}
+          />
         </Box>
         {currentPreviewImageName && nextPreviewImageName && (
           <ChangePreviewConfirmDialog

src/styles/custom.css

@@ -112,10 +112,3 @@ input:-webkit-autofill:active {
   border: 2px solid !important;
   border-radius: 4px !important;
 }
-#__next {
-  padding: 20px;
-}
-.image-item {
-  padding: 20px 0 20px 20px;
-  width: 300px !important;
-}