@zezosoft/zezo-ott-react-native-ui-kit 1.1.2 → 1.1.5

package/src/components/Content/Card/Sliders/Styles/Two.tsx

@@ -26,10 +26,35 @@ import RentOrBuyIcon from '../../components/RentOrBuyIcon';
 import type { ThemeOverride } from '../../../../../theme/themes';
 import type { IContentData } from '@zezosoft/zezo-ott-api-client';
 
+// ============================================================================
+// Constants
+// ============================================================================
 const FULL_WIDTH = Display.fullWidth;
-const FULL_HEIGHT = FULL_WIDTH * (9 / 16);
+const ASPECT_RATIO = 9 / 16;
+const FULL_HEIGHT = FULL_WIDTH * ASPECT_RATIO;
+const DEFAULT_SKELETON_COUNT = 3;
+const SCROLL_ANIMATION_DURATION = 300;
+const AUTO_PLAY_INTERVAL = 3000;
+const CAROUSEL_WINDOW_SIZE = 2;
+const SNAP_DEBOUNCE_DELAY = 50;
+const SKELETON_SPEED = 2000;
+const PAN_GESTURE_ACTIVE_OFFSET_X = [-10, 10];
+const PAN_GESTURE_FAIL_OFFSET_Y = [-5, 5];
+const GRADIENT_OVERLAY_COLORS = ['transparent', 'rgba(0,0,0,0.7)'] as [
+  string,
+  string,
+];
+const GRADIENT_START = { x: 0.5, y: 0 };
+const GRADIENT_END = { x: 0.5, y: 1 };
+const INDICATOR_WIDTH_ACTIVE = scale(18);
+const INDICATOR_WIDTH_INACTIVE = scale(8);
+const INDICATOR_HEIGHT = scale(8);
+const INDICATOR_BORDER_RADIUS = scale(50);
+const TOUCH_OPACITY = 0.85;
 
-// Memoized carousel item component for better performance
+// ============================================================================
+// Types
+// ============================================================================
 type CarouselItemProps = {
   item: IContentData;
   onPressItem?: (item: IContentData) => void;
@@ -41,10 +66,21 @@ type CarouselItemProps = {
   };
 };
 
