Add hasNextPage and hasPrevPage booleans (#29)

richardscarrott · Sep 12, 2024 · 832e1bb · 832e1bb
1 parent 658c58a
commit 832e1bb
Show file tree

Hide file tree

Showing 6 changed files with 33 additions and 10 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [Unreleased]
+
+### Added
+
+- `hasPrevPage` and `hasNextPage` booleans to `SnapCarouselResult` to indicate if there's a previous or next page to scroll to.
+
 ## [0.3.1] - 2023-02-14
 
 ### Added

diff --git a/README.md b/README.md
@@ -108,6 +108,8 @@ export const Carousel = <T extends any>({
     scrollRef,
     pages,
     activePageIndex,
+    hasPrevPage,
+    hasNextPage,
     prev,
     next,
     goTo,
@@ -127,9 +129,10 @@ export const Carousel = <T extends any>({
         <button
           style={{
             ...styles.nextPrevButton,
-            ...(activePageIndex <= 0 ? styles.nextPrevButtonDisabled : {})
+            ...(!hasPrevPage ? styles.nextPrevButtonDisabled : {})
           }}
           onClick={() => prev()}
+          disabled={!hasPrevPage}
         >
           Prev
         </button>
@@ -148,11 +151,10 @@ export const Carousel = <T extends any>({
         <button
           style={{
             ...styles.nextPrevButton,
-            ...(activePageIndex === pages.length - 1
-              ? styles.nextPrevButtonDisabled
-              : {})
+            ...(!hasNextPage ? styles.nextPrevButtonDisabled : {})
           }}
           onClick={() => next()}
+          disabled={!hasNextPage}
         >
           Next
         </button>
@@ -228,6 +230,8 @@ export interface SnapCarouselResult {
   readonly pages: number[][];
   readonly activePageIndex: number;
   readonly snapPointIndexes: Set<number>;
+  readonly hasPrevPage: boolean;
+  readonly hasNextPage: boolean;
   readonly prev: (opts?: SnapCarouselGoToOptions) => void;
   readonly next: (opts?: SnapCarouselGoToOptions) => void;
   readonly goTo: (pageIndex: number, opts?: SnapCarouselGoToOptions) => void;

diff --git a/src/use-snap-carousel.tsx b/src/use-snap-carousel.tsx
@@ -15,6 +15,8 @@ export interface SnapCarouselResult {
   readonly pages: number[][];
   readonly activePageIndex: number;
   readonly snapPointIndexes: Set<number>;
+  readonly hasPrevPage: boolean;
+  readonly hasNextPage: boolean;
   readonly prev: (opts?: SnapCarouselGoToOptions) => void;
   readonly next: (opts?: SnapCarouselGoToOptions) => void;
   readonly goTo: (pageIndex: number, opts?: SnapCarouselGoToOptions) => void;
@@ -201,7 +203,12 @@ export const useSnapCarousel = ({
     [pages]
   );
 
+  const hasPrevPage = activePageIndex > 0;
+  const hasNextPage = activePageIndex < pages.length - 1;
+
   return {
+    hasPrevPage,
+    hasNextPage,
     prev: handlePrev,
     next: handleNext,
     goTo: handleGoTo,

diff --git a/stories/carousel.tsx b/stories/carousel.tsx
@@ -32,6 +32,8 @@ export const Carousel = React.forwardRef<CarouselRef, CarouselProps<unknown>>(
   ({ axis, items, renderItem, scrollMargin = false, scrollBehavior }, ref) => {
     const {
       scrollRef,
+      hasNextPage,
+      hasPrevPage,
       next,
       prev,
       goTo,
@@ -65,7 +67,7 @@ export const Carousel = React.forwardRef<CarouselRef, CarouselProps<unknown>>(
         </div>
         <div className={styles.controls}>
           <button
-            disabled={activePageIndex <= 0}
+            disabled={!hasPrevPage}
             onClick={() => prev({ behavior: scrollBehavior })}
             className={styles.prevButton}
           >
@@ -89,7 +91,7 @@ export const Carousel = React.forwardRef<CarouselRef, CarouselProps<unknown>>(
             ))}
           </ol>
           <button
-            disabled={activePageIndex === pages.length - 1}
+            disabled={!hasNextPage}
             onClick={() => next({ behavior: scrollBehavior })}
             className={styles.nextButton}
           >

diff --git a/stories/infinite-carousel.tsx b/stories/infinite-carousel.tsx
@@ -40,6 +40,8 @@ export const InfiniteCarousel = React.forwardRef<
   ({ axis, items, renderItem, scrollMargin = false, scrollBehavior }, ref) => {
     const {
       scrollRef,
+      hasNextPage,
+      hasPrevPage,
       next,
       prev,
       goTo,
@@ -106,7 +108,7 @@ export const InfiniteCarousel = React.forwardRef<
         </div>
         <div className={styles.controls}>
           <button
-            disabled={activePageIndex <= 0}
+            disabled={!hasPrevPage}
             onClick={() => prev({ behavior: scrollBehavior })}
             className={styles.prevButton}
           >
@@ -135,7 +137,7 @@ export const InfiniteCarousel = React.forwardRef<
             ))}
           </ol>
           <button
-            disabled={activePageIndex === pages.length - 1}
+            disabled={!hasNextPage}
             onClick={() => next({ behavior: scrollBehavior })}
             className={styles.nextButton}
           >

diff --git a/stories/slideshow.tsx b/stories/slideshow.tsx
@@ -30,6 +30,8 @@ export const SlideShow = <T extends any>({
 }: SlideShowProps<T>) => {
   const {
     scrollRef,
+    hasPrevPage,
+    hasNextPage,
     next,
     prev,
     goTo,
@@ -79,7 +81,7 @@ export const SlideShow = <T extends any>({
       </div>
       <div className={styles.controls}>
         <button
-          disabled={activePageIndex === 0}
+          disabled={!hasPrevPage}
           onClick={() => prev()}
           className={styles.prevButton}
         >
@@ -103,7 +105,7 @@ export const SlideShow = <T extends any>({
           ))}
         </ol>
         <button
-          disabled={activePageIndex === pages.length - 1}
+          disabled={!hasNextPage}
           onClick={() => next()}
           className={styles.nextButton}
         >