@zezosoft/zezo-ott-react-native-ui-kit 1.3.6 → 1.3.8

package/src/components/Content/Content.tsx

@@ -1,338 +0,0 @@
-/**
- * @author Naresh Dhamu
- * @LastModified Mon 13 Jul 2026 at 10:13 AM
- */
-
-import React, { useMemo, useCallback } from 'react';
-import {
-  ActivityIndicator,
-  Dimensions,
-  FlatList,
-  type FlatListProps,
-  type ListRenderItem,
-  type NativeScrollEvent,
-  type NativeSyntheticEvent,
-} from 'react-native';
-import { scale, verticalScale } from 'react-native-size-matters';
-import Animated from 'react-native-reanimated';
-
-import SectionType from './Sections';
-import type { IGetSectionData } from '../../types';
-import { dummySections } from '../../constants/dummySections';
-import CategoryCard from './Card/Category/Category';
-import { NoContentFallback } from '../Fallbacks';
-import { useTheme } from '../../theme';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import type { IContentProps, FooterProps } from './types';
-
-// Constants
-const VIEWPORT_OFFSETS = {
-  top: 140,
-  bottom: 140,
-  left: 20,
-  right: 20,
-} as const;
-
-const INITIAL_NUM_TO_RENDER = 5;
-const SCROLL_EVENT_THROTTLE = 16;
-const END_REACHED_THRESHOLD = 0.7;
-const LOADER_PADDING_VERTICAL = 30;
-const CONTENT_PADDING_BOTTOM = 100;
-
-// Types
-// Re-export IContentLoading for backward compatibility
-export type { IContentLoading, IContentProps } from './types';
-
-// Animated Components
-const AnimatedFlatList = Animated.createAnimatedComponent(
-  FlatList as React.ComponentType<FlatListProps<IGetSectionData>>
-);
-
-// Footer Component
-const ContentFooter = React.memo(
-  ({
-    isEmpty,
-    ErrorComponent,
-    InfiniteScrollIsLoading,
-    InfiniteScrollLoaderComponent,
-    theme,
-    noContentFallbackProps,
-  }: FooterProps) => {
-    const { theme: appliedTheme } = useTheme(theme);
-
-    const loaderStyle = useMemo(
-      () => ({
-        paddingVertical: scale(LOADER_PADDING_VERTICAL),
-        alignItems: 'center' as const,
-        justifyContent: 'center' as const,
-        backgroundColor: 'transparent',
-      }),
-      []
-    );
-
-    if (InfiniteScrollIsLoading) {
-      return (
-        InfiniteScrollLoaderComponent ?? (
-          <Animated.View style={loaderStyle}>
-            <ActivityIndicator
-              size="large"
-              color={appliedTheme.colors.primary}
-            />
-          </Animated.View>
-        )
-      );
-    }
-
-    if (isEmpty) {
-      const emptyContainerStyle = {
-        minHeight: Dimensions.get('window').height - scale(200),
-        justifyContent: 'center' as const,
-        alignItems: 'center' as const,
-      };
-
-      return ErrorComponent ? (
-        <>{ErrorComponent}</>
-      ) : (
-        <Animated.View style={emptyContainerStyle}>
-          <NoContentFallback
-            theme={theme}
-            {...noContentFallbackProps}
-            isLoading={noContentFallbackProps?.isLoading ?? false}
-          />
-        </Animated.View>
-      );
-    }
-
-    return null;
-  }
-);
-
-// Main Content Component
-export const Content: React.FC<IContentProps> = ({
-  headerStyle = 'one',
-  customHeaderComponent,
-  customComponents,
-  InfiniteScrollLoaderComponent,
-  LoaderComponent,
-  ErrorComponent,
-  onScroll,
-  contentContainerStyle,
-  contentData,
-  onEndReached,
-  theme,
-  events,
-  sectionProps,
-  moreFetchData,
-  moreFetchDataHistory,
-  isLoading,
-  checkWatchlistStatus,
-  noContentFallbackProps,
-}) => {
-  // Hooks
-  const insets = useSafeAreaInsets();
-
-  // Memoized Data
-  const sectionData = useMemo<IGetSectionData[]>(
-    () => contentData?.sectionData ?? [],
-    [contentData?.sectionData]
-  );
-
-  const sectionDataMemo = useMemo(
-    () => ({
-      historyData: contentData?.historyData,
-      category: headerStyle === 'three' ? [] : (contentData?.category ?? []),
-    }),
-    [contentData?.historyData, contentData?.category, headerStyle]
-  );
-
-  const loadingStateMemo = useMemo(
-    () => ({
-      section: isLoading?.section ?? false,
-      history: isLoading?.history ?? false,
-      category: isLoading?.category ?? false,
-    }),
-    [isLoading?.section, isLoading?.history, isLoading?.category]
-  );
-
-  const screenDimensions = useMemo(() => Dimensions.get('window'), []);
-
-  const listData = useMemo(
-    () => (isLoading?.section ? dummySections({ headerStyle }) : sectionData),
-    [isLoading?.section, sectionData, headerStyle]
-  );
-
-  const isEmpty = useMemo(
-    () => !isLoading?.section && (!sectionData || sectionData.length === 0),
-    [isLoading?.section, sectionData]
-  );
-
-  // Header Component
-  const headerComponent = useMemo(() => {
-    const category = contentData?.category;
-    if (headerStyle === 'three' || !category || category.length === 0) {
-      return null;
-    }
-
-    return (
-      <CategoryCard
-        category={category}
-        onPressCategory={events?.onPressCategory}
-        activeCategory={events?.activeCategory}
-        isLoading={isLoading?.category}
-        mode="filled"
-        theme={theme}
-        key="category"
-      />
-    );
-  }, [
-    contentData?.category,
-    events?.onPressCategory,
-    events?.activeCategory,
-    isLoading?.category,
-    theme,
-    headerStyle,
-  ]);
-
-  // Render Item Callback
-  const renderItem: ListRenderItem<IGetSectionData> = useCallback(
-    ({ item, index }) => {
-      if (!item) return null;
-
-      const isDummy = item?._id?.startsWith('dummy');
-      const isLoadingItem = isLoading?.section || isDummy;
-
-      if ((isDummy || isLoading?.section) && LoaderComponent) {
-        return LoaderComponent;
-      }
-
-      return (
-        <SectionType
-          key={index}
-          index={index}
-          type={item?.type || 'normal'}
-          data={{
-            sectionData: item.content || null,
-            ...sectionDataMemo,
-          }}
-          name={item?.name || `Section ${index}`}
-          theme={theme}
-          customComponents={customComponents}
-          section_id={item?._id || index.toString()}
-          events={events}
-          checkWatchlistStatus={checkWatchlistStatus}
-          isLoading={{
-            ...loadingStateMemo,
-            section: isLoadingItem,
-          }}
-          sectionProps={sectionProps}
-          moreFetchDataHistory={moreFetchDataHistory}
-          moreFetchData={moreFetchData}
-          onDisplayAds={events?.onDisplayAds}
-          screenDimensions={screenDimensions}
-          viewportOffsets={VIEWPORT_OFFSETS}
-        />
-      );
-    },
-    [
-      isLoading?.section,
-      LoaderComponent,
-      sectionDataMemo,
-      theme,
-      customComponents,
-      events,
-      checkWatchlistStatus,
-      loadingStateMemo,
-      sectionProps,
-      moreFetchDataHistory,
-      moreFetchData,
-      screenDimensions,
-    ]
-  );
-
-  // Key Extractor
-  const keyExtractor = useCallback(
-    (_item: IGetSectionData, index: number) => index.toString(),
-    []
-  );
-
-  // Handlers
-  const handleEndReached = useCallback(() => {
-    // Prevent multiple concurrent fetchMore calls
-    if (isLoading?.InfiniteScrollIsLoading) {
-      return;
-    }
-
-    onEndReached?.();
-  }, [onEndReached, isLoading?.InfiniteScrollIsLoading]);
-
-  // Styles
-  const contentContainerStyleMemo = useMemo(
-    () => [
-      { paddingBottom: verticalScale(CONTENT_PADDING_BOTTOM) + insets.bottom },
-      ...(isEmpty ? [{ flexGrow: 1 }] : []),
-      contentContainerStyle,
-    ],
-    [insets.bottom, isEmpty, contentContainerStyle]
-  );
-
-  // Footer Component
-  const footerComponent = useMemo(
-    () => (
-      <ContentFooter
-        InfiniteScrollLoaderComponent={InfiniteScrollLoaderComponent}
-        InfiniteScrollIsLoading={isLoading?.InfiniteScrollIsLoading}
-        isEmpty={isEmpty}
-        ErrorComponent={ErrorComponent}
-        theme={theme}
-        noContentFallbackProps={noContentFallbackProps}
-      />
-    ),
-    [
-      InfiniteScrollLoaderComponent,
-      isLoading?.InfiniteScrollIsLoading,
-      isEmpty,
-      ErrorComponent,
-      theme,
-      noContentFallbackProps,
-    ]
-  );
-
-  // List Header Component - properly typed
-  const listHeaderComponent = useMemo<
-    React.ReactElement | React.ComponentType<any> | undefined
-  >(() => {
-    if (customHeaderComponent) {
-      return <>{customHeaderComponent}</>;
-    }
-
-    return headerComponent ?? undefined;
-  }, [customHeaderComponent, headerComponent]);
-
-  return (
-    <AnimatedFlatList
-      data={listData}
-      renderItem={renderItem}
-      keyExtractor={keyExtractor}
-      onScroll={
-        onScroll as (event: NativeSyntheticEvent<NativeScrollEvent>) => void
-      }
-      onEndReached={handleEndReached}
-      onEndReachedThreshold={END_REACHED_THRESHOLD}
-      scrollEventThrottle={SCROLL_EVENT_THROTTLE}
-      initialNumToRender={INITIAL_NUM_TO_RENDER}
-      showsVerticalScrollIndicator={false}
-      removeClippedSubviews
-      ListHeaderComponent={listHeaderComponent}
-      bounces={false}
-      ListFooterComponent={footerComponent}
-      contentContainerStyle={contentContainerStyleMemo}
-    />
-  );
-};
-
-export default React.memo(Content);
-
-export namespace Content {
-  export type Props = IContentProps;
-  export type Data = Props['contentData'];
-}

