@uploadista/react-native-core 0.0.3

package/src/components/FileUploadButton.tsx

@@ -0,0 +1,130 @@
+import { type ReactNode, useEffect } from "react";
+import {
+  ActivityIndicator,
+  Pressable,
+  StyleSheet,
+  Text,
+  View,
+} from "react-native";
+import { useFileUpload } from "../hooks";
+import type { UseFileUploadOptions } from "../types";
+import { UploadProgress } from "./UploadProgress";
+
+export interface FileUploadButtonProps {
+  /** Options for file upload */
+  options?: UseFileUploadOptions;
+  /** Button label text */
+  label?: string;
+  /** Custom button content */
+  children?: ReactNode;
+  /** Callback when upload completes successfully */
+  onSuccess?: (result: unknown) => void;
+  /** Callback when upload fails */
+  onError?: (error: Error) => void;
+  /** Callback when upload is cancelled */
+  onCancel?: () => void;
+  /** Whether to show progress inline */
+  showProgress?: boolean;
+}
+
+/**
+ * Button component for document/file selection and upload
+ * Generic file picker with progress display
+ */
+export function FileUploadButton({
+  options,
+  label = "Choose File",
+  children,
+  onSuccess,
+  onError,
+  onCancel,
+  showProgress = true,
+}: FileUploadButtonProps) {
+  const { state, pickAndUpload } = useFileUpload(options);
+
+  const handlePress = async () => {
+    try {
+      await pickAndUpload();
+    } catch (error) {
+      if (error instanceof Error) {
+        if (
+          error.message.includes("cancelled") ||
+          error.message.includes("aborted")
+        ) {
+          onCancel?.();
+        } else {
+          onError?.(error);
+        }
+      }
+    }
+  };
+
+  const isLoading = state.status === "uploading";
+  const isDisabled = isLoading || state.status === "aborted";
+
+  useEffect(() => {
+    if (state.status === "success" && state.result) {
+      onSuccess?.(state.result);
+    }
+  }, [state.status, state.result, onSuccess]);
+
+  useEffect(() => {
+    if (state.status === "error" && state.error) {
+      onError?.(state.error);
+    }
+  }, [state.status, state.error, onError]);
+
+  return (
+    <View style={styles.container}>
+      <Pressable
+        style={[styles.button, isDisabled && styles.buttonDisabled]}
+        onPress={handlePress}
+        disabled={isDisabled}
+      >
+        {isLoading && (
+          <ActivityIndicator
+            size="small"
+            color="#FFFFFF"
+            style={styles.spinner}
+          />
+        )}
+        <Text style={styles.buttonText}>{children || label}</Text>
+      </Pressable>
+      {showProgress && state.status !== "idle" && (
+        <View style={styles.progressContainer}>
+          <UploadProgress state={state} label="File upload" />
+        </View>
+      )}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    gap: 8,
+  },
+  button: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    paddingVertical: 12,
+    paddingHorizontal: 16,
+    backgroundColor: "#FF9500",
+    borderRadius: 8,
+    gap: 8,
+  },
+  buttonDisabled: {
+    opacity: 0.6,
+  },
+  buttonText: {
+    fontSize: 16,
+    fontWeight: "600",
+    color: "#FFFFFF",
+  },
+  spinner: {
+    marginRight: 4,
+  },
+  progressContainer: {
+    marginTop: 4,
+  },
+});

package/src/components/GalleryUploadButton.tsx

