@times-components/ts-components 1.145.1-b32ea924749bafdf12e3e8515023538fa20e7808.3 → 1.145.1-cfea81c4084e6f91221ea00fec9fc730d5b933cb.4

package/src/components/carousel-component/hooks/useCarousel.ts

@@ -0,0 +1,187 @@
+import { useState, useEffect, useRef, useCallback } from 'react';
+import { UseCarouselOptions, UseCarouselReturn } from '../types';
+
+export const useCarousel = (
+  totalItems: number,
+  options: UseCarouselOptions = {}
+): UseCarouselReturn => {
+  const { itemsPerPage = 2, onPageChange } = options;
+
+  const [currentPage, setCurrentPage] = useState(0);
+  const carouselRef = useRef<HTMLDivElement>(null);
+  const isScrollingRef = useRef(false);
+  const isDraggingRef = useRef(false);
+  const startXRef = useRef(0);
+
+  const totalPages = Math.ceil(totalItems / itemsPerPage);
+
+  const scrollToPage = useCallback(
+    (page: number) => {
+      if (carouselRef.current) {
+        const cardElements = carouselRef.current.children;
+
+        if (cardElements.length > 0) {
+          isScrollingRef.current = true;
+
+          const container = carouselRef.current;
+          const targetCardIndex = page * itemsPerPage;
+          const targetCard = cardElements[targetCardIndex] as HTMLElement;
+
+          if (targetCard) {
+            const targetScroll = targetCard.offsetLeft;
+
+            container.scrollTo({
+              left: targetScroll,
+              behavior: 'smooth'
+            });
+            setCurrentPage(page);
+
+            if (onPageChange) {
+              onPageChange(page);
+            }
+
+            setTimeout(() => {
+              isScrollingRef.current = false;
+            }, 800);
+          }
+        }
+      }
+    },
+    [itemsPerPage, onPageChange]
+  );
+
+  const handlePrevious = useCallback(
+    () => {
+      const newPage = Math.max(0, currentPage - 1);
+      scrollToPage(newPage);
+    },
+    [currentPage, scrollToPage]
+  );
+
+  const handleNext = useCallback(
+    () => {
+      const newPage = Math.min(totalPages - 1, currentPage + 1);
+      scrollToPage(newPage);
+    },
+    [currentPage, totalPages, scrollToPage]
+  );
+
+  const handleMouseDown = useCallback((e: React.MouseEvent) => {
+    if (!carouselRef.current) {
+      return;
+    }
+    e.preventDefault();
+    isDraggingRef.current = true;
+    startXRef.current = e.pageX;
+    carouselRef.current.style.cursor = 'grabbing';
+  }, []);
+
+  const handleMouseMove = useCallback((e: React.MouseEvent) => {
+    if (!isDraggingRef.current) {
+      return;
+    }
+    e.preventDefault();
+  }, []);
+
+  const handleMouseUp = useCallback(
+    (e: React.MouseEvent) => {
+      if (!isDraggingRef.current) {
+        return;
+      }
+      isDraggingRef.current = false;
+
+      if (carouselRef.current) {
+        carouselRef.current.style.cursor = 'grab';
+
+        const endX = e.pageX;
+        const diff = startXRef.current - endX;
+
+        if (Math.abs(diff) > 30) {
+          if (diff > 0) {
+            handleNext();
+          } else {
+            handlePrevious();
+          }
+        }
+      }
+    },
+    [handleNext, handlePrevious]
+  );
+
+  const handleMouseLeave = useCallback(() => {
+    if (!isDraggingRef.current) {
+      return;
+    }
+    isDraggingRef.current = false;
+    if (carouselRef.current) {
+      carouselRef.current.style.cursor = 'grab';
+    }
+  }, []);
+
+  const handleScroll = useCallback(
+    () => {
+      if (isScrollingRef.current) {
+        return;
+      }
+
+      if (carouselRef.current) {
+        const container = carouselRef.current;
+        const children = container.children;
+        if (children.length === 0) {
+          return;
+        }
+
+        const scrollLeft = container.scrollLeft;
+
+        let closestPage = 0;
+        let closestDistance = Infinity;
+
+        for (let page = 0; page < totalPages; page++) {
+          const cardIndex = page * itemsPerPage;
+          if (cardIndex < children.length) {
+            const card = children[cardIndex] as HTMLElement;
+            const distance = Math.abs(card.offsetLeft - scrollLeft);
+            if (distance < closestDistance) {
+              closestDistance = distance;
+              closestPage = page;
+            }
+          }
+        }
+
+        if (closestPage !== currentPage) {
+          setCurrentPage(closestPage);
+          if (onPageChange) {
+            onPageChange(closestPage);
+          }
+        }
+      }
+    },
+    [currentPage, totalPages, itemsPerPage, onPageChange]
+  );
+
+  useEffect(
+    () => {
+      const carousel = carouselRef.current;
+      if (carousel) {
+        carousel.addEventListener('scroll', handleScroll);
+        return () => carousel.removeEventListener('scroll', handleScroll);
+      }
+      return undefined;
+    },
+    [handleScroll]
+  );
+
+  return {
+    currentPage,
+    totalPages,
+    carouselRef,
+    isScrolling: isScrollingRef.current,
+    handlePrevious,
+    handleNext,
+    scrollToPage,
+    handleMouseDown,
+    handleMouseMove,
+    handleMouseUp,
+    handleMouseLeave
+  };
+};

