@zezosoft/zezo-ott-react-native-ui-kit 0.1.0 → 1.0.1

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

@@ -0,0 +1,241 @@
+/**
+ * @author Naresh Dhamu
+ * @LastModified Sat 28 Jun 2025 at 12:45 AM
+ */
+
+import React, { memo, useCallback, useMemo, useRef } from 'react';
+import {
+  View,
+  FlatList,
+  TouchableOpacity,
+  StyleSheet,
+  ScrollView,
+  type StyleProp,
+  type ViewStyle,
+  type TextStyle,
+  type AccessibilityProps,
+  type ListRenderItemInfo
+} 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 CardPoster from '../components/CardPoster';
+import NavigateToMore from '../components/NavigateToMore';
+import { usePaginatedSection } from '../../../../hooks/usePaginatedSection';
+import { useTheme } from '../../../../theme/hook/useTheme';
+import type { AppTheme, ITheme } from '../../../../theme/themes';
+import type { IContentData, IGetSectionData, ISectionContent, MoreFetchData } from '../../../../types';
+import { RFValue } from 'react-native-responsive-fontsize';
+
+const DEFAULT_ITEM_WIDTH = moderateScale(140);
+const DEFAULT_BORDER_RADIUS = moderateScale(5);
+const DEFAULT_SKELETON_COUNT = 3;
+
+type MovieCardFiveProps = {
+  theme?: AppTheme;
+  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;
+  renderItemImage?: (params: { item: IContentData; index: number }) => React.ReactNode;
+  itemWidth?: number;
+  borderRadius?: number;
+  skeletonCount?: number;
+  containerStyle?: StyleProp<ViewStyle>;
+  titleStyle?: StyleProp<TextStyle>;
+  itemStyle?: StyleProp<ViewStyle>;
+  isLoading?: boolean;
+} & AccessibilityProps;
+
+const MovieCardFive: React.FC<MovieCardFiveProps> = ({
+  theme,
+  title,
+  section_id,
+  type,
+  data: initialData,
+  moreFetchData,
+  onPressItem,
+  onPressMore,
+  renderItemImage,
+  itemWidth = DEFAULT_ITEM_WIDTH,
+  borderRadius = DEFAULT_BORDER_RADIUS,
+  skeletonCount = DEFAULT_SKELETON_COUNT,
+  containerStyle,
+  titleStyle,
+  itemStyle,
+  isLoading = false,
+  accessibilityLabel,
+  accessibilityHint
+}) => {
+  const { theme: appliedTheme } = useTheme(theme);
+  const flatListRef = useRef<FlatList<IContentData>>(null);
+  const onEndReachedCalledDuringMomentum = useRef(false);
+  const styles = useMemo(
+    () => getStyles(appliedTheme, itemWidth, borderRadius),
+    [appliedTheme, itemWidth, borderRadius]
+  );
+
+  const {
+    data,
+    pagination,
+    loading: isPaginating,
+    loadMoreData
+  } = usePaginatedSection(section_id, moreFetchData, initialData?.data, isLoading);
+  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;
+      loadMoreData(pagination.nextPage);
+    }
+  }, [loadMoreData, pagination]);
+
+  const renderItem = useCallback(
+    ({ item, index }: ListRenderItemInfo<IContentData>) => {
+      return (
+        <TouchableOpacity style={[styles.item, itemStyle]} onPress={() => handleItemPress(item)} activeOpacity={0.8}>
+          {renderItemImage ? (
+            renderItemImage({ item, index })
+          ) : (
+            <CardPoster
+              posterUri={item.poster}
+              theme={appliedTheme}
+              borderRadius={borderRadius}
+              posterWrapperStyle={styles.image}
+              resizeMode={FastImage.resizeMode.cover}
+              isLoading={isLoading}
+            />
+          )}
+        </TouchableOpacity>
+      );
+    },
+    [styles.item, styles.image, itemStyle, renderItemImage, appliedTheme, borderRadius, isLoading, handleItemPress]
+  );
+  if (!initialData) {
+    return null;
+  }
+  const renderSkeletonItem = ({ index }: { index: number }) => (
+    <SkeletonPlaceholder
+      key={`skeleton-${index}`}
+      highlightColor={appliedTheme.colors.skeletonHighlightColor}
+      backgroundColor={appliedTheme.colors.skeletonBaseColor}
+    >
+      <SkeletonPlaceholder.Item
+        width={itemWidth}
+        aspectRatio={0.67}
+        borderRadius={borderRadius}
+        marginLeft={index === 0 ? moderateScale(12) : 0}
+        marginRight={moderateScale(12)}
+      />
+    </SkeletonPlaceholder>
+  );
+
+  if (!isLoading && data.length === 0) return null;
+
+  return (
+    <View
+      style={[styles.root, containerStyle]}
+      accessibilityLabel={accessibilityLabel || `Movie section: ${title}`}
+      accessibilityHint={accessibilityHint || 'Scroll to view movies'}
+    >
+      {isLoading ? (
+        <>
+          <SkeletonPlaceholder
+            highlightColor={appliedTheme.colors.skeletonHighlightColor}
+            backgroundColor={appliedTheme.colors.skeletonBaseColor}
+          >
+            <SkeletonPlaceholder.Item
+              width={moderateScale(100)}
+              height={moderateScale(20)}
+              borderRadius={moderateScale(4)}
+              marginHorizontal={moderateScale(15)}
+              marginBottom={verticalScale(6)}
+            />
+          </SkeletonPlaceholder>
+
+          <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={styles.skeletonList}>
+            {Array.from({
+              length: isPaginating ? 1 : skeletonCount
+            }).map((_, index) => renderSkeletonItem({ index }))}
+          </ScrollView>
+        </>
+      ) : (
+        <>
+          <NavigateToMore
+            title={title}
+            onPress={handlePressMore}
+            titleStyle={[styles.title, { color: appliedTheme.colors.textPrimary }, titleStyle]}
+            containerStyle={styles.navigateToMoreContainer}
+            showAllProps={{ iconColor: appliedTheme.colors.textPrimary }}
+          />
+          <FlatList
+            ref={flatListRef}
+            data={data}
+            horizontal
+            keyExtractor={(item, index) => `${item._id}-${index}`}
+            renderItem={renderItem}
+            showsHorizontalScrollIndicator={false}
+            contentContainerStyle={styles.listContent}
+            initialNumToRender={5}
+            onEndReached={handleEndReached}
+            onEndReachedThreshold={0.5}
+            onScrollBeginDrag={() => {
+              onEndReachedCalledDuringMomentum.current = false;
+            }}
+            onMomentumScrollBegin={() => {
+              onEndReachedCalledDuringMomentum.current = false;
+            }}
+            ListFooterComponent={isPaginating ? renderSkeletonItem({ index: 0 }) : null}
+          />
+        </>
+      )}
+    </View>
+  );
+};
+
+const getStyles = (theme: ITheme, width: number, radius: number) =>
+  StyleSheet.create({
+    root: {
+      marginVertical: verticalScale(6)
+    },
+    item: {
+      marginLeft: moderateScale(10),
+      marginBottom: verticalScale(2)
+    },
+    image: {
+      width,
+      aspectRatio: 0.67,
+      borderRadius: radius,
+      backgroundColor: theme.colors.surfaceVariant
+    },
+    navigateToMoreContainer: {
+      paddingHorizontal: moderateScale(10),
+      marginBottom: verticalScale(8)
+    },
+    title: {
+      fontSize: RFValue(13),
+      fontWeight: '600'
+    },
+    listContent: {
+      paddingRight: moderateScale(15)
+    },
+    skeletonList: {
+      flexDirection: 'row',
+      alignItems: 'flex-start',
+      paddingRight: moderateScale(15)
+    }
+  });
+
+export default memo(MovieCardFive);

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

