react-native-pdf-jsi 2.2.7 → 3.0.0

package/src/components/BookmarkModal.jsx

@@ -0,0 +1,253 @@
+/**
+ * BookmarkModal - Create/edit bookmark with color picker
+ */
+
+import React, {useState} from 'react';
+import {
+  View,
+  Text,
+  TextInput,
+  TouchableOpacity,
+  StyleSheet,
+  ScrollView,
+  Modal,
+  Alert,
+} from 'react-native';
+
+const BOOKMARK_COLORS = [
+  {name: 'Red', color: '#FF6B6B'},
+  {name: 'Blue', color: '#4ECDC4'},
+  {name: 'Green', color: '#95E1D3'},
+  {name: 'Yellow', color: '#FFE66D'},
+  {name: 'Purple', color: '#A78BFA'},
+  {name: 'Orange', color: '#FF8C42'},
+  {name: 'Pink', color: '#FF6B9D'},
+  {name: 'Teal', color: '#3EECAC'},
+  {name: 'Indigo', color: '#6366F1'},
+  {name: 'Amber', color: '#FBBF24'},
+];
+
+const BookmarkModal = ({
+  visible,
+  onClose,
+  onSave,
+  currentPage,
+  initialData,
+}) => {
+  const [name, setName] = useState(initialData?.name || '');
+  const [color, setColor] = useState(initialData?.color || '#FF6B6B');
+  const [notes, setNotes] = useState(initialData?.notes || '');
+
+  const handleSave = () => {
+    if (!name.trim()) {
+      Alert.alert('Error', 'Please enter a bookmark name');
+      return;
+    }
+
+    onSave({name, color, notes});
+    
+    // Reset form
+    setName('');
+    setNotes('');
+    setColor('#FF6B6B');
+  };
+
+  const handleClose = () => {
+    setName('');
+    setNotes('');
+    setColor('#FF6B6B');
+    onClose();
+  };
+
+  return (
+    <Modal
+      visible={visible}
+      transparent
+      animationType="slide"
+      onRequestClose={handleClose}>
+      <View style={styles.overlay}>
+        <View style={styles.container}>
+          <View style={styles.header}>
+            <Text style={styles.title}>
+              {initialData ? 'Edit' : 'Create'} Bookmark
+            </Text>
+            <TouchableOpacity onPress={handleClose}>
+              <Text style={styles.closeButton}>✕</Text>
+            </TouchableOpacity>
+          </View>
+
+          <ScrollView style={styles.form}>
+            <Text style={styles.pageInfo}>Page {currentPage}</Text>
+
+            <Text style={styles.label}>Name</Text>
+            <TextInput
+              style={styles.input}
+              placeholder="Enter bookmark name"
+              value={name}
+              onChangeText={setName}
+              placeholderTextColor="#9CA3AF"
+            />
+
+            <Text style={styles.label}>Notes (optional)</Text>
+            <TextInput
+              style={[styles.input, styles.textArea]}
+              placeholder="Add notes..."
+              value={notes}
+              onChangeText={setNotes}
+              multiline
+              numberOfLines={4}
+              placeholderTextColor="#9CA3AF"
+            />
+
+            <Text style={styles.label}>Color</Text>
+            <ScrollView
+              horizontal
+              showsHorizontalScrollIndicator={false}
+              style={styles.colorPicker}>
+              {BOOKMARK_COLORS.map(item => (
+                <TouchableOpacity
+                  key={item.color}
+                  style={[
+                    styles.colorOption,
+                    {backgroundColor: item.color},
+                    color === item.color && styles.selectedColor,
+                  ]}
+                  onPress={() => setColor(item.color)}>
+                  {color === item.color && (
+                    <Text style={styles.checkmark}>✓</Text>
+                  )}
+                </TouchableOpacity>
+              ))}
+            </ScrollView>
+          </ScrollView>
+
+          <View style={styles.footer}>
+            <TouchableOpacity
+              style={[styles.button, styles.cancelButton]}
+              onPress={handleClose}>
+              <Text style={styles.cancelButtonText}>Cancel</Text>
+            </TouchableOpacity>
+            <TouchableOpacity
+              style={[styles.button, styles.saveButton]}
+              onPress={handleSave}>
+              <Text style={styles.saveButtonText}>Save</Text>
+            </TouchableOpacity>
+          </View>
+        </View>
+      </View>
+    </Modal>
+  );
+};
+
+const styles = StyleSheet.create({
+  overlay: {
+    flex: 1,
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+    justifyContent: 'flex-end',
+  },
+  container: {
+    backgroundColor: '#FFFFFF',
+    borderTopLeftRadius: 20,
+    borderTopRightRadius: 20,
+    maxHeight: '80%',
+  },
+  header: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    padding: 20,
+    borderBottomWidth: 1,
+    borderBottomColor: '#E5E7EB',
+  },
+  title: {
+    fontSize: 20,
+    fontWeight: 'bold',
+    color: '#1F2937',
+  },
+  closeButton: {
+    fontSize: 24,
+    color: '#6B7280',
+    padding: 4,
+  },
+  form: {
+    padding: 20,
+  },
+  pageInfo: {
+    fontSize: 14,
+    color: '#6366F1',
+    fontWeight: '600',
+    marginBottom: 20,
+  },
+  label: {
+    fontSize: 14,
+    fontWeight: '600',
+    color: '#374151',
+    marginBottom: 8,
+    marginTop: 16,
+  },
+  input: {
+    borderWidth: 1,
+    borderColor: '#D1D5DB',
+    borderRadius: 8,
+    padding: 12,
+    fontSize: 16,
+    color: '#1F2937',
+  },
+  textArea: {
+    height: 100,
+    textAlignVertical: 'top',
+  },
+  colorPicker: {
+    flexDirection: 'row',
+    marginTop: 8,
+  },
+  colorOption: {
+    width: 48,
+    height: 48,
+    borderRadius: 24,
+    marginRight: 12,
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderWidth: 3,
+    borderColor: 'transparent',
+  },
+  selectedColor: {
+    borderColor: '#1F2937',
+  },
+  checkmark: {
+    fontSize: 24,
+    color: '#FFFFFF',
+    fontWeight: 'bold',
+  },
+  footer: {
+    flexDirection: 'row',
+    padding: 20,
+    gap: 12,
+    borderTopWidth: 1,
+    borderTopColor: '#E5E7EB',
+  },
+  button: {
+    flex: 1,
+    padding: 16,
+    borderRadius: 8,
+    alignItems: 'center',
+  },
+  cancelButton: {
+    backgroundColor: '#F3F4F6',
+  },
+  cancelButtonText: {
+    fontSize: 16,
+    fontWeight: '600',
+    color: '#374151',
+  },
+  saveButton: {
+    backgroundColor: '#6366F1',
+  },
+  saveButtonText: {
+    fontSize: 16,
+    fontWeight: '600',
+    color: '#FFFFFF',
+  },
+});
+
+export default BookmarkModal;