package/src/components/carousel-component/index.tsx

@@ -0,0 +1,88 @@
+import React from 'react';
+import { useCarousel } from './hooks/useCarousel';
+import {
+  CarouselContainer,
+  CarouselWrapper,
+  CarouselContent,
+  CardsRow,
+  PageControl
+} from './styles';
+import { DefaultNavigationArrow } from './DefaultNavigationArrow';
+import { DefaultPageDot } from './DefaultPageDot';
+import { CarouselComponentProps } from './types';
+
+export const CarouselComponent: React.FC<CarouselComponentProps> = ({
+  items,
+  options,
+  showArrows = true,
+  showDots = true,
+  arrowComponent: CustomArrow,
+  dotComponent: CustomDot,
+  className
+}) => {
+  const {
+    currentPage,
+    totalPages,
+    carouselRef,
+    handlePrevious,
+    handleNext,
+    scrollToPage,
+    handleMouseDown,
+    handleMouseMove,
+    handleMouseUp,
+    handleMouseLeave
+  } = useCarousel(items.length, options);
+
+  const ArrowComponent = CustomArrow || DefaultNavigationArrow;
+  const DotComponent = CustomDot || DefaultPageDot;
+
+  return (
+    <CarouselContainer className={className}>
+      <CarouselWrapper>
+        {showArrows && (
+          <ArrowComponent
+            direction="left"
+            onClick={handlePrevious}
+            disabled={currentPage === 0}
+          />
+        )}
+
+        <CarouselContent>
+          <CardsRow
+            ref={carouselRef}
+            onMouseDown={handleMouseDown}
+            onMouseMove={handleMouseMove}
+            onMouseUp={handleMouseUp}
+            onMouseLeave={handleMouseLeave}
+          >
+            {items}
+          </CardsRow>
+        </CarouselContent>
+
+        {showArrows && (
+          <ArrowComponent
+            direction="right"
+            onClick={handleNext}
+            disabled={currentPage >= totalPages - 1}
+          />
+        )}
+      </CarouselWrapper>
+
+      {showDots &&
+        totalPages > 1 && (
+          <PageControl>
+            {Array.from({ length: totalPages }).map((_, pageIndex) => (
+              <DotComponent
+                key={pageIndex}
+                active={pageIndex === currentPage}
+                onClick={() => scrollToPage(pageIndex)}
+                index={pageIndex}
+              />
+            ))}
+          </PageControl>
+        )}
+    </CarouselContainer>
+  );
+};
+
+export { CarouselItem } from './CarouselItem';

package/src/components/carousel-component/styles.ts

