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

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

@@ -1,429 +0,0 @@
-/**
- * @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;