package/src/components/BottomSheet.jsx

@@ -0,0 +1,121 @@
+/**
+ * BottomSheet Component - Slide-up menu container
+ */
+
+import React, {useEffect, useRef} from 'react';
+import {
+  View,
+  Modal,
+  Animated,
+  StyleSheet,
+  TouchableOpacity,
+  Dimensions,
+  PanResponder,
+} from 'react-native';
+
+const {height: SCREEN_HEIGHT} = Dimensions.get('window');
+
+const BottomSheet = ({
+  visible,
+  onClose,
+  children,
+  height = SCREEN_HEIGHT * 0.6,
+}) => {
+  const translateY = useRef(new Animated.Value(height)).current;
+
+  useEffect(() => {
+    if (visible) {
+      Animated.spring(translateY, {
+        toValue: 0,
+        useNativeDriver: true,
+        tension: 50,
+        friction: 8,
+      }).start();
+    } else {
+      Animated.timing(translateY, {
+        toValue: height,
+        duration: 250,
+        useNativeDriver: true,
+      }).start();
+    }
+  }, [visible, height]);
+
+  const panResponder = useRef(
+    PanResponder.create({
+      onMoveShouldSetPanResponder: (_, gestureState) => {
+        return gestureState.dy > 5;
+      },
+      onPanResponderMove: (_, gestureState) => {
+        if (gestureState.dy > 0) {
+          translateY.setValue(gestureState.dy);
+        }
+      },
+      onPanResponderRelease: (_, gestureState) => {
+        if (gestureState.dy > height * 0.3) {
+          onClose();
+        } else {
+          Animated.spring(translateY, {
+            toValue: 0,
+            useNativeDriver: true,
+          }).start();
+        }
+      },
+    })
+  ).current;
+
+  return (
+    <Modal
+      visible={visible}
+      transparent
+      animationType="fade"
+      onRequestClose={onClose}>
+      <View style={styles.overlay}>
+        <TouchableOpacity
+          style={styles.backdrop}
+          activeOpacity={1}
+          onPress={onClose}
+        />
+        <Animated.View
+          style={[
+            styles.container,
+            {height, transform: [{translateY}]},
+          ]}
+          {...panResponder.panHandlers}>
+          <View style={styles.handle} />
+          <View style={styles.content}>{children}</View>
+        </Animated.View>
+      </View>
+    </Modal>
+  );
+};
+
+const styles = StyleSheet.create({
+  overlay: {
+    flex: 1,
+    justifyContent: 'flex-end',
+  },
+  backdrop: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+  },
+  container: {
+    backgroundColor: '#FFFFFF',
+    borderTopLeftRadius: 20,
+    borderTopRightRadius: 20,
+    paddingTop: 8,
+  },
+  handle: {
+    width: 40,
+    height: 4,
+    backgroundColor: '#D1D5DB',
+    borderRadius: 2,
+    alignSelf: 'center',
+    marginBottom: 8,
+  },
+  content: {
+    flex: 1,
+    padding: 16,
+  },
+});
+
+export default BottomSheet;

