@umituz/react-native-design-system 2.6.110 → 2.6.111

package/src/infinite-scroll/presentation/components/infinite-scroll-list.tsx

@@ -0,0 +1,120 @@
+/**
+ * InfiniteScrollList Component
+ *
+ * Presentation component for infinite scroll list
+ * Optimized with React.memo for performance
+ */
+
+import React from "react";
+import { FlatList } from "react-native";
+import { useInfiniteScroll } from "../hooks/useInfiniteScroll";
+import { calculateEndReachedThreshold } from "../../domain/utils/pagination-utils";
+import type { InfiniteScrollListProps } from "../../domain/interfaces/infinite-scroll-list-props";
+import { Loading } from "./loading";
+import { LoadingMore } from "./loading-more";
+import { Empty } from "./empty";
+import { Error } from "./error";
+
+/**
+ * Render error component
+ */
+function renderErrorComponent(
+  error: string,
+  retry: () => void,
+  errorComponent?: (error: string, retry: () => void) => React.ReactElement,
+): React.ReactElement {
+  if (errorComponent) {
+    return errorComponent(error, retry);
+  }
+  return <Error error={error} onRetry={retry} />;
+}
+
+/**
+ * InfiniteScrollList Component
+ *
+ * FlatList wrapper with automatic infinite scroll and pagination
+ *
+ * @example
+ * ```tsx
+ * <InfiniteScrollList
+ *   config={{
+ *     pageSize: 20,
+ *     threshold: 5,
+ *     fetchData: async (page, pageSize) => {
+ *       const response = await api.getItems({ page, limit: pageSize });
+ *       return response.data;
+ *     },
+ *   }}
+ *   renderItem={(item) => <ItemCard item={item} />}
+ * />
+ * ```
+ */
+function InfiniteScrollListComponent<T>({
+  config,
+  renderItem,
+  loadingComponent,
+  loadingMoreComponent,
+  emptyComponent,
+  errorComponent,
+  ListHeaderComponent,
+  ListFooterComponent,
+  flatListProps,
+}: InfiniteScrollListProps<T>): React.ReactElement {
+  const { items, state, loadMore, refresh, canLoadMore } = useInfiniteScroll(config);
+
+  const handleEndReached = React.useCallback(() => {
+    if (canLoadMore && config.autoLoad !== false) {
+      loadMore();
+    }
+  }, [canLoadMore, loadMore, config.autoLoad]);
+
+  const getItemKey = React.useCallback(
+    (item: T, index: number): string => {
+      if (config.getItemKey) {
+        return config.getItemKey(item, index);
+      }
+      return `item-${index}`;
+    },
+    [config],
+  );
+
+  // Loading state
+  if (state.isLoading) {
+    return loadingComponent || <Loading />;
+  }
+
+  // Error state
+  if (state.error) {
+    return renderErrorComponent(state.error, refresh, errorComponent);
+  }
+
+  // Empty state
+  if (items.length === 0 && !state.isLoading) {
+    return emptyComponent || <Empty />;
+  }
+
+  // Render list
+  return (
+    <FlatList
+      data={items}
+      renderItem={({ item, index }) => renderItem(item, index)}
+      keyExtractor={(item, index) => getItemKey(item, index)}
+      onEndReached={handleEndReached}
+      onEndReachedThreshold={calculateEndReachedThreshold(config.threshold)}
+      onRefresh={refresh}
+      refreshing={state.isRefreshing}
+      ListHeaderComponent={ListHeaderComponent}
+      ListFooterComponent={
+        <>
+          {ListFooterComponent}
+          {state.isLoadingMore && (loadingMoreComponent || <LoadingMore />)}
+        </>
+      }
+      {...flatListProps}
+    />
+  );
+}
+
+export const InfiniteScrollList = React.memo(InfiniteScrollListComponent) as <T>(
+  props: InfiniteScrollListProps<T>,
+) => React.ReactElement;

package/src/infinite-scroll/presentation/components/loading-more.tsx

@@ -0,0 +1,38 @@
+/**
+ * Loading More Component
+ *
+ * Presentation component for loading more state
+ * Fully customizable via props
+ * Accessibility support included
+ */
+
+import React from "react";
+import { View, ActivityIndicator, StyleSheet } from "react-native";
+import type { LoadingMoreProps } from "./types";
+
+export const LoadingMore = React.memo<LoadingMoreProps>(({
+  containerStyle,
+  size = "small",
+  color,
+  accessibilityLabel = "Loading more",
+  ...accessibilityProps
+}) => (
+  <View
+    style={[styles.container, containerStyle]}
+    accessibilityLabel={accessibilityLabel}
+    accessibilityRole="progressbar"
+    accessibilityState={{ busy: true }}
+    {...accessibilityProps}
+  >
+    <ActivityIndicator size={size} color={color} />
+  </View>
+));
+
+LoadingMore.displayName = "LoadingMore";
+
+const styles = StyleSheet.create({
+  container: {
+    padding: 16,
+    alignItems: "center",
+  },
+});

package/src/infinite-scroll/presentation/components/loading.tsx

@@ -0,0 +1,40 @@
+/**
+ * Loading Component
+ *
+ * Presentation component for loading state
+ * Fully customizable via props
+ * Accessibility support included
+ */
+
+import React from "react";
+import { View, ActivityIndicator, StyleSheet } from "react-native";
+import type { LoadingProps } from "./types";
+
+export const Loading = React.memo<LoadingProps>(({
+  containerStyle,
+  size = "large",
+  color,
+  accessibilityLabel = "Loading",
+  ...accessibilityProps
+}) => (
+  <View
+    style={[styles.container, containerStyle]}
+    accessibilityLabel={accessibilityLabel}
+    accessibilityRole="progressbar"
+    accessibilityState={{ busy: true }}
+    {...accessibilityProps}
+  >
+    <ActivityIndicator size={size} color={color} />
+  </View>
+));
+
+Loading.displayName = "Loading";
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+    padding: 20,
+  },
+});

