Add Infinite pager

sobabear · Apr 11, 2024 · 1837f57 · 1837f57
1 parent 8546522
commit 1837f57
Show file tree

Hide file tree

Showing 7 changed files with 40 additions and 105 deletions.
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
diff --git a/public/logo192.png b/public/logo192.png
diff --git a/public/logo512.png b/public/logo512.png
diff --git a/public/manifest.json b/public/manifest.json
diff --git a/public/robots.txt b/public/robots.txt
diff --git a/src/index.tsx b/src/index.tsx
@@ -9,7 +9,7 @@ import {
   Dot
 } from './styles'
 
-interface ImagePaginationProps {
+interface ImagePagerProps {
   pages: {
     src: string,
     text: string,
@@ -18,65 +18,71 @@ interface ImagePaginationProps {
   isInfinite: boolean
 }
 
-const ImagePagination = ({
+const ImagePager = ({
   pages,
   dotDisplay = true,
   isInfinite = false,
-}: ImagePaginationProps) => {
+}: ImagePagerProps) => {
   const [activeIndex, setActiveIndex] = useState(0);
   const [activeButton, setActiveButton] = useState(false);
 
   const onClick = useCallback((e: React.MouseEvent) => {
     e.preventDefault();
     const { type } = e.target as HTMLAnchorElement;
-    if (type === 'prev' && activeIndex !== 0) {
-      setActiveIndex(activeIndex => activeIndex - 1);
-    } else if (type === 'next' && activeIndex !== pages.length - 1) {
-      setActiveIndex(activeIndex => activeIndex + 1);
+    if (type === 'prev') {
+      if (isInfinite || activeIndex !== 0) {
+        setActiveIndex(activeIndex => (activeIndex === 0 ? pages.length - 1 : activeIndex - 1));
+      }
+    } else if (type === 'next') {
+      if (isInfinite || activeIndex !== pages.length - 1) {
+        setActiveIndex(activeIndex => (activeIndex === pages.length - 1 ? 0 : activeIndex + 1));
+      }
     }
-  }, [pages, activeIndex, setActiveIndex]);
-  const onMouseEnter = useCallback((e: React.MouseEvent) => {
-    e.preventDefault();
+  }, [pages, activeIndex, setActiveIndex, isInfinite]);
+
+  const onMouseEnter = useCallback(() => {
     setActiveButton(true);
-  }, [activeButton, setActiveButton]);
-  const onMouseLeave = useCallback((e: React.MouseEvent) => {
-    e.preventDefault();
+  }, [setActiveButton]);
+
+  const onMouseLeave = useCallback(() => {
     setActiveButton(false);
-  }, [activeButton, setActiveButton]);
+  }, [setActiveButton]);
 
   return (
     <>
       <Container
         onMouseEnter={onMouseEnter}
         onMouseLeave={onMouseLeave}
       >
-        {
-          pages.map((img, idx) => (
-            <Page
-              key={`${img.src}_${idx}`}
-              active={activeIndex === idx}
-            >
-              <Img src={img.src} />
-              {img.text && <Text>{img.text}</Text>}
-            </Page>
-          ))
-        }
-        {
-          activeButton && <>
-            <PrevNext type={'prev'} onClick={onClick}>&#10094;</PrevNext>
-            <PrevNext type={'next'} onClick={onClick}>&#10095;</PrevNext>
+        {pages.map((img, idx) => (
+          <Page
+            key={`${img.src}_${idx}`}
+            active={activeIndex === idx}
+          >
+            <Img src={img.src} />
+            {img.text && <Text>{img.text}</Text>}
+          </Page>
+        ))}
+        {activeButton && (
+          <>
+            <PrevNext type={'prev'} onClick={onClick}>
+              &#10094;
+            </PrevNext>
+            <PrevNext type={'next'} onClick={onClick}>
+              &#10095;
+            </PrevNext>
           </>
-        }
+        )}
       </Container>
-      {
-        dotDisplay && <DotContainer>
+      {dotDisplay && (
+        <DotContainer>
           {pages.map((img, idx) => (
             <Dot key={`${img.src}_${idx}`} active={activeIndex === idx} />
           ))}
         </DotContainer>
-      }
+      )}
     </>
   );
 };
 
-export default ImagePagination;
+export default ImagePager;