package/src/components/ExportMenu.jsx

@@ -0,0 +1,223 @@
+/**
+ * ExportMenu - Export PDF pages to images
+ */
+
+import React, {useState} from 'react';
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  StyleSheet,
+  ActivityIndicator,
+  Share,
+  Alert,
+  NativeModules,
+} from 'react-native';
+import BottomSheet from './BottomSheet';
+
+const {FileManager} = NativeModules;
+
+const ExportMenu = ({
+  visible,
+  onClose,
+  currentPage,
+  totalPages,
+  pdfPath,
+  onExport,
+  onShareFiles,
+}) => {
+  const [exporting, setExporting] = useState(false);
+  const [exportProgress, setExportProgress] = useState('');
+
+  const handleExport = async (format, quality, pages) => {
+    try {
+      setExporting(true);
+      setExportProgress(`Exporting to ${format.toUpperCase()}...`);
+
+      const options = {
+        format,
+        quality,
+      };
+
+      let result;
+      if (pages === 'current') {
+        setExportProgress(`Exporting page ${currentPage}...`);
+        result = await onExport({
+          type: 'single',
+          page: currentPage,
+          ...options,
+        });
+      } else {
+        const pageCount = Math.min(3, totalPages);
+        setExportProgress(`Exporting ${pageCount} pages...`);
+        result = await onExport({
+          type: 'range',
+          pages: Array.from({length: pageCount}, (_, i) => i + 1),
+          ...options,
+        });
+      }
+
+      setExportProgress('');
+      setExporting(false);
+
+      // Show success and offer share
+      if (result) {
+        // Handle new result format with download info
+        const downloadedFiles = result.downloadedFiles || [];
+        const message = result.message || `Exported successfully!`;
+        
+        Alert.alert(
+          '✅ Export Successful',
+          message,
+          [
+            {text: 'Done', style: 'cancel'},
+            {
+              text: 'Open Folder',
+              onPress: async () => {
+                try {
+                  await FileManager.openDownloadsFolder();
+                } catch (e) {
+                  Alert.alert('Info', 'Please check Downloads/PDFDemoApp folder in your file manager');
+                }
+              }
+            },
+            downloadedFiles.length > 0 && onShareFiles && {
+              text: 'Share',
+              onPress: () => onShareFiles(downloadedFiles),
+            },
+          ].filter(Boolean)
+        );
+      }
+
+      onClose();
+    } catch (error) {
+      setExporting(false);
+      setExportProgress('');
+      Alert.alert('Export Failed', error.message);
+    }
+  };
+
+  return (
+    <BottomSheet visible={visible} onClose={onClose} height={450}>
+      <View style={styles.container}>
+        <Text style={styles.title}>Export Pages</Text>
+
+        {exporting ? (
+          <View style={styles.progressContainer}>
+            <ActivityIndicator size="large" color="#6366F1" />
+            <Text style={styles.progressText}>{exportProgress}</Text>
+          </View>
+        ) : (
+          <>
+            <Text style={styles.sectionTitle}>Export Current Page</Text>
+            <View style={styles.buttonGroup}>
+              <TouchableOpacity
+                style={[styles.exportButton, styles.pngButton]}
+                onPress={() => handleExport('png', 'high', 'current')}>
+                <Text style={styles.buttonIcon}>🖼️</Text>
+                <Text style={styles.buttonText}>PNG (High)</Text>
+                <Text style={styles.buttonHint}>Page {currentPage}</Text>
+              </TouchableOpacity>
+
+              <TouchableOpacity
+                style={[styles.exportButton, styles.jpegButton]}
+                onPress={() => handleExport('jpeg', 'medium', 'current')}>
+                <Text style={styles.buttonIcon}>📸</Text>
+                <Text style={styles.buttonText}>JPEG (Med)</Text>
+                <Text style={styles.buttonHint}>Page {currentPage}</Text>
+              </TouchableOpacity>
+            </View>
+
+            <Text style={styles.sectionTitle}>Export Multiple Pages</Text>
+            <View style={styles.buttonGroup}>
+              <TouchableOpacity
+                style={[styles.exportButton, styles.rangeButton]}
+                onPress={() => handleExport('png', 'high', 'range')}>
+                <Text style={styles.buttonIcon}>📚</Text>
+                <Text style={styles.buttonText}>First {Math.min(3, totalPages)} Pages</Text>
+                <Text style={styles.buttonHint}>PNG Format</Text>
+              </TouchableOpacity>
+
+              <TouchableOpacity
+                style={[styles.exportButton, styles.rangeButton]}
+                onPress={() => handleExport('jpeg', 'medium', 'range')}>
+                <Text style={styles.buttonIcon}>📑</Text>
+                <Text style={styles.buttonText}>First {Math.min(3, totalPages)} Pages</Text>
+                <Text style={styles.buttonHint}>JPEG Format</Text>
+              </TouchableOpacity>
+            </View>
+          </>
+        )}
+      </View>
+    </BottomSheet>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  title: {
+    fontSize: 22,
+    fontWeight: 'bold',
+    color: '#1F2937',
+    marginBottom: 20,
+  },
+  sectionTitle: {
+    fontSize: 16,
+    fontWeight: '600',
+    color: '#374151',
+    marginTop: 16,
+    marginBottom: 12,
+  },
+  buttonGroup: {
+    flexDirection: 'row',
+    gap: 12,
+  },
+  exportButton: {
+    flex: 1,
+    padding: 16,
+    borderRadius: 12,
+    alignItems: 'center',
+    borderWidth: 2,
+  },
+  pngButton: {
+    backgroundColor: '#EEF2FF',
+    borderColor: '#6366F1',
+  },
+  jpegButton: {
+    backgroundColor: '#FEF3C7',
+    borderColor: '#F59E0B',
+  },
+  rangeButton: {
+    backgroundColor: '#ECFDF5',
+    borderColor: '#10B981',
+  },
+  buttonIcon: {
+    fontSize: 32,
+    marginBottom: 8,
+  },
+  buttonText: {
+    fontSize: 14,
+    fontWeight: '600',
+    color: '#1F2937',
+    marginBottom: 4,
+  },
+  buttonHint: {
+    fontSize: 12,
+    color: '#6B7280',
+  },
+  progressContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  progressText: {
+    marginTop: 16,
+    fontSize: 16,
+    color: '#374151',
+    fontWeight: '500',
+  },
+});
+
+export default ExportMenu;

package/src/components/LoadingOverlay.jsx

@@ -0,0 +1,52 @@
+/**
+ * LoadingOverlay Component - Full-screen loading indicator
+ */
+
+import React from 'react';
+import {
+  View,
+  Text,
+  ActivityIndicator,
+  StyleSheet,
+  Modal,
+} from 'react-native';
+
+const LoadingOverlay = ({
+  visible,
+  message = 'Loading...',
+}) => {
+  return (
+    <Modal visible={visible} transparent animationType="fade">
+      <View style={styles.overlay}>
+        <View style={styles.container}>
+          <ActivityIndicator size="large" color="#6366F1" />
+          <Text style={styles.message}>{message}</Text>
+        </View>
+      </View>
+    </Modal>
+  );
+};
+
+const styles = StyleSheet.create({
+  overlay: {
+    flex: 1,
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  container: {
+    backgroundColor: '#FFFFFF',
+    borderRadius: 12,
+    padding: 24,
+    alignItems: 'center',
+    minWidth: 150,
+  },
+  message: {
+    marginTop: 12,
+    fontSize: 16,
+    color: '#1F2937',
+    fontWeight: '500',
+  },
+});
+
+export default LoadingOverlay;