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

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

@@ -0,0 +1,429 @@
+/**
+ * @author Naresh Dhamu
+ * @lastModified Mon 30 Jun 2025 at 10:46 PM
+ */
+
+import React, {
+  useRef,
+  useLayoutEffect,
+  useEffect,
+  useCallback,
+  useMemo,
+  useState,
+} from 'react';
+import {
+  View,
+  FlatList,
+  TouchableOpacity,
+  StyleSheet,
+  Dimensions,
+  InteractionManager,
+  Platform,
+  Vibration,
+  type LayoutChangeEvent,
+  type ListRenderItemInfo,
+} from 'react-native';
+import { Text } from '../../../Text';
+import { useInternalTheme } from '../../../../theme/hook/useInternalTheme';
+import { scale, verticalScale } from 'react-native-size-matters';
+import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
+import type { ThemeOverride } from '../../../../theme/themes';
+import { RFValue } from 'react-native-responsive-fontsize';
+
+export type ICategory = {
+  _id: string;
+  name: string;
+  slug: string;
+  description: string;
+  order: number;
+  icon: string | null;
+  show_in_menu: boolean;
+};
+
+type CategoryCardTwoProps = {
+  category?: ICategory[];
+  activeCategory?: ICategory;
+  onPressCategory?: (category: ICategory) => void;
+  theme?: ThemeOverride;
+  mode?: 'text' | 'filled';
+  isLoading?: boolean;
+};
+
+const ITEM_WIDTH = scale(80);
+const CONTAINER_PADDING = scale(14);
+const { width: SCREEN_WIDTH } = Dimensions.get('window');
+
+import { usePrevious } from '../../../../hooks/usePrevious';
+import { useSkeletonItems } from '../../../../hooks/useSkeletonItems';
+import { debounce } from 'lodash';
+
+const CategoryCardTwo = React.memo(
+  ({
+    category = [],
+    activeCategory,
+    onPressCategory,
+    theme,
+    mode = 'text',
+    isLoading = false,
+  }: CategoryCardTwoProps) => {
+    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,
+      [activeCategory, category]
+    );
+
+    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 ||
+          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) +
+            (itemWidths[index] ?? ITEM_WIDTH) / 2 -
+            SCREEN_WIDTH / 2 +
+            RIGHT_SCROLL_BIAS
+          : index * ITEM_WIDTH +
+            ITEM_WIDTH / 2 -
+            SCREEN_WIDTH / 2 +
+            RIGHT_SCROLL_BIAS;
+
+        InteractionManager.runAfterInteractions(() => {
+          flatListRef.current?.scrollToOffset({
+            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;
+        setItemWidths((prev) => {
+          const newWidths = [...prev];
+          newWidths[index] = width;
+          return newWidths;
+        });
+      },
+      []
+    );
+
+    useLayoutEffect(() => {
+      if (
+        selectedCategory &&
+        category.length > 0 &&
+        selectedCategory._id !== prevCategoryId
+      ) {
+        const index = category.findIndex(
+          (cat) => cat._id === selectedCategory._id
+        );
+        if (index >= 0 && index !== lastPressedIndexRef.current) {
+          // Use debounced scroll for external category changes
+          debouncedScrollToCategory(index, true);
+        }
+      }
+    }, [selectedCategory, category, debouncedScrollToCategory, prevCategoryId]);
+
+    const handlePress = useCallback(
+      (item: ICategory) => {
+        // Prevent rapid successive taps on the same item
+        const index = category.findIndex((cat) => cat._id === item._id);
+        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, 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(
+      ({ item, index }: ListRenderItemInfo<ICategory>) => {
+        const isSelected = item._id === selectedCategory?._id;
+        const isFilledMode = mode === 'filled';
+
+        const containerStyle = [
+          styles.tabContainer,
+          isFilledMode &&
+            (isSelected ? filledSelectedStyle : filledUnselectedStyle),
+        ];
+
+        const textColor = isFilledMode
+          ? isSelected
+            ? themeColors.buttonText
+            : themeColors.textPrimary
+          : isSelected
+            ? themeColors.primary
+            : themeColors.textPrimary;
+
+        const textStyle = [styles.tabText, { color: textColor }];
+
+        return (
+          <TouchableOpacity
+            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={textStyle}>{item.name}</Text>
+            {mode === 'text' && isSelected && <View style={underlineStyle} />}
+          </TouchableOpacity>
+        );
+      },
+      [
+        selectedCategory,
+        mode,
+        themeColors,
+        handlePress,
+        onItemLayout,
+        filledSelectedStyle,
+        filledUnselectedStyle,
+        underlineStyle,
+      ]
+    );
+
+    const renderSkeleton = useCallback(
+      () => (
+        <SkeletonPlaceholder
+          backgroundColor={themeColors.skeletonBaseColor}
+          highlightColor={themeColors.skeletonHighlightColor}
+        >
+          <View style={listContainerStyle}>
+            {skeletonItems.map((_, index) => (
+              <View key={index} style={skeletonItemStyle} />
+            ))}
+          </View>
+        </SkeletonPlaceholder>
+      ),
+      [themeColors, listContainerStyle, skeletonItems, skeletonItemStyle]
+    );
+
+    const getItemLayout = useCallback(
+      (_: unknown, index: number) => ({
+        length: itemWidths[index] || ITEM_WIDTH,
+        offset: itemWidths
+          .slice(0, index)
+          .reduce((sum, width) => sum + (width || ITEM_WIDTH), 0),
+        index,
+      }),
+      [itemWidths]
+    );
+
+    // Memoize keyExtractor
+    const keyExtractor = useCallback((item: ICategory) => item._id, []);
+
+    return (
+      <View style={styles.container}>
+        {isLoading ? (
+          renderSkeleton()
+        ) : (
+          <FlatList
+            ref={flatListRef}
+            data={category}
+            keyExtractor={keyExtractor}
+            horizontal
+            showsHorizontalScrollIndicator={false}
+            contentContainerStyle={styles.listContainer}
+            extraData={selectedCategory?._id}
+            renderItem={renderItem}
+            getItemLayout={getItemLayout}
+            decelerationRate="fast"
+            scrollEnabled
+            scrollEventThrottle={16}
+            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>
+    );
+  },
+  (prev, next) =>
+    prev.category === next.category &&
+    prev.activeCategory?._id === next.activeCategory?._id &&
+    prev.isLoading === next.isLoading &&
+    prev.mode === next.mode &&
+    prev.theme === next.theme &&
+    prev.onPressCategory === next.onPressCategory
+);
+
+const styles = StyleSheet.create({
+  container: {
+    marginVertical: verticalScale(2),
+    paddingVertical: verticalScale(10),
+  },
+  listContainer: {
+    paddingLeft: CONTAINER_PADDING,
+    flexDirection: 'row',
+    paddingRight: CONTAINER_PADDING + scale(2),
+  },
+  tabContainer: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginRight: scale(8),
+    paddingHorizontal: scale(12),
+    paddingVertical: verticalScale(6),
+  },
+  tabText: {
+    fontSize: RFValue(10),
+    textTransform: 'capitalize',
+    fontWeight: '500',
+    lineHeight: scale(13),
+  },
+  underline: {
+    marginTop: verticalScale(2),
+    height: scale(2),
+    width: '60%',
+    borderRadius: scale(2),
+  },
+});
+
+export default CategoryCardTwo;