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

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

@@ -13,7 +13,7 @@ import {
   type ViewStyle,
   type TextStyle,
   type AccessibilityProps,
-  type ListRenderItemInfo
+  type ListRenderItemInfo,
 } from 'react-native';
 import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
 import FastImage from 'react-native-fast-image';
@@ -22,7 +22,12 @@ import { useTheme } from '../../../../theme/hook/useTheme';
 import CardPoster from '../components/CardPoster';
 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 { RFValue } from 'react-native-responsive-fontsize';
 
@@ -44,7 +49,10 @@ type MovieCardProps = {
     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;
@@ -75,7 +83,7 @@ const MovieCard: React.FC<MovieCardProps> = ({
   isLoading = false,
   theme,
   accessibilityLabel,
-  accessibilityHint
+  accessibilityHint,
 }) => {
   const flatListRef = useRef<FlatList<IContentData>>(null);
   const onEndReachedCalledDuringMomentum = useRef(false);
@@ -90,17 +98,29 @@ const MovieCard: React.FC<MovieCardProps> = ({
     data,
     pagination,
     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), [onPressItem]);
+  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) {
+    if (
+      !onEndReachedCalledDuringMomentum.current &&
+      pagination?.hasNextPage &&
+      pagination?.nextPage
+    ) {
       onEndReachedCalledDuringMomentum.current = true;
       loadMoreData(pagination.nextPage);
     }
@@ -109,7 +129,11 @@ const MovieCard: React.FC<MovieCardProps> = ({
   const renderItem = useCallback(
     ({ item, index }: ListRenderItemInfo<IContentData>) => {
       return (
-        <TouchableOpacity style={[styles.item, itemStyle]} onPress={() => handleItemPress(item)} activeOpacity={0.8}>
+        <TouchableOpacity
+          style={[styles.item, itemStyle]}
+          onPress={() => handleItemPress(item)}
+          activeOpacity={0.8}
+        >
           {renderItemImage ? (
             renderItemImage({ item, index })
           ) : (
@@ -125,7 +149,16 @@ const MovieCard: React.FC<MovieCardProps> = ({
         </TouchableOpacity>
       );
     },
-    [styles.item, styles.image, itemStyle, renderItemImage, appliedTheme, borderRadius, isLoading, handleItemPress]
+    [
+      styles.item,
+      styles.image,
+      itemStyle,
+      renderItemImage,
+      appliedTheme,
+      borderRadius,
+      isLoading,
+      handleItemPress,
+    ]
   );
 
   const renderSkeletonItem = ({ index }: { index: number }) => (
@@ -150,7 +183,10 @@ const MovieCard: React.FC<MovieCardProps> = ({
 
   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}
@@ -185,7 +221,11 @@ const MovieCard: React.FC<MovieCardProps> = ({
       <NavigateToMore
         title={title}
         onPress={handlePressMore}
-        titleStyle={[styles.title, { color: appliedTheme.colors.textPrimary }, titleStyle]}
+        titleStyle={[
+          styles.title,
+          { color: appliedTheme.colors.textPrimary },
+          titleStyle,
+        ]}
         containerStyle={styles.navigateToMoreContainer}
         showAllProps={{ iconColor: appliedTheme.colors.textPrimary }}
       />
@@ -206,37 +246,44 @@ const MovieCard: React.FC<MovieCardProps> = ({
         onMomentumScrollBegin={() => {
           onEndReachedCalledDuringMomentum.current = false;
         }}
-        ListFooterComponent={isPaginating ? renderSkeletonItem({ index: 0 }) : null}
+        ListFooterComponent={
+          isPaginating ? renderSkeletonItem({ index: 0 }) : null
+        }
       />
     </View>
   );
 };
 
-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: {
-      marginLeft: moderateScale(10)
+      marginLeft: moderateScale(10),
     },
     image: {
       width,
       height,
       borderRadius: radius,
-      backgroundColor: theme.colors.surfaceVariant
+      backgroundColor: theme.colors.surfaceVariant,
     },
     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(MovieCard);

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

@@ -11,7 +11,7 @@ import {
   TouchableOpacity,
   type StyleProp,
   type ViewStyle,
-  type TextStyle
+  type TextStyle,
 } from 'react-native';
 import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
 import FastImage from 'react-native-fast-image';
@@ -24,7 +24,12 @@ import CardPoster from '../components/CardPoster';
 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 } 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 RotateCarousel: React.FC<Props> = ({
   titleStyle,
   itemStyle,
   isLoading = false,
-  theme
+  theme,
 }) => {
   const { theme: appliedTheme } = useTheme(theme);
   const carouselRef = useRef<any>(null);
@@ -110,20 +118,20 @@ const RotateCarousel: 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]
   );
@@ -132,21 +140,31 @@ const RotateCarousel: 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]
   );
 
@@ -170,12 +188,18 @@ const RotateCarousel: 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}>
@@ -183,7 +207,11 @@ const RotateCarousel: 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>
         );
@@ -224,7 +252,7 @@ const RotateCarousel: React.FC<Props> = ({
       borderRadius,
       itemWidth,
       itemHeight,
-      handleItemPress
+      handleItemPress,
     ]
   );
   if (!initialData) {
@@ -233,7 +261,10 @@ const RotateCarousel: React.FC<Props> = ({
   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}
@@ -251,7 +282,11 @@ const RotateCarousel: 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 }}
         />
@@ -267,7 +302,8 @@ const RotateCarousel: 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/Six.tsx

@@ -14,7 +14,7 @@ import {
   type TextStyle,
   type AccessibilityProps,
   type ListRenderItemInfo,
-  ScrollView
+  ScrollView,
 } from 'react-native';
 import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
 import { moderateScale, verticalScale } from 'react-native-size-matters';
@@ -26,7 +26,12 @@ import { ThumbnailCard } from '../components/ThumbnailCard';
 import { Text } from '../../../Text';
 import { usePaginatedSection } from '../../../../hooks/usePaginatedSection';
 import type { AppTheme } from '../../../../theme/themes';
-import type { IContentData, IGetSectionData, ISectionContent, MoreFetchData } from '../../../../types';
+import type {
+  IContentData,
+  IGetSectionData,
+  ISectionContent,
+  MoreFetchData,
+} from '../../../../types';
 import { RFValue } from 'react-native-responsive-fontsize';
 const DEFAULT_ITEM_WIDTH = moderateScale(160);
 const DEFAULT_BORDER_RADIUS = moderateScale(5);
@@ -71,13 +76,18 @@ const MovieCardSix: React.FC<MovieCardSixProps> = ({
   itemStyle,
   isLoading = false,
   accessibilityLabel,
-  accessibilityHint
+  accessibilityHint,
 }) => {
   const flatListRef = useRef<FlatList<IContentData>>(null);
   const onEndReachedCalledDuringMomentum = useRef(false);
   const { theme: appliedTheme } = useTheme(theme);
 
-  const paginated = usePaginatedSection(section_id, moreFetchData, initialData?.data, isLoading);
+  const paginated = usePaginatedSection(
+    section_id,
+    moreFetchData,
+    initialData?.data,
+    isLoading
+  );
 
   const sectionData = paginated.data;
   const pagination = paginated.pagination;
@@ -96,7 +106,11 @@ const MovieCardSix: React.FC<MovieCardSixProps> = ({
   }, [onPressMore, section_id, title, type]);
 
   const handleEndReached = useCallback(() => {
-    if (!onEndReachedCalledDuringMomentum.current && pagination?.hasNextPage && pagination?.nextPage) {
+    if (
+      !onEndReachedCalledDuringMomentum.current &&
+      pagination?.hasNextPage &&
+      pagination?.nextPage
+    ) {
       onEndReachedCalledDuringMomentum.current = true;
       loadMoreData(pagination.nextPage);
     }
@@ -104,7 +118,11 @@ const MovieCardSix: React.FC<MovieCardSixProps> = ({
 
   const renderItem = useCallback(
     ({ item }: ListRenderItemInfo<IContentData>) => (
-      <TouchableOpacity style={[styles.item, itemStyle]} onPress={() => handleItemPress(item)} activeOpacity={0.8}>
+      <TouchableOpacity
+        style={[styles.item, itemStyle]}
+        onPress={() => handleItemPress(item)}
+        activeOpacity={0.8}
+      >
         <ThumbnailCard
           thumbnailUri={item.thumbnail}
           theme={appliedTheme}
@@ -114,7 +132,13 @@ const MovieCardSix: React.FC<MovieCardSixProps> = ({
           resizeMode={FastImage.resizeMode.cover}
         />
         <View style={{ width: itemWidth, marginTop: verticalScale(4) }}>
-          <Text style={[styles.itemTitle, { color: appliedTheme.colors.textPrimary }]} numberOfLines={1}>
+          <Text
+            style={[
+              styles.itemTitle,
+              { color: appliedTheme.colors.textPrimary },
+            ]}
+            numberOfLines={1}
+          >
             {item.name}
           </Text>
         </View>
@@ -138,7 +162,11 @@ const MovieCardSix: React.FC<MovieCardSixProps> = ({
           marginRight={moderateScale(12)}
         >
           {/* Thumbnail */}
-          <SkeletonPlaceholder.Item width={itemWidth} height={(itemWidth * 9) / 16} borderRadius={borderRadius} />
+          <SkeletonPlaceholder.Item
+            width={itemWidth}
+            height={(itemWidth * 9) / 16}
+            borderRadius={borderRadius}
+          />
 
           {/* Title */}
           <SkeletonPlaceholder.Item
@@ -177,8 +205,14 @@ const MovieCardSix: React.FC<MovieCardSixProps> = ({
               marginBottom={verticalScale(6)}
             />
           </SkeletonPlaceholder>
-          <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={styles.skeletonList}>
-            {Array.from({ length: isPaginating ? 1 : skeletonCount }).map((_, index) => renderSkeletonItem(index))}
+          <ScrollView
+            horizontal
+            showsHorizontalScrollIndicator={false}
+            contentContainerStyle={styles.skeletonList}
+          >
+            {Array.from({ length: isPaginating ? 1 : skeletonCount }).map(
+              (_, index) => renderSkeletonItem(index)
+            )}
           </ScrollView>
         </>
       ) : (
@@ -186,7 +220,11 @@ const MovieCardSix: React.FC<MovieCardSixProps> = ({
           <NavigateToMore
             title={title}
             onPress={handlePressMore}
-            titleStyle={[styles.title, { color: appliedTheme.colors.textPrimary }, titleStyle]}
+            titleStyle={[
+              styles.title,
+              { color: appliedTheme.colors.textPrimary },
+              titleStyle,
+            ]}
             containerStyle={styles.navigateToMoreContainer}
             showAllProps={{ iconColor: appliedTheme.colors.textPrimary }}
           />
@@ -217,33 +255,33 @@ const MovieCardSix: React.FC<MovieCardSixProps> = ({
 
 const styles = StyleSheet.create({
   root: {
-    marginVertical: verticalScale(6)
+    marginVertical: verticalScale(6),
   },
   item: {
-    marginLeft: moderateScale(10)
+    marginLeft: moderateScale(10),
   },
   navigateToMoreContainer: {
     paddingHorizontal: moderateScale(10),
-    marginBottom: verticalScale(8)
+    marginBottom: verticalScale(8),
   },
   title: {
     fontSize: RFValue(13),
-    fontWeight: '600'
+    fontWeight: '600',
   },
   itemTitle: {
     fontSize: RFValue(9),
     fontWeight: '500',
     lineHeight: moderateScale(13),
-    height: moderateScale(13)
+    height: moderateScale(13),
   },
   listContent: {
-    paddingRight: moderateScale(15)
+    paddingRight: moderateScale(15),
   },
   skeletonList: {
     flexDirection: 'row',
     alignItems: 'flex-start',
-    paddingRight: moderateScale(15)
-  }
+    paddingRight: moderateScale(15),
+  },
 });
 
 export default memo(MovieCardSix);