134 lines
4.2 KiB
TypeScript
134 lines
4.2 KiB
TypeScript
import
|
|
{
|
|
StyleSheet, Text, View, KeyboardAvoidingView,
|
|
Platform, Pressable, TextInput, ScrollView
|
|
} from "react-native";
|
|
import { router, } from "expo-router";
|
|
import { useNotes } from "@/src/notes/NotesContext";
|
|
import { useState, useRef } from "react";
|
|
import { useSafeAreaInsets } from "react-native-safe-area-context";
|
|
import { useHeaderHeight } from "@react-navigation/elements";
|
|
|
|
|
|
|
|
export default function NewNoteScreen()
|
|
{
|
|
const { addNote, errorMessage } = useNotes()
|
|
const [title, setTitle] = useState("")
|
|
const [content, setContent] = useState("")
|
|
const [isSaving, setIsSaving] = useState(false)
|
|
const [localErrorMessage, setLocalErrorMessage] = useState<string | null>(null)
|
|
const insets = useSafeAreaInsets()
|
|
const headerHeight = useHeaderHeight()
|
|
const [contentHeight, setContentHeight] = useState(160)
|
|
const scrollRef = useRef<ScrollView>(null)
|
|
|
|
const onSave = async () =>
|
|
{
|
|
if(!title.trim() || !content.trim()) {
|
|
setLocalErrorMessage("Title and content are required.")
|
|
return
|
|
}
|
|
|
|
setIsSaving(true)
|
|
setLocalErrorMessage(null)
|
|
|
|
const wasSaved = await addNote(title, content)
|
|
|
|
setIsSaving(false)
|
|
|
|
if (wasSaved) {
|
|
router.back()
|
|
}
|
|
}
|
|
|
|
return (
|
|
<KeyboardAvoidingView style={{ flex: 1}} behavior={Platform.OS === "ios" ? "padding" : undefined}
|
|
keyboardVerticalOffset={headerHeight}>
|
|
<View style={styles.container}>
|
|
<ScrollView ref={scrollRef} contentContainerStyle={{ padding: 16, paddingBottom: 120, gap: 10}}
|
|
keyboardShouldPersistTaps="handled">
|
|
<Text style={styles.label}>Title</Text>
|
|
<TextInput value={title} onChangeText={setTitle}
|
|
placeholder="Give it a title..." style={styles.input}
|
|
returnKeyType="next"/>
|
|
|
|
<Text style={styles.label}>Content</Text>
|
|
<TextInput value={content} onChangeText={setContent} placeholder="Write your note..."
|
|
style={[styles.input, { height: Math.max(160, contentHeight) }]} multiline
|
|
textAlignVertical="top"
|
|
onContentSizeChange={(e) => {setContentHeight(e.nativeEvent.contentSize.height);
|
|
scrollRef.current?.scrollToEnd({ animated: true });
|
|
}}/>
|
|
|
|
{localErrorMessage ? (
|
|
<Text style={styles.errorText}>{localErrorMessage}</Text>
|
|
) : null}
|
|
|
|
{!localErrorMessage && errorMessage ? (
|
|
<Text style={styles.errorText}>{errorMessage}</Text>
|
|
) : null}
|
|
|
|
</ScrollView>
|
|
<View>
|
|
<Pressable disabled={isSaving} onPress={onSave}
|
|
style={[styles.saveFloating, { bottom: insets.bottom + 16 }]}>
|
|
<Text style={styles.saveFloatingText}>
|
|
{isSaving ? "Saving..." : "Save"}
|
|
</Text>
|
|
</Pressable>
|
|
</View>
|
|
</View>
|
|
</KeyboardAvoidingView>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create(
|
|
{
|
|
container: { flex: 1, gap: 10 },
|
|
label: { fontSize: 14, fontWeight: "600" },
|
|
input:
|
|
{
|
|
borderWidth: 1, borderRadius: 7,
|
|
padding: 12, fontSize: 16
|
|
},
|
|
saveBtn:
|
|
{
|
|
borderRadius: 12,
|
|
paddingVertical: 14, alignItems: "center",
|
|
backgroundColor: "grey"
|
|
},
|
|
saveText: { color: "white", fontSize: 16, fontWeight: "700"},
|
|
saveBar:
|
|
{
|
|
position: "absolute",
|
|
left: 0,
|
|
right: 0,
|
|
bottom: 0,
|
|
paddingTop: 12,
|
|
paddingHorizontal: 16,
|
|
backgroundColor: "white",
|
|
borderTopWidth: 1
|
|
},
|
|
saveFloating:
|
|
{
|
|
position: "absolute",
|
|
left: 16,
|
|
right: 16,
|
|
borderRadius: 12,
|
|
paddingVertical: 14,
|
|
alignItems: "center",
|
|
backgroundColor: "#111"
|
|
},
|
|
saveFloatingText:
|
|
{
|
|
color: "white",
|
|
fontSize: 16,
|
|
fontWeight: "700"
|
|
},
|
|
errorText: {
|
|
color: "#c62828"
|
|
},
|
|
}
|
|
);
|