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

package/src/components/Content/Card/Styles/TopTen.tsx

@@ -1,411 +0,0 @@
-/**
- * @author Naresh Dhamu
- * @LastModified Wed 25 Jun 2025 at 11:59 PM
- **/
-
-import React, { memo, useCallback, useMemo, useRef } from 'react';
-import {
-  View,
-  FlatList,
-  TouchableOpacity,
-  StyleSheet,
-  type StyleProp,
-  type TextStyle,
-  type ViewStyle,
-  type AccessibilityProps,
-} from 'react-native';
-import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
-import { moderateScale, scale, verticalScale } from 'react-native-size-matters';
-import { useInternalTheme } from '../../../../theme/hook/useInternalTheme';
-import NavigateToMore from '../components/NavigateToMore';
-
-import type {
-  IGetSectionData,
-  ISectionContent,
-  MoreFetchData,
-} from '../../../../types';
-import type { ITheme, ThemeOverride } from '../../../../theme/themes';
-import FastImage from 'react-native-fast-image';
-import CardPoster from '../components/CardPoster';
-import { RFValue } from 'react-native-responsive-fontsize';
-import type { IContentData } from '@zezosoft/zezo-ott-api-client';
-import { useCards } from '../../../../hooks';
-
-// ============================================
-// Constants
-// ============================================
-
-const DEFAULT_ITEM_WIDTH = moderateScale(120);
-const DEFAULT_ITEM_HEIGHT = moderateScale(180);
-const DEFAULT_BORDER_RADIUS = moderateScale(8);
-const DEFAULT_SKELETON_COUNT = 5;
-
-// Spacing
-const ITEM_MARGIN_RIGHT = moderateScale(12);
-const ITEM_MARGIN_LEFT = moderateScale(10);
-const FIRST_ITEM_MARGIN_LEFT = moderateScale(12);
-const LIST_PADDING_RIGHT = moderateScale(20);
-const CONTAINER_PADDING_HORIZONTAL = moderateScale(16);
-const CONTAINER_MARGIN_BOTTOM = verticalScale(8);
-const ROOT_MARGIN_VERTICAL = verticalScale(6);
-
-// Skeleton
-const SKELETON_TITLE_WIDTH = moderateScale(100);
-const SKELETON_TITLE_HEIGHT = verticalScale(14);
-const SKELETON_TITLE_BORDER_RADIUS = moderateScale(4);
-const SKELETON_TITLE_MARGIN_LEFT = moderateScale(12);
-const SKELETON_TITLE_MARGIN_BOTTOM = verticalScale(6);
-
-// FlatList Performance
-const INITIAL_NUM_TO_RENDER = 5;
-const MAX_TO_RENDER_PER_BATCH = 10;
-const WINDOW_SIZE = 5;
-const ON_END_REACHED_THRESHOLD = 0.5;
-
-// Interaction
-const ACTIVE_OPACITY = 0.8;
-
-// ============================================
-// Helper Functions
-// ============================================
-
-/**
- * Checks if an item is a skeleton placeholder
- */
-const isSkeletonItem = (item: IContentData): boolean => {
-  const hasEmptyPoster = !item.poster || item.poster.trim() === '';
-  const isSkeletonId =
-    item._id?.startsWith('sk-') || item._id?.startsWith('pagination-skeleton-');
-  return hasEmptyPoster || isSkeletonId;
-};
-
-// ============================================
-// Types
-// ============================================
-
-type TopTenCardProps = {
-  title: string;
-  section_id: string;
-  type: IGetSectionData['type'];
-  data: ISectionContent | null;
-  moreFetchData?: MoreFetchData<IContentData>;
-  onPressItem?: (item: IContentData) => void;
-  onPressMore?: (params: {
-    section_id: IGetSectionData['_id'];
-    name: IGetSectionData['name'];
-    type: IGetSectionData['type'];
-  }) => void;
-  itemWidth?: number;
-  itemHeight?: number;
-  borderRadius?: number;
-  skeletonCount?: number;
-  paginationSkeletonCount?: number;
-  containerStyle?: StyleProp<ViewStyle>;
-  titleStyle?: StyleProp<TextStyle>;
-  itemStyle?: StyleProp<ViewStyle>;
-  isLoading?: boolean;
-  theme?: ThemeOverride;
-} & AccessibilityProps;
-
-const TopTenCard: React.FC<TopTenCardProps> = ({
-  title,
-  section_id,
-  data: externalData,
-  moreFetchData,
-  onPressMore,
-  type,
-  onPressItem,
-  itemWidth = DEFAULT_ITEM_WIDTH,
-  itemHeight = DEFAULT_ITEM_HEIGHT,
-  borderRadius = DEFAULT_BORDER_RADIUS,
-  skeletonCount = DEFAULT_SKELETON_COUNT,
-  containerStyle,
-  titleStyle,
-  itemStyle,
-  paginationSkeletonCount,
-  isLoading = false,
-  theme,
-  accessibilityLabel,
-  accessibilityHint,
-}) => {
-  // ============================================
-  // Refs
-  // ============================================
-  const flatListRef = useRef<FlatList<IContentData>>(null);
-  const onEndReachedDuringMomentum = useRef(false);
-
-  // ============================================
-  // Theme & Styles
-  // ============================================
-  const { theme: appliedTheme } = useInternalTheme(theme);
-  const styles = useMemo(
-    () => getStyles(appliedTheme, itemWidth, itemHeight, borderRadius),
-    [appliedTheme, itemWidth, itemHeight, borderRadius]
-  );
-
-  // ============================================
-  // Data Management
-  // ============================================
-  const {
-    listData,
-    pagination,
-    loadMore,
-    isEmpty,
-    isPaging: isPaginating,
-  } = useCards({
-    sectionId: section_id,
-    data: externalData,
-    fetchMore: moreFetchData,
-    loading: isLoading,
-    initialSkeleton: skeletonCount,
-    pagingSkeleton: paginationSkeletonCount,
-    adsRender: false,
-  });
-  const contentData = useMemo(
-    () =>
-      listData.filter(
-        (item): item is IContentData => !('type' in item && item.type === 'ads')
-      ),
-    [listData]
-  );
-
-  // ============================================
-  // Event Handlers
-  // ============================================
-  const handleItemPress = useCallback(
-    (item: IContentData) => {
-      onPressItem?.(item);
-    },
-    [onPressItem]
-  );
-
-  const handleMorePress = useCallback(() => {
-    onPressMore?.({
-      section_id,
-      name: title,
-      type,
-    });
-  }, [onPressMore, section_id, title, type]);
-
-  const handleEndReached = useCallback(() => {
-    const canLoadMore =
-      !onEndReachedDuringMomentum.current &&
-      pagination?.hasNextPage &&
-      pagination?.nextPage;
-
-    if (canLoadMore) {
-      onEndReachedDuringMomentum.current = true;
-      loadMore(pagination.nextPage);
-    }
-  }, [loadMore, pagination?.hasNextPage, pagination?.nextPage]);
-
-  const handleMomentumScrollBegin = useCallback(() => {
-    onEndReachedDuringMomentum.current = false;
-  }, []);
-
-  // ============================================
-  // Render Functions
-  // ============================================
-  const renderSkeleton = useCallback(
-    (isFirst: boolean) => (
-      <SkeletonPlaceholder
-        highlightColor={appliedTheme.colors.skeletonHighlightColor}
-        backgroundColor={appliedTheme.colors.skeletonBaseColor}
-        borderRadius={borderRadius}
-      >
-        <SkeletonPlaceholder.Item
-          width={itemWidth}
-          height={itemHeight}
-          borderRadius={borderRadius}
-          marginRight={ITEM_MARGIN_RIGHT}
-          marginLeft={isFirst ? FIRST_ITEM_MARGIN_LEFT : 0}
-        />
-      </SkeletonPlaceholder>
-    ),
-    [appliedTheme, borderRadius, itemWidth, itemHeight]
-  );
-
-  const renderItem = useCallback(
-    ({ item, index }: { item: IContentData; index: number }) => {
-      const isFirstItem = index === 0;
-      const rankNumber = index + 1;
-
-      if (isSkeletonItem(item)) {
-        return renderSkeleton(isFirstItem);
-      }
-
-      return (
-        <TouchableOpacity
-          style={[styles.item, isFirstItem && styles.firstItem, itemStyle]}
-          onPress={() => handleItemPress(item)}
-          activeOpacity={ACTIVE_OPACITY}
-        >
-          <CardPoster
-            content_offering_type={item.content_offering_type}
-            posterUri={item.poster}
-            isLoading={isLoading}
-            borderRadius={borderRadius}
-            posterWrapperStyle={[styles.image]}
-            resizeMode={FastImage.resizeMode.cover}
-            theme={appliedTheme}
-            showRankNumber={true}
-            rankNumber={rankNumber}
-          />
-        </TouchableOpacity>
-      );
-    },
-    [
-      styles.item,
-      styles.firstItem,
-      styles.image,
-      itemStyle,
-      isLoading,
-      borderRadius,
-      appliedTheme,
-      handleItemPress,
-      renderSkeleton,
-    ]
-  );
-
-  const renderPaginationSkeleton = useCallback(() => {
-    if (!isPaginating) return null;
-
-    return (
-      <View style={[styles.item, styles.skeletonItem]}>
-        <CardPoster
-          posterUri=""
-          theme={appliedTheme}
-          isLoading={true}
-          borderRadius={borderRadius}
-          showRankNumber={true}
-        />
-      </View>
-    );
-  }, [
-    isPaginating,
-    appliedTheme,
-    borderRadius,
-    styles.item,
-    styles.skeletonItem,
-  ]);
-
-  const keyExtractor = useCallback(
-    (item: IContentData, index: number) => `${item._id ?? item.name}-${index}`,
-    []
-  );
-
-  // ============================================
-  // Early Returns
-  // ============================================
-  if (!externalData) return null;
-  if (!isLoading && contentData.length === 0 && !isEmpty) return null;
-
-  // ============================================
-  // Render
-  // ============================================
-  return (
-    <View
-      style={[styles.root, containerStyle]}
-      accessibilityLabel={accessibilityLabel || `Top Ten Section: ${title}`}
-      accessibilityHint={accessibilityHint || 'Scroll to view top content'}
-      testID={isLoading ? `movie-card-skeleton-${section_id}` : undefined}
-    >
-      {/* Title Section */}
-      {isLoading ? (
-        <SkeletonPlaceholder
-          highlightColor={appliedTheme.colors.skeletonHighlightColor}
-          backgroundColor={appliedTheme.colors.skeletonBaseColor}
-        >
-          <SkeletonPlaceholder.Item
-            width={SKELETON_TITLE_WIDTH}
-            height={SKELETON_TITLE_HEIGHT}
-            borderRadius={SKELETON_TITLE_BORDER_RADIUS}
-            marginLeft={SKELETON_TITLE_MARGIN_LEFT}
-            marginBottom={SKELETON_TITLE_MARGIN_BOTTOM}
-          />
-        </SkeletonPlaceholder>
-      ) : (
-        <NavigateToMore
-          title={title}
-          onPress={handleMorePress}
-          titleStyle={[styles.title, titleStyle]}
-          containerStyle={styles.navigateToMoreContainer}
-          showAllProps={{
-            iconColor: appliedTheme.colors.textPrimary,
-            theme,
-          }}
-        />
-      )}
-
-      {/* Content List */}
-      <FlatList
-        ref={flatListRef}
-        data={contentData}
-        horizontal
-        showsHorizontalScrollIndicator={false}
-        keyExtractor={keyExtractor}
-        renderItem={renderItem}
-        contentContainerStyle={styles.listContent}
-        initialNumToRender={INITIAL_NUM_TO_RENDER}
-        maxToRenderPerBatch={MAX_TO_RENDER_PER_BATCH}
-        windowSize={WINDOW_SIZE}
-        onEndReachedThreshold={ON_END_REACHED_THRESHOLD}
-        onMomentumScrollBegin={handleMomentumScrollBegin}
-        onEndReached={handleEndReached}
-        ListFooterComponent={renderPaginationSkeleton}
-      />
-    </View>
-  );
-};
-
-// ============================================
-// Styles
-// ============================================
-const getStyles = (
-  theme: ITheme,
-  width: number,
-  height: number,
-  radius: number
-) =>
-  StyleSheet.create({
-    root: {
-      marginVertical: ROOT_MARGIN_VERTICAL,
-    },
-    item: {
-      width,
-      height,
-      marginRight: ITEM_MARGIN_RIGHT,
-      borderColor: theme.colors.outlineDisabled,
-      borderWidth: scale(0.7),
-      borderRadius: radius,
-      position: 'relative',
-    },
-    firstItem: {
-      marginLeft: ITEM_MARGIN_LEFT,
-    },
-    image: {
-      width: '100%',
-      height: '100%',
-    },
-    navigateToMoreContainer: {
-      paddingHorizontal: CONTAINER_PADDING_HORIZONTAL,
-      marginBottom: CONTAINER_MARGIN_BOTTOM,
-    },
-    listContent: {
-      paddingRight: LIST_PADDING_RIGHT,
-    },
-    title: {
-      fontSize: RFValue(13),
-      fontWeight: '600',
-      color: theme.colors.textPrimary,
-    },
-    skeletonItem: {
-      shadowColor: '#000',
-      shadowOffset: { width: 0, height: 1 },
-      shadowOpacity: 0.1,
-      shadowRadius: 2,
-      elevation: 1,
-    },
-  });
-
-export default memo(TopTenCard);