diff --git a/App.tsx b/App.tsx index 565da04..d4b14cb 100644 --- a/App.tsx +++ b/App.tsx @@ -1,5 +1,5 @@ import React, {useState, useCallback, useEffect} from 'react'; -import {Alert, BackHandler} from 'react-native'; +import {BackHandler} from 'react-native'; import HomeScreen from './src/screens/HomeScreen'; import ScanScreen from './src/screens/ScanScreen'; import ReviewScreen from './src/screens/ReviewScreen'; @@ -30,10 +30,12 @@ export default function App() { const handleSaveDocument = useCallback( (pages: ScannedPage[], _filter: FilterMode) => { - createDocument(pages); - goHome(); + const doc = createDocument(pages); + setPendingPages([]); + setViewingDoc(doc); + setScreen('viewer'); }, - [createDocument, goHome], + [createDocument], ); const handleView = useCallback((doc: ScannedDocument) => { @@ -51,23 +53,8 @@ export default function App() { }, [screen, goHome]); const handleRenameFromViewer = useCallback( - (_currentName: string) => { - if (!viewingDoc) return; - // Alert.prompt is iOS-only; on Android show a simple alert - if (Alert.prompt) { - Alert.prompt( - 'Rename', - undefined, - text => { - if (text?.trim()) renameDocument(viewingDoc.id, text.trim()); - }, - 'plain-text', - _currentName, - ); - } else { - // Android fallback: navigate home and use HomeScreen rename modal - renameDocument(viewingDoc.id, _currentName); - } + (name: string) => { + if (viewingDoc) renameDocument(viewingDoc.id, name); }, [viewingDoc, renameDocument], ); diff --git a/src/components/DocumentCard.tsx b/src/components/DocumentCard.tsx index 62d7216..e9e2932 100644 --- a/src/components/DocumentCard.tsx +++ b/src/components/DocumentCard.tsx @@ -7,9 +7,10 @@ interface Props { document: ScannedDocument; onPress: () => void; onDelete: () => void; + onRename: () => void; } -export default function DocumentCard({document, onPress, onDelete}: Props) { +export default function DocumentCard({document, onPress, onDelete, onRename}: Props) { const thumb = document.pages[0]?.uri; return ( @@ -32,9 +33,14 @@ export default function DocumentCard({document, onPress, onDelete}: Props) { {document.pages.length} {document.pages.length === 1 ? 'page' : 'pages'} - - ✕ - + + + ✎ + + + ✕ + + ); } @@ -97,9 +103,14 @@ const styles = StyleSheet.create({ color: '#666', fontSize: 12, }, - deleteBtn: { + actions: { padding: 12, justifyContent: 'center', + gap: 16, + }, + renameText: { + color: '#007AFF', + fontSize: 18, }, deleteText: { color: '#ff453a', diff --git a/src/screens/HomeScreen.tsx b/src/screens/HomeScreen.tsx index 0fb3ad7..6a9a01a 100644 --- a/src/screens/HomeScreen.tsx +++ b/src/screens/HomeScreen.tsx @@ -68,6 +68,7 @@ export default function HomeScreen({documents, onScan, onView, onDelete, onRenam document={item} onPress={() => onView(item)} onDelete={() => confirmDelete(item)} + onRename={() => startRename(item)} /> )} contentContainerStyle={styles.list} diff --git a/src/screens/ViewerScreen.tsx b/src/screens/ViewerScreen.tsx index a7cd0e6..8536910 100644 --- a/src/screens/ViewerScreen.tsx +++ b/src/screens/ViewerScreen.tsx @@ -10,6 +10,8 @@ import { StatusBar, Alert, ActivityIndicator, + Modal, + TextInput, } from 'react-native'; import Share from 'react-native-share'; import {ScannedDocument} from '../types'; @@ -27,6 +29,8 @@ interface Props { export default function ViewerScreen({document, onBack, onDelete, onRename}: Props) { const [currentIndex, setCurrentIndex] = useState(0); const [generating, setGenerating] = useState(false); + const [renaming, setRenaming] = useState(false); + const [renameText, setRenameText] = useState(''); const sharePdf = async (pageIndices?: number[]) => { setGenerating(true); @@ -129,7 +133,7 @@ export default function ViewerScreen({document, onBack, onDelete, onRename}: Pro 📄 Share All - onRename(document.name)}> + { setRenameText(document.name); setRenaming(true); }}> ✎ Rename @@ -145,6 +149,35 @@ export default function ViewerScreen({document, onBack, onDelete, onRename}: Pro Generating PDF… )} + + + + + Rename Document + + + setRenaming(false)} style={styles.modalBtn}> + Cancel + + { + if (renameText.trim()) onRename(renameText.trim()); + setRenaming(false); + }} + style={styles.modalBtn}> + Rename + + + + + ); } @@ -208,4 +241,18 @@ const styles = StyleSheet.create({ gap: 12, }, loadingText: {color: '#fff', fontSize: 15}, + modalBg: {flex: 1, backgroundColor: 'rgba(0,0,0,0.7)', justifyContent: 'center', padding: 24}, + modalBox: {backgroundColor: '#1c1c1e', borderRadius: 16, padding: 20, gap: 16}, + modalTitle: {color: '#fff', fontSize: 17, fontWeight: '600'}, + modalInput: { + backgroundColor: '#2c2c2e', + borderRadius: 10, + padding: 12, + color: '#fff', + fontSize: 15, + }, + modalActions: {flexDirection: 'row', justifyContent: 'flex-end', gap: 16}, + modalBtn: {padding: 4}, + modalCancel: {color: '#888', fontSize: 15}, + modalConfirm: {color: '#007AFF', fontSize: 15, fontWeight: '600'}, });