fix: carousel: add controls prop to scroll menu (#705)

EightfoldAI · Aug 31, 2023 · 0044f69 · 0044f69
1 parent 3404bb1
commit 0044f69
Show file tree

Hide file tree

Showing 5 changed files with 75 additions and 2 deletions.
diff --git a/src/components/Carousel/Carousel.tsx b/src/components/Carousel/Carousel.tsx
@@ -664,6 +664,7 @@ export const Carousel: FC<CarouselProps> = React.forwardRef(
                   {type === 'scroll' && (
                     <ResizeObserver onResize={updateScrollMode}>
                       <ScrollMenu
+                        controls={controls}
                         nextButton={() => autoScrollButton('next')}
                         onWheel={handleOnWheel}
                         previousButton={() => autoScrollButton('previous')}

diff --git a/src/components/Carousel/Carousel.types.ts b/src/components/Carousel/Carousel.types.ts
@@ -240,6 +240,11 @@ export interface ScrollMenuProps
    * @default 0
    */
   containerPadding?: number;
+  /**
+   * Whether to display the previous and next controls.
+   * @default true
+   */
+  controls?: boolean;
   /**
    * The pixel gap between items.
    */

diff --git a/src/components/Carousel/ScrollMenu/ScrollMenu.tsx b/src/components/Carousel/ScrollMenu/ScrollMenu.tsx
@@ -34,6 +34,7 @@ export const ScrollMenu: FC<ScrollMenuProps> = forwardRef(
       apiRef = { current: {} as autoScrollApiType },
       children,
       containerPadding = 0,
+      controls = true,
       gap = 8,
       itemClassNames,
       nextButton: _rightArrow,
@@ -163,7 +164,7 @@ export const ScrollMenu: FC<ScrollMenuProps> = forwardRef(
       >
         <VisibilityContext.Provider value={context}>
           <div className={innerWrapperClassName}>
-            {!context?.isFirstItemVisible && LeftArrow}
+            {!context?.isFirstItemVisible && controls && LeftArrow}
             <ScrollContainer
               classNames={scrollContainerClassNames}
               containerPadding={containerPadding}
@@ -181,7 +182,7 @@ export const ScrollMenu: FC<ScrollMenuProps> = forwardRef(
                 {children}
               </MenuItems>
             </ScrollContainer>
-            {!context?.isLastItemVisible && RightArrow}
+            {!context?.isLastItemVisible && controls && RightArrow}
           </div>
         </VisibilityContext.Provider>
       </div>

diff --git a/src/components/Carousel/Tests/ScrollMenu.test.tsx b/src/components/Carousel/Tests/ScrollMenu.test.tsx
@@ -307,6 +307,23 @@ describe('ScrollMenu', () => {
 
       expect(container).toMatchSnapshot();
     });
+
+    test('Hides LeftArrow, RightArrow', () => {
+      (useIntersectionObserver as jest.Mock).mockReturnValue({
+        visibleElementsWithSeparators: defaultItemsWithSeparators,
+      });
+
+      const { container } = setup({
+        previousButton: PreviousButton,
+        nextButton: NextButton,
+        controls: false,
+      });
+
+      expect(container.querySelector('.left-arrow')).toBeFalsy();
+      expect(container.querySelector('.right-arrow')).toBeFalsy();
+
+      expect(container).toMatchSnapshot();
+    });
   });
 
   describe('Events', () => {

diff --git a/src/components/Carousel/Tests/__snapshots__/ScrollMenu.test.tsx.snap b/src/components/Carousel/Tests/__snapshots__/ScrollMenu.test.tsx.snap
@@ -1,5 +1,54 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`ScrollMenu Children and buttons Hides LeftArrow, RightArrow 1`] = `
+<div>
+  <div
+    class="carousel-auto-scroll"
+  >
+    <div
+      class="carousel-auto-scroll-inner-wrapper"
+    >
+      <ul
+        class="carousel-auto-scroll-container"
+        style="margin: 0px; padding: 0px;"
+      >
+        <li
+          class="carousel-scroll-menu-item"
+          data-index="0"
+          data-key="test1"
+          style="margin-left: 0px; margin-right: 4px;"
+        >
+          <div
+            data-testid="test1"
+          >
+            {"itemId":"test1","isFirstItemVisible":false,"isLastItemVisible":false,"visibleElements":["test1","test2"],"visibleElementsWithSeparators":["test1","item1-separator","test2"],"visibleItems":["test1","item1-separator","test2"],"visibleItemsWithoutSeparators":["test1","test2"],"initComplete":true}
+          </div>
+        </li>
+        <div
+          aria-hidden="true"
+          class="carousel-scroll-menu-separator"
+          data-index="0.1"
+          data-key="test1-separator"
+          style="margin-left: 0px; margin-right: 4px;"
+        />
+        <li
+          class="carousel-scroll-menu-item"
+          data-index="1"
+          data-key="test2"
+          style="margin-left: 0px; margin-right: 4px;"
+        >
+          <div
+            data-testid="test2"
+          >
+            {"itemId":"test2","isFirstItemVisible":false,"isLastItemVisible":false,"visibleElements":["test1","test2"],"visibleElementsWithSeparators":["test1","item1-separator","test2"],"visibleItems":["test1","item1-separator","test2"],"visibleItemsWithoutSeparators":["test1","test2"],"initComplete":true}
+          </div>
+        </li>
+      </ul>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`ScrollMenu Children and buttons LeftArrow, ScrollContainer, MenuItems, RightArrow 1`] = `
 <div>
   <div