@@ -0,0 +1,246 @@
+/**
+ * @author Naresh Dhamu
+ * @LastModified Thu 26 Jun 2025 at 07:21 PM
+ */
+
+import React, { memo, useCallback, useMemo, useRef } from 'react';
+import {
+  View,
+  FlatList,
+  TouchableOpacity,
+  StyleSheet,
+  ScrollView,
+  type StyleProp,
+  type TextStyle,
+  type ViewStyle,
+  type AccessibilityProps,
+  type ListRenderItemInfo
+} from 'react-native';
+import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
+import { moderateScale, verticalScale } from 'react-native-size-matters';
+import { usePaginatedSection } from '../../../../hooks/usePaginatedSection';
+import NavigateToMore from '../components/NavigateToMore';
+import { useTheme } from '../../../../theme/hook/useTheme';
+import CardPoster from '../components/CardPoster';
+import FastImage from 'react-native-fast-image';
+import type { IContentData, IGetSectionData, ISectionContent, MoreFetchData } from '../../../../types';
+import type { AppTheme, ITheme } from '../../../../theme/themes';
+import { RFValue } from 'react-native-responsive-fontsize';
+
+// default values
+const DEFAULT_ITEM_WIDTH = moderateScale(100);
+const DEFAULT_BORDER_RADIUS = moderateScale(5);
+const DEFAULT_SKELETON_COUNT = 5;
+const ASPECT_RATIO = 0.7 / 1;
+
+type MovieCardFourProps = {
+  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;
+  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?: AppTheme;
+} & AccessibilityProps;
+
+const MovieCardFour: React.FC<MovieCardFourProps> = ({
+  title,
+  section_id,
+  type,
+  data: initialData,
+  moreFetchData,
+  onPressItem,
+  onPressMore,
+  renderItemImage,
+  itemWidth = DEFAULT_ITEM_WIDTH,
+  itemHeight = DEFAULT_ITEM_WIDTH / ASPECT_RATIO,
+  borderRadius = DEFAULT_BORDER_RADIUS,
+  skeletonCount = DEFAULT_SKELETON_COUNT,
+  containerStyle,
+  titleStyle,
+  itemStyle,
+  isLoading = false,
+  theme,
+  accessibilityLabel,
+  accessibilityHint
+}) => {
+  const flatListRef = useRef<FlatList<IContentData>>(null);
+  const onEndReachedCalledDuringMomentum = useRef(false);
+  const { theme: appliedTheme } = useTheme(theme);
+
+  const styles = useMemo(
+    () => getStyles(appliedTheme, itemWidth, itemHeight, borderRadius),
+    [appliedTheme, itemWidth, itemHeight, borderRadius]
+  );
+
+  const {
+    data,
+    pagination,
+    loading: isPaginating,
+    loadMoreData
+  } = usePaginatedSection(section_id, moreFetchData, initialData?.data || [], isLoading);
+
+  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;
+      loadMoreData(pagination.nextPage);
+    }
+  }, [loadMoreData, pagination]);
+
+  const renderItem = useCallback(
+    ({ item, index }: ListRenderItemInfo<IContentData>) => {
+      return (
+        <TouchableOpacity style={[styles.item, itemStyle]} onPress={() => handleItemPress(item)} activeOpacity={0.8}>
+          {renderItemImage ? (
+            renderItemImage({ item, index })
+          ) : (
+            <CardPoster
+              posterUri={item.poster}
+              theme={appliedTheme}
+              borderRadius={borderRadius}
+              posterWrapperStyle={styles.image}
+              resizeMode={FastImage.resizeMode.cover}
+              isLoading={isLoading}
+            />
+          )}
+        </TouchableOpacity>
+      );
+    },
+    [styles.item, styles.image, itemStyle, renderItemImage, appliedTheme, borderRadius, isLoading, handleItemPress]
+  );
+
+  const renderSkeletonItem = ({ index }: { index: number }) => (
+    <SkeletonPlaceholder
+      key={`skeleton-${index}`}
+      highlightColor={appliedTheme.colors.skeletonHighlightColor}
+      backgroundColor={appliedTheme.colors.skeletonBaseColor}
+    >
+      <SkeletonPlaceholder.Item
+        width={itemWidth}
+        height={itemHeight}
+        borderRadius={borderRadius}
+        marginLeft={index === 0 ? moderateScale(12) : 0}
+        marginRight={moderateScale(12)}
+      />
+    </SkeletonPlaceholder>
+  );
+  if (!initialData) {
+    return null;
+  }
+  if (!isLoading && data.length === 0) return null;
+
+  return (
+    <View
+      style={[styles.root, containerStyle]}
+      accessibilityLabel={accessibilityLabel || `Movie section: ${title}`}
+      accessibilityHint={accessibilityHint || 'Scroll to view movies'}
+    >
+      {isLoading ? (
+        <>
+          <SkeletonPlaceholder
+            highlightColor={appliedTheme.colors.skeletonHighlightColor}
+            backgroundColor={appliedTheme.colors.skeletonBaseColor}
+          >
+            <SkeletonPlaceholder.Item
+              width={moderateScale(100)}
+              height={moderateScale(20)}
+              borderRadius={moderateScale(4)}
+              marginHorizontal={moderateScale(15)}
+              marginBottom={verticalScale(6)}
+            />
+          </SkeletonPlaceholder>
+          <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={styles.skeletonList}>
+            {skeletonCount > 0 && (
+              <View style={styles.skeletonList}>
+                {Array.from({ length: skeletonCount }).map((_, index) => renderSkeletonItem({ index }))}
+              </View>
+            )}
+          </ScrollView>
+        </>
+      ) : (
+        <>
+          <NavigateToMore
+            title={title}
+            onPress={handlePressMore}
+            titleStyle={[styles.title, { color: appliedTheme.colors.textPrimary }, titleStyle]}
+            containerStyle={styles.navigateToMoreContainer}
+            showAllProps={{ iconColor: appliedTheme.colors.textPrimary }}
+          />
+          <FlatList
+            ref={flatListRef}
+            data={data}
+            horizontal
+            keyExtractor={(item, index) => `${item._id}-${index}`}
+            renderItem={renderItem}
+            showsHorizontalScrollIndicator={false}
+            contentContainerStyle={styles.listContent}
+            initialNumToRender={5}
+            onEndReached={handleEndReached}
+            onEndReachedThreshold={0.5}
+            onScrollBeginDrag={() => {
+              onEndReachedCalledDuringMomentum.current = false;
+            }}
+            onMomentumScrollBegin={() => {
+              onEndReachedCalledDuringMomentum.current = false;
+            }}
+            ListFooterComponent={isPaginating ? renderSkeletonItem({ index: 0 }) : null}
+          />
+        </>
+      )}
+    </View>
+  );
+};
+
+const getStyles = (theme: ITheme, width: number, height: number, radius: number) =>
+  StyleSheet.create({
+    root: {
+      marginVertical: verticalScale(6)
+    },
+    item: {
+      marginLeft: moderateScale(10)
+    },
+    image: {
+      width,
+      height,
+      borderRadius: radius,
+      backgroundColor: theme.colors.surfaceVariant
+    },
+    navigateToMoreContainer: {
+      paddingHorizontal: moderateScale(10),
+      marginBottom: verticalScale(8)
+    },
+    title: {
+      fontSize: RFValue(13),
+      fontWeight: '600'
+    },
+    listContent: {
+      paddingRight: moderateScale(12)
+    },
+    skeletonList: {
+      flexDirection: 'row',
+      alignItems: 'flex-start',
+      paddingRight: moderateScale(15)
+    }
+  });
+
+export default memo(MovieCardFour);