@@ -0,0 +1,140 @@
+import styled from 'styled-components';
+
+export const breakpoints = {
+  sm: '390px',
+  md: '768px',
+  lg: '1024px',
+  xl: '1320px'
+};
+
+export const colors = {
+  primary: '#005C8A',
+  white: '#FFFFFF'
+};
+
+export const ItemContainer = styled.div<{
+  widthConfig: {
+    mobile?: string;
+    tablet?: string;
+    desktop?: string;
+    xl?: string;
+  };
+}>`
+  flex: 0 0 ${({ widthConfig }) => widthConfig.mobile};
+  scroll-snap-align: start;
+  border-radius: 8px;
+  transition: filter 0.3s ease;
+
+  @media (min-width: ${breakpoints.md}) {
+    flex: 0 0 ${({ widthConfig }) => widthConfig.tablet};
+  }
+
+  @media (min-width: ${breakpoints.lg}) {
+    flex: 0 0 ${({ widthConfig }) => widthConfig.desktop};
+  }
+
+  @media (min-width: ${breakpoints.xl}) {
+    flex: 0 0 ${({ widthConfig }) => widthConfig.xl};
+  }
+`;
+
+export const CarouselContainer = styled.div`
+  width: 100%;
+`;
+
+export const CarouselWrapper = styled.div`
+  position: relative;
+  width: 100%;
+`;
+
+export const CarouselContent = styled.div`
+  overflow: hidden;
+`;
+
+export const CardsRow = styled.div`
+  display: flex;
+  gap: 20px;
+  overflow-x: auto;
+  scroll-snap-type: x mandatory;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+  padding: 0;
+  scroll-behavior: smooth;
+  cursor: grab;
+  user-select: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  &:active {
+    cursor: grabbing;
+  }
+
+  @media (max-width: ${breakpoints.md}) {
+    padding-left: 10px;
+  }
+`;
+
+export const PageControl = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+  padding: 12px;
+  background: ${colors.white};
+`;
+
+export const NavigationArrowButton = styled.button<{
+  direction: 'left' | 'right';
+  disabled?: boolean;
+}>`
+  display: none;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  ${({ direction }) =>
+    direction === 'left' ? 'left: -60px;' : 'right: -60px;'} z-index: 10;
+  width: 48px;
+  height: 48px;
+  border: none;
+  border-radius: 50%;
+  background: ${({ disabled }) => (disabled ? '#CCCCCC' : colors.primary)};
+  cursor: ${({ disabled }) => (disabled ? 'default' : 'pointer')};
+  align-items: center;
+  justify-content: center;
+  transition: background 0.2s ease;
+  pointer-events: ${({ disabled }) => (disabled ? 'none' : 'auto')};
+
+  svg {
+    width: 24px;
+    height: 24px;
+  }
+
+  svg path {
+    stroke: ${colors.white};
+  }
+
+  &:hover:not(:disabled) {
+    background: #004a6e;
+  }
+
+  @media (min-width: ${breakpoints.lg}) {
+    display: flex;
+  }
+`;
+
+export const PageDotButton = styled.button<{ active: boolean }>`
+  width: 8px;
+  height: 8px;
+  border-radius: 1000px;
+  border: none;
+  padding: 0;
+  background: ${({ active }) => (active ? '#01000D' : '#AAAAAA')};
+  cursor: pointer;
+  transition: background 0.2s ease;
+
+  &:hover {
+    background: #01000d;
+  }
+`;

package/src/components/carousel-component/types.ts

@@ -0,0 +1,51 @@
+import { ReactNode } from 'react';
+
+export interface CarouselComponentProps {
+  items: ReactNode[];
+  options?: UseCarouselOptions;
+  showArrows?: boolean;
+  showDots?: boolean;
+  arrowComponent?: React.ComponentType<{
+    direction: 'left' | 'right';
+    onClick: () => void;
+    disabled: boolean;
+  }>;
+  dotComponent?: React.ComponentType<{
+    active: boolean;
+    onClick: () => void;
+    index: number;
+  }>;
+  className?: string;
+}
+
+export interface CarouselItemProps {
+  children: ReactNode;
+  widthConfig?: {
+    xs?: string;
+    mobile?: string;
+    tablet?: string;
+    desktop?: string;
+    xl?: string;
+  };
+  className?: string;
+}
+
+// Carousel Hook Types
+export interface UseCarouselOptions {
+  itemsPerPage?: number;
+  onPageChange?: (page: number) => void;
+}
+
+export interface UseCarouselReturn {
+  currentPage: number;
+  totalPages: number;
+  carouselRef: React.RefObject<HTMLDivElement>;
+  isScrolling: boolean;
+  handlePrevious: () => void;
+  handleNext: () => void;
+  scrollToPage: (page: number) => void;
+  handleMouseDown: (e: React.MouseEvent) => void;
+  handleMouseMove: (e: React.MouseEvent) => void;
+  handleMouseUp: (e: React.MouseEvent) => void;
+  handleMouseLeave: () => void;
+}

package/src/components/opta/cricket/scorecard/OptaCricketScorecard.tsx

@@ -12,7 +12,6 @@ import {
 import { Container, PlaceholderContainer } from '../../shared/shared-styles';
 import { WidgetContainer } from './styles';
 import Button from '../../shared/button/Button';
-import { emitEvent } from '../../utils/emitEvent';
 
 export const OptaCricketScorecard: React.FC<{
   competition: string;
@@ -31,7 +30,6 @@ export const OptaCricketScorecard: React.FC<{
     heightLg = 258
   }) => {
     const ref = React.createRef<HTMLDivElement>();
-    const containerRef = React.createRef<HTMLDivElement>();
     const [isReady, setIsReady] = useState<boolean>(false);
     const [showDetails, setShowDetails] = useState<boolean>(false);
 
@@ -83,16 +81,6 @@ export const OptaCricketScorecard: React.FC<{
         });
     }, []);
 
-    useEffect(
-      () => {
-        const height = containerRef.current
-          ? containerRef.current.offsetHeight
-          : 0;
-        emitEvent('updateHeight', height);
-      },
-      [showDetails]
-    );
-
     return (
       <Container
         fullWidth={full_width}
@@ -100,7 +88,6 @@ export const OptaCricketScorecard: React.FC<{
         heightMd={heightMd}
         heightLg={heightLg}
         hasPadding
-        ref={containerRef}
       >
         <WidgetContainer ref={ref} showDetails={showDetails} />
 

package/src/components/opta/cricket/scorecard/__tests__/OptaCricketScorecard.test.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, act, fireEvent, waitFor } from '@testing-library/react';
+import { render, act, fireEvent } from '@testing-library/react';
 import 'regenerator-runtime';
 import '@testing-library/jest-dom';
 
@@ -10,27 +10,22 @@ jest.mock('@times-components/image', () => ({
 const mockInitSettings = jest.fn();
 const mockInitStyleSheet = jest.fn();
 const mockInitComponent = jest.fn();
-const mockInitScript = jest.fn();
-const mockEmitEvent = jest.fn();
+const mockHasMatchEvents = jest.fn();
 
-const mockInitElement = jest.fn(() => {
+const mockInitElement = () => {
   const element = document.createElement('div');
   element.appendChild(document.createTextNode('Widget'));
   return element;
-});
+};
 
 jest.mock('../../../utils/config', () => ({
   initSettings: mockInitSettings,
   initStyleSheet: mockInitStyleSheet,
-  initScript: mockInitScript,
+  initScript: () => new Promise(resolve => resolve({})),
   initElement: mockInitElement,
   initComponent: mockInitComponent
 }));
 
-jest.mock('../../../utils/emitEvent', () => ({
-  emitEvent: mockEmitEvent
-}));
-
 import { OptaCricketScorecard } from '../OptaCricketScorecard';
 
 const requiredProps = {
@@ -41,26 +36,19 @@ const requiredProps = {
 describe('OptaCricketScorecard', () => {
   beforeEach(() => {
     jest.clearAllMocks();
-    mockInitScript.mockResolvedValue({});
-  });
-
-  afterEach(() => {
-    jest.clearAllMocks();
-    document.body.innerHTML = '';
   });
 
   it('should render correctly', async () => {
-    const { asFragment, getByRole } = render(
-      <OptaCricketScorecard {...requiredProps} />
-    );
+    const { asFragment } = render(<OptaCricketScorecard {...requiredProps} />);
 
-    await waitFor(() => {
-      expect(mockInitSettings).toHaveBeenCalledTimes(1);
+    act(() => {
+      mockInitComponent();
+      mockHasMatchEvents();
     });
 
-    expect(mockInitStyleSheet).toHaveBeenCalledWith('cricket');
+    expect(mockInitSettings).toHaveBeenCalledTimes(1);
+    expect(mockInitStyleSheet).toHaveBeenCalledTimes(1);
     expect(mockInitComponent).toHaveBeenCalledTimes(1);
-    expect(getByRole('button')).toBeInTheDocument();
 
     expect(asFragment()).toMatchSnapshot();
   });
@@ -71,112 +59,14 @@ describe('OptaCricketScorecard', () => {
     expect(button).not.toBeDisabled();
   });
 
-  it('should toggle details when button is clicked', async () => {
+  it('should toggle details when button is clicked', () => {
     const { getByRole } = render(<OptaCricketScorecard {...requiredProps} />);
     const button = getByRole('button');
 
     expect(button).toHaveTextContent('Show Details');
-
-    act(() => {
-      fireEvent.click(button);
-    });
-
-    await waitFor(() => {
-      expect(button).toHaveTextContent('Hide Details');
-    });
-
-    act(() => {
-      fireEvent.click(button);
-    });
-
-    await waitFor(() => {
-      expect(button).toHaveTextContent('Show Details');
-    });
-  });
-
-  describe('emitEvent', () => {
-    it('should call emitEvent with updateHeight when details are toggled', async () => {
-      const { getByRole } = render(<OptaCricketScorecard {...requiredProps} />);
-      const button = getByRole('button');
-
-      // Clear initial calls
-      jest.clearAllMocks();
-
-      act(() => {
-        fireEvent.click(button);
-      });
-
-      await waitFor(() => {
-        expect(mockEmitEvent).toHaveBeenCalledWith(
-          'updateHeight',
-          expect.any(Number)
-        );
-      });
-    });
-
-    it('should emit updateHeight event on each toggle', async () => {
-      const { getByRole } = render(<OptaCricketScorecard {...requiredProps} />);
-      const button = getByRole('button');
-
-      // Clear initial calls
-      jest.clearAllMocks();
-
-      // First toggle
-      act(() => {
-        fireEvent.click(button);
-      });
-
-      await waitFor(() => {
-        expect(mockEmitEvent).toHaveBeenCalledTimes(1);
-      });
-
-      // Second toggle
-      act(() => {
-        fireEvent.click(button);
-      });
-
-      await waitFor(() => {
-        expect(mockEmitEvent).toHaveBeenCalledTimes(2);
-      });
-
-      // Third toggle
-      act(() => {
-        fireEvent.click(button);
-      });
-
-      await waitFor(() => {
-        expect(mockEmitEvent).toHaveBeenCalledTimes(3);
-      });
-    });
-
-    it('should emit updateHeight with container offsetHeight', async () => {
-      const { getByRole, container } = render(
-        <OptaCricketScorecard {...requiredProps} />
-      );
-      const button = getByRole('button');
-
-      // Clear initial calls
-      jest.clearAllMocks();
-
-      // Mock offsetHeight
-      const containerElement = container.querySelector('[class*="Container"]');
-      if (containerElement) {
-        Object.defineProperty(containerElement, 'offsetHeight', {
-          value: 300,
-          configurable: true
-        });
-      }
-
-      act(() => {
-        fireEvent.click(button);
-      });
-
-      await waitFor(() => {
-        expect(mockEmitEvent).toHaveBeenCalledWith(
-          'updateHeight',
-          expect.any(Number)
-        );
-      });
-    });
+    fireEvent.click(button);
+    expect(button).toHaveTextContent('Hide Details');
+    fireEvent.click(button);
+    expect(button).toHaveTextContent('Show Details');
   });
 });