@zezosoft/zezo-ott-react-native-ui-kit 1.0.2 → 1.0.3

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

@@ -11,7 +11,7 @@ import {
   type ViewStyle,
   type TextStyle,
   Dimensions,
-  TouchableOpacity
+  TouchableOpacity,
 } from 'react-native';
 import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
 import FastImage from 'react-native-fast-image';
@@ -24,7 +24,12 @@ import { usePaginatedSection } from '../../../../hooks/usePaginatedSection';
 import { useTheme } from '../../../../theme/hook/useTheme';
 import CardPoster from '../components/CardPoster';
 import NavigateToMore from '../components/NavigateToMore';
-import type { IContentData, IGetSectionData, ISectionContent, MoreFetchData } from '../../../../types';
+import type {
+  IContentData,
+  IGetSectionData,
+  ISectionContent,
+  MoreFetchData,
+} from '../../../../types';
 import type { AppTheme } from '../../../../theme/themes';
 import { RFValue } from 'react-native-responsive-fontsize';
 
@@ -37,18 +42,18 @@ const DEFAULT_BORDER_RADIUS = moderateScale(10);
 // Static styles defined outside getStyles to avoid recalculation
 const staticStyles = StyleSheet.create({
   root: {
-    marginVertical: verticalScale(6)
+    marginVertical: verticalScale(6),
   },
   navigateToMoreContainer: {
     paddingHorizontal: moderateScale(10),
-    marginBottom: verticalScale(8)
+    marginBottom: verticalScale(8),
   },
   title: {
     fontSize: RFValue(13),
     fontWeight: '600',
     marginHorizontal: moderateScale(15),
-    marginVertical: moderateScale(5)
-  }
+    marginVertical: moderateScale(5),
+  },
 });
 
 type Props = {
@@ -63,7 +68,10 @@ type Props = {
     name: IGetSectionData['name'];
     type: IGetSectionData['type'];
   }) => void;
-  renderItemImage?: (params: { item: IContentData; index: number }) => React.ReactNode;
+  renderItemImage?: (params: {
+    item: IContentData;
+    index: number;
+  }) => React.ReactNode;
   itemWidth?: number;
   itemHeight?: number;
   borderRadius?: number;
@@ -92,7 +100,7 @@ const MovieCardThree: React.FC<Props> = ({
   titleStyle,
   itemStyle,
   isLoading = false,
-  theme
+  theme,
 }) => {
   const { theme: appliedTheme } = useTheme(theme);
 
@@ -111,20 +119,20 @@ const MovieCardThree: React.FC<Props> = ({
           shadowColor: 'transparent',
           shadowOffset: { width: 0, height: 0 },
           shadowOpacity: 0,
-          shadowRadius: 0
+          shadowRadius: 0,
         },
         image: {
           width: '100%',
           height: '100%',
-          backgroundColor: appliedTheme.colors.skeletonBaseColor ?? '#222'
+          backgroundColor: appliedTheme.colors.skeletonBaseColor ?? '#222',
         },
         skeleton: {
           width: itemWidth,
           height: itemHeight,
           borderRadius,
           overflow: 'hidden',
-          marginRight: moderateScale(12)
-        }
+          marginRight: moderateScale(12),
+        },
       }),
     [appliedTheme.colors.skeletonBaseColor, itemWidth, itemHeight, borderRadius]
   );
@@ -133,21 +141,31 @@ const MovieCardThree: React.FC<Props> = ({
     data,
     loading: isPaginating,
     pagination,
-    loadMoreData
-  } = usePaginatedSection(section_id, moreFetchData, initialData?.data || [], isLoading);
+    loadMoreData,
+  } = usePaginatedSection(
+    section_id,
+    moreFetchData,
+    initialData?.data || [],
+    isLoading
+  );
 
   // Memoized skeleton items
   const skeletonItems = useMemo(() => {
     const count = isLoading ? skeletonCount : isPaginating ? 1 : 0;
     return Array.from({ length: count }, (_, i) => ({
       _id: `skeleton-${i}`,
-      isSkeleton: true
+      isSkeleton: true,
     }));
   }, [isLoading, isPaginating, skeletonCount]);
 
   // Optimized finalData to avoid unnecessary spread
   const finalData = useMemo(
-    () => (isLoading ? skeletonItems : skeletonItems.length > 0 ? [...data, ...skeletonItems] : data),
+    () =>
+      isLoading
+        ? skeletonItems
+        : skeletonItems.length > 0
+          ? [...data, ...skeletonItems]
+          : data,
     [isLoading, data, skeletonItems]
   );
 