package/src/infinite-scroll/presentation/components/types.ts

@@ -0,0 +1,124 @@
+/**
+ * Component Types
+ *
+ * Shared types for presentation components
+ */
+
+import type { TextStyle, ViewStyle, AccessibilityProps } from "react-native";
+
+export interface EmptyProps extends AccessibilityProps {
+  /**
+   * Optional text to display
+   * Default: "No items found"
+   */
+  text?: string;
+
+  /**
+   * Optional accessibility label
+   * Default: "Empty list"
+   */
+  accessibilityLabel?: string;
+
+  /**
+   * Optional custom style for container
+   */
+  containerStyle?: ViewStyle;
+
+  /**
+   * Optional custom style for text
+   */
+  textStyle?: TextStyle;
+}
+
+export interface ErrorProps extends AccessibilityProps {
+  /**
+   * Error message to display
+   */
+  error: string;
+
+  /**
+   * Retry callback
+   */
+  onRetry: () => void;
+
+  /**
+   * Optional text for retry button
+   * Default: "Tap to retry"
+   */
+  retryText?: string;
+
+  /**
+   * Optional accessibility label for error
+   * Default: "Error: {error}"
+   */
+  accessibilityLabel?: string;
+
+  /**
+   * Optional accessibility hint for retry button
+   * Default: "Double tap to retry"
+   */
+  retryAccessibilityHint?: string;
+
+  /**
+   * Optional custom style for container
+   */
+  containerStyle?: ViewStyle;
+
+  /**
+   * Optional custom style for error text
+   */
+  errorTextStyle?: TextStyle;
+
+  /**
+   * Optional custom style for retry text
+   */
+  retryTextStyle?: TextStyle;
+}
+
+export interface LoadingProps extends AccessibilityProps {
+  /**
+   * Optional custom style for container
+   */
+  containerStyle?: ViewStyle;
+
+  /**
+   * Optional size for indicator
+   * Default: "large"
+   */
+  size?: "small" | "large" | number;
+
+  /**
+   * Optional color for indicator
+   */
+  color?: string;
+
+  /**
+   * Optional accessibility label
+   * Default: "Loading"
+   */
+  accessibilityLabel?: string;
+}
+
+export interface LoadingMoreProps extends AccessibilityProps {
+  /**
+   * Optional custom style for container
+   */
+  containerStyle?: ViewStyle;
+
+  /**
+   * Optional size for indicator
+   * Default: "small"
+   */
+  size?: "small" | "large" | number;
+
+  /**
+   * Optional color for indicator
+   */
+  color?: string;
+
+  /**
+   * Optional accessibility label
+   * Default: "Loading more"
+   */
+  accessibilityLabel?: string;
+}

package/src/infinite-scroll/presentation/hooks/pagination.helper.ts

@@ -0,0 +1,83 @@
+/**
+ * Pagination Helper
+ * SOLID: Single Responsibility - Handle pagination operations
+ */
+
+import type { InfiniteScrollConfig, PaginatedResult } from "../../domain/types/infinite-scroll-config";
+import type { InfiniteScrollState } from "../../domain/types/infinite-scroll-state";
+
+export function isCursorMode<T>(
+  config: InfiniteScrollConfig<T>,
+): config is Extract<InfiniteScrollConfig<T>, { paginationMode: "cursor" }> {
+  return "paginationMode" in config && config.paginationMode === "cursor";
+}
+
+export async function loadData<T>(
+  config: InfiniteScrollConfig<T>,
+  pageOrCursor: number | string | undefined,
+  pageSize: number,
+  totalItems?: number,
+): Promise<InfiniteScrollState<T>> {
+  if (isCursorMode(config)) {
+    const result = await config.fetchCursor(pageOrCursor as string | undefined, pageSize);
+    return {
+      items: result.items,
+      pages: [result.items],
+      currentPage: 0,
+      cursor: result.nextCursor,
+      hasMore: result.hasMore,
+      isLoading: false,
+      isLoadingMore: false,
+      isRefreshing: false,
+      error: null,
+      totalItems,
+    };
+  } else {
+    const data = await config.fetchData(pageOrCursor as number, pageSize);
+    const hasMore = data.length >= pageSize;
+    return {
+      items: data,
+      pages: [data],
+      currentPage: pageOrCursor as number,
+      cursor: null,
+      hasMore,
+      isLoading: false,
+      isLoadingMore: false,
+      isRefreshing: false,
+      error: null,
+      totalItems,
+    };
+  }
+}
+
+export async function loadMoreData<T>(
+  config: InfiniteScrollConfig<T>,
+  state: InfiniteScrollState<T>,
+  pageSize: number,
+): Promise<Partial<InfiniteScrollState<T>>> {
+  if (isCursorMode(config)) {
+    if (!state.cursor) throw new Error("No cursor available");
+    const result = await config.fetchCursor(state.cursor, pageSize);
+    return {
+      items: [...state.items, ...result.items],
+      pages: [...state.pages, result.items],
+      cursor: result.nextCursor,
+      hasMore: result.hasMore,
+      isLoadingMore: false,
+      error: null,
+    };
+  } else {
+    const nextPage = state.currentPage + 1;
+    const data = await config.fetchData(nextPage, pageSize);
+    const newPages = [...state.pages, data];
+    const hasMore = data.length >= pageSize;
+    return {
+      items: newPages.flat(),
+      pages: newPages,
+      currentPage: nextPage,
+      hasMore,
+      isLoadingMore: false,
+      error: null,
+    };
+  }
+}