@zezosoft/zezo-ott-react-native-ui-kit 1.1.1 → 1.1.3

package/src/components/Content/Card/Category/Category.tsx

@@ -6,10 +6,10 @@
 import React, {
   useRef,
   useLayoutEffect,
+  useEffect,
   useCallback,
   useMemo,
   useState,
-  useEffect,
 } from 'react';
 import {
   View,
@@ -18,6 +18,8 @@ import {
   StyleSheet,
   Dimensions,
   InteractionManager,
+  Platform,
+  Vibration,
   type LayoutChangeEvent,
   type ListRenderItemInfo,
 } from 'react-native';
@@ -51,13 +53,9 @@ const ITEM_WIDTH = scale(80);
 const CONTAINER_PADDING = scale(14);
 const { width: SCREEN_WIDTH } = Dimensions.get('window');
 
-function usePrevious<T>(value: T): T | undefined {
-  const ref = useRef<T>(undefined);
-  useEffect(() => {
-    ref.current = value;
-  }, [value]);
-  return ref.current;
-}
+import { usePrevious } from '../../../../hooks/usePrevious';
+import { useSkeletonItems } from '../../../../hooks/useSkeletonItems';
+import { debounce } from 'lodash';
 
 const CategoryCard = React.memo(
   ({
@@ -71,6 +69,21 @@ const CategoryCard = React.memo(
     const { theme: appliedTheme } = useInternalTheme(theme);
     const flatListRef = useRef<FlatList<ICategory>>(null);
     const [itemWidths, setItemWidths] = useState<number[]>([]);
+    const isScrollingRef = useRef(false);
+    const lastPressedIndexRef = useRef<number | null>(null);
+
+    // Memoize theme colors
+    const themeColors = useMemo(
+      () => ({
+        primary: appliedTheme.colors.primary,
+        outline: appliedTheme.colors.outline,
+        buttonText: appliedTheme.colors.buttonText,
+        textPrimary: appliedTheme.colors.textPrimary,
+        skeletonBaseColor: appliedTheme.colors.skeletonBaseColor,
+        skeletonHighlightColor: appliedTheme.colors.skeletonHighlightColor,
+      }),
+      [appliedTheme.colors]
+    );
 
     const selectedCategory = useMemo(
       () => activeCategory || category?.[0] || null,
@@ -79,11 +92,48 @@ const CategoryCard = React.memo(
 
     const prevCategoryId = usePrevious(selectedCategory?._id);
 
+    // Memoize skeleton items
+    const skeletonItems = useSkeletonItems(5);
+
+    // Memoize skeleton item style
+    const skeletonItemStyle = useMemo(
+      () => ({
+        width: ITEM_WIDTH - scale(20),
+        height: verticalScale(26),
+        borderRadius: scale(8),
+        marginRight: scale(8),
+      }),
+      []
+    );
+
+    // Memoize list container style with flexDirection
+    const listContainerStyle = useMemo(
+      () => [styles.listContainer, { flexDirection: 'row' as const }],
+      []
+    );
+
+    // Haptic feedback utility
+    const triggerHapticFeedback = useCallback(() => {
+      if (Platform.OS === 'ios') {
+        // iOS haptic feedback (light impact)
+        Vibration.vibrate(1);
+      } else if (Platform.OS === 'android') {
+        // Android haptic feedback (short vibration)
+        Vibration.vibrate(10);
+      }
+    }, []);
+
     const scrollToCategory = useCallback(
       (index: number, animated: boolean) => {
-        if (!flatListRef.current || index < 0 || index >= category.length)
+        if (
+          !flatListRef.current ||
+          index < 0 ||
+          index >= category.length ||
+          isScrollingRef.current
+        )
           return;
 
+        isScrollingRef.current = true;
         const RIGHT_SCROLL_BIAS = scale(40);
         const offset = itemWidths.length
           ? itemWidths.slice(0, index).reduce((sum, w) => sum + w, 0) +
@@ -100,11 +150,35 @@ const CategoryCard = React.memo(
             offset: Math.max(0, offset),
             animated,
           });
+          // Reset scrolling flag after animation completes
+          if (animated) {
+            setTimeout(() => {
+              isScrollingRef.current = false;
+            }, 300);
+          } else {
+            isScrollingRef.current = false;
+          }
         });
       },
       [category, itemWidths]
     );
 
+    // Debounced scroll function to prevent rapid scrolling
+    const debouncedScrollToCategory = useMemo(
+      () =>
+        debounce((index: number, animated: boolean) => {
+          scrollToCategory(index, animated);
+        }, 100),
+      [scrollToCategory]
+    );
+
+    // Cleanup debounced function on unmount
+    useEffect(() => {
+      return () => {
+        debouncedScrollToCategory.cancel();
+      };
+    }, [debouncedScrollToCategory]);
+
     const onItemLayout = useCallback(
       (event: LayoutChangeEvent, index: number) => {
         const { width } = event.nativeEvent.layout;
@@ -126,19 +200,66 @@ const CategoryCard = React.memo(
         const index = category.findIndex(
           (cat) => cat._id === selectedCategory._id
         );
-        if (index >= 0) scrollToCategory(index, true);
+        if (index >= 0 && index !== lastPressedIndexRef.current) {
+          // Use debounced scroll for external category changes
+          debouncedScrollToCategory(index, true);
+        }
       }
-    }, [selectedCategory, category, scrollToCategory, prevCategoryId]);
+    }, [selectedCategory, category, debouncedScrollToCategory, prevCategoryId]);
 
     const handlePress = useCallback(
       (item: ICategory) => {
-        onPressCategory?.(item);
+        // Prevent rapid successive taps on the same item
         const index = category.findIndex((cat) => cat._id === item._id);
-        if (index >= 0) {
-          setTimeout(() => scrollToCategory(index, true), 10);
+        if (index < 0) return;
+
+        // Check if same item is being pressed rapidly
+        if (lastPressedIndexRef.current === index && isScrollingRef.current) {
+          return;
         }
+
+        lastPressedIndexRef.current = index;
+
+        // Trigger haptic feedback for better UX
+        triggerHapticFeedback();
+
+        // Call the callback
+        onPressCategory?.(item);
+
+        // Scroll to category with slight delay for smoother UX
+        requestAnimationFrame(() => {
+          scrollToCategory(index, true);
+        });
       },
-      [category, onPressCategory, scrollToCategory]
+      [category, onPressCategory, scrollToCategory, triggerHapticFeedback]
+    );
+
+    // Memoize filled mode selected style
+    const filledSelectedStyle = useMemo(
+      () => ({
+        borderRadius: scale(8),
+        borderWidth: scale(1),
+        borderColor: themeColors.primary,
+        backgroundColor: themeColors.primary,
+      }),
+      [themeColors.primary]
+    );
+
+    // Memoize filled mode unselected style
+    const filledUnselectedStyle = useMemo(
+      () => ({
+        borderRadius: scale(8),
+        borderWidth: scale(1),
+        borderColor: themeColors.outline,
+        backgroundColor: 'transparent',
+      }),
+      [themeColors.outline]
+    );
+
+    // Memoize underline style
+    const underlineStyle = useMemo(
+      () => [styles.underline, { backgroundColor: themeColors.primary }],
+      [themeColors.primary]
     );
 
     const renderItem = useCallback(
@@ -148,80 +269,66 @@ const CategoryCard = React.memo(
 
         const containerStyle = [
           styles.tabContainer,
-          isFilledMode && {
-            borderRadius: scale(8),
-            borderWidth: scale(1),
-            borderColor: isSelected
-              ? appliedTheme.colors.primary
-              : appliedTheme.colors.outline,
-            backgroundColor: isSelected
-              ? appliedTheme.colors.primary
-              : 'transparent',
-          },
+          isFilledMode &&
+            (isSelected ? filledSelectedStyle : filledUnselectedStyle),
         ];
 
         const textColor = isFilledMode
           ? isSelected
-            ? appliedTheme.colors.buttonText
-            : appliedTheme.colors.textPrimary
+            ? themeColors.buttonText
+            : themeColors.textPrimary
           : isSelected
-            ? appliedTheme.colors.primary
-            : appliedTheme.colors.textPrimary;
+            ? themeColors.primary
+            : themeColors.textPrimary;
+
+        const textStyle = [styles.tabText, { color: textColor }];
 
         return (
           <TouchableOpacity
-            activeOpacity={0.9}
+            activeOpacity={0.7}
             onPress={() => handlePress(item)}
             style={containerStyle}
             onLayout={(event) => onItemLayout(event, index)}
             accessibilityLabel={`Select category ${item.name}`}
+            accessibilityRole="button"
+            accessibilityState={{ selected: isSelected }}
+            accessibilityHint={
+              isSelected
+                ? `${item.name} is currently selected`
+                : `Double tap to select ${item.name} category`
+            }
           >
-            <Text
-              style={[
-                styles.tabText,
-                {
-                  color: textColor,
-                },
-              ]}
-            >
-              {item.name}
-            </Text>
-            {mode === 'text' && isSelected && (
-              <View
-                style={[
-                  styles.underline,
-                  { backgroundColor: appliedTheme.colors.primary },
-                ]}
-              />
-            )}
+            <Text style={textStyle}>{item.name}</Text>
+            {mode === 'text' && isSelected && <View style={underlineStyle} />}
           </TouchableOpacity>
         );
       },
-      [selectedCategory, mode, appliedTheme, handlePress, onItemLayout]
+      [
+        selectedCategory,
+        mode,
+        themeColors,
+        handlePress,
+        onItemLayout,
+        filledSelectedStyle,
+        filledUnselectedStyle,
+        underlineStyle,
+      ]
     );
 
     const renderSkeleton = useCallback(
       () => (
         <SkeletonPlaceholder
-          backgroundColor={appliedTheme.colors.skeletonBaseColor}
-          highlightColor={appliedTheme.colors.skeletonHighlightColor}
+          backgroundColor={themeColors.skeletonBaseColor}
+          highlightColor={themeColors.skeletonHighlightColor}
         >
-          <View style={[styles.listContainer, { flexDirection: 'row' }]}>
-            {[...Array(5)].map((_, index) => (
-              <View
-                key={index}
-                style={{
-                  width: ITEM_WIDTH - scale(20),
-                  height: verticalScale(26),
-                  borderRadius: scale(8),
-                  marginRight: scale(8),
-                }}
-              />
+          <View style={listContainerStyle}>
+            {skeletonItems.map((_, index) => (
+              <View key={index} style={skeletonItemStyle} />
             ))}
           </View>
         </SkeletonPlaceholder>
       ),
-      [appliedTheme]
+      [themeColors, listContainerStyle, skeletonItems, skeletonItemStyle]
     );
 
     const getItemLayout = useCallback(
@@ -235,6 +342,9 @@ const CategoryCard = React.memo(
       [itemWidths]
     );
 
+    // Memoize keyExtractor
+    const keyExtractor = useCallback((item: ICategory) => item._id, []);
+
     return (
       <View style={styles.container}>
         {isLoading ? (
@@ -243,7 +353,7 @@ const CategoryCard = React.memo(
           <FlatList
             ref={flatListRef}
             data={category}
-            keyExtractor={(item) => item._id}
+            keyExtractor={keyExtractor}
             horizontal
             showsHorizontalScrollIndicator={false}
             contentContainerStyle={styles.listContainer}
@@ -256,6 +366,21 @@ const CategoryCard = React.memo(
             initialNumToRender={10}
             maxToRenderPerBatch={12}
             windowSize={5}
+            removeClippedSubviews
+            onScrollBeginDrag={() => {
+              isScrollingRef.current = true;
+            }}
+            onScrollEndDrag={() => {
+              // Reset after a short delay to allow momentum scrolling
+              setTimeout(() => {
+                isScrollingRef.current = false;
+              }, 200);
+            }}
+            onMomentumScrollEnd={() => {
+              isScrollingRef.current = false;
+            }}
+            accessibilityLabel="Category selection list"
+            accessibilityRole="list"
           />
         )}
       </View>