Add loop function

Author: x3388638

.eslintrc.json

@@ -16,8 +16,15 @@
     "ecmaVersion": 2018,
     "sourceType": "module"
   },
-  "plugins": ["react"],
+  "plugins": ["react", "react-hooks"],
   "rules": {
-    "react/prop-types": 0
+    "react/prop-types": 0,
+    "react-hooks/rules-of-hooks": "error",
+    "react-hooks/exhaustive-deps": "warn"
+  },
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
   }
 }

package-lock.json

@@ -34,6 +34,7 @@
     "babel-plugin-styled-components": "^1.10.6",
     "eslint": "^6.8.0",
     "eslint-plugin-react": "^7.18.0",
+    "eslint-plugin-react-hooks": "^2.3.0",
     "husky": "^4.0.10",
     "lint-staged": "^10.0.1",
     "prettier": "^1.19.1",

package.json

@@ -100,7 +100,7 @@ const Item = ({ children }) => {
 }
 
 const CAROUSEL_ITEM = 'CAROUSEL_ITEM'
-const Carousel = ({ cols = 1, rows = 1, gap = 10, children }) => {
+const Carousel = ({ cols = 1, rows = 1, gap = 10, loop = false, children }) => {
   const [currentPage, setCurrentPage] = useState(0)
   const itemList = React.Children.toArray(children).filter(
     child => child.type.displayName === CAROUSEL_ITEM
@@ -120,16 +120,34 @@ const Carousel = ({ cols = 1, rows = 1, gap = 10, children }) => {
   const page = Math.ceil(itemList.length / itemAmountPerSet)
 
   const handlePrev = useCallback(() => {
-    setCurrentPage(p => p - 1)
-  }, [])
+    setCurrentPage(p => {
+      const prevPage = p - 1
+      if (loop && prevPage < 0) {
+        return page - 1
+      }
+
+      return prevPage
+    })
+  }, [loop, page])
 
   const handleNext = useCallback(() => {
-    setCurrentPage(p => p + 1)
-  }, [])
+    setCurrentPage(p => {
+      const nextPage = p + 1
+      if (loop && nextPage >= page) {
+        return 0
+      }
+
+      return nextPage
+    })
+  }, [loop, page])
 
   return (
     <Container>
-      <NextBtn type="prev" hidden={currentPage <= 0} onClick={handlePrev} />
+      <NextBtn
+        type="prev"
+        hidden={!loop && currentPage <= 0}
+        onClick={handlePrev}
+      />
       <RailWrapper>
         <Rail
           cols={cols}
@@ -149,7 +167,7 @@ const Carousel = ({ cols = 1, rows = 1, gap = 10, children }) => {
       </RailWrapper>
       <NextBtn
         type="next"
-        hidden={currentPage === page - 1}
+        hidden={!loop && currentPage === page - 1}
         onClick={handleNext}
       />
     </Container>

src/components/Carousel.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import Carousel from '../src/components/Carousel'
 import styled from 'styled-components'
-import { withKnobs, number } from '@storybook/addon-knobs'
+import { withKnobs, number, boolean } from '@storybook/addon-knobs'
 
 const randomImageUrl = 'https://picsum.photos/800/600?random='
 
@@ -197,8 +197,10 @@ export const CustomProps = () => {
     range: true
   })
 
+  const loop = boolean('loop', false)
+
   return (
-    <Carousel cols={cols} rows={rows} gap={gap}>
+    <Carousel cols={cols} rows={rows} gap={gap} loop={loop}>
       {[...Array(cols * rows * pages)].map((_, i) => (
         <Carousel.Item key={i}>
           <Item img={randomImageUrl + i} />