@@ -171,12 +189,18 @@ const MovieCardThree: React.FC<Props> = ({
     onPressMore?.({
       section_id,
       name: title,
-      type
+      type,
     });
   }, [onPressMore, section_id, title, type]);
 
   const renderItem = useCallback(
-    ({ item, index }: { item: IContentData | { isSkeleton: true; _id: string }; index: number }) => {
+    ({
+      item,
+      index,
+    }: {
+      item: IContentData | { isSkeleton: true; _id: string };
+      index: number;
+    }) => {
       if ('isSkeleton' in item) {
         return (
           <View key={item._id} style={styles.skeleton}>
@@ -184,7 +208,11 @@ const MovieCardThree: React.FC<Props> = ({
               highlightColor={appliedTheme.colors.skeletonHighlightColor}
               backgroundColor={appliedTheme.colors.skeletonBaseColor}
             >
-              <SkeletonPlaceholder.Item width={itemWidth} height={itemHeight} borderRadius={borderRadius} />
+              <SkeletonPlaceholder.Item
+                width={itemWidth}
+                height={itemHeight}
+                borderRadius={borderRadius}
+              />
             </SkeletonPlaceholder>
           </View>
         );
@@ -225,14 +253,17 @@ const MovieCardThree: React.FC<Props> = ({
       borderRadius,
       itemWidth,
       itemHeight,
-      handleItemPress
+      handleItemPress,
     ]
   );
   if (!initialData) return null;
   if (!isLoading && (!data || data.length === 0)) return null;
 
   return (
-    <View style={[staticStyles.root, containerStyle]} testID={`movie-card-${section_id}`}>
+    <View
+      style={[staticStyles.root, containerStyle]}
+      testID={`movie-card-${section_id}`}
+    >
       {isLoading ? (
         <SkeletonPlaceholder
           highlightColor={appliedTheme.colors.skeletonHighlightColor}
@@ -250,7 +281,11 @@ const MovieCardThree: React.FC<Props> = ({
         <NavigateToMore
           title={title}
           onPress={handlePressMore}
-          titleStyle={[staticStyles.title, { color: appliedTheme.colors.textPrimary }, titleStyle]}
+          titleStyle={[
+            staticStyles.title,
+            { color: appliedTheme.colors.textPrimary },
+            titleStyle,
+          ]}
           containerStyle={staticStyles.navigateToMoreContainer}
           showAllProps={{ iconColor: appliedTheme.colors.textPrimary }}
         />
@@ -266,7 +301,8 @@ const MovieCardThree: React.FC<Props> = ({
         sliderWidth={width}
         itemWidth={itemWidth}
         onSnapToItem={(index) => {
-          if (isLoading || !pagination?.hasNextPage || !pagination?.nextPage) return;
+          if (isLoading || !pagination?.hasNextPage || !pagination?.nextPage)
+            return;
           if (index >= finalData.length - 2) {
             debouncedLoadMore(pagination.nextPage);
           }

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

@@ -13,14 +13,19 @@ import {
   type TextStyle,
   type ViewStyle,
   type AccessibilityProps,
-  type ListRenderItem
+  type ListRenderItem,
 } from 'react-native';
 import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
 import { moderateScale, scale, verticalScale } from 'react-native-size-matters';
 import { useTheme } from '../../../../theme/hook/useTheme';
 import NavigateToMore from '../components/NavigateToMore';
 import { usePaginatedSection } from '../../../../hooks/usePaginatedSection';
-import type { IContentData, IGetSectionData, ISectionContent, MoreFetchData } from '../../../../types';
+import type {
+  IContentData,
+  IGetSectionData,
+  ISectionContent,
+  MoreFetchData,
+} from '../../../../types';
 import type { AppTheme, ITheme } from '../../../../theme/themes';
 import FastImage from 'react-native-fast-image';
 import LinearGradient from 'react-native-linear-gradient';
@@ -74,7 +79,7 @@ const TopTenCard: React.FC<TopTenCardProps> = ({
   isLoading = false,
   theme,
   accessibilityLabel,
-  accessibilityHint
+  accessibilityHint,
 }) => {
   const flatListRef = useRef<FlatList<IContentData>>(null);
   const onEndReachedDuringMomentum = useRef(false);
@@ -88,13 +93,22 @@ const TopTenCard: React.FC<TopTenCardProps> = ({
     data,
     pagination: paginated,
     loading: isPaginating,
-    loadMoreData
-  } = usePaginatedSection(section_id, moreFetchData, initialData?.data || [], isLoading);
+    loadMoreData,
+  } = usePaginatedSection(
+    section_id,
+    moreFetchData,
+    initialData?.data || [],
+    isLoading
+  );
 
   const listData = useMemo(() => (Array.isArray(data) ? data : []), [data]);
 
   const handleEndReached = useCallback(() => {
-    if (!onEndReachedDuringMomentum.current && paginated?.hasNextPage && paginated?.nextPage) {
+    if (
+      !onEndReachedDuringMomentum.current &&
+      paginated?.hasNextPage &&
+      paginated?.nextPage
+    ) {
       onEndReachedDuringMomentum.current = true;
       loadMoreData(paginated.nextPage);
     }
@@ -113,7 +127,10 @@ const TopTenCard: React.FC<TopTenCardProps> = ({
           onPress={() => handleItemPress(item)}
           activeOpacity={0.8}
         >
-          <LinearGradient colors={['rgba(0,0,0,0)', 'rgba(0,0,0,0.8)']} style={styles.imageOverlay}>
+          <LinearGradient
+            colors={['rgba(0,0,0,0)', 'rgba(0,0,0,0.8)']}
+            style={styles.imageOverlay}
+          >
             <CardPoster
               posterUri={item.poster}
               isLoading={isLoading}
@@ -148,7 +165,7 @@ const TopTenCard: React.FC<TopTenCardProps> = ({
       isLoading,
       borderRadius,
       appliedTheme,
-      handleItemPress
+      handleItemPress,
     ]
   );
 
@@ -178,7 +195,10 @@ const TopTenCard: React.FC<TopTenCardProps> = ({
 
   if (isLoading) {
     return (
-      <View style={[styles.root, containerStyle]} testID={`movie-card-skeleton-${section_id}`}>
+      <View
+        style={[styles.root, containerStyle]}
+        testID={`movie-card-skeleton-${section_id}`}
+      >
         <SkeletonPlaceholder
           highlightColor={appliedTheme.colors.skeletonHighlightColor}
           backgroundColor={appliedTheme.colors.skeletonBaseColor}
@@ -214,7 +234,7 @@ const TopTenCard: React.FC<TopTenCardProps> = ({
           onPressMore?.({
             section_id,
             name: title,
-            type
+            type,
           })
         }
         titleStyle={[styles.title, titleStyle]}
@@ -246,9 +266,17 @@ const TopTenCard: React.FC<TopTenCardProps> = ({
               speed={800}
             >
               <View style={[styles.item, styles.skeletonItem]}>
-                <SkeletonPlaceholder.Item width={itemWidth} height={itemHeight} borderRadius={borderRadius} />
+                <SkeletonPlaceholder.Item
+                  width={itemWidth}
+                  height={itemHeight}
+                  borderRadius={borderRadius}
+                />
                 <View style={styles.numberContainer}>
-                  <SkeletonPlaceholder.Item width={scale(40)} height={scale(40)} borderRadius={borderRadius} />
+                  <SkeletonPlaceholder.Item
+                    width={scale(40)}
+                    height={scale(40)}
+                    borderRadius={borderRadius}
+                  />
                 </View>
               </View>
             </SkeletonPlaceholder>
@@ -259,10 +287,15 @@ const TopTenCard: React.FC<TopTenCardProps> = ({
   );
 };
 
-const getStyles = (theme: ITheme, width: number, height: number, radius: number) =>
+const getStyles = (
+  theme: ITheme,
+  width: number,
+  height: number,
+  radius: number
+) =>
   StyleSheet.create({
     root: {
-      marginVertical: verticalScale(6)
+      marginVertical: verticalScale(6),
     },
     item: {
       width,
@@ -273,21 +306,21 @@ const getStyles = (theme: ITheme, width: number, height: number, radius: number)
       borderWidth: scale(0.5),
       aspectRatio: 2 / 3,
       borderRadius: radius,
-      position: 'relative'
+      position: 'relative',
     },
     firstItem: {
-      marginLeft: moderateScale(10)
+      marginLeft: moderateScale(10),
     },
     imageOverlay: {
       width: '100%',
       height: '100%',
       justifyContent: 'flex-end',
-      alignItems: 'flex-start'
+      alignItems: 'flex-start',
     },
     image: {
       width: '100%',
       height: '100%',
-      borderRadius: radius
+      borderRadius: radius,
     },
 
     rankNumberBox: {
@@ -295,7 +328,7 @@ const getStyles = (theme: ITheme, width: number, height: number, radius: number)
       height: scale(40),
       borderTopRightRadius: scale(30),
       justifyContent: 'center',
-      alignItems: 'center'
+      alignItems: 'center',
     },
     rankNumberText: {
       fontSize: RFValue(27),
@@ -306,33 +339,33 @@ const getStyles = (theme: ITheme, width: number, height: number, radius: number)
       textShadowRadius: 3,
       marginTop: scale(5),
       marginRight: scale(5),
-      letterSpacing: 0.5
+      letterSpacing: 0.5,
     },
     numberContainer: {
       position: 'absolute',
       bottom: 0,
       left: 0,
-      zIndex: 10
+      zIndex: 10,
     },
     navigateToMoreContainer: {
       paddingHorizontal: moderateScale(16),
-      marginBottom: verticalScale(8)
+      marginBottom: verticalScale(8),
     },
     listContent: {
-      paddingRight: moderateScale(20)
+      paddingRight: moderateScale(20),
     },
     title: {
       fontSize: RFValue(13),
       fontWeight: '600',
-      color: theme.colors.textPrimary
+      color: theme.colors.textPrimary,
     },
     skeletonItem: {
       shadowColor: '#000',
       shadowOffset: { width: 0, height: 1 },
       shadowOpacity: 0.1,
       shadowRadius: 2,
-      elevation: 1
-    }
+      elevation: 1,
+    },
   });
 
 export default memo(TopTenCard);

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

@@ -14,14 +14,19 @@ import {
   type ViewStyle,
   type AccessibilityProps,
   type ListRenderItem,
-  type ListRenderItemInfo
+  type ListRenderItemInfo,
 } from 'react-native';
 import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
 import FastImage from 'react-native-fast-image';
 import { moderateScale, verticalScale } from 'react-native-size-matters';
 
 import { usePaginatedSection } from '../../../../hooks/usePaginatedSection';
-import type { IContentData, IGetSectionData, ISectionContent, MoreFetchData } from '../../../../types';
+import type {
+  IContentData,
+  IGetSectionData,
+  ISectionContent,
+  MoreFetchData,
+} from '../../../../types';
 import type { AppTheme, ITheme } from '../../../../theme/themes';
 import { useTheme } from '../../../../theme/hook/useTheme';
 import NavigateToMore from '../components/NavigateToMore';
@@ -45,7 +50,10 @@ type MovieCardTwoProps = {
     name: IGetSectionData['name'];
     type: IGetSectionData['type'];
   }) => void;
-  renderItemImage?: (params: { item: IContentData; index: number }) => React.ReactNode;
+  renderItemImage?: (params: {
+    item: IContentData;
+    index: number;
+  }) => React.ReactNode;
   itemWidth?: number;
   borderRadius?: number;
   skeletonCount?: number;
@@ -74,7 +82,7 @@ const MovieCardTwo: React.FC<MovieCardTwoProps> = ({
   isLoading = false,
   theme,
   accessibilityLabel,
-  accessibilityHint
+  accessibilityHint,
 }) => {
   const flatListRef = useRef<FlatList<IContentData>>(null);
 
@@ -90,8 +98,13 @@ const MovieCardTwo: React.FC<MovieCardTwoProps> = ({
     data,
     pagination: paginated,
     loading: isPaginating,
-    loadMoreData
-  } = usePaginatedSection(section_id, moreFetchData, initialData?.data || [], isLoading);
+    loadMoreData,
+  } = usePaginatedSection(
+    section_id,
+    moreFetchData,
+    initialData?.data || [],
+    isLoading
+  );
   const handleItemPress = useCallback(
     (item: IContentData) => {
       onPressItem?.(item);
@@ -102,11 +115,15 @@ const MovieCardTwo: React.FC<MovieCardTwoProps> = ({
     onPressMore?.({
       section_id,
       name: title,
-      type
+      type,
     });
   }, [onPressMore, section_id, title, type]);
   const handleEndReached = useCallback(() => {
-    if (!onEndReachedCalledDuringMomentum.current && paginated?.hasNextPage && paginated?.nextPage) {
+    if (
+      !onEndReachedCalledDuringMomentum.current &&
+      paginated?.hasNextPage &&
+      paginated?.nextPage
+    ) {
       onEndReachedCalledDuringMomentum.current = true;
       loadMoreData(paginated.nextPage);
     }
@@ -147,7 +164,7 @@ const MovieCardTwo: React.FC<MovieCardTwoProps> = ({
       appliedTheme,
       borderRadius,
       isLoading,
-      handleItemPress
+      handleItemPress,
     ]
   );
   const renderSkeletonItem: ListRenderItem<null> = useCallback(
@@ -215,7 +232,11 @@ const MovieCardTwo: React.FC<MovieCardTwoProps> = ({
         title={title}
         onPress={handlePressMore}
         containerStyle={styles.navigateToMoreContainer}
-        titleStyle={[styles.title, { color: appliedTheme.colors.textPrimary }, titleStyle]}
+        titleStyle={[
+          styles.title,
+          { color: appliedTheme.colors.textPrimary },
+          titleStyle,
+        ]}
         showAllProps={{ iconColor: appliedTheme.colors.textPrimary }}
       />
       <FlatList
@@ -255,7 +276,7 @@ const MovieCardTwo: React.FC<MovieCardTwoProps> = ({
 const getStyles = (theme: ITheme, width: number, radius: number) =>
   StyleSheet.create({
     root: {
-      marginVertical: verticalScale(6)
+      marginVertical: verticalScale(6),
     },
     item: {
       width: width,
@@ -263,28 +284,28 @@ const getStyles = (theme: ITheme, width: number, radius: number) =>
       marginRight: moderateScale(12),
       borderRadius: radius,
       overflow: 'hidden',
-      backgroundColor: theme.colors.background ?? '#2c2c2c'
+      backgroundColor: theme.colors.background ?? '#2c2c2c',
     },
     firstItem: {
-      marginLeft: moderateScale(10)
+      marginLeft: moderateScale(10),
     },
     image: {
       width: '100%',
       height: '100%',
       borderRadius: radius,
-      backgroundColor: theme.colors.background ?? '#222'
+      backgroundColor: theme.colors.background ?? '#222',
     },
     navigateToMoreContainer: {
       paddingHorizontal: moderateScale(10),
-      marginBottom: verticalScale(8)
+      marginBottom: verticalScale(8),
     },
     title: {
       fontSize: RFValue(13),
-      fontWeight: '600'
+      fontWeight: '600',
     },
     listContent: {
-      paddingRight: moderateScale(15)
-    }
+      paddingRight: moderateScale(15),
+    },
   });
 
 export default memo(MovieCardTwo);