@@ -0,0 +1,199 @@
+import React, { type ReactNode } from "react";
+import {
+  ActivityIndicator,
+  FlatList,
+  Pressable,
+  StyleSheet,
+  Text,
+  View,
+} from "react-native";
+import { useGalleryUpload } from "../hooks";
+import type { UseGalleryUploadOptions } from "../types";
+import { UploadProgress } from "./UploadProgress";
+
+export interface GalleryUploadButtonProps {
+  /** Options for gallery upload */
+  options?: UseGalleryUploadOptions;
+  /** Button label text */
+  label?: string;
+  /** Custom button content */
+  children?: ReactNode;
+  /** Callback when all uploads complete successfully */
+  onSuccess?: (results: unknown[]) => void;
+  /** Callback when any upload fails */
+  onError?: (error: Error) => void;
+  /** Callback when upload is cancelled */
+  onCancel?: () => void;
+  /** Whether to show individual progress for each file */
+  showProgress?: boolean;
+}
+
+/**
+ * Button component for gallery selection and batch upload
+ * Triggers gallery picker on press and handles concurrent uploads
+ */
+export function GalleryUploadButton({
+  options,
+  label = "Select from Gallery",
+  children,
+  onSuccess,
+  onError,
+  onCancel,
+  showProgress = true,
+}: GalleryUploadButtonProps) {
+  const { state, selectAndUpload } = useGalleryUpload(options);
+
+  const handlePress = async () => {
+    try {
+      await selectAndUpload();
+    } catch (error) {
+      if (error instanceof Error) {
+        if (
+          error.message.includes("cancelled") ||
+          error.message.includes("aborted")
+        ) {
+          onCancel?.();
+        } else {
+          onError?.(error);
+        }
+      }
+    }
+  };
+
+  const isLoading = state.items.some((item) => item.status === "uploading");
+  const hasItems = state.items.length > 0;
+  const allComplete =
+    hasItems &&
+    state.items.every(
+      (item) => item.status !== "uploading" && item.status !== "idle",
+    );
+
+  React.useEffect(() => {
+    if (allComplete) {
+      const results = state.items
+        .filter((item) => item.status === "success")
+        .map((item) => item.result);
+      if (results.length > 0) {
+        onSuccess?.(results);
+      }
+    }
+  }, [allComplete, state.items, onSuccess]);
+
+  React.useEffect(() => {
+    const errors = state.items.filter((item) => item.status === "error");
+    const firstError = errors[0]?.error;
+    if (firstError) {
+      onError?.(firstError);
+    }
+  }, [state.items, onError]);
+
+  const renderItem = ({ item }: { item: (typeof state.items)[0] }) => (
+    <View key={item.id} style={styles.itemContainer}>
+      <UploadProgress
+        state={{
+          status: item.status,
+          progress: item.progress,
+          bytesUploaded: item.bytesUploaded,
+          totalBytes: item.totalBytes,
+          error: item.error,
+          result: item.result,
+        }}
+        label={item.file.name}
+      />
+    </View>
+  );
+
+  return (
+    <View style={styles.container}>
+      <Pressable
+        style={[styles.button, isLoading && styles.buttonDisabled]}
+        onPress={handlePress}
+        disabled={isLoading}
+      >
+        {isLoading && (
+          <ActivityIndicator
+            size="small"
+            color="#FFFFFF"
+            style={styles.spinner}
+          />
+        )}
+        <Text style={styles.buttonText}>
+          {children || label}
+          {hasItems && ` (${state.items.length})`}
+        </Text>
+      </Pressable>
+
+      {hasItems && (
+        <View style={styles.statsContainer}>
+          <Text style={styles.statsText}>
+            Progress: {state.items.filter((i) => i.status === "success").length}
+            /{state.items.length} uploaded
+          </Text>
+          <Text style={styles.statsText}>Overall: {state.totalProgress}%</Text>
+        </View>
+      )}
+
+      {showProgress && hasItems && (
+        <FlatList
+          scrollEnabled={false}
+          data={state.items}
+          renderItem={renderItem}
+          keyExtractor={(item) => item.id}
+          style={styles.listContainer}
+          contentContainerStyle={styles.listContent}
+          ItemSeparatorComponent={() => <View style={styles.separator} />}
+        />
+      )}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    gap: 8,
+  },
+  button: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    paddingVertical: 12,
+    paddingHorizontal: 16,
+    backgroundColor: "#34C759",
+    borderRadius: 8,
+    gap: 8,
+  },
+  buttonDisabled: {
+    opacity: 0.6,
+  },
+  buttonText: {
+    fontSize: 16,
+    fontWeight: "600",
+    color: "#FFFFFF",
+  },
+  spinner: {
+    marginRight: 4,
+  },
+  statsContainer: {
+    paddingVertical: 8,
+    paddingHorizontal: 12,
+    backgroundColor: "#f5f5f5",
+    borderRadius: 4,
+    gap: 4,
+  },
+  statsText: {
+    fontSize: 12,
+    color: "#666666",
+  },
+  listContainer: {
+    maxHeight: 400,
+  },
+  listContent: {
+    gap: 8,
+  },
+  itemContainer: {
+    paddingHorizontal: 0,
+  },
+  separator: {
+    height: 4,
+  },
+});

package/src/components/UploadList.tsx