+type SliderTwoProps = {
+  data: ISectionContent | null;
+  onPressItem?: (item: IContentData) => void;
+  isLoading?: boolean;
+  skeletonCount?: number;
+  theme?: ThemeOverride;
+} & AccessibilityProps;
+
+// ============================================================================
+// Helper Components
+// ============================================================================
 const CarouselItem = memo<CarouselItemProps>(
   ({ item, onPressItem, appliedTheme, gradientConfig }) => (
     <TouchableOpacity
-      activeOpacity={0.85}
+      activeOpacity={TOUCH_OPACITY}
       onPress={() => onPressItem?.(item)}
       style={styles.itemWrapper}
       accessibilityRole="button"
@@ -71,85 +107,127 @@ const CarouselItem = memo<CarouselItemProps>(
   )
 );
 
-type SliderTwoProps = {
-  data: ISectionContent | null;
-  onPressItem?: (item: IContentData) => void;
-  isLoading?: boolean;
-  skeletonCount?: number;
-  theme?: ThemeOverride;
-} & AccessibilityProps;
+CarouselItem.displayName = 'CarouselItem';
 
+// ============================================================================
+// Main Component
+// ============================================================================
 const SliderTwo: React.FC<SliderTwoProps> = ({
   data,
   onPressItem,
   isLoading = true,
-  skeletonCount = 3,
+  skeletonCount = DEFAULT_SKELETON_COUNT,
   accessibilityLabel = 'Full Width Slider',
   accessibilityHint = 'Swipe to view content',
   theme,
 }) => {
+  // ========================================================================
+  // Hooks & State
+  // ========================================================================
   const { theme: appliedTheme } = useInternalTheme(theme);
-  const contentData = useMemo(() => data?.data ?? [], [data]);
   const [activeIndex, setActiveIndex] = useState(0);
-  const gradientColors = useMemo(
-    () => [appliedTheme.colors.primary, appliedTheme.colors.primary],
-    [appliedTheme.colors.primary]
-  );
-  // Debounce snap handler to prevent stuttering
   const snapTimeoutRef = useRef<NodeJS.Timeout | null>(null);
-  const handleSnapToItem = useCallback((i: number) => {
-    if (snapTimeoutRef.current) {
-      clearTimeout(snapTimeoutRef.current);
-    }
-    snapTimeoutRef.current = setTimeout(() => {
-      InteractionManager.runAfterInteractions(() => {
-        setActiveIndex(i);
-      });
-    }, 50);
-  }, []);
 
-  // Memoize skeleton items
+  // ========================================================================
+  // Data Processing
+  // ========================================================================
+  const contentData = useMemo(() => data?.data ?? [], [data]);
   const skeletonItems = useSkeletonItems(skeletonCount);
 
-  // Memoize indicator array
   const indicatorArray = useMemo(
-    () => Array.from({ length: contentData.length }, (_, i) => i),
-    [contentData.length]
+    () =>
+      Array.from(
+        { length: isLoading ? skeletonItems.length : contentData.length },
+        (_, i) => i
+      ),
+    [isLoading, skeletonItems.length, contentData.length]
   );
 
-  // Memoize carousel data
   const carouselData = useMemo(
     () => (isLoading ? skeletonItems : contentData),
     [isLoading, skeletonItems, contentData]
   );
 
-  // Memoize gradient configuration
+  // ========================================================================
+  // Memoized Values
+  // ========================================================================
+  const gradientColors = useMemo(
+    () => [appliedTheme.colors.primary, appliedTheme.colors.primary],
+    [appliedTheme.colors.primary]
+  );
+
   const gradientConfig = useMemo(
     () => ({
-      colors: ['transparent', 'rgba(0,0,0,0.7)'] as [string, string],
-      start: { x: 0.5, y: 0 },
-      end: { x: 0.5, y: 1 },
+      colors: GRADIENT_OVERLAY_COLORS,
+      start: GRADIENT_START,
+      end: GRADIENT_END,
     }),
     []
   );
 
-  // Memoize pan gesture handler for smooth scrolling
-  const configurePanGesture = useCallback((gesture: any) => {
-    gesture.activeOffsetX([-10, 10]).failOffsetY([-5, 5]);
+  const carouselProps = useMemo(
+    () => ({
+      width: FULL_WIDTH,
+      height: FULL_HEIGHT,
+      autoPlay: !isLoading && contentData.length > 1,
+      loop: !isLoading && contentData.length > 1,
+      scrollAnimationDuration: SCROLL_ANIMATION_DURATION,
+      autoPlayInterval: AUTO_PLAY_INTERVAL,
+      windowSize: CAROUSEL_WINDOW_SIZE,
+      enabled: true,
+    }),
+    [isLoading, contentData.length]
+  );
+
+  const inactiveIndicatorStyle = useMemo(
+    () => [
+      styles.inactiveIndicator,
+      { backgroundColor: appliedTheme.colors.onSurface },
+    ],
+    [appliedTheme.colors.onSurface]
+  );
+
+  // ========================================================================
+  // Event Handlers
+  // ========================================================================
+  const handleSnapToItem = useCallback((i: number) => {
+    if (snapTimeoutRef.current) {
+      clearTimeout(snapTimeoutRef.current);
+    }
+    snapTimeoutRef.current = setTimeout(() => {
+      InteractionManager.runAfterInteractions(() => {
+        setActiveIndex(i);
+      });
+    }, SNAP_DEBOUNCE_DELAY);
   }, []);
 
+  const configurePanGesture = useCallback(
+    (gesture: any) =>
+      gesture
+        .activeOffsetX(PAN_GESTURE_ACTIVE_OFFSET_X)
+        .failOffsetY(PAN_GESTURE_FAIL_OFFSET_Y),
+    []
+  );
+
+  // ========================================================================
+  // Render Functions
+  // ========================================================================
   const renderSkeletonItem = useCallback(
-    () => (
+    ({ item: _item }: { item: any }) => (
       <View style={styles.itemWrapper}>
         <SkeletonPlaceholder
           backgroundColor={appliedTheme.colors.skeletonBaseColor}
           highlightColor={appliedTheme.colors.skeletonHighlightColor}
+          speed={SKELETON_SPEED}
         >
           <SkeletonPlaceholder.Item width={FULL_WIDTH} height={FULL_HEIGHT} />
         </SkeletonPlaceholder>
       </View>
     ),
-    [appliedTheme.colors]
+    [
+      appliedTheme.colors.skeletonBaseColor,
+      appliedTheme.colors.skeletonHighlightColor,
+    ]
   );
 
   const renderCarouselItem = useCallback(
@@ -164,63 +242,42 @@ const SliderTwo: React.FC<SliderTwoProps> = ({
     [appliedTheme, onPressItem, gradientConfig]
   );
 
-  // Memoize renderItem to prevent switching functions
   const renderItem = useMemo(
     () => (isLoading ? renderSkeletonItem : renderCarouselItem),
     [isLoading, renderSkeletonItem, renderCarouselItem]
   );
 
-  // Memoize carousel props for smooth scrolling
-  const carouselProps = useMemo(
-    () => ({
-      width: FULL_WIDTH,
-      height: FULL_HEIGHT,
-      autoPlay: !isLoading && contentData.length > 1,
-      loop: !isLoading && contentData.length > 1,
-      scrollAnimationDuration: 300, // Reduced for smoother scrolling
-      autoPlayInterval: 3000,
-      windowSize: 2, // Reduced window size for better performance
-      enabled: true,
-    }),
-    [isLoading, contentData.length]
-  );
-
-  // Memoize inactive indicator style
-  const inactiveIndicatorStyle = useMemo(
-    () => [
-      styles.inactiveIndicator,
-      { backgroundColor: appliedTheme.colors.onSurface },
-    ],
-    [appliedTheme.colors.onSurface]
-  );
-
   const renderIndicator = useCallback(
-    (_: number, i: number) => (
-      <View key={i} style={styles.indicatorWrapper}>
-        {isLoading ? (
-          <SkeletonPlaceholder
-            backgroundColor={appliedTheme.colors.skeletonBaseColor}
-            highlightColor={appliedTheme.colors.skeletonHighlightColor}
-            speed={2000}
-          >
-            <SkeletonPlaceholder.Item
-              width={scale(18)}
-              height={scale(8)}
-              borderRadius={scale(50)}
+    (_: number, i: number) => {
+      const isActive = i === activeIndex;
+
+      return (
+        <View key={i} style={styles.indicatorWrapper}>
+          {isLoading ? (
+            <SkeletonPlaceholder
+              backgroundColor={appliedTheme.colors.skeletonBaseColor}
+              highlightColor={appliedTheme.colors.skeletonHighlightColor}
+              speed={SKELETON_SPEED}
+            >
+              <SkeletonPlaceholder.Item
+                width={INDICATOR_WIDTH_ACTIVE}
+                height={INDICATOR_HEIGHT}
+                borderRadius={INDICATOR_BORDER_RADIUS}
+              />
+            </SkeletonPlaceholder>
+          ) : isActive ? (
+            <LinearGradient
+              start={{ x: 0, y: 0 }}
+              end={{ x: 1, y: 0 }}
+              colors={gradientColors}
+              style={styles.activeIndicator}
             />
-          </SkeletonPlaceholder>
-        ) : i === activeIndex ? (
-          <LinearGradient
-            start={{ x: 0, y: 0 }}
-            end={{ x: 1, y: 0 }}
-            colors={gradientColors}
-            style={styles.activeIndicator}
-          />
-        ) : (
-          <View style={inactiveIndicatorStyle} />
-        )}
-      </View>
-    ),
+          ) : (
+            <View style={inactiveIndicatorStyle} />
+          )}
+        </View>
+      );
+    },
     [
       isLoading,
       appliedTheme.colors.skeletonBaseColor,
@@ -231,7 +288,11 @@ const SliderTwo: React.FC<SliderTwoProps> = ({
     ]
   );
 
-  if (!data || (!isLoading && contentData.length === 0)) {
+  // ========================================================================
+  // Early Returns
+  // ========================================================================
+  // Don't return early if loading - we need to show skeleton
+  if (!isLoading && (!data || contentData.length === 0)) {
     return (
       <View style={[styles.container, styles.emptyState]}>
         <Text style={styles.emptyText}>No content available</Text>
@@ -239,6 +300,9 @@ const SliderTwo: React.FC<SliderTwoProps> = ({
     );
   }
 
+  // ========================================================================
+  // Render Main Content
+  // ========================================================================
   return (
     <View
       style={styles.container}
@@ -252,15 +316,20 @@ const SliderTwo: React.FC<SliderTwoProps> = ({
         onSnapToItem={handleSnapToItem}
         onConfigurePanGesture={configurePanGesture}
       />
-      <View style={styles.indicatorContainer}>
-        <View style={styles.indicator}>
-          {indicatorArray.map((i) => renderIndicator(0, i))}
+      {indicatorArray.length > 0 && (
+        <View style={styles.indicatorContainer}>
+          <View style={styles.indicator}>
+            {indicatorArray.map((i) => renderIndicator(0, i))}
+          </View>
         </View>
-      </View>
+      )}
     </View>
   );
 };
 
+// ============================================================================
+// Styles
+// ============================================================================
 const styles = StyleSheet.create({
   container: {
     flex: 1,
@@ -297,14 +366,14 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
   },
   activeIndicator: {
-    width: scale(18),
-    height: scale(8),
-    borderRadius: scale(50),
+    width: INDICATOR_WIDTH_ACTIVE,
+    height: INDICATOR_HEIGHT,
+    borderRadius: INDICATOR_BORDER_RADIUS,
   },
   inactiveIndicator: {
-    width: scale(8),
-    height: scale(8),
-    borderRadius: scale(50),
+    width: INDICATOR_WIDTH_INACTIVE,
+    height: INDICATOR_HEIGHT,
+    borderRadius: INDICATOR_BORDER_RADIUS,
   },
   emptyState: {
     padding: scale(12),

package/src/components/Content/Card/Sliders/index.ts

@@ -4,11 +4,13 @@
  */
 import SliderOne from './Styles/One';
 import SliderTwo from './Styles/Two';
+import SliderThree from './Styles/Three';
 
 const Sliders = {
   Styles: {
     One: SliderOne,
     Two: SliderTwo,
+    Three: SliderThree,
   },
 };