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

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

@@ -1,412 +0,0 @@
-/**
- * @author Naresh Dhamu
- * @LastModified Thu 26 Jun 2025 at 05:45 PM
- */
-
-import React, { memo, useCallback, useMemo, useRef } from 'react';
-import {
-  View,
-  StyleSheet,
-  Dimensions,
-  TouchableOpacity,
-  type StyleProp,
-  type ViewStyle,
-  type TextStyle,
-} from 'react-native';
-import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
-import FastImage from 'react-native-fast-image';
-import Carousel from 'react-native-snap-carousel';
-import { moderateScale, verticalScale } from 'react-native-size-matters';
-import { debounce } from 'lodash';
-
-import { useInternalTheme } from '../../../../theme/hook/useInternalTheme';
-import CardPoster from '../components/CardPoster';
-import NavigateToMore from '../components/NavigateToMore';
-import { AdsPoster } from '../components';
-
-import { useSkeletonItems } from '../../../../hooks/useSkeletonItems';
-import type {
-  IAdItem,
-  IGetSectionData,
-  ISectionContent,
-  MoreFetchData,
-} from '../../../../types';
-import type { ThemeOverride } from '../../../../theme/themes';
-import { RFValue } from 'react-native-responsive-fontsize';
-import type { IContentData } from '@zezosoft/zezo-ott-api-client';
-import { useCards } from '../../../../hooks';
-
-// Constants
-const { width, height } = Dimensions.get('window');
-const ITEM_WIDTH_RATIO = 0.42;
-const ITEM_HEIGHT_RATIO = 0.28;
-const DEFAULT_ITEM_WIDTH = width * ITEM_WIDTH_RATIO;
-const DEFAULT_ITEM_HEIGHT = height * ITEM_HEIGHT_RATIO;
-const DEFAULT_BORDER_RADIUS = moderateScale(10);
-const DEFAULT_SKELETON_COUNT = 5;
-const DEBOUNCE_DELAY = 300;
-const ITEM_ACTIVE_OPACITY = 0.8;
-const CAROUSEL_FIRST_ITEM = 1;
-const CAROUSEL_INACTIVE_OPACITY = 0.6;
-const CAROUSEL_INACTIVE_SCALE = 0.9;
-const PAGINATION_TRIGGER_OFFSET = 2;
-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);
-const SKELETON_ITEM_MARGIN_RIGHT = moderateScale(12);
-const DEFAULT_SKELETON_BACKGROUND_COLOR = '#222';
-const SHADOW_ELEVATION = 0;
-const SHADOW_OFFSET = { width: 0, height: 0 };
-const SHADOW_OPACITY = 0;
-const SHADOW_RADIUS = 0;
-
-// Static Styles
-const staticStyles = StyleSheet.create({
-  root: {
-    marginVertical: verticalScale(6),
-  },
-  navigateToMoreContainer: {
-    paddingHorizontal: moderateScale(10),
-    marginBottom: verticalScale(8),
-  },
-  title: {
-    fontSize: RFValue(13),
-    fontWeight: '600',
-    marginHorizontal: moderateScale(15),
-    marginVertical: moderateScale(5),
-  },
-});
-
-// Types
-type Props = {
-  title: string;
-  section_id: string;
-  data: ISectionContent | null;
-  moreFetchData?: MoreFetchData<IContentData>;
-  type: IGetSectionData['type'];
-  paginationSkeletonCount?: number;
-  onPressItem?: (item: IContentData) => void;
-  onPressMore?: (params: {
-    section_id: IGetSectionData['_id'];
-    name: IGetSectionData['name'];
-    type: IGetSectionData['type'];
-  }) => void;
-  renderItemImage?: (params: {
-    item: IContentData;
-    index: number;
-  }) => React.ReactNode;
-  itemWidth?: number;
-  itemHeight?: number;
-  borderRadius?: number;
-  skeletonCount?: number;
-  containerStyle?: StyleProp<ViewStyle>;
-  titleStyle?: StyleProp<TextStyle>;
-  itemStyle?: StyleProp<ViewStyle>;
-  isLoading?: boolean;
-  theme?: ThemeOverride;
-  onDisplayAds?: (ad: any) => void;
-  screenDimensions?: { width: number; height: number };
-  viewportOffsets?: {
-    top: number;
-    bottom: number;
-    left: number;
-    right: number;
-  };
-};
-
-// Main Component
-const RotateCarousel: React.FC<Props> = ({
-  title,
-  section_id,
-  type,
-  data: externalData,
-  moreFetchData,
-  onPressMore,
-  onPressItem,
-  renderItemImage,
-  itemWidth = DEFAULT_ITEM_WIDTH,
-  itemHeight = DEFAULT_ITEM_HEIGHT,
-  borderRadius = DEFAULT_BORDER_RADIUS,
-  skeletonCount = DEFAULT_SKELETON_COUNT,
-  containerStyle,
-  titleStyle,
-  paginationSkeletonCount,
-  itemStyle,
-  isLoading = false,
-  theme,
-  onDisplayAds,
-  screenDimensions,
-  viewportOffsets,
-}) => {
-  // Refs
-  const carouselRef = useRef<any>(null);
-
-  // Theme
-  const { theme: appliedTheme } = useInternalTheme(theme);
-
-  // Styles
-  const styles = useMemo(
-    () =>
-      StyleSheet.create({
-        item: {
-          width: itemWidth,
-          height: itemHeight,
-          borderRadius,
-          overflow: 'hidden',
-          elevation: SHADOW_ELEVATION,
-          shadowColor: 'transparent',
-          shadowOffset: SHADOW_OFFSET,
-          shadowOpacity: SHADOW_OPACITY,
-          shadowRadius: SHADOW_RADIUS,
-        },
-        image: {
-          width: '100%',
-          height: '100%',
-          backgroundColor:
-            appliedTheme.colors.skeletonBaseColor ??
-            DEFAULT_SKELETON_BACKGROUND_COLOR,
-        },
-        skeleton: {
-          width: itemWidth,
-          height: itemHeight,
-          borderRadius,
-          overflow: 'hidden',
-          marginRight: SKELETON_ITEM_MARGIN_RIGHT,
-        },
-      }),
-    [appliedTheme.colors.skeletonBaseColor, 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: true,
-  });
-
-  // Skeleton Data
-  const skeletonCountMemo = useMemo(
-    () => (isLoading ? skeletonCount : isPaginating ? 1 : 0),
-    [isLoading, isPaginating, skeletonCount]
-  );
-  const skeletonItems = useSkeletonItems(skeletonCountMemo);
-
-  const finalData = useMemo(
-    () =>
-      isLoading
-        ? skeletonItems
-        : skeletonItems.length > 0
-          ? [...listData, ...skeletonItems]
-          : listData,
-    [isLoading, listData, skeletonItems]
-  );
-
-  // Debounced Functions
-  const debouncedLoadMore = useMemo(
-    () =>
-      debounce((nextPage: number) => {
-        return loadMore(nextPage);
-      }, DEBOUNCE_DELAY),
-    [loadMore]
-  );
-
-  // Event Handlers
-  const handleItemPress = useCallback(
-    (item: IContentData) => {
-      onPressItem?.(item);
-    },
-    [onPressItem]
-  );
-
-  const handlePressMore = useCallback(() => {
-    onPressMore?.({
-      section_id,
-      name: title,
-      type,
-    });
-  }, [onPressMore, section_id, title, type]);
-
-  // Render Functions
-  const renderItem = useCallback(
-    ({
-      item,
-      index,
-    }: {
-      item: IContentData | IAdItem | { isSkeleton: true; _id: string };
-      index: number;
-    }) => {
-      // Handle skeleton items
-      if ('isSkeleton' in item) {
-        return (
-          <View key={item._id} style={styles.skeleton}>
-            <SkeletonPlaceholder
-              highlightColor={appliedTheme.colors.skeletonHighlightColor}
-              backgroundColor={appliedTheme.colors.skeletonBaseColor}
-            >
-              <SkeletonPlaceholder.Item
-                width={itemWidth}
-                height={itemHeight}
-                borderRadius={borderRadius}
-              />
-            </SkeletonPlaceholder>
-          </View>
-        );
-      }
-
-      // Handle ads
-      if ('type' in item && item.type === 'ads') {
-        const adItem = item as IAdItem;
-        return (
-          <View
-            key={`ad-${adItem.tracking?.impression || index}`}
-            style={[styles.item, itemStyle]}
-          >
-            <AdsPoster
-              ad={adItem}
-              theme={appliedTheme}
-              isLoading={isLoading}
-              containerStyle={{ width: itemWidth, height: itemHeight }}
-              imageStyle={styles.image}
-              borderRadius={borderRadius}
-              onDisplayAds={onDisplayAds}
-              screenDimensions={screenDimensions}
-              viewportOffsets={viewportOffsets}
-            />
-          </View>
-        );
-      }
-
-      // Handle content items
-      const contentItem = item as IContentData;
-      const isSkeleton =
-        contentItem._id?.startsWith?.('pagination-skeleton') ?? false;
-
-      return (
-        <TouchableOpacity
-          key={contentItem._id || `item-${index}`}
-          activeOpacity={ITEM_ACTIVE_OPACITY}
-          style={[styles.item, itemStyle]}
-          disabled={!contentItem || !onPressItem || isLoading || isSkeleton}
-          onPress={() => {
-            if (!isSkeleton && !isLoading) {
-              handleItemPress(contentItem);
-            }
-          }}
-        >
-          {renderItemImage ? (
-            renderItemImage({ item: contentItem, index })
-          ) : (
-            <CardPoster
-              content_offering_type={contentItem.content_offering_type}
-              posterUri={contentItem.poster}
-              theme={appliedTheme}
-              borderRadius={borderRadius}
-              posterWrapperStyle={styles.image}
-              resizeMode={FastImage.resizeMode.cover}
-              isLoading={isSkeleton || isLoading}
-            />
-          )}
-        </TouchableOpacity>
-      );
-    },
-    [
-      styles.item,
-      styles.image,
-      styles.skeleton,
-      itemStyle,
-      onPressItem,
-      isLoading,
-      renderItemImage,
-      appliedTheme,
-      borderRadius,
-      itemWidth,
-      itemHeight,
-      handleItemPress,
-      onDisplayAds,
-      screenDimensions,
-      viewportOffsets,
-    ]
-  );
-
-  const handleSnapToItem = useCallback(
-    (index: number) => {
-      if (isLoading || !pagination?.hasNextPage || !pagination?.nextPage) {
-        return;
-      }
-      if (index >= finalData.length - PAGINATION_TRIGGER_OFFSET) {
-        debouncedLoadMore(pagination.nextPage);
-      }
-    },
-    [isLoading, pagination, finalData.length, debouncedLoadMore]
-  );
-
-  // Early Returns
-  if (
-    !externalData ||
-    (!isLoading && listData.length === 0) ||
-    (!isLoading && isEmpty)
-  ) {
-    return null;
-  }
-
-  // Main Render
-  return (
-    <View
-      style={[staticStyles.root, containerStyle]}
-      testID={`movie-card-${section_id}`}
-    >
-      {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={handlePressMore}
-          titleStyle={[
-            staticStyles.title,
-            { color: appliedTheme.colors.textPrimary },
-            titleStyle,
-          ]}
-          containerStyle={staticStyles.navigateToMoreContainer}
-          showAllProps={{ iconColor: appliedTheme.colors.textPrimary, theme }}
-        />
-      )}
-      <Carousel
-        ref={carouselRef}
-        data={finalData as any}
-        vertical={false}
-        renderItem={renderItem}
-        firstItem={CAROUSEL_FIRST_ITEM}
-        inactiveSlideOpacity={CAROUSEL_INACTIVE_OPACITY}
-        inactiveSlideScale={CAROUSEL_INACTIVE_SCALE}
-        sliderWidth={width}
-        itemWidth={itemWidth}
-        onSnapToItem={handleSnapToItem}
-      />
-    </View>
-  );
-};
-
-export default memo(RotateCarousel);