@@ -0,0 +1,214 @@
+import { FlatList, Pressable, StyleSheet, Text, View } from "react-native";
+import type { UploadItem } from "../types";
+import { UploadProgress } from "./UploadProgress";
+
+export interface UploadListProps {
+  /** List of upload items to display */
+  items: UploadItem[];
+  /** Callback when remove item is pressed */
+  onRemove?: (id: string) => void;
+  /** Callback when item is pressed */
+  onItemPress?: (item: UploadItem) => void;
+  /** Whether to show remove button */
+  showRemoveButton?: boolean;
+}
+
+/**
+ * Component to display a list of upload items with individual progress
+ * Shows status indicators and allows removal of items
+ */
+export function UploadList({
+  items,
+  onRemove,
+  onItemPress,
+  showRemoveButton = true,
+}: UploadListProps) {
+  const renderItem = ({ item }: { item: UploadItem }) => (
+    <Pressable
+      style={[
+        styles.itemContainer,
+        { borderLeftColor: getStatusColor(item.progress.state) },
+      ]}
+      onPress={() => onItemPress?.(item)}
+    >
+      <View style={styles.itemContent}>
+        <View style={styles.itemHeader}>
+          <Text style={styles.fileName} numberOfLines={1}>
+            {item.file.name}
+          </Text>
+          <Text style={styles.fileSize}>
+            {getFileSizeDisplay(item.file.size)}
+          </Text>
+        </View>
+        <View style={styles.progressWrapper}>
+          <UploadProgress
+            state={{
+              status:
+                item.progress.state === "pending"
+                  ? "idle"
+                  : item.progress.state === "cancelled"
+                    ? "aborted"
+                    : item.progress.state,
+              progress: item.progress.progress,
+              bytesUploaded: item.progress.uploadedBytes,
+              totalBytes: item.progress.totalBytes,
+              error: item.progress.error || null,
+              result: (item.result as any) || null,
+            }}
+          />
+        </View>
+      </View>
+      {showRemoveButton &&
+        item.progress.state !== "uploading" &&
+        item.progress.state !== "pending" && (
+          <Pressable
+            style={styles.removeButton}
+            onPress={() => onRemove?.(item.id)}
+            hitSlop={{ top: 8, right: 8, bottom: 8, left: 8 }}
+          >
+            <Text style={styles.removeButtonText}>✕</Text>
+          </Pressable>
+        )}
+    </Pressable>
+  );
+
+  if (items.length === 0) {
+    return (
+      <View style={styles.emptyContainer}>
+        <Text style={styles.emptyText}>No uploads</Text>
+      </View>
+    );
+  }
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.headerRow}>
+        <Text style={styles.headerText}>Uploads ({items.length})</Text>
+        <Text style={styles.headerSubtext}>
+          {items.filter((i) => i.progress.state === "success").length} complete
+        </Text>
+      </View>
+      <FlatList
+        scrollEnabled={false}
+        data={items}
+        renderItem={renderItem}
+        keyExtractor={(item) => item.id}
+        ItemSeparatorComponent={() => <View style={styles.separator} />}
+        contentContainerStyle={styles.listContent}
+      />
+    </View>
+  );
+}
+
+// Helper functions
+function getStatusColor(state: string): string {
+  switch (state) {
+    case "success":
+      return "#34C759";
+    case "error":
+    case "cancelled":
+      return "#FF3B30";
+    case "uploading":
+    case "pending":
+      return "#007AFF";
+    default:
+      return "#999999";
+  }
+}
+
+function getFileSizeDisplay(bytes: number): string {
+  if (bytes === 0) return "0 B";
+  const k = 1024;
+  const sizes = ["B", "KB", "MB", "GB"];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return `${Math.round((bytes / k ** i) * 10) / 10} ${sizes[i]}`;
+}
+
+const styles = StyleSheet.create({
+  container: {
+    gap: 8,
+  },
+  headerRow: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    backgroundColor: "#f9f9f9",
+    borderRadius: 4,
+  },
+  headerText: {
+    fontSize: 16,
+    fontWeight: "600",
+    color: "#333333",
+  },
+  headerSubtext: {
+    fontSize: 14,
+    color: "#666666",
+  },
+  listContent: {
+    gap: 8,
+  },
+  itemContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingVertical: 8,
+    paddingHorizontal: 12,
+    borderLeftWidth: 4,
+    backgroundColor: "#f5f5f5",
+    borderRadius: 4,
+    gap: 8,
+  },
+  itemContent: {
+    flex: 1,
+    gap: 6,
+  },
+  itemHeader: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+  },
+  fileName: {
+    fontSize: 14,
+    fontWeight: "500",
+    color: "#333333",
+    flex: 1,
+  },
+  fileSize: {
+    fontSize: 12,
+    color: "#999999",
+    marginLeft: 8,
+  },
+  progressWrapper: {
+    marginTop: 2,
+  },
+  removeButton: {
+    width: 32,
+    height: 32,
+    justifyContent: "center",
+    alignItems: "center",
+    borderRadius: 16,
+    backgroundColor: "#FFE5E5",
+  },
+  removeButtonText: {
+    fontSize: 16,
+    fontWeight: "600",
+    color: "#FF3B30",
+  },
+  separator: {
+    height: 4,
+  },
+  emptyContainer: {
+    paddingVertical: 24,
+    paddingHorizontal: 12,
+    backgroundColor: "#f5f5f5",
+    borderRadius: 4,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  emptyText: {
+    fontSize: 14,
+    color: "#999999",
+    fontStyle: "italic",
+  },
+});