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

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

@@ -1,392 +0,0 @@
-/**
- * @author Naresh Dhamu
- * @LastModified Sat 28 Jun 2025 at 01:00 AM
- **/
-
-import React, { memo, useCallback, useMemo, useRef } from 'react';
-import {
-  View,
-  FlatList,
-  TouchableOpacity,
-  StyleSheet,
-  type StyleProp,
-  type ViewStyle,
-  type TextStyle,
-  type AccessibilityProps,
-  type ListRenderItemInfo,
-  ScrollView,
-} from 'react-native';
-import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
-import { moderateScale, verticalScale } from 'react-native-size-matters';
-import FastImage from 'react-native-fast-image';
-
-import { useInternalTheme } from '../../../../theme/hook/useInternalTheme';
-import NavigateToMore from '../components/NavigateToMore';
-import { ThumbnailCard } from '../components/ThumbnailCard';
-import { Text } from '../../../Text';
-import type { ThemeOverride } from '../../../../theme/themes';
-import type {
-  IGetSectionData,
-  ISectionContent,
-  MoreFetchData,
-} from '../../../../types';
-import { RFValue } from 'react-native-responsive-fontsize';
-import RentOrBuyIcon from '../components/RentOrBuyIcon';
-import type { IContentData } from '@zezosoft/zezo-ott-api-client';
-import { useCards } from '../../../../hooks';
-
-// Default dimensions and styling constants
-const DEFAULT_ITEM_WIDTH = moderateScale(160);
-const DEFAULT_BORDER_RADIUS = moderateScale(5);
-const DEFAULT_SKELETON_COUNT = 3;
-
-// Spacing constants
-const ITEM_MARGIN_LEFT = moderateScale(10);
-const ITEM_MARGIN_TOP = verticalScale(4);
-const FIRST_SKELETON_MARGIN_LEFT = moderateScale(12);
-const SKELETON_MARGIN_RIGHT = moderateScale(12);
-const CONTAINER_PADDING_HORIZONTAL = moderateScale(10);
-const CONTAINER_MARGIN_BOTTOM = verticalScale(8);
-const ROOT_MARGIN_VERTICAL = verticalScale(6);
-const LIST_PADDING_RIGHT = moderateScale(15);
-
-// Skeleton styling constants
-const SKELETON_TITLE_WIDTH = moderateScale(100);
-const SKELETON_TITLE_HEIGHT = moderateScale(20);
-const SKELETON_TITLE_BORDER_RADIUS = moderateScale(4);
-const SKELETON_TITLE_MARGIN_HORIZONTAL = moderateScale(15);
-const SKELETON_TITLE_MARGIN_BOTTOM = verticalScale(6);
-const SKELETON_THUMBNAIL_HEIGHT_RATIO = 9 / 16;
-const SKELETON_TEXT_WIDTH_RATIO = 0.8;
-const SKELETON_TEXT_HEIGHT = moderateScale(13);
-const SKELETON_TEXT_BORDER_RADIUS = moderateScale(3);
-const SKELETON_TEXT_MARGIN_TOP = verticalScale(6);
-
-// FlatList performance constants
-const INITIAL_NUM_TO_RENDER = 5;
-const ON_END_REACHED_THRESHOLD = 0.5;
-
-// Touchable opacity constant
-const ACTIVE_OPACITY = 0.8;
-
-type MovieCardSixProps = {
-  theme?: ThemeOverride;
-  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;
-  borderRadius?: number;
-  skeletonCount?: number;
-  paginationSkeletonCount?: number;
-  containerStyle?: StyleProp<ViewStyle>;
-  titleStyle?: StyleProp<TextStyle>;
-  itemStyle?: StyleProp<ViewStyle>;
-  isLoading?: boolean;
-} & AccessibilityProps;
-
-const MovieCardSix: React.FC<MovieCardSixProps> = ({
-  theme,
-  title,
-  section_id,
-  type,
-  data: externalData,
-  moreFetchData,
-  onPressItem,
-  onPressMore,
-  itemWidth = DEFAULT_ITEM_WIDTH,
-  borderRadius = DEFAULT_BORDER_RADIUS,
-  skeletonCount = DEFAULT_SKELETON_COUNT,
-  paginationSkeletonCount,
-  containerStyle,
-  titleStyle,
-  itemStyle,
-  isLoading = false,
-  accessibilityLabel,
-  accessibilityHint,
-}) => {
-  // Refs
-  const flatListRef = useRef<FlatList<IContentData>>(null);
-  const onEndReachedCalledDuringMomentum = useRef(false);
-
-  // Theme
-  const { theme: appliedTheme } = useInternalTheme(theme);
-
-  // Data management using custom hook
-  const {
-    listData,
-    pagination,
-    loadMore,
-    isEmpty,
-    isPaging: isPaginating,
-  } = useCards({
-    sectionId: section_id,
-    data: externalData,
-    fetchMore: moreFetchData,
-    loading: isLoading,
-    initialSkeleton: skeletonCount,
-    pagingSkeleton: paginationSkeletonCount,
-    adsRender: false,
-  });
-
-  // Event handlers
-  const handleItemPress = useCallback(
-    (item: IContentData) => {
-      onPressItem?.(item);
-    },
-    [onPressItem]
-  );
-
-  const handlePressMore = useCallback(() => {
-    onPressMore?.({ section_id, name: title, type });
-  }, [onPressMore, section_id, title, type]);
-
-  const handleEndReached = useCallback(() => {
-    if (
-      !onEndReachedCalledDuringMomentum.current &&
-      pagination?.hasNextPage &&
-      pagination?.nextPage
-    ) {
-      onEndReachedCalledDuringMomentum.current = true;
-      loadMore(pagination.nextPage);
-    }
-  }, [pagination?.hasNextPage, pagination?.nextPage, loadMore]);
-
-  const handleScrollBeginDrag = useCallback(() => {
-    onEndReachedCalledDuringMomentum.current = false;
-  }, []);
-
-  const handleMomentumScrollBegin = useCallback(() => {
-    onEndReachedCalledDuringMomentum.current = false;
-  }, []);
-
-  // Generate key for FlatList items
-  const keyExtractor = useCallback(
-    (item: IContentData, index: number) => `${item._id}-${index}`,
-    []
-  );
-
-  // Render functions
-  const renderItem = useCallback(
-    ({ item }: ListRenderItemInfo<IContentData>) => {
-      const thumbnailWrapperStyle = { width: itemWidth };
-      const titleContainerStyle = {
-        width: itemWidth,
-        marginTop: ITEM_MARGIN_TOP,
-      };
-      const titleTextStyle = {
-        color: appliedTheme.colors.textPrimary,
-      };
-
-      return (
-        <TouchableOpacity
-          style={[styles.item, itemStyle]}
-          onPress={() => handleItemPress(item)}
-          activeOpacity={ACTIVE_OPACITY}
-        >
-          <RentOrBuyIcon
-            theme={appliedTheme}
-            content_offering_type={item.content_offering_type}
-          />
-          <ThumbnailCard
-            thumbnailUri={item.thumbnail}
-            theme={appliedTheme}
-            isLoading={false}
-            borderRadius={borderRadius}
-            wrapperStyle={thumbnailWrapperStyle}
-            resizeMode={FastImage.resizeMode.cover}
-          />
-          <View style={titleContainerStyle}>
-            <Text style={[styles.itemTitle, titleTextStyle]} numberOfLines={1}>
-              {item.name}
-            </Text>
-          </View>
-        </TouchableOpacity>
-      );
-    },
-    [handleItemPress, itemStyle, appliedTheme, borderRadius, itemWidth]
-  );
-
-  const renderSkeletonItem = useCallback(
-    (index: number) => {
-      const isFirstSkeleton = index === 0;
-      const thumbnailHeight = itemWidth * SKELETON_THUMBNAIL_HEIGHT_RATIO;
-      const textWidth = itemWidth * SKELETON_TEXT_WIDTH_RATIO;
-
-      return (
-        <SkeletonPlaceholder
-          key={`skeleton-${index}`}
-          highlightColor={appliedTheme.colors.skeletonHighlightColor}
-          backgroundColor={appliedTheme.colors.skeletonBaseColor}
-          borderRadius={borderRadius}
-        >
-          <SkeletonPlaceholder.Item
-            flexDirection="column"
-            alignItems="flex-start"
-            marginLeft={isFirstSkeleton ? FIRST_SKELETON_MARGIN_LEFT : 0}
-            marginRight={SKELETON_MARGIN_RIGHT}
-          >
-            {/* Thumbnail */}
-            <SkeletonPlaceholder.Item
-              width={itemWidth}
-              height={thumbnailHeight}
-              borderRadius={borderRadius}
-            />
-
-            {/* Title */}
-            <SkeletonPlaceholder.Item
-              width={textWidth}
-              height={SKELETON_TEXT_HEIGHT}
-              borderRadius={SKELETON_TEXT_BORDER_RADIUS}
-              marginTop={SKELETON_TEXT_MARGIN_TOP}
-            />
-          </SkeletonPlaceholder.Item>
-        </SkeletonPlaceholder>
-      );
-    },
-    [appliedTheme.colors, itemWidth, borderRadius]
-  );
-
-  // Filter out ads to ensure only IContentData items are passed to FlatList
-  const contentData = useMemo(
-    () =>
-      listData.filter(
-        (item): item is IContentData => !('type' in item && item.type === 'ads')
-      ),
-    [listData]
-  );
-
-  // Render pagination skeleton footer
-  const renderPaginationSkeleton = useCallback(() => {
-    if (!isPaginating) {
-      return null;
-    }
-    return renderSkeletonItem(0);
-  }, [isPaginating, renderSkeletonItem]);
-
-  // Early returns for edge cases
-  if (!externalData) {
-    return null;
-  }
-
-  const shouldHideSection = !isLoading && contentData.length === 0 && !isEmpty;
-  if (shouldHideSection) {
-    return null;
-  }
-
-  // Loading skeleton state
-  if (isLoading) {
-    const skeletonDataLength = isPaginating ? 1 : skeletonCount;
-    const skeletonData = Array.from(
-      { length: skeletonDataLength },
-      (_, i) => i
-    );
-
-    return (
-      <View
-        style={[styles.root, containerStyle]}
-        accessibilityLabel={accessibilityLabel || `Movie section: ${title}`}
-        accessibilityHint={accessibilityHint || 'Scroll to view content'}
-      >
-        <SkeletonPlaceholder
-          highlightColor={appliedTheme.colors.skeletonHighlightColor}
-          backgroundColor={appliedTheme.colors.skeletonBaseColor}
-        >
-          <SkeletonPlaceholder.Item
-            width={SKELETON_TITLE_WIDTH}
-            height={SKELETON_TITLE_HEIGHT}
-            borderRadius={SKELETON_TITLE_BORDER_RADIUS}
-            marginHorizontal={SKELETON_TITLE_MARGIN_HORIZONTAL}
-            marginBottom={SKELETON_TITLE_MARGIN_BOTTOM}
-          />
-        </SkeletonPlaceholder>
-        <ScrollView
-          horizontal
-          showsHorizontalScrollIndicator={false}
-          contentContainerStyle={styles.skeletonList}
-        >
-          {skeletonData.map((index) => renderSkeletonItem(index))}
-        </ScrollView>
-      </View>
-    );
-  }
-
-  // Main content render
-  return (
-    <View
-      style={[styles.root, containerStyle]}
-      accessibilityLabel={accessibilityLabel || `Movie section: ${title}`}
-      accessibilityHint={accessibilityHint || 'Scroll to view content'}
-    >
-      <NavigateToMore
-        title={title}
-        onPress={handlePressMore}
-        titleStyle={[
-          styles.title,
-          { color: appliedTheme.colors.textPrimary },
-          titleStyle,
-        ]}
-        containerStyle={styles.navigateToMoreContainer}
-        showAllProps={{
-          iconColor: appliedTheme.colors.textPrimary,
-          theme,
-        }}
-      />
-      <FlatList
-        ref={flatListRef}
-        data={contentData}
-        horizontal
-        keyExtractor={keyExtractor}
-        renderItem={renderItem}
-        showsHorizontalScrollIndicator={false}
-        contentContainerStyle={styles.listContent}
-        initialNumToRender={INITIAL_NUM_TO_RENDER}
-        onEndReached={handleEndReached}
-        onEndReachedThreshold={ON_END_REACHED_THRESHOLD}
-        onScrollBeginDrag={handleScrollBeginDrag}
-        onMomentumScrollBegin={handleMomentumScrollBegin}
-        ListFooterComponent={renderPaginationSkeleton}
-      />
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  root: {
-    marginVertical: ROOT_MARGIN_VERTICAL,
-  },
-  item: {
-    marginLeft: ITEM_MARGIN_LEFT,
-  },
-  navigateToMoreContainer: {
-    paddingHorizontal: CONTAINER_PADDING_HORIZONTAL,
-    marginBottom: CONTAINER_MARGIN_BOTTOM,
-  },
-  title: {
-    fontSize: RFValue(13),
-    fontWeight: '600',
-  },
-  itemTitle: {
-    fontSize: RFValue(9),
-    fontWeight: '500',
-    lineHeight: SKELETON_TEXT_HEIGHT,
-    height: SKELETON_TEXT_HEIGHT,
-  },
-  listContent: {
-    paddingRight: LIST_PADDING_RIGHT,
-  },
-  skeletonList: {
-    flexDirection: 'row',
-    alignItems: 'flex-start',
-    paddingRight: LIST_PADDING_RIGHT,
-  },
-});
-
-export default memo(MovieCardSix);