package/src/components/Content/Sections.tsx

@@ -1,239 +0,0 @@
-/**
- * @author Naresh Dhamu
- * @LastModified Mon 13 Jul 2026 at 10:13 AM
- */
-
-import React, { useMemo } from 'react';
-import Sliders from './Card/Sliders';
-import Cards from './Card';
-import type { IGetSectionData } from '../../types';
-import type { IProps } from './types';
-const createCommonProps = (
-  type: IGetSectionData['type'],
-  props: Omit<IProps, 'customComponents' | 'type'>
-) => {
-  const effectiveIsLoading =
-    props.isLoading?.section || props.section_id === `dummy-${type}`;
-
-  const onPressMoreHandler = props.events?.onPressMore
-    ? (params: { section_id: string; name: string; type: string }) => {
-        props.events?.onPressMore?.({
-          section_id: params.section_id,
-          name: params.name,
-          type,
-        });
-      }
-    : undefined;
-
-  return {
-    theme: props.theme,
-    title: props.name,
-    section_id: props.section_id,
-    type,
-    data: props.data?.sectionData || null,
-    index: props.index,
-    onPressItem: props.events?.onPressItem,
-    onPressMore: onPressMoreHandler,
-    onAdVisible: props.events?.onAdVisible,
-    isLoading: effectiveIsLoading,
-    moreFetchDataHistory: props.moreFetchDataHistory,
-    moreFetchData: props.moreFetchData,
-    onDisplayAds: props.onDisplayAds || props.events?.onDisplayAds,
-    screenDimensions: props.screenDimensions,
-    viewportOffsets: props.viewportOffsets,
-  };
-};
-
-const renderDefaultComponent = (
-  type: IGetSectionData['type'],
-  props: Omit<IProps, 'customComponents' | 'type'>
-): React.ReactNode => {
-  const commonProps = createCommonProps(type, props);
-  switch (type) {
-    case 'slider':
-      return (
-        <Sliders.Styles.One
-          {...commonProps}
-          showPlayIcon={props.sectionProps?.showPlayBtn}
-        />
-      );
-
-    case 'slider_style_2':
-      return <Sliders.Styles.Two {...commonProps} />;
-    case 'slider_style_3':
-      return (
-        <Sliders.Styles.Three
-          {...commonProps}
-          checkWatchlistStatus={props.checkWatchlistStatus}
-          onToggleWatchlist={props.events?.onToggleWatchlist}
-        />
-      );
-    case 'normal':
-      return <Cards.Styles.One {...commonProps} />;
-    case 'new_releases':
-      return <Cards.Styles.One {...commonProps} />;
-    case 'card_style_2':
-      return <Cards.Styles.Two {...commonProps} />;
-    case 'card_style_3':
-      return <Cards.Styles.Three {...commonProps} />;
-    case 'card_style_4':
-      return <Cards.Styles.Four {...commonProps} />;
-    case 'card_style_5':
-      return <Cards.Styles.Five {...commonProps} />;
-    case 'card_style_6':
-      return <Cards.Styles.Six {...commonProps} />;
-    case 'continue_watching':
-      return (
-        <Cards.Styles.NowWatching
-          {...commonProps}
-          historyData={props.data.historyData}
-          isLoadingHistory={props.isLoading?.history}
-        />
-      );
-    case 'card_rotate_in_out':
-      return <Cards.Styles.RotateCarousel {...commonProps} />;
-    case 'top_10':
-      return <Cards.Styles.TopTen {...commonProps} />;
-    default:
-      return null;
-  }
-};
-
-// ----------------------------------------
-// Sections Component
-// ----------------------------------------
-const Sections: React.FC<IProps> = ({
-  type,
-  data,
-  name,
-  customComponents = [],
-  theme,
-  index,
-  section_id,
-  events,
-  sectionProps,
-  isLoading,
-  moreFetchData,
-  moreFetchDataHistory,
-  onDisplayAds,
-  screenDimensions,
-  checkWatchlistStatus,
-  viewportOffsets,
-}) => {
-  const commonProps = useMemo(
-    () => ({ data: data.sectionData, title: name }),
-    [data.sectionData, name]
-  );
-
-  const customComponent = useMemo(
-    () => customComponents.find((c) => c.type === type),
-    [customComponents, type]
-  );
-
-  const defaultRendered = useMemo(
-    () =>
-      renderDefaultComponent(type, {
-        data,
-        name,
-        section_id,
-        index,
-        theme,
-        events,
-        checkWatchlistStatus,
-        sectionProps,
-        isLoading,
-        moreFetchData,
-        moreFetchDataHistory,
-        onDisplayAds,
-        screenDimensions,
-        viewportOffsets,
-      }),
-    [
-      type,
-      data,
-      name,
-      section_id,
-      index,
-      theme,
-      events,
-      checkWatchlistStatus,
-      sectionProps,
-      isLoading,
-      moreFetchData,
-      moreFetchDataHistory,
-      onDisplayAds,
-      screenDimensions,
-      viewportOffsets,
-    ]
-  );
-
-  const filterProps = useMemo(
-    () => ({
-      data,
-      name,
-      section_id,
-      index,
-      theme,
-      events,
-      checkWatchlistStatus,
-      sectionProps,
-      isLoading,
-      moreFetchData,
-      moreFetchDataHistory,
-      onDisplayAds,
-      screenDimensions,
-      viewportOffsets,
-    }),
-    [
-      data,
-      name,
-      section_id,
-      index,
-      theme,
-      events,
-      checkWatchlistStatus,
-      sectionProps,
-      isLoading,
-      moreFetchData,
-      moreFetchDataHistory,
-      onDisplayAds,
-      screenDimensions,
-      viewportOffsets,
-    ]
-  );
-
-  const fallbackComponents = useMemo(
-    () =>
-      customComponents.filter(
-        ({ type: customType }) =>
-          renderDefaultComponent(
-            customType as IGetSectionData['type'],
-            filterProps
-          ) === null
-      ),
-    [customComponents, filterProps]
-  );
-
-  if (customComponent) {
-    return React.cloneElement(customComponent.component, {
-      ...(customComponent.component?.props ?? {}),
-      ...commonProps,
-    });
-  }
-
-  if (defaultRendered) return defaultRendered;
-
-  return (
-    <>
-      {fallbackComponents.map(({ component, type: key }) =>
-        React.cloneElement(component, {
-          ...(component?.props ?? {}),
-          key,
-          ...commonProps,
-        })
-      )}
-    </>
-  );
-};
-
-export default React.memo(Sections);