Files
luggage-list/src/modals/CheckupFixModal.js
Luna bd500674a0
All checks were successful
Luggage List Build / build-web (push) Successful in 55s
Luggage List Build / build-android (push) Successful in 6m28s
Luggage List Build / release (push) Successful in 10s
fix(ui): stabilize modal keyboard behavior
2026-04-18 14:12:34 +02:00

80 lines
3.0 KiB
JavaScript

import React from 'react';
import { KeyboardAvoidingView, Modal, Platform, Pressable, ScrollView, Text, TextInput, View } from 'react-native';
import { ITEM_PLACEMENTS, ITEM_STATUSES } from '../constants';
import ChipGroup from '../components/ChipGroup';
import Field from '../components/Field';
import { styles } from '../styles';
export default function CheckupFixModal({
visible,
checkupFixForm,
setCheckupFixForm,
setCheckupFixModalVisible,
saveFixModal,
}) {
return (
<Modal visible={visible} animationType="slide" transparent>
<View style={styles.modalBackdrop}>
<KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : undefined} style={styles.modalKeyboardWrap}>
<View style={styles.modalCard}>
<View style={styles.sectionRow}>
<Text style={styles.sectionTitle}>Update for this Check-Up</Text>
<Pressable onPress={() => setCheckupFixModalVisible(false)}>
<Text style={styles.closeText}>Close</Text>
</Pressable>
</View>
<ScrollView
keyboardShouldPersistTaps="handled"
keyboardDismissMode="interactive"
contentContainerStyle={{ paddingBottom: 12 }}
showsVerticalScrollIndicator={false}
>
<Field label="Status">
<ChipGroup
options={ITEM_STATUSES}
value={checkupFixForm.status}
onChange={(v) => setCheckupFixForm((prev) => ({ ...prev, status: v }))}
/>
</Field>
<Field label="Placement">
<ChipGroup
options={ITEM_PLACEMENTS}
value={checkupFixForm.placement}
onChange={(v) => setCheckupFixForm((prev) => ({ ...prev, placement: v }))}
/>
</Field>
{checkupFixForm.status === 'lent-to' ? (
<Field label="Lent to">
<TextInput
style={styles.input}
value={checkupFixForm.lentTo}
onChangeText={(v) => setCheckupFixForm((prev) => ({ ...prev, lentTo: v }))}
placeholder="Person name"
placeholderTextColor="#6b7280"
/>
</Field>
) : null}
<Pressable
style={styles.inlineToggle}
onPress={() => setCheckupFixForm((prev) => ({ ...prev, updateMasterList: !prev.updateMasterList }))}
>
<Text style={styles.inlineToggleText}>
{checkupFixForm.updateMasterList ? '☑' : '☐'} Also update item in trip list
</Text>
</Pressable>
<Pressable style={styles.primaryBtn} onPress={saveFixModal}>
<Text style={styles.primaryBtnText}>Save</Text>
</Pressable>
</ScrollView>
</View>
</KeyboardAvoidingView>
</View>
</Modal>
);
}